/* One finite opening, shared by the separate desktop and mobile experiences.
   Render-blocking CSS owns the first frame. No load/decode event, observer or
   JavaScript class ever hides the photo or starts a second entrance. */
.home-page .hero-content { animation: none; }
.home-page .hero-title-line { display: inline-block; max-width: 100%; }
.home-page .hero-shade { pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  .home-page .hero {
    --home-camera-scale: 1.065;
    --home-aperture-duration: 1200ms;
  }
  [data-experience="mobile"] .home-page .hero {
    --home-camera-scale: 1.035;
    --home-aperture-duration: 1050ms;
  }

  /* Burgundy shutters reveal the still from its centre. They are paint-only,
     below the copy, and finish even if the photograph is still downloading. */
  .home-page .hero-shade::before,
  .home-page .hero-shade::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    height: 50.1%;
    background: var(--ink);
    pointer-events: none;
    transform: scaleY(0);
    animation: home-aperture var(--home-aperture-duration) cubic-bezier(.22, 1, .36, 1) backwards;
  }
  .home-page .hero-shade::before { top: 0; transform-origin: center top; }
  .home-page .hero-shade::after { bottom: 0; transform-origin: center bottom; }

  /* Individual scale composes with the existing scroll-driven transform,
     instead of replacing its translate3d / overscan. No extra scroll runway. */
  .home-page .hero-image { animation: home-camera-settle 1800ms cubic-bezier(.2, .65, .25, 1) backwards; }
  .home-page .hero-content > .eyebrow { animation: home-copy-arrive 650ms 80ms ease-out backwards; }
  .home-page .hero-title-line { animation: home-title-reveal 900ms 100ms cubic-bezier(.22, 1, .36, 1) backwards; }
  .home-page .hero-title-line + br + .hero-title-line { animation-delay: 240ms; }
  .home-page .hero-description { animation: home-copy-arrive 650ms 320ms ease-out backwards; }
  .home-page .hero-actions { animation: home-controls-arrive 650ms 420ms ease-out backwards; }
  .home-page .hero-offer { animation: home-controls-arrive 600ms 490ms ease-out backwards; }
  .home-page .hero-bottom { animation: home-controls-arrive 650ms 550ms ease-out backwards; }

  @keyframes home-aperture {
    from { transform: scaleY(1); }
    to { transform: scaleY(0); }
  }
  @keyframes home-camera-settle {
    from { scale: var(--home-camera-scale); }
    to { scale: 1; }
  }
  @keyframes home-title-reveal {
    from { opacity: 0; translate: 0 .32em; clip-path: inset(0 -.12em 100% -.12em); }
    35% { opacity: 1; }
    to { opacity: 1; translate: 0 0; clip-path: inset(-.2em -.12em -.2em -.12em); }
  }
  @keyframes home-copy-arrive {
    from { opacity: .35; translate: 0 12px; }
    to { opacity: 1; translate: 0 0; }
  }
  @keyframes home-controls-arrive {
    from { opacity: .65; translate: 0 8px; }
    to { opacity: 1; translate: 0 0; }
  }
}

/* Focus remains clear even without the optional guard. Override only the
   focused controls' paint, not animation-name: leaving focus must not restart
   an entrance when JavaScript is unavailable. */
.home-page .hero-actions:focus-within,
.home-page .hero-offer:focus,
.home-page .hero-bottom:focus-within {
  opacity: 1 !important;
  translate: none !important;
}

/* Settling is permanent for this document; history/reduced-motion changes
   cannot rewind already readable content. The base styles are the final pose. */
[data-home-entry="settled"] .home-page .hero *,
[data-home-entry="settled"] .home-page .hero-shade::before,
[data-home-entry="settled"] .home-page .hero-shade::after {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .home-page .hero *, .home-page .hero-shade::before, .home-page .hero-shade::after { animation: none !important; }
}