/* ============================================================
   PAWANSHAKTI — THE LEAP FOR THE SUN
   Light cosmic-orange system · one persistent sun, six orbits
   ============================================================ */
:root{
  --paper:    #FBF5EC;   /* warm dawn paper */
  --paper-2:  #F5EBDD;
  --peach:    #FFE0C4;
  --ink:      #1C110B;   /* warm near-black */
  --ink-soft: rgba(28,17,11,.8);
  --sun:      #F2620F;   /* cosmic orange core */
  --sun-hi:   #FF8A3D;
  --sun-deep: #C43E06;
  --flare:    #FFC98F;
  --dusk:     #23150D;   /* eclipse beat only */
  --rule:     rgba(196,62,6,.22);
  --ease-leap: cubic-bezier(.65,.02,.05,1);
  --disp: "Bricolage Grotesque", system-ui, sans-serif;
  --ser:  "Instrument Serif", Georgia, serif;
  --body: "Archivo", system-ui, sans-serif;
  --dev:  "Tiro Devanagari Sanskrit", serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--sun);color:var(--paper)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---------- utilities ---------- */
.eyebrow{
  font-family:var(--body);font-weight:600;
  font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--sun-deep);
}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.char{display:inline-block;will-change:transform}
.scene{position:relative;padding:22vh 6vw;z-index:3}
@media(max-width:768px){.scene{padding:15vh 6vw}}

/* ---------- grain ---------- */
.grain{
  position:fixed;inset:-50%;width:200%;height:200%;
  pointer-events:none;z-index:60;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- cursor ---------- */
.cur-dot,.cur-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:200;border-radius:50%}
.cur-dot{width:6px;height:6px;background:var(--ink)}
.cur-ring{width:38px;height:38px;border:1px solid var(--sun);opacity:.65}
@media(hover:none){.cur-dot,.cur-ring{display:none}}

/* ---------- dawn line (scroll progress) ---------- */
.dawn{position:fixed;left:24px;top:50%;transform:translateY(-50%);width:1px;height:32vh;background:var(--rule);z-index:90}
.dawn i{position:absolute;left:-3.5px;top:0;width:8px;height:8px;border-radius:50%;background:var(--sun);will-change:transform}
@media(max-width:768px){.dawn{display:none}}

/* ============================================================
   THE SUN — one body, whole journey (fixed, transform-scrubbed)
   ============================================================ */
.sun{
  position:fixed;top:50%;left:50%;z-index:2;
  width:36vmin;height:36vmin;margin:-18vmin 0 0 -18vmin;
  border-radius:50%;pointer-events:none;will-change:transform;
  background:radial-gradient(circle at 38% 32%, #FFE9C9 0%, var(--sun-hi) 34%, var(--sun) 62%, var(--sun-deep) 100%);
  box-shadow:0 0 8vmin 1vmin rgba(255,138,61,.38), 0 0 20vmin 4vmin rgba(242,98,15,.12);
  opacity:0;
}
.dusk{position:fixed;inset:0;background:var(--dusk);opacity:0;z-index:1;pointer-events:none}

/* ---------- preloader ---------- */
.pre{position:fixed;inset:0;background:var(--paper);z-index:150;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:30px}
.pre-horizon{position:relative;width:min(300px,60vw);height:104px;overflow:hidden}
.pre-horizon::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink)}
.pre-sun{position:absolute;left:50%;bottom:-64px;width:64px;height:64px;margin-left:-32px;object-fit:contain}
.pre-om{font-family:var(--dev);font-size:2.1rem;line-height:1;color:var(--sun);margin-bottom:-6px}
.pre-name{font-family:var(--disp);font-weight:500;font-size:.8rem;letter-spacing:.5em;text-transform:uppercase;color:var(--ink)}
.pre-dev{font-family:var(--dev);color:var(--sun-deep);font-size:1rem;letter-spacing:.2em}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:20px 6vw;opacity:0;transition:background .5s,backdrop-filter .5s}
nav.solid{background:rgba(251,245,236,.8);backdrop-filter:blur(12px)}
.nav-mark{display:inline-flex;align-items:center;line-height:0}
.nav-mark img{height:46px;width:auto;display:block}
.nav-links{display:flex;gap:34px}
.nav-links a{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;font-weight:500;position:relative;padding-bottom:4px}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--sun);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-leap)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
@media(max-width:768px){.nav-links a:not(:last-child){display:none}}

