/* SHOONYAKA — Enhanced Mobile-First Cinematic CSS */
:root{
  --gold:#f0c060;--gold2:#d4900a;--gold3:#ffe8a0;
  --deepgreen:#071a07;--fg:#0a2a0a;
  --white:#f8f4ee;--cream:#ede0c4;--text:#e8dcc8;
  --serif:'Cormorant Garamond','Georgia',serif;
  --sans:'Inter',sans-serif;
  --deva:'Noto Serif Devanagari','Noto Sans Devanagari',serif;
  --r8:8px;--r20:20px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{background:#020c02;color:var(--text);font-family:var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased;}
img,svg{max-width:100%;height:auto;}

/* LOADER */
#loader{position:fixed;inset:0;z-index:9999;background:#020c02;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transition:opacity 0.9s,visibility 0.9s;}
#loader.hide{opacity:0;visibility:hidden;pointer-events:none;}
.loader-brand{font-family:var(--serif);font-size:clamp(1.8rem,6vw,3rem);color:var(--gold);letter-spacing:0.35em;opacity:0;animation:fadeUp 1s ease 0.4s forwards;}
.loader-sub{font-size:clamp(0.65rem,2vw,0.8rem);color:var(--cream);letter-spacing:0.4em;text-transform:uppercase;opacity:0;animation:fadeUp 0.8s ease 0.9s forwards;}
.loader-bar{width:clamp(140px,40vw,200px);height:1px;background:rgba(240,192,96,0.2);overflow:hidden;}
.loader-bar::after{content:'';display:block;height:100%;width:0;background:var(--gold);animation:barFill 1.4s ease 0.8s forwards;}
@keyframes barFill{to{width:100%;}}
@keyframes fadeUp{to{opacity:1;transform:translateY(0);}from{opacity:0;transform:translateY(16px);}}

/* CANVAS */
#bgCanvas{position:fixed;inset:0;z-index:0;pointer-events:none;}

/* PARALLAX SCENE */
#scene{position:fixed;inset:0;z-index:1;overflow:hidden;pointer-events:none;}
.pl{position:absolute;bottom:0;left:0;width:120%;background-repeat:no-repeat;background-position:bottom center;background-size:cover;will-change:transform;}
#lmt{background-image:url('assets/mountains.svg');background-size:110% auto;bottom:32%;height:60%;opacity:0.82;}
#lmf{bottom:28%;height:28%;background:linear-gradient(to top,rgba(110,150,90,0.1) 0%,transparent 100%);filter:blur(10px);}
#lfb{background-image:url('assets/forest-back.svg');background-size:106% auto;bottom:18%;height:75%;opacity:0.9;}
#lmm{bottom:20%;height:22%;background:linear-gradient(to top,rgba(130,170,100,0.09) 0%,transparent 100%);filter:blur(14px);}
#lff{background-image:url('assets/forest-front.svg');background-size:110% auto;bottom:0;height:80%;}
#lrays{bottom:0;height:100%;background:radial-gradient(ellipse 55% 75% at 50% 18%,rgba(240,192,96,0.13) 0%,rgba(200,140,20,0.04) 42%,transparent 68%);animation:rayP 7s ease-in-out infinite alternate;}
#lgrd{bottom:0;height:30%;background:linear-gradient(to top,rgba(18,38,18,0.96) 0%,rgba(8,26,8,0.55) 45%,transparent 100%);}
@keyframes rayP{from{opacity:0.55;}to{opacity:1;}}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:clamp(12px,3vw,20px) clamp(16px,5vw,40px);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to bottom,rgba(2,12,2,0.72) 0%,transparent 100%);transition:background 0.4s,backdrop-filter 0.4s;}
nav.scrolled{background:rgba(3,10,3,0.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(240,192,96,0.1);}
.nav-logo{font-family:var(--serif);font-size:clamp(1.1rem,3.5vw,1.5rem);color:var(--gold);letter-spacing:0.18em;text-decoration:none;font-weight:700;}
.nav-links{display:flex;gap:clamp(16px,3vw,32px);align-items:center;}
.nav-links a{color:var(--cream);text-decoration:none;font-size:clamp(0.75rem,2vw,0.85rem);letter-spacing:0.1em;text-transform:uppercase;opacity:0.75;transition:opacity 0.3s,color 0.3s;}
.nav-links a:hover{opacity:1;color:var(--gold);}
.nav-pill{padding:7px clamp(12px,3vw,20px);border:1px solid rgba(240,192,96,0.35);border-radius:30px;transition:all 0.3s;}
.nav-pill:hover{background:rgba(240,192,96,0.1);border-color:var(--gold);}
.sound-btn{background:none;border:1px solid rgba(240,192,96,0.28);color:var(--cream);cursor:pointer;padding:7px clamp(10px,2vw,14px);border-radius:20px;font-size:clamp(0.7rem,2vw,0.8rem);letter-spacing:0.06em;transition:all 0.3s;white-space:nowrap;}
.sound-btn:hover,.sound-btn.active{border-color:var(--gold);background:rgba(240,192,96,0.08);color:var(--gold);}
/* hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;z-index:101;padding:4px;}
.hamburger span{display:block;width:22px;height:1.5px;background:var(--cream);transition:all 0.3s;}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}
/* mobile nav overlay */
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(1,6,1,0.97);z-index:99;flex-direction:column;align-items:center;justify-content:center;gap:36px;}
.nav-overlay.open{display:flex;}
.nav-overlay a,.nav-overlay button{font-size:1.3rem;letter-spacing:0.15em;}

