/* Reading stays still; text fades while interfaces retain their own depth. */
:root { --fade-ease: cubic-bezier(.4, 0, .2, 1); }
.motion-ready [data-reveal] { opacity: 0; }
.motion-ready [data-reveal].is-revealed { animation: motion-arrive 900ms var(--fade-ease) both; }

/* Smaller ideas arrive in a reading rhythm rather than moving the whole grid. */
.motion-ready [data-reveal]:is([data-reveal='notes'], [data-reveal='service'], [data-reveal='copy'], [data-reveal='portrait']) { opacity: 1; animation: none; }
.motion-ready .motion-part { opacity: 0; }
.motion-ready .is-revealed > .motion-part,
.motion-ready .is-revealed > .detail-points > .motion-part { animation: motion-arrive 1000ms var(--motion-delay, 0ms) var(--fade-ease) both; }
.motion-ready [data-reveal='portrait'].is-revealed > small { animation-delay: 260ms; }

/* Service separators describe the row as its label and explanation appear. */
.motion-ready [data-reveal='service'] { position: relative; border-top-color: transparent; }
.motion-ready [data-reveal='service']::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; }
.motion-ready [data-reveal='service'].is-revealed::before { animation: rule-arrive 1200ms var(--ease) both; }

/* The screenshot frame settles; paired screens unfold with distinct timing. */
.motion-ready [data-reveal='product-screen'].is-revealed { animation: motion-arrive 800ms var(--ease) both; }
.motion-ready [data-reveal='product-screen']:has(.device-scene, .mobile-scene) { opacity: 1; animation: none; }
.motion-ready [data-reveal='product-screen'] :is(.desktop-frame, .phone-frame) { opacity: 0; }
.motion-ready [data-reveal='product-screen'].is-revealed > .capture-link { animation: screen-settle 1300ms var(--ease) both; transform-origin: center bottom; }
.motion-ready [data-reveal='product-screen'].is-revealed .desktop-frame { animation: desktop-settle 1300ms var(--ease) both; }
.motion-ready [data-reveal='product-screen'].is-revealed .phone-frame { animation: phone-settle 1400ms 120ms var(--ease) both; transform-origin: center bottom; }
.motion-ready .hero-visual:not(.is-work-visible) .hero-work > * { opacity: 0; }
.motion-ready .hero-visual.is-work-visible .hero-work-desktop { animation: hero-desktop 1200ms var(--ease) both; }
.motion-ready .hero-visual.is-work-visible .hero-work-phone.passby { animation: hero-passby 1400ms 100ms var(--ease) both; }
.motion-ready .hero-visual.is-work-visible .hero-work-phone.wesaid { animation: hero-wesaid 1500ms 180ms var(--ease) both; }

/* Individual translate is independent of entrance transforms and fixed geometry. */
.depth-ready .hero-work-desktop { translate: 0 calc(var(--scroll-depth, 0) * -14px); }
.depth-ready .hero-work-phone.passby { translate: 0 calc(var(--scroll-depth, 0) * -28px); }
.depth-ready .hero-work-phone.wesaid { translate: 0 calc(var(--scroll-depth, 0) * 18px); }
.depth-ready .detail-figure > .capture-link { translate: 0 calc(var(--scroll-depth, 0) * -12px); }
.depth-ready .detail-figure .desktop-frame { translate: 0 calc(var(--scroll-depth, 0) * -10px); }
.depth-ready .detail-figure .phone-frame { translate: 0 calc(var(--scroll-depth, 0) * -18px); }

@media (hover: hover) and (pointer: fine) {
  .detail-figure :is(.capture-link, .phone-frame, .desktop-frame) { transition: scale 500ms var(--ease), box-shadow 500ms var(--ease); }
  .detail-figure :is(.capture-link, .phone-frame, .desktop-frame):hover { scale: 1.012; box-shadow: 0 20px 44px -16px #00000035; }
}

/* Focusing an entrance reveals it immediately, including all its children. */
.motion-ready [data-reveal].motion-immediate,
.motion-ready .motion-immediate :is(.motion-part, .title-line > span, .capture-link, .phone-frame, .desktop-frame, .text-block, .detail-copy) { animation: none !important; opacity: 1; transform: none; }
.motion-ready [data-reveal='service'].motion-immediate::before { animation: none; transform: scaleX(1); }

@keyframes motion-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes rule-arrive { to { transform: scaleX(1); } }
@keyframes screen-settle { from { transform: perspective(1500px) translateY(40px) rotateX(5deg) scale(.97); } to { transform: none; } }
@keyframes desktop-settle { from { opacity: 0; transform: translateY(32px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes phone-settle { from { opacity: 0; transform: translateY(44px) rotate(4deg) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes hero-desktop { from { opacity: 0; transform: perspective(1200px) translateY(28px) rotateY(-11deg) rotateX(5deg) scale(.95); } to { opacity: 1; transform: perspective(1200px) rotateY(-7deg) rotateX(3deg); } }
@keyframes hero-passby { from { opacity: 0; transform: translateY(34px) rotate(9deg) scale(.94); } to { opacity: 1; transform: rotate(5deg); } }
@keyframes hero-wesaid { from { opacity: 0; transform: translateY(42px) rotate(-10deg) scale(.94); } to { opacity: 1; transform: rotate(-6deg); } }

@media (max-width: 800px) {
  /* Phone screens remain upright; motion does not require horizontal space. */
  @keyframes phone-settle { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .motion-part { opacity: 1 !important; }
  .depth-ready :is(.hero-work-desktop, .hero-work-phone, .capture-link, .desktop-frame, .phone-frame) { translate: none; }
  .detail-figure :is(.capture-link, .phone-frame, .desktop-frame):hover { scale: 1; }
}