/* =============================================================================
   Motion — Phase 9
   Hierarchy: signature (sparse) → section (restrained) → micro (nearly invisible)
   Language: reveal · crop · scale · displacement · continuity · pause
   ============================================================================= */

/* --- Base observed states --- */
.motion,
.reveal,
.motion-chapter {
  --motion-d: var(--duration-reveal);
  --motion-e: var(--ease-out);
}

/* Default section motion: opacity only — not generic fade-up */
.motion,
.reveal {
  opacity: 0;
  transition: opacity var(--motion-d) var(--motion-e);
  pointer-events: auto;
}

.motion.is-in,
.reveal.is-in {
  opacity: 1;
}

/* Quiet rise — reserved; small physical displacement */
.motion--rise,
.reveal--rise {
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0);
  transition:
    opacity var(--motion-d) var(--motion-e),
    transform var(--motion-d) var(--ease-out);
}

.motion--rise.is-in,
.reveal--rise.is-in {
  opacity: 1;
  transform: none;
}

/* Line / hairline — scale from origin */
.motion--line {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-reveal) var(--ease-out);
}

.motion--line.is-in {
  transform: scaleX(1);
}

/* Statement chapter — observe the section box (reliable), not clipped children */
.statement:not(.is-in) .statement__primary,
.statement:not(.is-in) .statement__echo,
.statement:not(.is-in) .statement__aside {
  opacity: 0;
  transform: translate3d(0, 0.25rem, 0);
}

.statement.is-in .statement__primary,
.statement.is-in .statement__echo,
.statement.is-in .statement__aside {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
}

.statement.is-in .statement__primary {
  transition-delay: 0ms;
}

.statement.is-in .statement__echo {
  transition-delay: 50ms;
}

.statement.is-in .statement__aside {
  transition-delay: 100ms;
}


/* Presence — soft arrival (portrait) */
.motion--presence {
  opacity: 0;
  transform: scale(1.02);
  filter: brightness(0.95);
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out),
    filter var(--duration-reveal) var(--ease-out);
}

.motion--presence.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Stagger delays — subtle (30–80ms) */
.motion--delay-1 { transition-delay: 40ms; }
.motion--delay-2 { transition-delay: 70ms; }
.motion--delay-3 { transition-delay: 100ms; }
.motion--delay-4 { transition-delay: 130ms; }

.reveal--delay-1 { transition-delay: 40ms; }
.reveal--delay-2 { transition-delay: 70ms; }
.reveal--delay-3 { transition-delay: 100ms; }

/* ==========================================================================
   SIGNATURE A — Work worlds (chapter-scoped)
   One world giving way to another. Crop + scale settle.
   ========================================================================== */

.motion-chapter {
  /* Chapter itself doesn't fade the shell — children carry motion */
}

.work-world:not(.is-in) .work-world__copy,
.work-world:not(.is-in) .work-world__foot {
  opacity: 0;
  transform: translate3d(0, 0.35rem, 0);
}

.work-world.is-in .work-world__copy,
.work-world.is-in .work-world__foot {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
}

.work-world.is-in .work-world__foot {
  transition-delay: 60ms;
}

/* Noir — intimate: media crops in from soft darkness */
.work-world--noir:not(.is-in) .work-frame {
  opacity: 0;
  clip-path: inset(8% 6% 8% 6%);
}

.work-world--noir.is-in .work-frame {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    clip-path var(--duration-reveal) var(--ease-reveal);
}

.work-world--noir.is-in .work-world__primary {
  transition-delay: 40ms;
}

.work-world--noir.is-in .work-world__detail {
  transition-delay: 70ms;
}

.work-world--noir .work-frame img {
  transform: scale(1.03);
  transition: transform var(--duration-reveal) var(--ease-out);
}

.work-world--noir.is-in .work-frame img {
  transform: scale(1);
}

/* Vector — industrial: band sweeps in laterally; tiles settle harder */
.work-world--vector:not(.is-in) .work-world__band {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}

.work-world--vector.is-in .work-world__band {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition:
    opacity var(--duration-fast) var(--ease-out),
    clip-path var(--duration-reveal) var(--ease-reveal);
}

.work-world--vector:not(.is-in) .work-world__copy,
.work-world--vector:not(.is-in) .work-world__side {
  opacity: 0;
  transform: translate3d(0, 0.3rem, 0);
}

.work-world--vector.is-in .work-world__copy {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
  transition-delay: 40ms;
}

.work-world--vector.is-in .work-world__side {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
  transition-delay: 70ms;
}