/* SECTIONS */
section{position:relative;z-index:10;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px clamp(16px,5vw,48px) 40px;}

/* HERO */
#hero{text-align:center;padding-top:0;justify-content:center;}
.hero-inner{position:relative;z-index:20;}
.hero-tag{font-family:var(--serif);font-size:clamp(0.65rem,2vw,0.9rem);color:var(--gold);letter-spacing:0.45em;text-transform:uppercase;opacity:0;transform:translateY(18px);animation:fadeUp 1s ease 1.9s forwards;margin-bottom:12px;}
.hero-title{font-family:var(--serif);font-size:clamp(3.5rem,13vw,9rem);font-weight:300;color:var(--white);letter-spacing:0.14em;line-height:1;opacity:0;transform:translateY(28px);animation:fadeUp 1.2s ease 2.1s forwards;text-shadow:0 0 80px rgba(240,192,96,0.28),0 0 160px rgba(240,192,96,0.1);}
.hero-title em{color:var(--gold);font-style:normal;}
.hero-sub{font-family:var(--serif);font-size:clamp(0.9rem,2.8vw,1.5rem);color:var(--cream);letter-spacing:0.18em;font-style:italic;opacity:0;transform:translateY(18px);animation:fadeUp 1s ease 2.4s forwards;margin-top:14px;}
.hero-deva{font-family:var(--deva);font-size:clamp(1.8rem,5vw,3.2rem);color:var(--gold);text-shadow:0 0 40px rgba(240,192,96,0.55);opacity:0;transform:translateY(18px);animation:fadeUp 1s ease 2.7s forwards;margin-top:20px;letter-spacing:0.05em;}
.scroll-cue{position:absolute;bottom:clamp(24px,5vh,44px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;animation:fadeUp 1s ease 3.3s forwards;cursor:pointer;}
.scroll-cue span{font-size:0.65rem;letter-spacing:0.35em;text-transform:uppercase;color:var(--gold);opacity:0.65;}
.scroll-line{width:1px;height:48px;background:linear-gradient(to bottom,var(--gold),transparent);animation:scrollPulse 2.2s ease-in-out infinite;}
@keyframes scrollPulse{0%,100%{transform:scaleY(1);opacity:0.65;}50%{transform:scaleY(1.35);opacity:1;}}

/* CURSOR GLOW */
.cursor-glow{position:fixed;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(240,192,96,0.06) 0%,transparent 70%);pointer-events:none;z-index:5;transform:translate(-50%,-50%);transition:transform 0.1s;display:none;}
@media(pointer:fine){.cursor-glow{display:block;}}

/* MONK SECTION */
#monk-section{gap:clamp(20px,4vh,36px);}
.monk-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;}
.monk-rings{position:absolute;inset:-30px;border-radius:50%;pointer-events:none;}
.monk-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(240,192,96,0.25);animation:ringBreath 4s ease-in-out infinite;}
.monk-ring:nth-child(2){inset:-14px;border-color:rgba(240,192,96,0.15);animation-delay:0.6s;}
.monk-ring:nth-child(3){inset:-28px;border-color:rgba(240,192,96,0.08);animation-delay:1.2s;}
@keyframes ringBreath{0%,100%{transform:scale(1);opacity:0.5;}50%{transform:scale(1.1);opacity:1;}}
.monk-img{width:clamp(200px,35vw,300px);filter:drop-shadow(0 0 28px rgba(240,192,96,0.45));animation:monkFloat 6s ease-in-out infinite;position:relative;z-index:2;cursor:pointer;transition:filter 0.3s;}
.monk-img:hover{filter:drop-shadow(0 0 46px rgba(240,192,96,0.7));}
@keyframes monkFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
/* clicking monk triggers ripple */
.monk-ripple{position:absolute;border-radius:50%;border:2px solid rgba(240,192,96,0.6);width:0;height:0;top:50%;left:50%;transform:translate(-50%,-50%);animation:rippleOut 1.2s ease forwards;pointer-events:none;}
@keyframes rippleOut{to{width:260px;height:260px;opacity:0;border-color:rgba(240,192,96,0);}}

