/* =============================================================================
   1) ANNOUNCEMENT + CTA
============================================================================= */
#announcement{
  max-width:90%;
  font-size:1.8rem;
  font-weight:600;
  letter-spacing:0.02em;
  text-align:center;
  margin:0 auto;
}
#announcement.secondary{
  font-size:1.5rem;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
#announcement + .site-essence{
  font-size:1rem;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:0.16em;
  margin:1.35rem auto 0 auto;
  opacity:0.7;
  text-align:center;
}

/* Hero Site Essence — match Menu Site Essence effect (exact) */
#stage #stage-essence,
#stage .site-essence{
  display: inline-block;
  will-change: transform, background-position;
  transform: translateY(0);
  background-repeat: no-repeat;
  /* Always-visible fallback */
  color: var(--text-color);

  /* Same sheen logic (menu-style): long sweep + restrained glow */
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 40%,
    var(--text-color) 50%,
    transparent 62%,
    transparent 100%
  );
  background-size: 320% 100%;
  background-position: 0% 50%;

  text-shadow: none;

  opacity: 0.78;
  animation:
    menu-essence-breathe 7.8s ease-in-out infinite,
    menu-essence-sheen 9s linear infinite;
}

@supports (-webkit-background-clip: text) or (background-clip: text){
  #stage #stage-essence,
  #stage .site-essence{
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

@keyframes menu-essence-breathe{
  0%{transform:translateY(6px);}
  50%{transform:translateY(-18px);}
  100%{transform:translateY(6px);}
}

@keyframes menu-essence-sheen{
  0%{background-position:0% 50%;}
  100%{background-position:320% 50%;}
}

.enter-button{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.55rem 1.9rem;
  background:transparent;
  color:var(--text-color);
  font-size:0.95rem;
  font-weight:300;
  letter-spacing:0.14em;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,0.35);
  border-radius:999px;
  cursor:pointer;
  overflow:hidden;
  transition:border-color 0.6s ease,opacity 0.6s ease;
  animation:enter-breathe 6s ease-in-out infinite;
  margin:0 auto;
}
body.light-mode .enter-button{border-color:rgba(0,0,0,0.35);}
body.dark-mode .enter-button{border-color:rgba(255,255,255,0.35);}
.enter-button span{
  position:relative;
  z-index:2;
  display:inline-block;
  transition:transform 0.6s cubic-bezier(0.22,1,0.36,1), color 0.6s ease;
}

.enter-button:hover span{
  transform:translateY(-1px);
}
.enter-button::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:linear-gradient(120deg,transparent 20%, rgba(255,255,255,0.9) 40%, transparent 60%);
  opacity:0.85;
  animation:enter-shine 2.8s linear infinite;
  pointer-events:none;
}
.enter-button:hover{opacity:0.95;}
.enter-button:hover::before{opacity:0.9;}
@keyframes enter-breathe{0%{transform:translateY(0);}50%{transform:translateY(-4px);}100%{transform:translateY(0);}}
@keyframes enter-shine{from{transform:translateX(-120%);}to{transform:translateX(120%);}}

/* =============================================================================
   2) STAGE CIRCLE (ATMOSPHERE)
============================================================================= */
.stage-circle{
  position:relative;
  width:min(var(--stage-circle-desktop), var(--stage-circle-vh-cap), var(--stage-circle-vw-cap), var(--stage-circle-max-desktop));
  aspect-ratio:1/1;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(
    circle at center,
    rgba(255,255,255,0.08) 0%,
    rgba(255,255,255,0.04) 40%,
    rgba(255,255,255,0.015) 60%,
    rgba(255,255,255,0) 72%
  );
  filter:blur(0);
  transition:background 1.2s ease;
  margin:0 auto;
}
.stage-circle::after{
  content:"";
  position:absolute;
  inset:-12%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.05), transparent 70%);
  opacity:0.6;
  animation:circle-breathe 8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes circle-breathe{
  0%{opacity:0.35;transform:scale(0.96);}
  50%{opacity:0.65;transform:scale(1.02);}
  100%{opacity:0.35;transform:scale(0.96);}
}
@media (max-width:640px){
  .stage-circle{
    width:min(var(--stage-circle-mobile), var(--stage-circle-vw-cap), var(--stage-circle-max-mobile));
  }
}


/* =============================================================================
   3) STAGE BACKGROUND VIDEO (HERO)
============================================================================= */
/*
  LOOP CONTROL (HTML/JS)
  - Video looping is NOT controlled by CSS.
  - To disable looping for testing: remove the `loop` attribute from the <video> tag in index.html
    (or toggle it via JS: video.loop = false).
*/
/* Robust, selector-safe fullscreen background video.
   Works even if markup/classes change slightly, and ignores any container sizing. */

