/* THE BAEL — hero, slider, tree, mist and reveal animations */
.hero{position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden;background:var(--forest-deep);color:var(--cream)}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.6s var(--ease),visibility 1.6s}
.slide.is-active{opacity:1;visibility:visible;z-index:2}
.slide-content{position:absolute;inset:0;display:flex;align-items:center;z-index:10;pointer-events:none}
.slide-content .wrap{pointer-events:auto}
.slide-content h1,.slide-content h2{color:var(--cream);max-width:820px;font-size:clamp(2.6rem,6.4vw,5.8rem);text-shadow:0 4px 40px rgba(0,0,0,.25)}
.slide-content h1 em,.slide-content h2 em{font-style:italic;color:var(--lemon)}
.slide-content p{font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:540px;color:rgba(248,246,237,.88);margin-bottom:2.2rem}
.slide-content .eyebrow{color:var(--lemon)}
.slide .reveal-item{opacity:0;transform:translateY(30px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.slide.is-active .reveal-item{opacity:1;transform:none}
.slide.is-active .reveal-item:nth-child(2){transition-delay:.25s}
.slide.is-active .reveal-item:nth-child(3){transition-delay:.45s}
.slide.is-active .reveal-item:nth-child(4){transition-delay:.65s}

/* Slide 1: Bael tree scene */
.tree-scene{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 72% 30%,#f3eab8 0%,#c9c98f 22%,#6f7f4c 52%,#1d3f2c 82%,#10291D 100%)}
.tree-scene .backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;mix-blend-mode:luminosity;transform:scale(1.08)}
.tree-scene .sun{position:absolute;right:16%;top:12%;width:42vmin;height:42vmin;border-radius:50%;background:radial-gradient(circle,rgba(255,250,215,.85),rgba(255,245,190,.25) 40%,transparent 70%);filter:blur(6px);animation:sunPulse 9s ease-in-out infinite}
.tree-scene .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,41,29,.82) 0%,rgba(16,41,29,.45) 40%,rgba(16,41,29,0) 70%),linear-gradient(0deg,rgba(16,41,29,.85) 0%,transparent 35%);z-index:6}
.tree-svg{overflow:visible;position:absolute;right:-6%;bottom:-2%;height:108%;width:auto;max-width:none;z-index:3}
.tree-svg--back{right:auto;left:30%;height:62%;opacity:.35;filter:blur(2.5px);z-index:2}
.branch-sway{transform-box:fill-box;animation:sway 7s ease-in-out infinite alternate}
.branch-sway.b2{animation-duration:9s;animation-delay:-2s}
.branch-sway.b3{animation-duration:8s;animation-delay:-4s}
.branch-sway.b4{animation-duration:10s;animation-delay:-1s}
.canopy-sway{transform-box:fill-box;transform-origin:50% 100%;animation:canopy 11s ease-in-out infinite alternate}
.ground{position:absolute;left:0;right:0;bottom:0;height:18%;background:linear-gradient(0deg,#0d2318,rgba(13,35,24,0));z-index:4}

/* Leaves */
.leaf-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.leaf-layer--back{z-index:2;filter:blur(1.5px)}
.leaf-layer--mid{z-index:5}
.leaf-layer--front{z-index:8;filter:blur(.6px)}
.leaf{position:absolute;top:0;left:0;will-change:transform,opacity}
.leaf svg{display:block;width:100%;height:100%}

/* Mist */
.mist{position:absolute;left:0;width:300%;pointer-events:none;background-repeat:repeat-x;background-size:33.333% 100%;will-change:transform}
.mist--1{bottom:-4%;height:48%;z-index:4;opacity:.55;animation:mistDrift 70s linear infinite;background-image:radial-gradient(ellipse 40% 55% at 20% 70%,rgba(255,255,255,.75),transparent 70%),radial-gradient(ellipse 35% 45% at 65% 60%,rgba(255,255,255,.6),transparent 70%),radial-gradient(ellipse 30% 40% at 90% 75%,rgba(255,255,255,.55),transparent 70%)}
.mist--2{bottom:10%;height:40%;z-index:5;opacity:.35;animation:mistDrift 110s linear infinite reverse;background-image:radial-gradient(ellipse 45% 50% at 30% 50%,rgba(255,255,255,.7),transparent 70%),radial-gradient(ellipse 30% 40% at 78% 55%,rgba(255,255,255,.55),transparent 70%)}
.mist--3{bottom:-10%;height:36%;z-index:9;opacity:.45;filter:blur(8px);animation:mistDrift 55s linear infinite;background-image:radial-gradient(ellipse 50% 60% at 40% 80%,rgba(255,255,255,.8),transparent 70%),radial-gradient(ellipse 35% 50% at 85% 85%,rgba(255,255,255,.6),transparent 70%)}
.mist--4{top:28%;height:30%;z-index:3;opacity:.25;filter:blur(10px);animation:mistDrift 140s linear infinite;background-image:radial-gradient(ellipse 40% 50% at 50% 50%,rgba(255,255,255,.8),transparent 70%)}

/* Slide 2: rooms ken burns */
.room-slide{position:absolute;inset:0}
.room-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 2s var(--ease);transform:scale(1.12)}
.room-slide img.is-on{opacity:1;animation:kenburns 12s ease-out forwards}
.room-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,41,29,.85),rgba(16,41,29,.35) 55%,rgba(16,41,29,.15)),linear-gradient(0deg,rgba(16,41,29,.6),transparent 40%)}
.room-features{display:flex;gap:1.6rem;flex-wrap:wrap;margin:-1rem 0 2.2rem;padding:0;list-style:none;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lemon-soft)}
.room-features li::before{content:"✦ ";color:var(--lemon)}

