/* Noctalia experience layer — adaptive landing styles.
 *
 * Tier hooks (set by the inline detection script + experience.js):
 * - `html[data-exp-tier="static"]`: no JS motion at all, content always
 *   visible, CSS scroll-driven effects where supported.
 * - `html.exp-sky-on`: the canvas sky is rendering inside the hero.
 * - `html.exp-static`: JS-level static fallback (same rules as the tier).
 *
 * Only transform/opacity are animated here.
 */

/* ---------------------------------------------------------------- */
/* Canvas sky (full & light tiers).                                  */
/* ---------------------------------------------------------------- */

/* Inserted by experience.js as first child of the hero header, between the
 * hero background image (::before) and the content wrapper (z-10). */
.sky-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}

/* The observatory sizes direct-child divs of the hero header to the content
 * column (`width: min(100%, 1240px)`), which used to pin the stage — and the
 * canvas — narrower than the hero on wide screens. Specificity (0,2,1) beats
 * that (0,1,2) rule so `inset: 0` alone drives the stage box. */
.noctalia-observatory > header > .sky-stage {
  width: auto;
  max-width: none;
}

html.exp-sky-on .sky-stage {
  opacity: 1;
}

.sky-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------- */
/* Static tier: content is visible with zero JS motion.              */
/* Specificity (0,2,1) beats `.reveal` / `.opacity-0` (0,1,0) so no  */
/* !important is needed and scroll-driven animations can still run.  */
/* ---------------------------------------------------------------- */

html[data-exp-tier="static"] .hero-anim,
html[data-exp-tier="static"] .reveal,
html.exp-static .hero-anim,
html.exp-static .reveal {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ---------------------------------------------------------------- */
/* CSS scroll-driven effects (progressive enhancement, static tier). */
/* Browsers without support keep the fully visible state above.      */
/* ---------------------------------------------------------------- */

@supports (animation-timeline: view()) {
  html[data-exp-tier="static"] .reveal {
    animation: exp-static-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}

@supports (animation-timeline: scroll()) {
  html[data-exp-tier="static"] .noctalia-observatory > header picture {
    animation: exp-static-parallax linear both;
    animation-timeline: scroll();
    animation-range: 0 100vh;
  }
}

@keyframes exp-static-reveal {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes exp-static-parallax {
  to {
    transform: translate3d(0, -4vh, 0);
  }
}

/* prefers-reduced-motion lands on the static tier by design and must stay
 * completely still, scroll-driven effects included. */
@media (prefers-reduced-motion: reduce) {
  html[data-exp-tier="static"] .reveal,
  html[data-exp-tier="static"] .noctalia-observatory > header picture {
    animation: none;
  }
}