.sec-title{font-family:var(--serif);font-size:clamp(1.6rem,5vw,3rem);color:var(--white);font-weight:300;letter-spacing:0.1em;text-align:center;}
.sec-sub{font-family:var(--serif);font-size:clamp(0.85rem,2.2vw,1.1rem);color:var(--cream);opacity:0.72;letter-spacing:0.06em;font-style:italic;max-width:480px;text-align:center;line-height:1.9;}

/* BREATHING */
.breath-wrap{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,3vh,22px);margin-top:8px;}
.breath-ring-wrap{position:relative;width:clamp(130px,28vw,165px);height:clamp(130px,28vw,165px);display:flex;align-items:center;justify-content:center;}
.br{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(240,192,96,0.28);animation:ringBreath 4s ease-in-out infinite;}
.br:nth-child(2){inset:12px;border-color:rgba(240,192,96,0.18);animation-delay:0.5s;}
.br:nth-child(3){inset:24px;border-color:rgba(240,192,96,0.1);animation-delay:1s;}
.breath-core{width:clamp(72px,15vw,85px);height:clamp(72px,15vw,85px);border-radius:50%;background:radial-gradient(circle,rgba(240,192,96,0.22),rgba(240,192,96,0.04));border:1px solid rgba(240,192,96,0.45);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;z-index:2;animation:coreBreath 8s ease-in-out infinite;}
@keyframes coreBreath{0%{transform:scale(0.85);}38%{transform:scale(1.18);}50%{transform:scale(1.18);}75%{transform:scale(0.85);}100%{transform:scale(0.85);}}
.bc-num{font-family:var(--serif);font-size:clamp(1.5rem,5vw,1.9rem);color:var(--gold);font-weight:300;line-height:1;}
.bc-lbl{font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);}
.breath-guide{font-family:var(--serif);font-size:clamp(0.9rem,2.5vw,1.05rem);color:var(--cream);font-style:italic;letter-spacing:0.06em;min-height:26px;text-align:center;}
.btn-ghost{background:none;border:1px solid rgba(240,192,96,0.3);color:var(--cream);padding:10px clamp(20px,5vw,30px);border-radius:30px;cursor:pointer;font-size:clamp(0.72rem,2vw,0.8rem);letter-spacing:0.15em;text-transform:uppercase;transition:all 0.3s;font-family:var(--sans);}
.btn-ghost:hover,.btn-ghost.active{border-color:var(--gold);background:rgba(240,192,96,0.09);color:var(--gold);}

/* SHOONYA SECTION */
#shoonya-sec{position:relative;min-height:100svh;overflow:hidden;background:linear-gradient(to bottom,transparent 0%,rgba(0,4,0,0.82) 35%,#000300 100%);}
#pCanvas{position:absolute;inset:0;z-index:5;pointer-events:none;}
.shoonya-inner{position:relative;z-index:10;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;}
.sh-text{font-family:var(--deva);font-size:clamp(4rem,14vw,11rem);color:var(--gold);text-shadow:0 0 55px rgba(240,192,96,0.65),0 0 110px rgba(240,192,96,0.25);opacity:0;transition:opacity 1.8s ease;letter-spacing:0.04em;line-height:1;}
.sh-sub{font-family:var(--serif);font-size:clamp(0.9rem,3vw,1.8rem);color:var(--cream);opacity:0;transition:opacity 1.8s ease 0.6s;letter-spacing:0.3em;text-transform:uppercase;}

