/* One motion vocabulary, applied selectively by motion.js. No layout animation
   on scroll, no permanent will-change layers, and no hidden no-JS content. */
:root { --motion-ease: cubic-bezier(.22, 1, .36, 1); }

/* The narrative works in ordinary document flow before motion is enabled. */
.workflow-story { display:grid; grid-template-columns:1.35fr 1fr; gap:64px; align-items:start; }
.workflow-visual { min-width:0; }
.workflow-visual .motion-caption { margin-top:20px; }
.workflow-steps { list-style:none; margin:0; padding:0; }
.workflow-steps > li { position:relative; padding:30px 0 36px 28px; border-left:1px solid #d7d0c4; }
.workflow-steps > li::before { content:""; position:absolute; left:-2px; top:30px; width:3px; height:32px; background:#ff8200; transform:scaleY(.25); transform-origin:top; }
.workflow-steps > li.is-current::before { transform:scaleY(1); }
.workflow-steps span { display:block; color:#9c4900; font-size:11px; font-weight:800; letter-spacing:.1em; }
.workflow-steps h3 { font-size:26px; line-height:1.14; letter-spacing:-.035em; margin:13px 0; }
.workflow-steps p { font-size:15px; line-height:1.75; color:#625e57; margin:0; max-width:390px; }

@media (min-width:1100px) and (min-height:720px) and (prefers-reduced-motion:no-preference) {
  .motion-ready .workflow-visual { position:sticky; top:125px; }
  .workflow-steps > li { padding-block:42px 48px; }
  .workflow-steps > li::before { top:42px; }
}
@media (max-width:1099px) {
  .workflow-story { grid-template-columns:1fr; gap:30px; }
  .workflow-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
  .workflow-steps > li { padding:20px 0 12px; border-left:0; border-top:1px solid #d7d0c4; }
  .workflow-steps > li::before { top:-2px; left:0; width:32px; height:3px; transform:scaleX(.25); transform-origin:left; }
  .workflow-steps > li.is-current::before { transform:scaleX(1); }
  .workflow-steps h3 { font-size:23px; }
  .workflow-steps p { font-size:14px; }
}
@media (max-width:760px) {
  .workflow-steps { grid-template-columns:1fr; gap:6px; }
  .workflow-steps > li { padding-block:22px; }
  .workflow-steps p { max-width:560px; }
}

@media (prefers-reduced-motion:no-preference) {
  .motion-ready [data-reveal] { transition:opacity 720ms var(--motion-ease) var(--motion-delay,0ms), transform 900ms var(--motion-ease) var(--motion-delay,0ms); }
  .motion-ready [data-reveal="label"].motion-pending { opacity:0; transform:translateY(10px); }
  .motion-ready [data-reveal="heading"].motion-pending { opacity:.04; transform:translateY(28px); }
  .motion-ready [data-reveal="text"].motion-pending { opacity:.06; transform:translateY(18px); }
  .motion-ready [data-reveal="settle"].motion-pending { opacity:.18; transform:translateY(12px); }
  .motion-ready [data-reveal="step"].motion-pending { opacity:.12; transform:translateX(16px); }
  .motion-ready [data-reveal="crop"] { transition-duration:950ms; }
  .motion-ready [data-reveal="crop"].motion-pending { transform:scale(1.035); opacity:.72; }
  .motion-ready [data-reveal="rule"] { position:relative; }
  .motion-ready [data-reveal="rule"]::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:currentColor; opacity:.22; transform:scaleX(1); transform-origin:left; transition:transform 850ms var(--motion-ease); pointer-events:none; }
  .motion-ready [data-reveal="rule"].motion-pending::after { transform:scaleX(.06); }
  .workflow-steps > li::before { transition:transform 400ms var(--motion-ease); }
  .hero-proof, .project-image, .real-demo-preview, .case-preview > a { overflow:hidden; }
  body[data-motion-page] :is(.button,.btn,.project-actions a,.text-link,.project-link) { transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease,transform 220ms var(--motion-ease); }
  body[data-motion-page] :is(.button,.btn):active { transform:translateY(1px); }
  .hero-kicker i { transform-origin:left; animation:studio-rule 800ms var(--motion-ease) both; }
  @keyframes studio-rule { from { transform:scaleX(.3); } to { transform:scaleX(1); } }
  @media (hover:hover) and (pointer:fine) {
    .hero-proof img { transition:transform 800ms var(--motion-ease); }
    .hero-proof:hover img { transform:scale(1.012); }
    body[data-motion-page] .project-image:hover img:not(.motion-pending) { transform:scale(1.012); }
    body[data-motion-page="home"] .portfolio-card:hover .real-demo-preview img:not(.motion-pending) { transform:scale(1.012); }
    body[data-motion-page] :is(.text-link,.project-actions a,.project-link):hover { transform:translateX(2px); }
  }

  /* Native view timelines enhance large visuals without per-frame JavaScript.
     Unsupported browsers retain the one-time crop reveal and static video. */
  @supports (animation-timeline:view()) and (animation-range:entry 0% cover 40%) {
    @media (min-width:761px) {
    .motion-ready .motion-showcase-player {
      animation:studio-video linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 40%;
      transform-origin:50% 50%;
    }
    @keyframes studio-video { from { transform:scale(.975); } to { transform:scale(1); } }
    }
    @media (min-width:1100px) and (min-height:720px) {
      .motion-ready .hero-visual-wrap {
        animation:studio-hero linear both;
        animation-timeline:view();
        animation-range:exit 0% exit 100%;
      }
      @keyframes studio-hero { from { transform:translateY(0); } to { transform:translateY(-18px); } }
    }
  }
  @media (max-width:760px) {
    .motion-ready [data-reveal="label"].motion-pending { transform:translateY(6px); }
    .motion-ready [data-reveal="heading"].motion-pending { transform:translateY(18px); }
    .motion-ready [data-reveal="text"].motion-pending { transform:translateY(12px); }
    .motion-ready [data-reveal="crop"].motion-pending { transform:scale(1.015); }
    .motion-ready [data-reveal="step"].motion-pending { transform:translateY(10px); }
  }

  /* Native details semantics are preserved. Height interpolation is opt-in;
     other browsers keep immediate, fully functional disclosure controls. */
  .faq-list summary i, .website-check .expand-icon { transition:transform 220ms var(--motion-ease); }
  @supports (interpolate-size:allow-keywords) and selector(details::details-content) {
    :is(.faq-list details,.website-check) { interpolate-size:allow-keywords; }
    :is(.faq-list details,.website-check)::details-content { height:0; overflow:clip; opacity:0; transition:height 260ms ease,opacity 200ms ease,content-visibility 260ms; transition-behavior:allow-discrete; }
    :is(.faq-list details,.website-check)[open]::details-content { height:auto; opacity:1; }
  }
}

@media (prefers-reduced-motion:reduce), print {
  html { scroll-behavior:auto!important; }
  [data-reveal], .hero-visual-wrap, .motion-showcase-player { opacity:1!important; transform:none!important; animation:none!important; transition:none!important; }
  .project-image img, .hero-proof img, .real-demo-preview img { transform:none!important; }
  .workflow-visual { position:static!important; }
  .workflow-steps > li::before { transform:none!important; }
  body[data-motion-page] *, body[data-motion-page] *::before, body[data-motion-page] *::after { animation:none!important; transition:none!important; }
}