/* ============================================================
   SCENE 1 — FIRST LIGHT (hero)
   ============================================================ */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.hero-dev{
  position:absolute;top:49%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--dev);font-size:clamp(11rem,36vw,30rem);line-height:1;
  color:var(--sun);opacity:.06;pointer-events:none;user-select:none;will-change:transform;
}
.hero-eyebrow{margin-bottom:4.5vh}
.hero h1{
  font-family:var(--disp);font-weight:700;
  font-size:clamp(2.9rem,9vw,8.4rem);
  line-height:.98;letter-spacing:-.03em;
}
.hero h1 .l2{font-family:var(--ser);font-style:italic;font-weight:400;color:var(--sun-deep);letter-spacing:0}
.hero-sub{max-width:33em;margin-top:5vh;color:var(--ink-soft);font-size:clamp(1rem,1.35vw,1.14rem)}
.hero-cue{position:absolute;bottom:5vh;left:6vw;display:flex;align-items:center;gap:16px;color:var(--ink-soft);font-size:.6rem;letter-spacing:.44em;text-transform:uppercase;font-weight:500}
.hero-cue i{display:block;width:56px;height:1px;background:var(--sun);transform-origin:left}

/* ============================================================
   SCENE 2 — THE NAME (manifesto, scroll-fill)
   ============================================================ */
.mani{min-height:115vh;display:flex;align-items:center}
.mani p{
  font-family:var(--disp);font-weight:500;
  font-size:clamp(1.7rem,4.3vw,3.8rem);
  line-height:1.28;max-width:21em;letter-spacing:-.015em;
}
.mani .mw{opacity:.3;display:inline-block}
.mani .k{font-family:var(--ser);font-style:italic;font-weight:400;color:var(--sun-deep)}

/* ============================================================
   SCENE 3 — THE ORBIT (pinned · signature)
   ============================================================ */
