/* =========================================================================
   Motion: the opening sequence
   The scene behind the opening screen arrives first (backdrop.css); once
   it is fading up, JS adds three classes to <html>, in order:
     .is-brand   the HAAVN BLACK mark fades up
     .is-hero    the SOLUM wordmark is unveiled
     .is-ready   everything else rises in
   Every entrance is a single smooth movement: nothing flickers or strikes.
   All of it is scoped to .js, so without JavaScript the page is fully
   visible and static.
   ========================================================================= */

/* ---- Starting states ---- */
.js .wordmark__mark,
.js .hero__mark {
  opacity: 0;
}

.js [data-reveal] {
  opacity: 0;
}

/* ---- Stagger ---- */
.eyebrow { --reveal-delay: 0.1s; }
.daylight { --reveal-delay: 0.9s; }
.launch__line { --reveal-delay: 0.95s; }
.launch__credit { --reveal-delay: 1.05s; }
.launch__date { --reveal-delay: 1.15s; }
.button--glass { --reveal-delay: 1s; }


/* ---- Beats ---- */
.is-brand .wordmark__mark {
  animation: fade-in 1.6s var(--ease-out) forwards;
}

/* Drawn on from the left as it rises a few pixels and comes up — the name
   revealed rather than switched on. The leading edge is feathered: it is
   a gradient in the mark's own mask (hero.css), carried across by
   --unveil, rather than a hard clip. No filter: one here would cut the
   glass off from the scene behind it. */
.is-hero .hero__mark {
  animation: unveil 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}



/* Animation (not transition) so it never fights a component's own
   transitions, and `translate` (not transform) so hover lifts still work. */
.is-ready [data-reveal] {
  animation: reveal var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0s) both;
}

/* ---- Keyframes ---- */

@keyframes unveil {
  from {
    opacity: 0;
    translate: 0 10px;
    --unveil: 0%;
  }
  to {
    opacity: 1;
    translate: none;
    --unveil: 125%;
  }
}


@keyframes reveal {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* =========================================================================
   Reduced motion: nothing moves on its own.
   Things still arrive, they just fade in.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  .is-brand .wordmark__mark,
  .is-hero .hero__mark {
    animation: fade-in 0.8s ease forwards;
  }

  .is-ready [data-reveal] {
    animation-name: fade-in;
    animation-duration: 0.8s;
  }

  .button--glass,
  .button__arrow,
  .register {
    transform: none !important;
  }
}