/* Preferred wrapper (if present) */
.stage-video,
#stage-video,
#hero-video,
#stage .stage-video{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  margin:0 !important;
  padding:0 !important;
  max-width:none !important;
  max-height:none !important;
  border:0 !important;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  transform:none !important;
}

/* Video element (covers most markups) */
.stage-video video,
#stage-video video,
#hero-video video,
#stage video.stage-video-media,
#stage video#stage-video-media,
#stage .stage-video-media,
#stage .hero-video-media,
#stage video{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  min-width:100vw !important;
  min-height:100vh !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
}

/* Dark glass wash above the video */
.stage-video::after,
#stage-video::after,
#hero-video::after,
#stage .stage-video::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.62);
}

body.light-mode .stage-video::after,
body.light-mode #stage-video::after,
body.light-mode #hero-video::after,
body.light-mode #stage .stage-video::after{
  background:rgba(0,0,0,0.22);
}

/* Video exists only for the pre-enter stage. Once ENTER is pressed, remove it entirely. */
body.site-entered .stage-video,
body.site-entered #stage-video,
body.site-entered #hero-video,
body.site-entered .stage-video video,
body.site-entered #stage-video video,
body.site-entered #hero-video video,
body.site-entered .stage-video-media,
body.site-entered #stage-video-media,
body.site-entered .hero-video-media{
  display:none !important;
}

/* =============================================================================
   4) STAGE VIDEO OVERLAY (THEME-ADAPTABLE GLASS)
   Controls perceived brightness of background video without affecting UI.
   Opacity states are driven by body classes already managed by intro JS.
============================================================================= */

.stage-video-overlay{
  position:fixed;
  inset:0;
  z-index:1; /* above video (z=0), below stage content (z>=2) */
  pointer-events:none;

  background:
    radial-gradient(
      circle at center,
      rgba(0,0,0,0.35) 0%,
      rgba(0,0,0,0.55) 45%,
      rgba(0,0,0,0.75) 100%
    );

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  opacity:1;
  transition: opacity 2.4s cubic-bezier(0.22,1,0.36,1);
}

/* Light mode tuning */
body.light-mode .stage-video-overlay{
  background:
    radial-gradient(
      circle at center,
      rgba(255,255,255,0.25) 0%,
      rgba(255,255,255,0.45) 45%,
      rgba(255,255,255,0.65) 100%
    );
}

/* During intro: video fully masked */
body.intro-loading .stage-video-overlay{
  opacity:1;
}

/* After intro reveal: let video breathe */
body.intro-reveal .stage-video-overlay{
  opacity:0.5;
}

/* Once ENTER is pressed: remove overlay entirely */
body.site-entered .stage-video-overlay{
  opacity:0;
  display:none;
}

/* =============================================================================
   5) HERO / LANDING STACK (SINGLE SOURCE OF TRUTH)
============================================================================= */
main{
  width:100%;
}

#stage{
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  position:relative;
  z-index:2;

  /* Full-viewport vertical centering (mobile-safe) */
  min-height:100vh;
  min-height:100svh;
  padding:0;
}

/* Prefer dynamic viewport units where supported (prevents iOS address-bar gaps) */
@supports (height: 100dvh){
  #stage{min-height:100dvh;}
}

.stage-circle{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0 auto;
  z-index:2;
}
#stage .stage-container{
  position:relative;
  width:100%;
  max-width:640px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:1.15rem;
  margin:0 auto;
  padding:1.25rem 0;
}

/* Scoped stage logo (prevents affecting other logos on the site) */
#stage .logo-container .site-logo{
  position: relative;
  z-index: 4;
  display: block;
  width: min(320px, 72vw);
  height: auto;
  margin: 0 auto 0.25rem auto;
  pointer-events: auto;
}

#stage #announcement{
  width:100%;
  max-width:90%;
  margin:0 auto;
  text-align:center;
}
#stage #announcement.secondary{margin-top:0.15rem;}
#stage .enter-button,
#stage #enter-button{
  display:inline-flex;
  width:fit-content;
  margin:0.9rem auto 1.4rem;
  align-self:center;
  justify-content:center;
  text-align:center;
}
#stage .stage-container{
  text-align:center;
}
#stage .site-essence,
#stage #stage-essence{
  margin:1.35rem auto 0 auto;
  text-align:center;
}

@media (max-width: 768px){
  #stage .stage-container{
    max-width: 560px;
    padding: 1.1rem 0;
    gap: 1rem;
  }
}

@media (max-width: 480px){
  #stage .stage-container{
    max-width: 92vw;
    padding: 1rem 0;
    gap: 0.95rem;
  }
}

/* =============================================================================
   6) HERO — ON ENTER: HIDE STAGE INTRO GROUP
   Triggered by `body.site-entered` (set by logo-animation.js).
============================================================================= */