/* PROJECTS */
#projects{background:linear-gradient(to bottom,#000300 0%,var(--deepgreen) 50%,#030f03 100%);gap:clamp(20px,4vh,36px);}
.path-lbl{font-family:var(--serif);font-size:clamp(0.65rem,2vw,0.85rem);color:var(--gold);letter-spacing:0.5em;text-transform:uppercase;opacity:0.75;}
.gate-wrap{max-width:500px;width:100%;margin-top:clamp(20px,4vh,40px);}
.project-gate{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,2.5vh,18px);padding:clamp(32px,6vw,55px) clamp(24px,5vw,46px);background:rgba(8,22,8,0.58);border:1px solid rgba(240,192,96,0.2);border-radius:var(--r8);text-decoration:none;cursor:pointer;transition:all 0.45s ease;overflow:hidden;position:relative;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.project-gate::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(240,192,96,0.07) 0%,transparent 60%);opacity:0;transition:opacity 0.4s;}
.project-gate:hover{border-color:rgba(240,192,96,0.52);transform:translateY(-10px);box-shadow:0 24px 64px rgba(0,0,0,0.55),0 0 44px rgba(240,192,96,0.12);}
.project-gate:hover::before{opacity:1;}
.gate-arch{width:clamp(56px,12vw,74px);height:clamp(64px,14vw,84px);border:2px solid rgba(240,192,96,0.38);border-bottom:none;border-radius:60px 60px 0 0;display:flex;align-items:center;justify-content:center;transition:border-color 0.3s;}
.project-gate:hover .gate-arch{border-color:var(--gold);}
.gate-icon{font-size:clamp(1.6rem,4vw,2.2rem);}
.gate-name{font-family:var(--serif);font-size:clamp(1.3rem,4vw,1.9rem);color:var(--white);font-weight:400;letter-spacing:0.06em;text-align:center;}
.gate-desc{font-size:clamp(0.78rem,2vw,0.9rem);color:var(--cream);opacity:0.62;letter-spacing:0.04em;line-height:1.7;text-align:center;max-width:380px;}
.gate-url{font-family:'Courier New',monospace;font-size:clamp(0.68rem,1.8vw,0.76rem);color:var(--gold);opacity:0.58;transition:opacity 0.3s;}
.project-gate:hover .gate-url{opacity:1;}
.gate-btn{margin-top:4px;padding:8px clamp(18px,4vw,26px);border:1px solid rgba(240,192,96,0.28);border-radius:30px;font-size:clamp(0.68rem,1.8vw,0.76rem);letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);transition:all 0.3s;}
.project-gate:hover .gate-btn{background:rgba(240,192,96,0.1);border-color:var(--gold);}
/* leaf spawn */
.gate-leaf{position:absolute;pointer-events:none;opacity:0;font-size:clamp(0.8rem,2vw,1.1rem);animation:leafFall 3.2s ease-in forwards;}
@keyframes leafFall{0%{opacity:0.9;transform:translateY(-10px) rotate(0deg);}100%{opacity:0;transform:translateY(130px) rotate(200deg);}}

/* FOOTER */
#footer{position:relative;min-height:55vh;padding:clamp(60px,10vh,90px) clamp(16px,5vw,48px) clamp(24px,5vh,40px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(14px,3vh,22px);overflow:hidden;background:linear-gradient(to bottom,#030f03 0%,#010401 100%);}
#starCanvas{position:absolute;inset:0;z-index:0;}
.f-logo{position:relative;z-index:2;font-family:var(--serif);font-size:clamp(1.5rem,5vw,2rem);color:var(--gold);letter-spacing:0.22em;font-weight:300;}
.f-div{position:relative;z-index:2;width:50px;height:1px;background:linear-gradient(to right,transparent,var(--gold),transparent);}
.f-quote{position:relative;z-index:2;font-family:var(--serif);font-size:clamp(0.9rem,2.5vw,1.4rem);color:var(--cream);opacity:0;font-style:italic;letter-spacing:0.04em;max-width:520px;line-height:1.85;transition:opacity 1.6s ease;}
.f-links{position:relative;z-index:2;display:flex;gap:clamp(14px,3vw,24px);flex-wrap:wrap;justify-content:center;}
.f-links a{color:var(--cream);opacity:0.45;font-size:clamp(0.7rem,2vw,0.8rem);letter-spacing:0.1em;text-decoration:none;text-transform:uppercase;transition:opacity 0.3s,color 0.3s;}
.f-links a:hover{opacity:1;color:var(--gold);}
.f-copy{position:relative;z-index:2;font-size:clamp(0.65rem,1.8vw,0.72rem);color:var(--cream);opacity:0.25;letter-spacing:0.1em;}

/* REVEAL */
.reveal{opacity:0;transform:translateY(36px);transition:opacity 0.9s ease,transform 0.9s ease;}
.reveal.visible{opacity:1;transform:none;}
.rd1{transition-delay:0.15s;}.rd2{transition-delay:0.3s;}.rd3{transition-delay:0.45s;}

/* SCROLLBAR */
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:#010501;}
::-webkit-scrollbar-thumb{background:rgba(240,192,96,0.28);border-radius:2px;}
::-webkit-scrollbar-thumb:hover{background:rgba(240,192,96,0.55);}

/* MOBILE */
@media(max-width:768px){
  .nav-links{display:none;}
  .hamburger{display:flex;}
  section{padding:70px 18px 36px;}
  .hero-title{letter-spacing:0.08em;}
  .monk-img{width:clamp(180px,55vw,240px);}
}
@media(max-width:400px){
  .hero-title{font-size:clamp(3rem,18vw,4rem);}
}