.work-world--vector .work-frame img {
  transform: scale(1.03);
  transition: transform var(--duration-reveal) var(--ease-out);
}

.work-world--vector.is-in .work-frame img {
  transform: scale(1);
}

/* Bridge rule draws as entry to work */
.work-bridge__rule.motion--line {
  margin-bottom: var(--space-2xl);
}

/* ==========================================================================
   SIGNATURE B — Final CTA (pause → realization → invitation)
   Transitions live on the elements always so .is-in does not drop them.
   ========================================================================== */

.possibility__so,
.possibility__question,
.possibility__find {
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
}

/* Reveal opacity + chrome + press — single motion contract for CTA */
.possibility__cta {
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    letter-spacing var(--duration-fast) var(--ease-out),
    transform var(--duration-press) var(--ease-out);
}

.possibility:not(.is-in) .possibility__so,
.possibility:not(.is-in) .possibility__question,
.possibility:not(.is-in) .possibility__find,
.possibility:not(.is-in) .possibility__cta {
  opacity: 0;
}

.possibility:not(.is-in) .possibility__question,
.possibility:not(.is-in) .possibility__find {
  transform: translate3d(0, 0.3rem, 0);
}

.possibility.is-in .possibility__so {
  opacity: 1;
  transition-delay: 0ms;
}

.possibility.is-in .possibility__question {
  opacity: 1;
  transform: none;
  transition-delay: 50ms;
}

.possibility.is-in .possibility__find {
  opacity: 1;
  transform: none;
  transition-delay: 100ms;
}

/* Opacity reveal delay only — press transform stays immediate (0ms) */
.possibility.is-in .possibility__cta {
  opacity: 1;
  transition-delay: 140ms, 0ms, 0ms, 0ms, 0ms, 0ms;
}

/* ==========================================================================
   SECTION — Build index sequential
   ========================================================================== */

.build__pillars:not(.is-in) .build__pillar {
  opacity: 0;
  transform: translate3d(0, 0.25rem, 0);
}

.build__pillars.is-in .build__pillar {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
}

.build__pillars.is-in .build__pillar:nth-child(1) { transition-delay: 0ms; }
.build__pillars.is-in .build__pillar:nth-child(2) { transition-delay: 40ms; }
.build__pillars.is-in .build__pillar:nth-child(3) { transition-delay: 70ms; }
.build__pillars.is-in .build__pillar:nth-child(4) { transition-delay: 100ms; }

/* Process steps — sequential, not a stepper UI */
.process__steps:not(.is-in) .process__step {
  opacity: 0;
}

.process__steps.is-in .process__step {
  opacity: 1;
  transition: opacity var(--duration-reveal) var(--ease-out);
}

.process__steps.is-in .process__step:nth-child(1) { transition-delay: 0ms; }
.process__steps.is-in .process__step:nth-child(2) { transition-delay: 40ms; }
.process__steps.is-in .process__step:nth-child(3) { transition-delay: 70ms; }
.process__steps.is-in .process__step:nth-child(4) { transition-delay: 100ms; }
.process__steps.is-in .process__step:nth-child(5) { transition-delay: 130ms; }

/* Principles — almost static; whisper opacity only */
.principles__list:not(.is-in) .principles__item {
  opacity: 0.28;
}

.principles__list.is-in .principles__item {
  opacity: 1;
  transition: opacity var(--duration-reveal) var(--ease-out);
}

.principles__list.is-in .principles__item:nth-child(1) { transition-delay: 0ms; }
.principles__list.is-in .principles__item:nth-child(2) { transition-delay: 40ms; }
.principles__list.is-in .principles__item:nth-child(3) { transition-delay: 70ms; }
.principles__list.is-in .principles__item:nth-child(4) { transition-delay: 100ms; }
.principles__list.is-in .principles__item:nth-child(5) { transition-delay: 130ms; }

/* Idea stanza — editorial opacity; keep brief */
.idea__stanza:not(.is-in) p {
  opacity: 0;
}

.idea__stanza.is-in p {
  opacity: 1;
  transition: opacity var(--duration-reveal) var(--ease-out);
}

.idea__stanza.is-in p:nth-child(1) { transition-delay: 0ms; }
.idea__stanza.is-in p:nth-child(2) { transition-delay: 40ms; }
.idea__stanza.is-in p:nth-child(3) { transition-delay: 70ms; }
.idea__stanza.is-in p:nth-child(4) { transition-delay: 100ms; }
.idea__stanza.is-in p:nth-child(5) { transition-delay: 130ms; }

