/* ============================================================
   NAIA — LEVEL 4 ARRIVAL INTRO
   The lift ride up to the rooftop: blurred/cool → count → ding →
   doors open → the same hero video, now sharp and warm.
   ============================================================ */

/* The real site fades in behind the doors; hidden/inert while arriving */
body.intro-active .nav,
body.intro-active .nav__mobile,
body.intro-active .hero__content,
body.intro-active .hero__scroll {
  opacity: 0;
  pointer-events: none;
}
.nav, .hero__content, .hero__scroll {
  transition: opacity 0.9s var(--ease-out);
}
body.intro-active { overflow: hidden; }
#siteContent[inert] { cursor: default; }

/* ── Stage ─────────────────────────────────────────────────── */
.intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
  transition: opacity 1.6s ease;
}
.intro[hidden] { display: none; }
/* The doors sliding apart only uncovers whatever's behind THEM — the
   .intro container itself was still sitting there, fully opaque, until
   [hidden] landed a full second later. That flat, unresponsive gap
   between the doors finishing and the site appearing was the freeze.
   Fading the whole overlay's own opacity out in step with the door
   slide (and killing its pointer-events immediately) removes it. */
.intro.is-opening {
  opacity: 0;
  pointer-events: none;
}

/* ── Doors: frosted glass. Each panel shows half of the AI hero
   still (ChatGPT_Image_Naia_Hero), heavily blurred/cooled/darkened,
   as if seen through the glass — not the live video, which stays
   hidden beneath until the doors physically move away. Combining
   a background-image with a same-layer tint gradient means the
   `filter: blur()` frosts image and tint together in one pass. ── */
.intro__door {
  position: absolute;
  top: -4%; bottom: -4%; /* slight overscan so the blur's soft edge never shows at the top/bottom edge */
  width: calc(50% + 6px); /* deliberate overlap at the centre seam — a sub-pixel gap here lets raw
    (unblurred) brightness from whatever's behind the doors through, and the blur then smears that
    hairline into a wide glowing streak. Overlapping is invisible once blurred; a gap isn't. */
  background-image:
    linear-gradient(160deg, rgba(8,22,28,0.5), rgba(11,34,42,0.38)),
    url('../images/hero-poster.png');
  background-size: cover, 200% 100%;
  background-repeat: no-repeat, no-repeat;
  filter: blur(34px) saturate(52%) brightness(0.58) contrast(1.05);
  transition: transform 1.5s cubic-bezier(0.76, 0, 0.24, 1), opacity 1.2s ease;
  will-change: transform;
}
.intro__door--left { left: 0; background-position: center, left center; }
.intro__door--right { right: 0; background-position: center, right center; }
.intro.is-opening .intro__door--left { transform: translateX(-100%); }
.intro.is-opening .intro__door--right { transform: translateX(100%); }

/* ── Centre content: wordmark + CTA ───────────────────────── */
.intro__center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  transition: opacity 0.55s ease, transform 0.6s ease;
}
.intro.is-entering .intro__center {
  opacity: 0;
  transform: translateY(-16px);
  pointer-events: none;
}

.intro__mark { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.intro__mark-naia {
  font-family: var(--f-display);
  font-size: clamp(52px, 10vw, 104px);
  letter-spacing: 0.03em;
  color: var(--white);
  line-height: 0.88;
  text-transform: uppercase;
}
.intro__mark-sub {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: clamp(11px, 1.5vw, 14px);
  letter-spacing: 0.62em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-left: 0.62em; /* optically re-centers under the wider NAIA glyphs */
}

.intro__cta {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--white);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.5);
  padding: 17px 46px;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, letter-spacing 0.3s;
}
.intro__cta:hover { background: rgba(255,255,255,0.1); border-color: var(--peach-lt); letter-spacing: 0.3em; }
.intro__cta:focus-visible { outline: 2px solid var(--peach-lt); outline-offset: 5px; }
.intro__cta:disabled { cursor: default; }

/* ── Floor indicator: typography + four ticks, nothing literal ── */
.intro__floor {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.intro.is-counting .intro__floor { opacity: 1; transform: none; }

.intro__floor-num {
  font-family: var(--f-display);
  font-size: clamp(96px, 17vw, 176px);
  line-height: 1;
  color: var(--white);
  min-height: 1em;
  display: inline-block;
}
.intro__floor-num span { display: inline-block; animation: naiaFloorIn 0.45s ease; }
@keyframes naiaFloorIn {
  from { opacity: 0; transform: translateY(8px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

.intro__ticks { display: flex; gap: 11px; }
.intro__tick { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.26); transition: background 0.3s, transform 0.3s; }
.intro__tick.is-lit { background: var(--peach-lt); transform: scale(1.3); }

/* ── Global site controls (present before, during, after arrival) ── */
.site-sound-toggle {
  position: fixed; right: 24px; bottom: 24px; z-index: 1001;
  display: flex; align-items: center; gap: 9px;
  font-family: var(--f-body); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.22);
  padding: 10px 15px;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s;
}
.site-sound-toggle:hover, .site-sound-toggle:focus-visible { color: var(--white); border-color: rgba(255,255,255,0.45); }
.site-sound-toggle .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.4); transition: background 0.25s; }
.site-sound-toggle[aria-pressed="true"] .dot { background: var(--peach-lt); box-shadow: 0 0 6px 1px rgba(233,169,145,0.65); }

.site-replay-intro {
  position: fixed; left: 24px; bottom: 24px; z-index: 1001;
  font-family: var(--f-body); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 9px 14px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, color 0.25s;
}
.site-replay-intro.is-visible { opacity: 1; pointer-events: auto; }
.site-replay-intro:hover, .site-replay-intro:focus-visible { color: var(--white); }

/* While the intro is showing, keep the toggle from fighting for space
   with the intro's own centred content on very short screens */
body.intro-active .site-sound-toggle,
body.intro-active .site-replay-intro { opacity: 1; }
body.intro-active .site-replay-intro { display: none; }

@media (max-width: 640px) {
  .intro__mark-sub { letter-spacing: 0.42em; }
  .intro__cta { padding: 15px 36px; font-size: 12px; }
  .intro__floor-num { font-size: clamp(76px, 24vw, 128px); }
  .intro__center { gap: 26px; }
  .site-sound-toggle, .site-replay-intro { padding: 8px 12px; font-size: 9px; }
}

/* ── Reduced motion: crossfade, no count, no sliding doors ───── */
@media (prefers-reduced-motion: reduce) {
  .intro__door {
    transition: opacity 0.6s ease !important;
    transform: none !important;
  }
  .intro.is-opening .intro__door--left,
  .intro.is-opening .intro__door--right {
    opacity: 0;
  }
  .intro, .intro__center, .nav, .hero__content, .hero__scroll {
    transition-duration: 0.5s !important;
  }
}