/* ================================================================
   INTRO OVERLAY — pass-through zoom intro
   ================================================================ */

#intro-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  /* Fallback height; the JS in intro.js overrides this with the real
     window.innerHeight so the overlay matches the visible viewport
     exactly (avoids the mobile-chrome offset that pushes centred
     content below the visible centre). */
  height: 100vh;
  z-index: 9999;
  /* Marble fills every pixel regardless of aspect ratio */
  background: url('../images/marble background.webp') center / cover no-repeat;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stage is the centring anchor for the candy element.
   padding-bottom shifts the flex content area upward so the candy
   lands at ~30% from top (≈ 20% above dead centre) on any screen.
   Formula: candy-centre = (stage-height - padding-bottom) / 2
           = (1×wih - 0.4×wih) / 2 = 0.3×wih = 30% ✓              */
#intro-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 20vh;
  will-change: transform, opacity, filter;
}

/* Candy PNG (transparent background) — absolutely centred, scales
   to fit comfortably on any screen, never stretches past its natural
   width. The marble background fills whatever remains around it.     */
#intro-candy {
  /* Shrink-to-fit horizontally but never grow past natural width.
     On portrait phones 90vw gives a readable candy size. On big
     landscape screens max-width clamps it so it doesn't look huge. */
  width: clamp(420px, 90vw, 1050px); /* desktop: 1.5× original */
  max-width: none; /* override global img reset */
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  will-change: transform, opacity, filter;
  /* Subtle ambient breathing */
  animation: introBreathe 6.5s ease-in-out infinite;
  /* GSAP overrides transform-origin on init */
  transform-origin: 50% 50%;
}

@keyframes introBreathe {
  0%, 100% { transform: scale(1.00); }
  50%       { transform: scale(1.022); }
}

/* Mobile: image must be much wider than the viewport so the candy
   object itself fills a good portion of the screen (transparent
   margins around the candy are clipped by overflow:hidden). */
@media (max-width: 768px) {
  #intro-candy {
    width: 220vw;
  }
}

/* Pulsing "click to open" hint */
.intro-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #2C2B28;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  animation: introHintFade 3s ease-in-out infinite;
  animation-delay: 1.4s;
  animation-fill-mode: both;
  /* Subtle backdrop so it reads on marble */
  padding: 0.55rem 1rem;
  background: rgba(247, 245, 241, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2;
}

@keyframes introHintFade {
  0%,  100% { opacity: 0.45; transform: translateX(-50%) translateY(0); }
  50%        { opacity: 0.95; transform: translateX(-50%) translateY(-2px); }
}

/* Mobile: hint is much more prominent — higher opacity + larger text   */
@media (max-width: 600px) {
  .intro-hint {
    font-size: 0.8125rem;
    padding: 0.65rem 1.3rem;
    bottom: 3rem;
    animation-name: introHintFadeMobile;
  }
}

@keyframes introHintFadeMobile {
  0%,  100% { opacity: 0.82; transform: translateX(-50%) translateY(0); }
  50%        { opacity: 1.0;  transform: translateX(-50%) translateY(-3px); }
}

/* While zooming — kill ambient breathe + hint */
#intro-overlay.is-zooming #intro-candy { animation: none; }
#intro-overlay.is-zooming .intro-hint  { opacity: 0; transition: opacity 0.18s ease; }
#intro-overlay.is-zooming               { cursor: default; }


/* ================================================================
   BODY STATE DURING INTRO
   ================================================================ */

body.intro-active { overflow: hidden; }

/* Navbar hidden while intro plays — fades in when intro-active removed */
body.intro-active .navbar {
  opacity: 0;
  pointer-events: none;
}

.navbar { transition: opacity 0.55s ease; }

/* Navbar brand hidden initially — JS removes this class to reveal */
.navbar__brand.intro-hidden {
  opacity: 0;
  transition: opacity 0.55s ease 0.1s;
}