/* Consolidated custom styles for Spa Veluwe - extracted utilities and intro styles */
:root{
  --bg:#0f1112;
  --warm:#dcb77b;
  --beige:#efe9df;
  --muted:#9b998f;
  --glow-color: rgba(220,183,123,0.16);
}
html,body{height:100%;}
body{background:linear-gradient(180deg,#070708 0%,#0f1112 100%); color:var(--beige); font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing:antialiased}

/* Intro overlay */
#intro, .intro{position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:#000; overflow:visible; pointer-events:none}
#intro .mist, .intro .mist{position:absolute; inset:-8% -8% -8% -8%; background: radial-gradient(ellipse at 20% 30%, rgba(255,255,255,0.04), transparent 10%), radial-gradient(ellipse at 80% 70%, rgba(220,183,123,0.06), transparent 16%); filter: blur(34px) saturate(110%); opacity:0.95}
#intro .glow, .intro .glow{position:absolute; width:120%; height:120%; background:radial-gradient(circle at 40% 30%, rgba(220,183,123,0.18), transparent 12%), radial-gradient(circle at 70% 70%, rgba(255,210,180,0.06), transparent 18%); mix-blend-mode:screen; filter:blur(22px)}

/* steam layers */
#intro .steam, .intro .steam{position:absolute; left:0; right:0; bottom:6%; height:48%; pointer-events:none}
#intro .steam span, .intro .steam span{position:absolute; bottom:-10%; width:200px; height:320px; background:radial-gradient(closest-side, rgba(255,255,255,0.10), rgba(255,255,255,0.02)); filter:blur(36px) saturate(110%); opacity:0; transform:translateY(20%) scale(0.98); animation:steamRise 6s ease-in-out infinite; mix-blend-mode:screen}
#intro .steam span:nth-child(1), .intro .steam span:nth-child(1){left:10%; animation-delay:0}
#intro .steam span:nth-child(2), .intro .steam span:nth-child(2){left:38%; width:240px; height:360px; animation-delay:0.9s}
#intro .steam span:nth-child(3), .intro .steam span:nth-child(3){left:68%; width:160px; height:260px; animation-delay:1.8s}

@keyframes steamRise{0%{opacity:0; transform:translateY(26%) scale(.96)}18%{opacity:.72}70%{opacity:.28; transform:translateY(-22%) scale(1.06)}100%{opacity:0; transform:translateY(-32%) scale(1.08)}}

/* Intro-specific short 'water damp' effect that runs once during the 2s intro */
.intro.show-logo .steam span{animation-name:steamIntro; animation-duration:2000ms; animation-timing-function:ease-out; animation-fill-mode:forwards}
@keyframes steamIntro{0%{opacity:0; transform:translateY(26%) scale(.96)}25%{opacity:0.8; transform:translateY(0) scale(1)}65%{opacity:0.32; transform:translateY(-26%) scale(1.04)}100%{opacity:0; transform:translateY(-48%) scale(1.08)}}

/* Chat open animation for a subtle, luxurious fade/scale */
@keyframes chatOpen{0%{opacity:0; transform:translateY(10px) scale(.986);}60%{opacity:.9; transform:translateY(4px) scale(1.002);}100%{opacity:1; transform:none}}
.chat-box.open{display:flex; flex-direction:column; opacity:1; transform:translateY(0); animation:chatOpen .42s cubic-bezier(.2,.9,.3,1) both}


/* logo entrance */
#intro .logo, .intro .logo{position:relative; z-index:6; text-align:center; pointer-events:none; opacity:0; transform:scale(.96) translateY(8px); transition:transform 1.2s cubic-bezier(.2,.9,.3,1), opacity 1.2s}
#intro.show-logo .logo, .intro.show-logo .logo{opacity:1; transform:none}
@keyframes logoPulse{0%{transform:scale(1)}50%{transform:scale(1.02)}100%{transform:scale(1)}}
#intro.show-logo .logo.pulse{animation:logoPulse 4s ease-in-out infinite 1s}

/* Clip-path reveal for logo text (luxury mask) */
#intro .logo h1{position:relative; display:inline-block; overflow:visible}
#intro .logo h1::after{content:""; position:absolute; left:0; top:0; height:100%; width:100%; background:linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.12), rgba(255,255,255,0.06)); transform:translateX(-110%); pointer-events:none}
#intro.show-logo .logo.reveal-mask h1::after{transition:transform 1.2s cubic-bezier(.2,.9,.3,1); transform:translateX(8%)}
#intro.show-logo .logo.reveal-mask h1{overflow:visible}


#intro .logo h1{font-family:'Playfair Display', serif; font-size:68px; margin:0; letter-spacing:-0.02em}
#intro .logo h1 .warm{color:var(--warm)}
#intro .logo h1 .light{color:rgba(255,255,255,0.92)}
#intro .sub{font-size:18px; margin-top:8px; font-family:Inter, sans-serif; color:var(--muted)}

/* gentle fade out */
#intro.fade-out, .intro.fade-out{animation:fadeOut 0.9s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes fadeOut{to{opacity:0; visibility:hidden; transform:scale(.996)}}

/* Section separators + glass cards */
section{position:relative}
section::before{content:""; position:absolute; left:0; right:0; top:-36px; height:64px; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,0.40), rgba(0,0,0,0.06)); mix-blend-mode:overlay; opacity:0.9}
.section-strong::before{background:linear-gradient(180deg, rgba(10,10,10,0.02), rgba(0,0,0,0.34)); opacity:1}
.section-inner{position:relative; z-index:2}
.section-inner.glass{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:12px; padding:26px; box-shadow:0 36px 84px rgba(0,0,0,0.44); backdrop-filter: blur(6px) saturate(110%)}