/* Slider controls */
.slider-ui{position:absolute;z-index:20;left:0;right:0;bottom:6.5rem}
.slider-ui .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.dots{display:flex;gap:.8rem;align-items:center}
.dot{width:46px;height:2px;border:0;background:rgba(248,246,237,.35);cursor:pointer;padding:0;position:relative;overflow:hidden}
.dot::before{content:"";position:absolute;inset:0;background:var(--lemon);transform:scaleX(0);transform-origin:left}
.dot.is-active::before{animation:progress var(--slide-ms,8000ms) linear forwards}
.hero.is-paused .dot.is-active::before{animation-play-state:paused}
.dot::after{content:"";position:absolute;inset:-12px 0}
.slide-count{font-family:var(--serif);font-size:1.1rem;color:rgba(248,246,237,.8);margin-left:1rem}
.slide-count b{color:var(--lemon);font-weight:500}
.arrows{display:flex;gap:.6rem}
.arrow{width:54px;height:54px;border-radius:50%;border:1px solid rgba(248,246,237,.45);background:rgba(16,41,29,.2);color:var(--cream);display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px);transition:all .4s var(--ease)}
.arrow:hover{background:var(--lemon);color:var(--forest-deep);border-color:var(--lemon)}
.scroll-cue{position:absolute;z-index:20;left:50%;bottom:1.6rem;transform:translateX(-50%);font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(248,246,237,.7);display:flex;flex-direction:column;align-items:center;gap:.6rem}
.scroll-cue::after{content:"";width:1px;height:36px;background:linear-gradient(var(--lemon),transparent);animation:cue 2.2s ease-in-out infinite}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.12s}.reveal[data-delay="2"]{transition-delay:.24s}.reveal[data-delay="3"]{transition-delay:.36s}

/* Page transition */
.page-fade{position:fixed;inset:0;background:var(--forest-deep);z-index:1000;pointer-events:none;opacity:1;transition:opacity .7s var(--ease)}
body.is-loaded .page-fade{opacity:0}
body.is-leaving .page-fade{opacity:1}

@keyframes sway{from{transform:rotate(-1.2deg)}to{transform:rotate(1.4deg)}}
@keyframes canopy{from{transform:rotate(-.6deg) skewX(-.4deg)}to{transform:rotate(.7deg) skewX(.5deg)}}
@keyframes mistDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-33.333%,0,0)}}
@keyframes sunPulse{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes kenburns{from{transform:scale(1.12)}to{transform:scale(1.01)}}
@keyframes slowZoom{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes progress{to{transform:scaleX(1)}}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(215,232,74,.55),0 18px 40px -16px rgba(16,41,29,.7)}50%{box-shadow:0 0 0 14px rgba(215,232,74,0),0 18px 40px -16px rgba(16,41,29,.7)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes typing{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@keyframes popIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}