/* ==========================================================================
   MICRO — nearly invisible until noticed
   ========================================================================== */

.site-nav a {
  position: relative;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.35em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-fast) var(--ease-out);
  opacity: 0.7;
}

.site-nav a:focus-visible::after {
  transform: scaleX(1);
}

.work-world__enter:active,
.possibility__cta:active,
.lang-btn:active:not(:disabled) {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover::after {
    transform: scaleX(1);
  }

  .work-world__enter:hover {
    letter-spacing: 0.18em;
  }

  .possibility__cta:hover {
    letter-spacing: 0.18em;
  }

  .site-footer a:hover {
    color: var(--color-fg);
  }
}

.field input,
.field textarea,
.field select {
  transition:
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.site-footer a {
  transition: color var(--duration-fast) var(--ease-out);
}

/* ==========================================================================
   Reduced motion — keep opacity comprehension; drop travel
   ========================================================================== */

@media (prefers-reduced-motion: reduce) and (max-width: 0) {
  .motion,
  .reveal,
  .motion--rise,
  .reveal--rise,
  .motion--presence,
  .motion--line {
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
    animation: none !important;
    transition: opacity var(--duration-fast) var(--ease-out) !important;
  }

  .motion.is-in,
  .reveal.is-in,
  .motion--rise.is-in,
  .reveal--rise.is-in,
  .motion--presence.is-in,
  .motion--line.is-in {
    opacity: 1 !important;
  }

  .work-world .work-world__copy,
  .work-world .work-world__foot,
  .work-world .work-frame,
  .work-world .work-world__band,
  .work-world .work-world__side,
  .work-world .work-frame img,
  .possibility .possibility__so,
  .possibility .possibility__question,
  .possibility .possibility__find,
  .statement .statement__primary,
  .statement .statement__echo,
  .statement .statement__aside,
  .build__pillar,
  .process__step,
  .principles__item,
  .idea__stanza p {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
    animation: none !important;
    transition: opacity var(--duration-fast) var(--ease-out) !important;
  }

  /* CTA: settle immediately; keep chrome transitions; no press scale under RM */
  .possibility .possibility__cta {
    opacity: 1 !important;
    transition:
      opacity var(--duration-fast) var(--ease-out),
      color var(--duration-fast) var(--ease-out),
      background-color var(--duration-fast) var(--ease-out),
      border-color var(--duration-fast) var(--ease-out),
      letter-spacing var(--duration-fast) var(--ease-out) !important;
  }

  .motion--delay-1,
  .motion--delay-2,
  .motion--delay-3,
  .motion--delay-4,
  .reveal--delay-1,
  .reveal--delay-2,
  .reveal--delay-3,
  .work-world.is-in .work-world__foot,
  .possibility.is-in .possibility__question,
  .possibility.is-in .possibility__find,
  .possibility.is-in .possibility__cta,
  .build__pillars.is-in .build__pillar,
  .process__steps.is-in .process__step,
  .principles__list.is-in .principles__item,
  .idea__stanza.is-in p {
    transition-delay: 0ms !important;
  }

  .site-nav a::after {
    transition: none;
  }

  .work-world__enter:active,
  .possibility__cta:active,
  .lang-btn:active:not(:disabled),
  .site-header__brand:active {
    transform: none !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   Scroll progress — editorial top rule (not an app bar)
   ========================================================================== */

.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: calc(var(--z-nav) + 1);
  height: 1px;
  pointer-events: none;
  background: transparent;
}

.scroll-progress__rule {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center;
  background: var(--color-fg-soft);
  opacity: 0.55;
  will-change: transform;
}

@media (min-width: 1024px) {
  .scroll-progress {
    height: 2px;
  }

  .scroll-progress__rule {
    opacity: 0.45;
  }

  /* Hide native scrollbar visually; scrolling stays fully functional */
  html {
    scrollbar-width: none;
  }

  html::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 0) {
  .scroll-progress__rule {
    will-change: auto;
    transition: none;
  }
}

/* Phone: shorter distances — still weighted */
@media (max-width: 719px) {
  :root {
    --reveal-distance: 0.3rem;
  }

  .work-world--noir:not(.is-in) .work-frame {
    clip-path: inset(4% 3% 4% 3%);
  }

  .possibility.is-in .possibility__question { transition-delay: 40ms; }
  .possibility.is-in .possibility__find { transition-delay: 70ms; }
  /* Opacity only — keep press transform undelayed on phone too */
  .possibility.is-in .possibility__cta { transition-delay: 100ms, 0ms, 0ms, 0ms, 0ms, 0ms; }
}