/* Glow utilities */
.glow{box-shadow:0 12px 40px var(--glow-color), 0 4px 10px rgba(0,0,0,0.5); transition:box-shadow .36s ease, transform .24s ease}
.glow:hover{transform:translateY(-6px); box-shadow:0 30px 90px rgba(220,183,123,0.16)}
.glow-text{ text-shadow:0 10px 30px rgba(220,183,123,0.08), 0 1px 2px rgba(0,0,0,0.6)}
@keyframes pulseGlow{0%{box-shadow:0 8px 18px rgba(220,183,123,0.06)}50%{box-shadow:0 22px 64px rgba(220,183,123,0.14)}100%{box-shadow:0 8px 18px rgba(220,183,123,0.06)}}
.glow.pulse{animation:pulseGlow 3s ease-in-out infinite}

/* fade-up utility for reveal */
.fade-up{opacity:0; transform:translateY(16px) scale(.998); transition:opacity .9s cubic-bezier(.2,.9,.3,1), transform .9s cubic-bezier(.2,.9,.3,1); will-change:opacity,transform}
.fade-up.in{opacity:1; transform:none}

/* primary CTA */
.primary-glow{box-shadow:0 36px 98px rgba(220,183,123,0.14); border-radius:10px; transition:transform .28s ease, box-shadow .28s ease}
.primary-glow:hover{box-shadow:0 54px 140px rgba(220,183,123,0.18); transform:translateY(-5px)}

/* small helpers */
@media (max-width:900px){ section::before{top:-18px;height:44px} .section-inner.glass{padding:18px} }

/* Ensure intro never captures pointer events (prevents transparent blocking) */
#intro, .intro{pointer-events:none}
#intro *{pointer-events:none}

/* Header nav refinements to ensure legibility */
header{pointer-events:auto}
.nav-wrap .menu a{color:var(--beige); text-decoration:none; font-weight:600; padding:6px 10px; border-radius:8px; transition:background .22s ease, color .22s ease}
.nav-wrap .menu a:hover, .nav-wrap .menu a:focus{background:rgba(255,255,255,0.04); color:var(--warm); outline:none}
.nav-wrap .brand-logo{height:160px; display:block}
@media (max-width:1600px){ .nav-wrap .brand-logo{height:140px} }
@media (max-width:1200px){ .nav-wrap .brand-logo{height:110px} }
@media (max-width:900px){ .nav-wrap .brand-logo{height:64px} }
@media (max-width:900px){ .nav-wrap{padding:8px 12px} .nav-wrap .brand-logo{height:48px} .nav-wrap .menu a{font-size:15px} }

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important}
  .hero-steam, .intro .steam, .intro .glow{display:none !important}
}

/* Intro sub subtle entrance (letter fade) */
.intro .sub{opacity:0; transform:translateY(6px); transition:opacity .9s cubic-bezier(.2,.9,.3,1), transform .9s cubic-bezier(.2,.9,.3,1)}
.intro.show-logo .sub{opacity:1; transform:none}

/* Make sure modals and other interactive overlays set pointer-events:auto when opened via script */
.modal-backdrop.open, .lb-backdrop.open{pointer-events:auto}