.orbit{min-height:100svh;padding:0;overflow:hidden;z-index:3}
.orbit-head{position:absolute;top:11vh;left:6vw;z-index:5}
.orbit-head h2{font-family:var(--disp);font-weight:650;font-size:clamp(1.7rem,3.2vw,2.8rem);line-height:1.08;letter-spacing:-.02em;margin-top:12px}
.o-visual{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.o-svg{width:min(92vmin,760px);height:auto;overflow:visible}
.o-ring{fill:none;stroke:rgba(28,17,11,.18);stroke-width:1}
.pl{transform-box:fill-box;transform-origin:center;transform:scale(0);will-change:transform}
.halo{fill:none;stroke:var(--sun);stroke-width:2}
.o-stage{position:absolute;left:6vw;bottom:9vh;width:min(430px,88vw);min-height:150px;z-index:5}
.svc{position:absolute;inset:0;opacity:0;visibility:hidden}
.svc .num{font-weight:600;font-size:.7rem;letter-spacing:.4em;color:var(--sun-deep);margin-bottom:12px}
.svc h3{font-family:var(--disp);font-weight:650;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.05;letter-spacing:-.015em}
.svc p{margin-top:12px;color:var(--ink-soft);font-size:1rem;max-width:26em}
@media(max-width:768px){
  .orbit-head{top:9vh}
  .o-visual{align-items:flex-start;padding-top:22vh}
  .o-svg{width:min(88vw,420px)}
  .o-stage{bottom:7vh}
}

/* ============================================================
   SCENE 4 — THE ECLIPSE (tagline · dusk beat)
   ============================================================ */
.eclipse{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden}
.eclipse .eyebrow{margin-bottom:5vh;transition:color .6s;position:relative;z-index:2}
.eclipse.lit .eyebrow{color:var(--flare)}
/* the invocation — Hanuman dhyana shloka (Pavan/wind) */
.shloka{
  font-family:var(--dev);font-weight:600;
  -webkit-text-stroke:.4px currentColor;
  font-size:clamp(1.5rem,4.2vw,3.3rem);line-height:1.6;
  max-width:16em;letter-spacing:.015em;
  color:var(--sun-deep);transition:color .6s;position:relative;z-index:2;
}
.eclipse.lit .shloka{color:#FFE7C4;text-shadow:0 2px 46px rgba(255,201,143,.45)}
.shloka-en{
  font-family:var(--ser);font-style:italic;font-size:clamp(1rem,1.9vw,1.5rem);
  color:var(--ink-soft);margin-top:3.2vh;max-width:24em;
  transition:color .6s;position:relative;z-index:2;
}
.eclipse.lit .shloka-en{color:#FFEFD8;text-shadow:0 1px 22px rgba(46,15,0,.5)}
.eclipse h2{
  font-family:var(--ser);font-style:italic;font-weight:400;
  font-size:clamp(1.6rem,4.2vw,3.4rem);line-height:1.24;max-width:15em;
  color:var(--ink);transition:color .6s;margin-top:7vh;position:relative;z-index:2;
}
.eclipse.lit h2{color:#FFF3E2;text-shadow:0 2px 40px rgba(0,0,0,.35)}
/* surya-yantra mandala (draws behind the vow, brightens at eclipse peak) */
.yantra{position:absolute;top:50%;left:50%;width:min(118vmin,880px);transform:translate(-50%,-50%);opacity:.1;pointer-events:none;z-index:1;transition:opacity .7s}
.yantra svg{width:100%;height:auto;overflow:visible;will-change:transform}
.yantra circle,.yantra line{fill:none;stroke:var(--flare);stroke-width:1;stroke-linecap:round}
.eclipse.lit .yantra{opacity:.32}

/* ============================================================
   SCENE 5 — THE VENTURES
   ============================================================ */
.vent-head h2{font-family:var(--disp);font-weight:650;font-size:clamp(1.9rem,3.6vw,3.2rem);letter-spacing:-.02em;margin-top:14px}
.vent-grid{display:grid;grid-template-columns:1fr 1fr;gap:3vw;margin-top:8vh}
.vcard{
  position:relative;background:var(--paper-2);border-top:2px solid var(--sun);
  padding:6vh 3vw 5vh;will-change:transform;
}
.vcard .eyebrow{color:var(--sun-deep)}
.vcard h3{font-family:var(--disp);font-weight:700;font-size:clamp(2rem,3.8vw,3.4rem);letter-spacing:-.025em;margin-top:2.4vh}
.vcard p{margin-top:2vh;color:var(--ink-soft);max-width:26em}
.vcard .go{display:inline-block;margin-top:3.4vh;font-weight:600;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--sun-deep)}
@media(max-width:768px){.vent-grid{grid-template-columns:1fr;gap:6vh}}

/* ============================================================
   SCENE 6 — VOWS + MARQUEE
   ============================================================ */
.vows{padding-top:24vh}
.vow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5vw;margin-top:8vh}
.vow{border-top:1px solid var(--rule);padding-top:3.4vh}
.vow h3{font-family:var(--disp);font-weight:650;font-size:1.4rem;letter-spacing:-.01em}
.vow p{margin-top:1.5vh;color:var(--ink-soft);font-size:1rem}
@media(max-width:768px){.vow-grid{grid-template-columns:1fr;gap:6vh}}
.marquee{margin-top:20vh;overflow:hidden;display:grid;gap:1.2vh;transform:rotate(-1.4deg)}
.mq-row{white-space:nowrap}
.mq-inner{display:inline-block;font-family:var(--disp);font-weight:700;font-size:clamp(2.8rem,7.6vw,6.6rem);line-height:1.15;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.4px var(--sun-deep);will-change:transform}
.mq-inner b{color:var(--sun);-webkit-text-stroke:0;font-family:var(--ser);font-style:italic;font-weight:400}
.mq-inner b.dv{font-family:var(--dev);font-style:normal;color:var(--sun)}

/* ============================================================
   SCENE 7 — HIGH NOON (finale)
   ============================================================ */
.fin{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.fin .eyebrow{margin-bottom:4vh}
.fin h2{font-family:var(--disp);font-weight:750;font-size:clamp(3.4rem,12vw,10.5rem);line-height:.98;letter-spacing:-.035em}
.fin h2 em{font-family:var(--ser);font-style:italic;font-weight:400;letter-spacing:0}
.fin-actions{margin-top:6.5vh;display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:center}
.fin-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;position:relative;
  font-weight:600;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--paper);background:linear-gradient(120deg,var(--sun-hi),var(--sun) 55%,var(--sun-deep));
  padding:22px 46px;border:1.5px solid transparent;border-radius:999px;will-change:transform;
  box-shadow:0 14px 40px rgba(242,98,15,.35);
}
.fin-btn--wa{
  color:var(--sun-deep);background:none;box-shadow:none;
  border-color:var(--sun);
  transition:background .3s,color .3s,border-color .3s,box-shadow .3s;
}
.fin-btn--wa:hover{color:var(--paper);background:var(--sun);border-color:var(--sun);box-shadow:0 14px 40px rgba(242,98,15,.28)}
.wa-ico{width:1.25em;height:1.25em;fill:currentColor;flex:none}
.fin-mail{margin-top:3.2vh;color:var(--ink-soft);font-size:.8rem;letter-spacing:.2em}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);padding:6vh 6vw;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;color:var(--ink-soft);font-size:.8rem;letter-spacing:.12em;position:relative;z-index:3;background:var(--paper)}
footer .tag{font-family:var(--ser);font-style:italic;color:var(--sun-deep);letter-spacing:.02em;font-size:.9rem}
footer .tag .dv-om{font-family:var(--dev);font-style:normal;color:var(--sun);margin-right:.35em}

/* ---------- reduced motion / no-js ---------- */
html.no-motion *{animation:none!important;transition:none!important}
html.no-motion .pre{display:none}
html.no-motion nav{opacity:1}
html.no-motion .sun{opacity:.9;transform:translate(28vw,-30vh) scale(.5)}
html.no-motion .svc{position:static;opacity:1;visibility:visible;margin-top:4vh}
html.no-motion .o-stage{position:relative;inset:auto;margin:52vh auto 8vh;left:auto;bottom:auto}
html.no-motion .pl{transform:scale(1)}
html.no-motion .mani .mw{opacity:1}
html.no-motion .yantra{opacity:.16}
@media(prefers-reduced-motion:reduce){html:not(.no-motion) .pre{display:none}}