/* =============================================================================
   HERO.CSS — ARTAN HOME HERO (PRE-ENTER STAGE)
   Single-owner, no duplicates, no dead selectors.
============================================================================= */

/* =============================================================================
   0) GLOBAL SAFETY
============================================================================= */
html, body{height:100%;}
body{margin:0;overflow-x:hidden;}

/* =============================================================================
   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;
  color:var(--text-color);

  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%);}}

/* Dial color (contrast layer)
   Light mode (black text) → white dial
   Dark mode (white text)  → black dial
*/
:root{--dial-rgb:0,0,0;}
body.light-mode{--dial-rgb:255,255,255;}
body.dark-mode{--dial-rgb:0,0,0;}
/* Support alternate theme class names if present */
body.theme-light{--dial-rgb:255,255,255;}
body.theme-dark{--dial-rgb:0,0,0;}

/* =============================================================================
   2) STAGE CIRCLE (ATMOSPHERE) — LUXURY BREATHING DIAL (STRONG)
============================================================================= */
.stage-circle{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  border-radius:0;
  margin:0;
  background:transparent;

  display:flex;
  align-items:center;
  justify-content:center;

  z-index:4;
  overflow:hidden;
  isolation:isolate;
  pointer-events:none;
  opacity:1;
}

/* Strong luxury dial */
.stage-circle::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);

  width:min(var(--stage-circle-desktop, 720px), 86vh, 92vw, var(--stage-circle-max-desktop, 1200px));
  height:min(var(--stage-circle-desktop, 720px), 86vh, 92vw, var(--stage-circle-max-desktop, 1200px));
  border-radius:50%;

  background:radial-gradient(
    circle at center,
    rgba(var(--dial-rgb), 1) 0%,
    rgba(var(--dial-rgb), 0.80) 12%,
    rgba(var(--dial-rgb), 0.70) 20%,
    rgba(var(--dial-rgb), 0.60) 28%,
    rgba(var(--dial-rgb), 0.40) 40%,
    rgba(var(--dial-rgb), 0.35) 46%,
    rgba(var(--dial-rgb), 0.30) 52%,
    rgba(var(--dial-rgb), 0.25) 58%,
    rgba(var(--dial-rgb), 0.20) 64%,
    rgba(var(--dial-rgb), 0.15) 70%,
    rgba(var(--dial-rgb), 0.12) 74%,
    rgba(var(--dial-rgb), 0.10) 78%,
    rgba(var(--dial-rgb), 0.08) 82%,
    rgba(var(--dial-rgb), 0.06) 86%,
    rgba(var(--dial-rgb), 0.04) 90%,
    rgba(var(--dial-rgb), 0.025) 94%,
    rgba(var(--dial-rgb), 0.012) 97%,
    rgba(var(--dial-rgb), 0) 100%
  );

  filter:blur(14px);
  -webkit-filter:blur(14px);
  opacity:1;
  z-index:2;

  animation:dial-breathe 2.6s cubic-bezier(0.22,1,0.36,1) infinite;
}

/* Halo layer */
.stage-circle::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);

  width:calc(min(var(--stage-circle-desktop, 720px), 86vh, 92vw, var(--stage-circle-max-desktop, 1200px)) * 1.3);
  height:calc(min(var(--stage-circle-desktop, 720px), 86vh, 92vw, var(--stage-circle-max-desktop, 1200px)) * 1.3);
  border-radius:50%;

  background:radial-gradient(circle, rgba(var(--dial-rgb), 0.12), transparent 75%);
  opacity:0.9;
  z-index:2;

  animation:halo-breathe 3.4s ease-in-out infinite;
}

@keyframes dial-breathe{
  0%{transform:translate(-50%,-50%) scale(0.80);}
  35%{transform:translate(-50%,-50%) scale(1.12);}
  100%{transform:translate(-50%,-50%) scale(0.80);}
}

@keyframes halo-breathe{
  0%{opacity:0.55;}
  50%{opacity:1;}
  100%{opacity:0.55;}
}

/* =============================================================================
   3) STAGE BACKGROUND VIDEO (HERO) — CLEAN SELECTORS
============================================================================= */
.stage-video,
#hero-video,
#stage .stage-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

.stage-video video,
#hero-video video,
#stage video.stage-video-media,
#stage .stage-video-media,
#stage .hero-video-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  margin:0;
  padding:0;
}