/* Hamburger & mobile menu styles */
.hamburger{display:none; background:transparent; border:1px solid rgba(255,255,255,0.06); padding:10px 12px; border-radius:10px; color:var(--beige); font-size:20px; cursor:pointer}
.hamburger:focus{outline:none}

/* Mobile reserve sticky */
#mobileReserve{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:4000; display:none}
#mobileReserve .btn-reserve{padding:14px 22px; border-radius:999px}

/* Focus outlines for keyboard users */
:focus{outline:2px solid rgba(220,183,123,0.26); outline-offset:4px; border-radius:8px}

/* Safe-area for iPhone notch */
body{padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom)}
header{padding-top:calc(env(safe-area-inset-top) + 8px)}

@media (max-width:900px){
  .hamburger{display:block}
  .nav-wrap{max-width:calc(100% - 28px); width:auto}
  .nav-wrap .menu{display:none}
  #mobileMenu{display:none; opacity:0; transform:translateY(10px); transition:opacity .28s ease, transform .28s ease}
  #mobileMenu.open{display:block; opacity:1; transform:translateY(0)}
  #mobileReserve{display:block}
  .nav-wrap .brand-logo{height:48px}
  .logo{width:260px}
}

/* Improve tap targets */
.btn-reserve, button{touch-action:manipulation}

/* Ensure hero text spacing on mobile */
@media (max-width:600px){
  .hero .container{padding:18px 12px}
  h1{font-size:36px}
  .intro .logo h1{font-size:42px}
}

/* Hero-specific tweaks: remove framed glass look from hero section */
.hero .section-inner.glass{
  background:transparent; /* remove glass card on homepage hero */
  box-shadow:none;
  backdrop-filter:none;
  padding:48px 18px;
}

/* Subtle homepage steam overlay (sauna-like ambient steam) */
.hero-steam{position:absolute; inset:auto 0 6% 0; height:44%; pointer-events:none; z-index:2; mix-blend-mode:screen}
.hero-steam span{position:absolute; bottom:-10%; width:220px; height:320px; background:radial-gradient(closest-side, rgba(255,240,220,0.10), rgba(255,240,220,0.02)); filter:blur(34px) saturate(110%); opacity:0.10; transform:translateY(16%); will-change:transform,opacity; animation:steamRise 7s ease-in-out infinite}
.hero-steam span:nth-child(1){left:6%; animation-delay:0s}
.hero-steam span:nth-child(2){left:44%; width:200px; height:360px; animation-delay:1.6s}
.hero-steam span:nth-child(3){left:76%; width:160px; height:260px; animation-delay:3.1s}

@media (max-width:900px){
  .hero .section-inner.glass{padding:22px 14px}
  .hero-steam span{opacity:0.08; filter:blur(30px)}
}

@media (prefers-reduced-motion: reduce){
  .hero-steam{display:none !important}
}

/* Slightly deepen hero headline contrast */
.hero-text h1{ text-shadow:0 20px 56px rgba(0,0,0,0.62); font-family:'Playfair Display', serif; font-weight:600; letter-spacing:-0.015em; font-feature-settings: "liga" 1; line-height:1.02}

/* Primary CTA sheen and micro-interaction */
.hero-cta .primary::after, .btn-reserve::after{content:""; position:absolute; inset:0; left:-120%; width:60%; background:linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.32), rgba(255,255,255,0.12)); transform:skewX(-12deg); transition:transform .9s cubic-bezier(.2,.9,.3,1), left .9s; pointer-events:none; opacity:0}
.hero-cta .primary:hover::after, .btn-reserve:hover::after{left:120%; opacity:1}
.hero-cta .primary{position:relative}

/* Slight elevation on focus to indicate interactivity */
.btn-reserve:focus, .hero-cta .primary:focus{transform:translateY(-4px)}

/* Subtle divider lines for sections for a refined layout */
.section-title{position:relative; padding-bottom:12px}
.section-title::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:56px; background:linear-gradient(90deg, rgba(220,183,123,0.6), rgba(220,183,123,0.12))}

/* Tighten headings on smaller screens */
@media (max-width:900px){ .hero-text h1{font-size:36px; letter-spacing:-0.01em} }

