/* Shared motion tokens. Layout, typography, content and native gallery scrolling
   remain owned by their existing components. See MOTION_SPEC.md. */
:root {
  --motion-out: cubic-bezier(.22,.68,0,1);
  --motion-state: cubic-bezier(.4,0,.2,1);
  --motion-reveal: 360ms;
  --motion-distance: 8px;
}
html {scroll-behavior:smooth}

/* UI feedback */
.button, .text-link, nav > a, .home-page .header nav > a:not(.button),
.case-gallery-button, .about-devstar-link, input, textarea {
  transition-duration:160ms;
  transition-timing-function:var(--motion-state);
}
.button span, .text-link span {transition:transform 160ms var(--motion-out)}
.project-visual img, .project:hover img, .project-link:is(:hover,:focus-visible) .project-visual img {
  transform:none;
  transition:none;
}
.case-media-open, .case-gallery-open {cursor:zoom-in}
.button:focus-visible span, .text-link:focus-visible span,
.project-link:focus-visible .text-link span {transform:translateX(3px)}
.form-status:not(:empty) {animation:motion-fade-in 140ms linear}
@media (hover:none), (pointer:coarse) {
  .button:hover span, .text-link:hover span, #work .projects-more:hover span,
  .project-link:hover .text-link span {transform:none}
}

/* Content reveal. Only bounded text groups move; all regular media fades. */
[data-motion="rise"], [data-motion="fade"],
[data-motion="split"] > .editorial-heading, [data-motion="split"] > .editorial-copy,
[data-motion="chapter"] .case-chapter-index, [data-motion="chapter"] .case-chapter-header > h3,
[data-motion="chapter"] > .editorial-copy {
  opacity:1;
  transform:none;
  transition:opacity var(--motion-reveal) var(--motion-out) var(--motion-delay,0ms),
             transform var(--motion-reveal) var(--motion-out) var(--motion-delay,0ms);
}
[data-motion="fade"] {transition:opacity 240ms linear}
[data-motion="chapter"] .case-chapter-index {transition-duration:220ms;transition-delay:0ms}
[data-motion="chapter"] .case-chapter-header > h3,
[data-motion="chapter"] > .editorial-copy {transition-delay:60ms}
[data-motion="rise"][data-motion-state="pending"],
[data-motion="split"][data-motion-state="pending"] > .editorial-heading,
[data-motion="split"][data-motion-state="pending"] > .editorial-copy,
[data-motion="chapter"][data-motion-state="pending"] .case-chapter-header > h3,
[data-motion="chapter"][data-motion-state="pending"] > .editorial-copy {
  opacity:0;transform:translateY(var(--motion-distance));
}
[data-motion="fade"][data-motion-state="pending"],
[data-motion="chapter"][data-motion-state="pending"] .case-chapter-index {opacity:0}

/* Signature 1: reveal an existing major border, without changing its geometry. */
[data-motion="divider"] {position:relative;border-top-color:transparent!important}
[data-motion="divider"]::before {
  content:'';position:absolute;top:-1px;left:0;right:0;height:1px;
  background:var(--motion-line,var(--line));pointer-events:none;
  transform:scaleX(1);transform-origin:left center;
  transition:transform 460ms var(--motion-out);
}
.hero-proof[data-motion="divider"], .footer-inner[data-motion="divider"] {--motion-line:#40403d}
[data-motion="divider"][data-motion-state="pending"]::before {transform:scaleX(0)}

/* Signature 2: only the cover and final full-width preview, never the image itself. */
[data-motion="clip"] {clip-path:inset(0 0 0 0);transition:clip-path 580ms var(--motion-out)}
[data-motion="clip"][data-motion-state="pending"] {clip-path:inset(0 0 100% 0)}
[data-motion="clip"][data-motion-settled] {clip-path:none;transition:none}

/* Grid accordion; details retains its native no-JS fallback. */
.faq-enhanced .faq-panel {
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows 220ms var(--motion-state);
}
.faq-enhanced .faq-panel-clip {min-height:0;overflow:hidden;opacity:0;transition:opacity 140ms linear}
.faq-enhanced[data-expanded="true"] .faq-panel {grid-template-rows:1fr;transition-duration:280ms}
.faq-enhanced[data-expanded="true"] .faq-panel-clip {opacity:1}
.faq-enhanced .faq-icon {transition:transform 180ms var(--motion-state)}
.faq-enhanced[open] .faq-icon {transform:none}
.faq-enhanced[data-expanded="true"] .faq-icon {transform:rotate(45deg)}

@media (max-width:800px) {
  :root {--motion-reveal:220ms;--motion-distance:0px}
  [data-motion] {--motion-delay:0ms!important}
  [data-motion="chapter"] .case-chapter-header > h3,
  [data-motion="chapter"] > .editorial-copy {transition-delay:0ms}
  [data-motion="clip"] {clip-path:none;opacity:1;transition:opacity 240ms linear}
  [data-motion="clip"][data-motion-state="pending"] {clip-path:none;opacity:0}
  .header nav {
    display:none;opacity:0;transform:translateY(-4px);pointer-events:none;
    transition:opacity 140ms linear,transform 140ms var(--motion-out),display 140ms allow-discrete;
  }
  .header nav.open {
    display:flex;opacity:1;transform:none;pointer-events:auto;
    transition:opacity 180ms linear,transform 180ms var(--motion-out),display 180ms allow-discrete;
  }
  @starting-style {.header nav.open {opacity:0;transform:translateY(-4px)}}
}

/* The dialog and its viewport fade; the tall image is never scaled or translated. */
.case-gallery-dialog[open], .case-gallery-dialog[open]::backdrop {animation:motion-fade-in 180ms linear both}
.case-gallery-dialog[open][data-closing], .case-gallery-dialog[open][data-closing]::backdrop {animation:motion-fade-out 120ms linear both}
@keyframes motion-fade-in {from{opacity:0}to{opacity:1}}
@keyframes motion-fade-out {from{opacity:1}to{opacity:0}}

/* Focus, anchor jumps and history restoration must never leave hidden content. */
[data-motion-immediate], [data-motion-immediate]::before,
[data-motion-immediate] > .editorial-heading, [data-motion-immediate] > .editorial-copy,
[data-motion-immediate] .case-chapter-index, [data-motion-immediate] .case-chapter-header > h3 {transition:none!important}
[data-motion="clip"][data-motion-immediate] {clip-path:none;opacity:1}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *, *::before, *::after {animation:none!important;transition:none!important}
  [data-motion], [data-motion] > .editorial-heading, [data-motion] > .editorial-copy,
  [data-motion] .case-chapter-index, [data-motion] .case-chapter-header > h3 {
    opacity:1!important;transform:none!important;clip-path:none!important;
  }
  [data-motion="divider"]::before {transform:scaleX(1)!important}
  .button span, .text-link span, .project-link .text-link span,
  #work .projects-more span, .header nav {transform:none!important}
}