/* homepage intro: "go higher" (see assets/js/gx-dive.js) */
/* sticky needs a non-scrolling ancestor: clip (not hidden) the page sideways */
body.gx-home { overflow-x: clip; }
.gx-dive { position: relative; height: 560vh; background: #120A1F; }
.dv-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.dv-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dv-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(34,10,46,.62) 0%, rgba(34,10,46,.2) 42%, rgba(34,10,46,0) 60%), linear-gradient(180deg, rgba(34,10,46,0) 70%, rgba(34,10,46,.5)); }
.dv-layer { position: absolute; z-index: 3; left: 0; right: 0; top: 50%; translate: 0 -50%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); pointer-events: none; will-change: opacity, transform; }
.dv-layer > div { max-width: 560px; pointer-events: auto; }
.dv-layer.r > div { margin-left: auto; text-align: right; }
.dv-k { margin: 0 0 14px; font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--c, #C6F432); text-shadow: 0 1px 12px rgba(34,10,46,.6); }
.dv-hero h1 { margin: 0; font: 400 clamp(64px, 8vw, 132px)/.84 var(--display); text-transform: uppercase; letter-spacing: .005em; color: #FFF4EA; text-shadow: 0 2px 30px rgba(60,14,60,.45); }
.dv-hero h1 em { font-style: normal; color: #C6F432; }
.dv-hero p.l { margin: 22px 0 0; max-width: 470px; font-size: clamp(17px, 1.5vw, 20px); color: #FBE3D6; text-shadow: 0 1px 14px rgba(60,14,60,.5); }
.dv-hero .gx-cta { margin-top: 26px; }
.dv-t-neon .dv-hero .gx-btn:not(.ghost) { background: #C6F432; color: #0A0B10; }
.dv-t-neon .dv-hero .gx-btn:not(.ghost):hover { box-shadow: 0 10px 30px rgba(242,107,29,.3); }
.dv-hero .gx-btn.ghost { background: rgba(34,10,46,.35); color: #FFF4EA; border-color: rgba(255,244,234,.4); }
.dv-world h2 { margin: 0; font: 400 clamp(64px, 9vw, 150px)/.84 var(--display); text-transform: uppercase; color: var(--c); text-shadow: 0 0 46px color-mix(in srgb, var(--c) 45%, transparent); }
.dv-world p { margin: 16px 0 0; font-size: clamp(17px, 1.4vw, 20px); color: #F3E6EE; text-shadow: 0 1px 14px rgba(34,10,46,.7); }
.dv-world a { display: inline-flex; gap: 12px; align-items: center; margin-top: 20px; padding: 12px 20px; border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); border-radius: 999px; color: #EEF4FA; text-decoration: none; font-size: 16px; background: rgba(34,10,46,.4); backdrop-filter: blur(6px); }
.dv-world a:hover { background: color-mix(in srgb, var(--c) 22%, transparent); }
.dv-world a b { color: var(--c); font-weight: 700; }
.dv-end { top: 24%; }
.dv-end > div { max-width: none; text-align: center; }
.dv-end h2 { margin: 0; font: 400 clamp(56px, 7vw, 110px)/.9 var(--display); color: #FFF4EA; text-transform: uppercase; }
.dv-end a { display: inline-block; margin-top: 18px; color: #C6F432; font-size: 18px; text-decoration: none; border-bottom: 1px solid currentColor; }
.dv-scroll { position: absolute; z-index: 3; left: 50%; bottom: 34px; translate: -50% 0; font-size: 12.5px; letter-spacing: .3em; text-transform: uppercase; color: #FFE6D8; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.dv-scroll i { width: 1px; height: 40px; background: linear-gradient(#FFE6D8, transparent); animation: dvCue 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes dvCue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.dv-gauge { position: absolute; z-index: 3; right: var(--gutter); bottom: 30px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; color: #FFE6D8; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; pointer-events: none; }
.dv-gauge b { font: 400 34px/1 var(--display); color: #FFF4EA; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.dv-rail { display: flex; gap: 2px; pointer-events: auto; }
.dv-rail button { width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; border-radius: 50%; }
.dv-rail button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(255,230,216,.6); transition: background .3s, border-color .3s, transform .3s; }
.dv-rail button:hover::before, .dv-rail button.on::before { background: var(--c); border-color: var(--c); transform: scale(1.3); }
.dv-rail button:focus-visible { outline: 2px solid var(--c); outline-offset: 1px; }
/* static fallback: no WebGL or reduced motion */
.gx-dive.dv-static { height: auto; }
.gx-dive.dv-static .dv-stage { position: relative; height: auto; min-height: 100svh; padding: 140px 0 80px; background: radial-gradient(50% 40% at 75% 70%, rgba(255,194,122,.55), transparent 70%), linear-gradient(#1B1140, #6A3FA0 45%, #FF6B85 78%, #FFB36B); }
.gx-dive.dv-static .dv-canvas, .gx-dive.dv-static .dv-scroll, .gx-dive.dv-static .dv-gauge { display: none; }
.gx-dive.dv-static .dv-layer { position: relative; top: auto; translate: none; margin: 0 auto 56px; opacity: 1 !important; visibility: visible !important; }
.gx-dive:not(.dv-live):not(.dv-static) .dv-layer:not(.dv-hero) { opacity: 0; }
@media (max-width: 760px) {
  .dv-shade { background: linear-gradient(180deg, rgba(34,10,46,.1) 30%, rgba(34,10,46,.72) 100%); }
  .dv-layer { top: auto; bottom: 96px; translate: none; }
  .dv-layer.r > div { text-align: left; margin-left: 0; }
  .dv-gauge { bottom: 22px; } .dv-gauge b { font-size: 26px; }
  .dv-scroll { display: none; }
  .dv-end { top: 15%; bottom: auto; }
  .dv-hero h1 { font-size: clamp(54px, 15vw, 72px); }
  .dv-hero .gx-cta { gap: 8px; }
}
/* keep world text readable against the bright sunset sky */
.dv-world > div, .dv-hero > div { position: relative; }
.dv-world > div::before, .dv-hero > div::before { content: ""; position: absolute; inset: -60px -90px; z-index: -1; background: radial-gradient(closest-side, rgba(34,10,46,.62), rgba(34,10,46,.32) 55%, transparent); pointer-events: none; }
.dv-world h2 { -webkit-text-stroke: 0; filter: drop-shadow(0 2px 18px rgba(34,10,46,.55)); }

/* ---------- themes (class set by gx-dive.js) ---------- */
.gx-dive { --scrim: rgba(14,6,22,.82); --scrim2: rgba(14,6,22,.5); }
.dv-world > div::before, .dv-hero > div::before { background: radial-gradient(closest-side, var(--scrim), var(--scrim2) 55%, transparent); }
.gx-dive.dv-t-monsoon { background: #061013; --scrim: rgba(3,14,16,.66); --scrim2: rgba(3,14,16,.32); }
.dv-t-monsoon .dv-hero h1 em, .dv-t-monsoon .dv-k { color: #3FE0C8; }
.dv-t-monsoon .dv-hero .gx-btn:not(.ghost) { background: #3FE0C8; }
.dv-t-monsoon .dv-shade { background: linear-gradient(90deg, rgba(3,14,16,.7), rgba(3,14,16,.15) 45%, transparent 60%), linear-gradient(180deg, transparent 70%, rgba(3,14,16,.6)); }
.gx-dive.dv-t-diwali { background: #140704; --scrim: rgba(30,10,4,.66); --scrim2: rgba(30,10,4,.3); }
.dv-t-diwali .dv-hero h1 em, .dv-t-diwali .dv-k { color: #FFC24D; }
.dv-t-diwali .dv-hero .gx-btn:not(.ghost) { background: #FFC24D; }
.dv-t-diwali .dv-shade { background: linear-gradient(90deg, rgba(30,10,4,.7), rgba(30,10,4,.15) 45%, transparent 60%), linear-gradient(180deg, transparent 70%, rgba(30,10,4,.6)); }
.gx-dive.dv-t-lime { background: #040404; --scrim: rgba(0,0,0,.7); --scrim2: rgba(0,0,0,.35); }
.dv-t-lime .dv-shade { background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.15) 45%, transparent 60%), linear-gradient(180deg, transparent 70%, rgba(0,0,0,.6)); }
.dv-t-lime .dv-world h2 { text-shadow: 0 0 30px rgba(198,244,50,.35); }
.gx-dive.dv-t-paper { background: #EFE8DA; --scrim: rgba(239,232,218,.9); --scrim2: rgba(239,232,218,.55); }
.dv-t-paper .dv-shade { background: linear-gradient(90deg, rgba(239,232,218,.8), rgba(239,232,218,.2) 45%, transparent 60%), linear-gradient(180deg, transparent 70%, rgba(239,232,218,.7)); }
.dv-t-paper .dv-hero h1, .dv-t-paper .dv-end h2 { color: #2B2540; text-shadow: none; }
.dv-t-paper .dv-hero h1 em, .dv-t-paper .dv-k, .dv-t-paper .dv-end a { color: #C4463F; text-shadow: none; }
.dv-t-paper .dv-hero p.l, .dv-t-paper .dv-world p { color: #4A4560; text-shadow: none; }
.dv-t-paper .dv-hero .gx-btn:not(.ghost) { background: #C4463F; color: #FFF8EE; }
.dv-t-paper .dv-hero .gx-btn.ghost { background: transparent; color: #2B2540; border-color: rgba(43,37,64,.4); }
.dv-t-paper .dv-world h2 { text-shadow: none; filter: none; }
.dv-t-paper .dv-world a { background: rgba(255,250,240,.7); color: #2B2540; }
.dv-t-paper .dv-scroll, .dv-t-paper .dv-gauge { color: #4A4560; }
.dv-t-paper .dv-gauge b { color: #2B2540; }
.dv-t-paper .dv-scroll i { background: linear-gradient(#4A4560, transparent); }
.dv-t-paper .dv-rail button::before { border-color: rgba(43,37,64,.45); }

/* ---------- landscape versions (gx-env.js) ---------- */
.gx-dive.dv-t-beach { background: #E89A86; --scrim: rgba(52,20,48,.6); --scrim2: rgba(52,20,48,.28); }
.dv-t-beach .dv-hero h1 em, .dv-t-beach .dv-k { color: #FFD27A; }
.dv-t-beach .dv-hero .gx-btn:not(.ghost) { background: #FF7A59; color: #fff; }
.dv-t-beach .dv-shade { background: linear-gradient(90deg, rgba(52,20,48,.55), rgba(52,20,48,.12) 45%, transparent 60%), linear-gradient(180deg, transparent 70%, rgba(52,20,48,.45)); }
.gx-dive.dv-t-moon { background: #020205; --scrim: rgba(0,0,0,.6); --scrim2: rgba(0,0,0,.25); }
.dv-t-moon .dv-shade { background: linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,.1) 45%, transparent 60%), linear-gradient(180deg, transparent 70%, rgba(0,0,0,.5)); }
.gx-dive.dv-t-galaxy { background: #05030F; --scrim: rgba(5,3,15,.6); --scrim2: rgba(5,3,15,.25); }
.dv-t-galaxy .dv-hero h1 em, .dv-t-galaxy .dv-k { color: #B98CFF; }
.dv-t-galaxy .dv-hero .gx-btn:not(.ghost) { background: #B98CFF; color: #120a2a; }
.dv-t-galaxy .dv-shade { background: linear-gradient(90deg, rgba(5,3,15,.6), rgba(5,3,15,.1) 45%, transparent 60%); }
.gx-dive.dv-t-mountain { background: #D9B8C8; --scrim: rgba(36,30,70,.55); --scrim2: rgba(36,30,70,.25); }
.dv-t-mountain .dv-hero h1 em, .dv-t-mountain .dv-k { color: #FFC24D; }
.dv-t-mountain .dv-hero .gx-btn:not(.ghost) { background: #FFC24D; }
.dv-t-mountain .dv-shade { background: linear-gradient(90deg, rgba(36,30,70,.55), rgba(36,30,70,.12) 45%, transparent 60%), linear-gradient(180deg, transparent 70%, rgba(36,30,70,.4)); }

/* readable titles over busy signage */
.dv-world h2, .dv-world p, .dv-world .dv-k { text-shadow: 0 2px 4px rgba(0,0,0,.85), 0 0 24px rgba(0,0,0,.7); }