/* Optional wash layer lives on overlay, not here */
.stage-video::after,
#hero-video::after,
#stage .stage-video::after{
  content:"";
  position:absolute;
  inset:0;
  background:transparent;
}

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

/* =============================================================================
   4) STAGE VIDEO OVERLAY (THEME-ADAPTABLE GLASS)
============================================================================= */
.stage-video-overlay{
  position:absolute;
  inset:0;
  z-index:1; /* above video, below dial + content */
  pointer-events:none;

  background:radial-gradient(circle at center, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.62) 60%, rgba(0,0,0,0.74) 100%);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

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

body.light-mode .stage-video-overlay{
  background:radial-gradient(circle at center, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.46) 60%, rgba(255,255,255,0.58) 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.84;}
/* Once ENTER is pressed: remove overlay entirely */
body.site-entered.hero-lock-released .stage-video-overlay{opacity:0;display:none;}

/* =============================================================================
   5) HERO / LANDING STACK (LUXURY SPACING)
============================================================================= */
#stage{
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;

  position:relative;
  z-index:7;

  height:100vh;
  height:100svh;
  min-height:100vh;
  min-height:100svh;

  box-sizing:border-box;
  background:transparent;
}

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

#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:5.5rem;
  margin:0 auto;
  padding:6.5rem 0;

  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}

#stage .logo-container .site-logo{
  position:relative;
  z-index:4;
  display:block;
  width:min(320px, 72vw);
  height:auto;
  margin:0 auto 2rem auto;
  pointer-events:auto;
  will-change: transform, opacity;
  transition: opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 900ms cubic-bezier(0.22,1,0.36,1);
  transition-delay: 0ms;
}

#stage #announcement{
  width:100%;
  max-width:90%;
  margin:1.5rem auto 0 auto;
  text-align:center;
}

#stage .enter-button,
#stage #enter-button{
  display:inline-flex;
  width:fit-content;
  margin:1.5rem auto 1rem auto;
  align-self:center;
  justify-content:center;
  text-align:center;
  pointer-events:auto;
}

#stage .site-essence,
#stage #stage-essence{
  margin:1.5rem auto 0 auto;
  text-align:center;
}

/* =============================================================================
   6) HERO — ON ENTER: HIDE STAGE INTRO GROUP
============================================================================= */
#stage-intro{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;

  opacity:1;
  transform:translateY(0);

  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);
}

body.site-entered.hero-lock-released #stage-intro{
  opacity:0;
  transform:translateY(-10px);
  max-height:0;
  pointer-events:none;
}

/* Full stage exit on ENTER (prevents stuck overlay) */
body.site-entered.hero-lock-released #stage{
  opacity:0;
  transform:translateY(-6px);
  transition:
    opacity 700ms cubic-bezier(0.22,1,0.36,1) 0ms,
    transform 900ms cubic-bezier(0.22,1,0.36,1) 0ms;
}

/* Logo exits slightly after text/CTA for a luxury handoff */
body.site-entered.hero-lock-released #stage .logo-container .site-logo,
body.site-entered.hero-lock-released .site-logo.intro-docked{
  opacity:0;
  transform:translateY(-8px) scale(0.985);
  transition-delay: 0ms;
}

/* Dial fades smoothly after text for a luxury handoff (no scale to avoid edge artifacts) */
body.site-entered.hero-lock-released .stage-circle{
  opacity:0;
  will-change: opacity;
  transition: opacity 1400ms cubic-bezier(0.22,1,0.36,1) 500ms;
}

body.hero-stage-hidden #stage,
body.hero-stage-hidden .stage-circle,
body.hero-stage-hidden .stage-video,
body.hero-stage-hidden .stage-video-overlay{
  display:none !important;
}

/* Stage circle fades on ENTER */
body:not(.site-entered) .stage-circle{
  opacity:1;
  transform:translateZ(0);
  transition:
    opacity 900ms cubic-bezier(0.22,1,0.36,1),
    transform 1100ms cubic-bezier(0.22,1,0.36,1);
}


/* =============================================================================
   7) HERO — MOBILE / TABLET REFINEMENTS
============================================================================= */
@media (max-width:820px){
  :root{
    --stage-circle-mobile:520px;
  }

  #stage .stage-container{
    max-width:min(92vw, 560px);
    padding:0.9rem 0;
    gap:0.95rem;

    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
  }

  #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;}
}