/* Chat styles (demo chatbot) */
.chat-fab{position:fixed; right:86px; bottom:20px; z-index:9002; width:64px; height:64px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:999px; box-shadow:0 22px 50px rgba(0,0,0,0.45); border:2px solid rgba(255,255,255,0.06); color:var(--beige); text-decoration:none; transition:transform .22s, box-shadow .22s;}
.chat-fab:hover{transform:translateY(-6px); box-shadow:0 34px 90px rgba(0,0,0,0.6)}
.chat-fab::after{content:"Chat"; position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.6); padding:6px 10px; border-radius:8px; font-size:13px; color:var(--beige); opacity:0; transition:opacity .18s, transform .18s; pointer-events:none}
.chat-fab:hover::after{opacity:1; transform:translateY(-50%) translateX(0)}
.chat-fab.pulse{animation:chatPulse 2.4s infinite ease-in-out}
@keyframes chatPulse{0%{transform:scale(1)}30%{transform:scale(1.06)}60%{transform:scale(1)}100%{transform:scale(1)}}
.chat-fab::before{content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; height:100%; border-radius:999px; box-shadow:0 0 0 rgba(220,183,123,0.12); opacity:0; transition:opacity .28s}
.chat-fab.announce::before{animation:ringPulse 1.6s ease-out infinite}
@keyframes ringPulse{0%{transform:translate(-50%,-50%) scale(1); opacity:0.18}70%{transform:translate(-50%,-50%) scale(1.8); opacity:0}100%{opacity:0}}

.chat-box{position:fixed; right:86px; bottom:88px; width:360px; max-width:92vw; min-height:360px; max-height:80vh; background:linear-gradient(180deg, rgba(12,12,12,0.98), rgba(10,10,10,0.98)); border-radius:14px; box-shadow:0 40px 120px rgba(0,0,0,0.65); overflow:hidden; display:none; z-index:10040; opacity:0; transform:translateY(8px); transition:opacity .22s ease, transform .22s ease}
.chat-box.open{display:flex; flex-direction:column; opacity:1; transform:translateY(0)}
.chat-box header{display:flex; gap:12px; align-items:center; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,0.03); flex:0 0 auto}
/* messages area should expand to fill available space so header/footer never overlap */
.chat-box .messages{padding:12px; overflow:auto; display:flex; flex-direction:column; flex:1 1 auto; min-height:180px}
.chat-box .msg{margin:8px 0}
.chat-box .options{padding:10px 12px; flex:0 0 auto}
.chat-input{display:flex; gap:8px; align-items:center; padding:12px; border-top:1px solid rgba(255,255,255,0.03); flex:0 0 auto}

/* ensure inputs don't collapse the footer */
.chat-input input{min-height:40px}
.chat-input button{min-height:40px}

.chat-box .messages{padding:12px; max-height:420px; overflow:auto; display:flex; flex-direction:column}
.chat-box .msg{background:rgba(255,255,255,0.03); padding:10px 12px; border-radius:12px; margin:10px 0; color:var(--beige); max-width:82%}
.chat-box .msg.user{background:linear-gradient(90deg,var(--warm),#fff2cc); color:#111; align-self:flex-end}
.chat-box .options{display:flex; gap:8px; padding:10px 12px; border-top:1px solid rgba(255,255,255,0.02)}
.chat-box .opt{background:transparent; border:1px solid rgba(255,255,255,0.04); color:var(--beige); padding:8px 10px; border-radius:10px; cursor:pointer}
.chat-input{display:flex; gap:8px; align-items:center; padding:10px; border-top:1px solid rgba(255,255,255,0.03)}
.chat-input input{flex:1; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.04); color:var(--beige)}
.chat-input button{background:linear-gradient(90deg,var(--warm),#f6e6c6); color:#111; border:none; padding:10px 14px; border-radius:10px; cursor:pointer}
@media (max-width:480px){ .chat-fab{right:86px; bottom:14px; width:50px; height:50px} .chat-box{right:12px; left:12px; bottom:14px; width:auto; max-width:calc(100% - 24px)} }

/* Floating FAB group: align chat and WhatsApp side-by-side (external fallback) */
.fab-group{position:fixed; right:18px; bottom:20px; z-index:9005; display:flex; gap:12px; align-items:center}
.fab-group .chat-fab, .fab-group .whatsapp-fab{position:relative; right:auto; bottom:auto}
@media (max-width:480px){ .fab-group{right:14px; bottom:14px; gap:10px; flex-direction:column-reverse; align-items:flex-end} .fab-group .chat-fab, .fab-group .whatsapp-fab{width:50px;height:50px} }