/* ═══════════════════════════════════════════════════════════════
   home-v7.css — 3D homepage
   A pinned WebGL flight up the Garhwal valley past four shrine
   beacons, then the v6 light page on solid ground beneath it.
   Everything degrades: body.y3d-off gets a static gradient hero.
   ═══════════════════════════════════════════════════════════════ */

.v7{
  --ink:#080d10;
  --acc:#ff7a00;
  --acc-2:#ff3d2e;
  --snow:#f7fafc;
  --t:.3s;
  --ease:cubic-bezier(.22,1,.36,1);
  --ui:'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --pad:clamp(1.15rem,4vw,2.5rem);
}

/* ══════════ the flight ══════════ */
.v7 .y3d-wrap{position:relative;height:420vh;background:#0d1b2b}
@media(max-width:860px){.v7 .y3d-wrap{height:300vh}}

.v7 .y3d{position:sticky;top:0;height:100svh;overflow:hidden;
  background:linear-gradient(180deg,#0d1b2b 0%,#1b2f45 58%,#3a4a5c 100%)}
.v7 .y3d canvas{display:block;width:100%;height:100%;opacity:0;
  transition:opacity 1.1s var(--ease)}
.v7.y3d-on .y3d canvas{opacity:1}

/* static stand-in when WebGL is unavailable or motion is reduced */
.v7 .y3d::after{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity .6s var(--ease);
  background:
    radial-gradient(120% 70% at 22% 8%,rgba(255,201,138,.4),transparent 62%),
    linear-gradient(180deg,#0d1b2b 0%,#26405c 52%,#7d8fa3 100%)}
.v7.y3d-off .y3d::after{opacity:1}
.v7.y3d-off .y3d-scroll-cue{display:none}

/* hero copy sits over the flight */
.v7 .y3d-copy{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  justify-content:center;pointer-events:none}
.v7 .y3d-copy .in{max-width:1280px;margin:0 auto;width:100%;
  padding-left:var(--pad);padding-right:var(--pad)}
.v7 .y3d-kick{display:inline-flex;align-items:center;gap:.6rem;font-size:.66rem;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#ffcf9a;
  margin-bottom:1.4rem;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.v7 .y3d-kick::before{content:"";width:24px;height:1px;background:var(--acc)}
.v7 .y3d-copy h1{font-family:var(--ui);font-size:clamp(2.5rem,7.6vw,5.8rem);font-weight:700;
  line-height:.98;letter-spacing:-.042em;margin:0;color:#fff;max-width:15ch;
  text-wrap:balance;text-shadow:0 3px 34px rgba(0,0,0,.5)}
.v7 .y3d-copy h1 em{font-style:normal;color:var(--acc)}
.v7 .y3d-sub{margin:1.5rem 0 0;color:rgba(255,255,255,.84);max-width:44ch;
  font-size:clamp(.98rem,1.5vw,1.1rem);line-height:1.68;
  text-shadow:0 1px 16px rgba(0,0,0,.62)}
.v7 .y3d-act{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:2.2rem;pointer-events:auto}
.v7 .y3d-b{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--ui);font-size:.88rem;font-weight:600;padding:.95rem 1.8rem;
  border-radius:999px;border:1px solid rgba(255,255,255,.44);color:#fff;
  text-decoration:none;background:rgba(8,13,16,.22);backdrop-filter:blur(6px);
  transition:background var(--t) var(--ease),color var(--t) var(--ease),
             border-color var(--t) var(--ease)}
.v7 .y3d-b:hover{background:#fff;color:var(--ink);border-color:#fff}
.v7 .y3d-b-acc{background:var(--acc);border-color:var(--acc)}
.v7 .y3d-b-acc:hover{background:var(--acc-2);border-color:var(--acc-2);color:#fff}

.v7 .y3d-scroll-cue{position:absolute;left:50%;bottom:clamp(1.4rem,4vh,2.6rem);
  transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;
  align-items:center;gap:.6rem;font-size:.6rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.66);pointer-events:none}
.v7 .y3d-scroll-cue span{width:1px;height:38px;background:rgba(255,255,255,.5);
  animation:y7drop 2s var(--ease) infinite}
@keyframes y7drop{0%,100%{transform:scaleY(.35);transform-origin:top}
                  50%{transform:scaleY(1);transform-origin:top}}

/* beacon labels, positioned from 3D each frame */
.v7 #y3d-labels{position:absolute;inset:0;z-index:2;pointer-events:none}
.v7 .y3d-label{position:absolute;top:0;left:0;opacity:0;
  transition:opacity .45s var(--ease);
  padding:.5rem .8rem;border-radius:999px;white-space:nowrap;
  background:rgba(8,13,16,.62);backdrop-filter:blur(7px);
  border:1px solid rgba(255,122,0,.5)}
.v7 .y3d-label b{display:block;font-family:var(--ui);font-size:.82rem;font-weight:600;
  color:#fff;letter-spacing:-.01em;line-height:1.2}
.v7 .y3d-label span{display:block;font-family:var(--ui);font-size:.62rem;font-weight:600;
  letter-spacing:.14em;color:var(--acc);margin-top:.12rem}
.v7.y3d-off #y3d-labels{display:none}

/* the seam into daylight */
.v7 .y3d-seam{position:relative;z-index:5;height:clamp(4rem,10vh,7rem);
  background:linear-gradient(180deg,rgba(122,140,158,0) 0%,#f8f8f8 88%)}