@media (max-width:820px){
  .stage-video,
  #hero-video,
  #stage .stage-video{
    inset:0 !important;
    width:100vw !important;
    height:100svh !important;
  }
  @supports (height:100dvh){
    .stage-video,
    #hero-video,
    #stage .stage-video{
      height:100dvh !important;
    }
  }

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

/* =============================================================================
   8) HERO SEAL — CLIP + PAINT CONTAIN
============================================================================= */
#stage,
.stage-video,
#hero-video,
.stage-video-overlay{
  contain:paint;
}
@supports (overflow:clip){
  #stage{overflow:clip;}
}

/* =============================================================================
   9) PRE-ENTER ISOLATION — HIDE GLOBAL UI + POST-ENTER CONTENT
============================================================================= */
body:not(.site-entered) #menu-mount,
body:not(.site-entered) #footer-mount,
body:not(.site-entered) footer,
body:not(.site-entered) .site-footer,
body:not(.site-entered) .country-overlay,
body:not(.site-entered) .country-selector,
body:not(.site-entered) [data-country-overlay]{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

body:not(.site-entered) #site-main,
body:not(.site-entered) main{
  display:none;
}

/* =============================================================================
   10) INTRO LOGO ANIMATION (HERO-OWNED — PRE-ENTER SYSTEM)
============================================================================= */

body.intro-loading{overflow:hidden;}

/* Keep dial visible throughout intro (only ENTER should remove it) */
body.intro-loading .stage-circle,
body.intro-reveal .stage-circle{
  opacity:1;
  visibility:visible;
}

body.intro-loading #header-controls,
body.intro-loading .site-essence,
body.intro-loading .site-footer,
body.intro-loading .footer-separator,
body.intro-loading #menu-overlay{
  opacity:0;
  pointer-events:none;
}

/* Stage text + CTA silent until reveal */
body.intro-loading #announcement,
body.intro-loading #enter-button,
body.intro-loading .enter-button{
  opacity:0;
  transform:translateY(18px);
}
body.intro-reveal #announcement,
body.intro-reveal #enter-button,
body.intro-reveal .enter-button{
  opacity:1;
  transform:translateY(0);
  transition:opacity 0.65s ease, transform 0.85s var(--intro-ease);
}

/* Intro logo overlay */
.site-logo.intro-logo{
  position:fixed;
  left:50%;
  top:50%;
  right:auto;
  bottom:auto;
  display:block;
  width:min(62vw, var(--intro-logo-max));
  height:auto;
  margin:0 !important;
  z-index:300000;
  opacity:0;
  transform:translate(-50%,-50%) scale(0.68);
  transition:opacity var(--intro-pop-duration) ease, transform var(--intro-settle-duration) var(--intro-ease);
  will-change:transform, opacity;
  backface-visibility:hidden;
}
.site-logo.intro-logo.intro-pop{opacity:1;transform:translate(-50%,-50%) scale(1);}
.site-logo.intro-logo.intro-settle{transform:translate(-50%,-50%) scale(0.94);}
.site-logo.intro-logo.intro-fade{
  opacity:0;
  transform:translate(-50%,-50%) scale(0.30);
  transition:opacity var(--intro-fade-duration) ease, transform var(--intro-fade-duration) var(--intro-ease);
}
html[dir="rtl"] .site-logo.intro-logo,
body[dir="rtl"] .site-logo.intro-logo{left:50% !important;right:auto !important;}

.site-logo.intro-docked{
  position:relative;
  left:auto;
  top:auto;
  transform:none;
  width:320px;
  margin:0 auto 2rem auto;
  z-index:1;
  opacity:1;
  will-change: transform, opacity;
  transition: opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 900ms cubic-bezier(0.22,1,0.36,1);
}
@media (max-width:640px){
  .site-logo.intro-logo{width:min(78vw, var(--intro-logo-mobile-max));}
  .site-logo.intro-docked{width:260px;}
}
@media (prefers-reduced-motion:reduce){
  body.intro-loading{overflow:auto;}
  .site-logo.intro-logo,
  .site-logo.intro-logo.intro-fade,
  body.intro-reveal #announcement,
  body.intro-reveal #enter-button,
  body.intro-reveal .enter-button{
    transition:none !important;
    animation:none !important;
    transform:none !important;
  }
}