/* Stage intro wrapper (logo + announcement + enter + essence)
   Collapses cleanly after ENTER without requiring extra JS classes. */
#stage-intro{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;

  opacity:1;
  transform:translateY(0);

  /* Layout collapse (smooth + future-proof) */
  max-height:1200px;
  overflow:hidden;

  transition:
    opacity 900ms cubic-bezier(0.22,1,0.36,1),
    transform 1100ms cubic-bezier(0.22,1,0.36,1),
    max-height 1100ms cubic-bezier(0.22,1,0.36,1);
}

/* On ENTER: fade + lift + collapse */
body.site-entered #stage-intro{
  opacity:0;
  transform:translateY(-10px);
  max-height:0;
  pointer-events:none;
}

/* Stage circle fades/collapses on ENTER (matches #stage-intro timing)
   NOTE: selectors are intentionally broad because `.stage-circle` may not be nested
   exactly under `#stage` depending on markup revisions.
*/
.stage-circle{
  opacity:1;
  transform:scale(1);
  max-height:2000px;
  overflow:hidden;
  will-change:opacity, transform, max-height;
  transition:
    opacity 900ms cubic-bezier(0.22,1,0.36,1),
    transform 1100ms cubic-bezier(0.22,1,0.36,1),
    max-height 1100ms cubic-bezier(0.22,1,0.36,1);
}

/* On ENTER: fade + slight scale + collapse */
body.site-entered .stage-circle{
  opacity:0 !important;
  transform:scale(0.985) !important;
  max-height:0 !important;
  pointer-events:none !important;
}

/* Hard removal after the fade (prevents lingering layout/paint in edge cases) */
body.site-entered .stage-circle{
  animation: stage-circle-kill 0ms linear 1200ms forwards;
}

@keyframes stage-circle-kill{
  to{ visibility:hidden; }
}

/* Optional hard-removal hooks (if JS ever sets them) */
body.site-entered #stage-intro[aria-hidden="true"],
body.site-entered #stage-intro.is-hidden{
  display:none !important;
}

/* Safety: if wrapper is not present, fall back to hiding individual pieces */
body.site-entered #stage .logo-container .site-logo,
body.site-entered #stage #announcement,
body.site-entered #stage .enter-button,
body.site-entered #stage #enter-button,
body.site-entered #stage .site-essence,
body.site-entered #stage #announcement + .site-essence{
  opacity:0;
  pointer-events:none;
}

/* =============================================================================
   7) HERO — MOBILE / TABLET REFINEMENTS (CENTERED, SAFE-AREA, NO GAPS)
============================================================================= */

/* Safe-area padding for iOS notch + address bar behavior */
#stage{
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Mobile-first circle dial (prevents oversized circle pushing content upward) */
@media (max-width: 820px){
  :root{
    --stage-circle-mobile: 520px;
    --stage-circle-vh-cap: 86vh;
    --stage-circle-vw-cap: 92vw;
  }

  /* Ensure true vertical centering even when browser UI expands/collapses */
  #stage{
    min-height: 100svh;
  }

  @supports (height: 100dvh){
    #stage{min-height:100dvh;}
  }

  /* Keep the hero copy comfortably inside the circle */
  #stage .stage-container{
    max-width: min(92vw, 560px);
    padding: 0.9rem 0;
    gap: 0.95rem;
  }

  #stage .logo-container .site-logo{
    width: min(260px, 68vw);
  }

  #announcement{
    font-size: 1.35rem;
    line-height: 1.25;
  }

  #announcement.secondary{
    font-size: 1.05rem;
    letter-spacing: 0.06em;
  }

  #announcement + .site-essence,
  #stage .site-essence{
    font-size: 0.85rem;
    letter-spacing: 0.14em;
  }

  .enter-button{
    font-size: 0.85rem;
    padding: 0.5rem 1.55rem;
  }
}

/* Make sure the background video always fills the viewport on mobile */
@media (max-width: 820px){
  .stage-video,
  #stage-video,
  #hero-video,
  #stage .stage-video{
    inset: 0 !important;
    width: 100vw !important;
    height: 100svh !important;
  }

  @supports (height: 100dvh){
    .stage-video,
    #stage-video,
    #hero-video,
    #stage .stage-video{
      height: 100dvh !important;
    }
  }

  .stage-video video,
  #stage-video video,
  #hero-video video,
  #stage video.stage-video-media,
  #stage video#stage-video-media,
  #stage .stage-video-media,
  #stage .hero-video-media,
  #stage video{
    height: 100svh !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  @supports (height: 100dvh){
    .stage-video video,
    #stage-video video,
    #hero-video video,
    #stage video.stage-video-media,
    #stage video#stage-video-media,
    #stage .stage-video-media,
    #stage .hero-video-media,
    #stage video{
      height: 100dvh !important;
    }
  }
}