/* Motion enhances the approved Current design. Settled layout and tokens are unchanged. */
:root {
  --motion-press: 150ms;
  --motion-fast: 160ms;
  --motion-standard: 230ms;
}

.immersive-content.entrance {
  animation: none;
}
.button,
.mobile-menu,
.close {
  transition:
    transform 100ms var(--ease),
    background-color 150ms ease;
}
.button:active,
.mobile-menu:active,
.close:active {
  transition-duration: var(--motion-press), 150ms;
}
.mobile-menu:active,
.close:active {
  transform: scale(0.97);
}
.text-link {
  transition: opacity 150ms ease;
}
.text-link:active {
  opacity: 0.65;
}
.button .icon,
.text-link .icon {
  transition: transform 180ms var(--ease);
}

/* Height is the deliberate accordion exception in Emil's animate/RECIPES.md. */
.step-body {
  padding: 0;
  overflow: hidden;
}
.step-body-inner {
  padding: 0 38px 26px 44px;
}
.step-body[data-moving] {
  transition:
    height 230ms var(--ease),
    opacity 180ms var(--ease);
}
.model-picture img {
  transition: opacity 230ms var(--ease);
}
.model-picture .model-alternate {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.modal[open] {
  animation: none;
  opacity: 1;
  transform: translateY(0) scale(1);
  transform-origin: center;
  transition:
    opacity 230ms var(--ease),
    transform 230ms var(--ease);
}
.modal[open][data-state="closed"] {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition-duration: var(--motion-fast);
}
.modal::backdrop {
  opacity: 1;
  transition: opacity 230ms var(--ease);
}
.modal[data-state="closed"]::backdrop {
  opacity: 0;
  transition-duration: var(--motion-fast);
}
.flow-panel {
  transition:
    opacity 160ms var(--ease),
    transform 160ms var(--ease);
}
.flow-panel[data-changing] {
  opacity: 0;
  transform: translateY(5px);
}

@media (hover: hover) and (pointer: fine) {
  .button:hover .icon,
  .text-link:hover .icon {
    transform: translate(2px, -2px);
  }
}

/* A single opening sequence establishes the landscape and the reading hierarchy. */
@media (prefers-reduced-motion: no-preference) {
  /* The LCP landscape stays still; animating it delayed the first meaningful paint. */
  .js-ready .immersive-content > * {
    animation: current-arrive 650ms var(--ease) both;
  }
  .js-ready .immersive-content > :nth-child(2) {
    animation-delay: 50ms;
  }
  .js-ready .immersive-content > :nth-child(3) {
    animation-delay: 100ms;
  }
  .js-ready .immersive-content > :nth-child(4) {
    animation-delay: 150ms;
  }
  .model-picture[data-revealed] {
    animation: photo-arrive 650ms var(--ease) both;
  }
}

@keyframes current-arrive {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes photo-arrive {
  from {
    opacity: 0.35;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Keyboard navigation never waits for motion. */
html[data-keyboard] {
  scroll-behavior: auto;
}
html[data-keyboard] .immersive-content > *,
html[data-keyboard] .immersive .image-bg,
html[data-keyboard] .model-picture {
  animation: none;
}
html[data-keyboard] .button,
html[data-keyboard] .button .icon,
html[data-keyboard] .text-link,
html[data-keyboard] .text-link .icon,
html[data-keyboard] .mobile-menu,
html[data-keyboard] .close,
html[data-keyboard] .step-body,
html[data-keyboard] .model-picture img,
html[data-keyboard] .modal[open],
html[data-keyboard] .modal::backdrop,
html[data-keyboard] .flow-panel {
  transition: none;
}
html[data-keyboard] .button:active,
html[data-keyboard] .mobile-menu:active,
html[data-keyboard] .close:active {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .immersive-content > *,
  .immersive .image-bg,
  .model-picture {
    animation: none;
  }
  .step-body[data-moving] {
    transition: opacity 120ms ease;
  }
  .modal[open],
  .flow-panel {
    transition: opacity 120ms ease;
    transform: none;
  }
  .modal[open][data-state="closed"],
  .flow-panel[data-changing] {
    transform: none;
  }
  .modal::backdrop {
    transition: opacity 120ms ease;
  }
  .button .icon,
  .text-link .icon,
  .model-picture img {
    transition: opacity 120ms ease;
  }
  .button:hover .icon,
  .text-link:hover .icon,
  .mobile-menu:active,
  .close:active {
    transform: none;
  }
}