/* ============================================================
   SANDEEP MENON — Portfolio   ·  A×D blend
   Live-pipeline energy inside a brutalist blueprint grid
   ============================================================ */

:root{
  --bg:        #07090a;
  --bg-panel:  #0b0e0f;
  --bg-raise:  #0e1213;
  --line:      rgba(233,244,239,0.09);
  --line-2:    rgba(233,244,239,0.16);
  --fg:        #e9f4ef;
  --fg-mute:   #93a79d;
  --fg-dim:    #5c6f66;
  --teal:      #00e5a8;
  --teal-dim:  rgba(0,229,168,0.14);
  --amber:     #ffb000;
  --amber-dim: rgba(255,176,0,0.14);
  --maxw: 1680px;
  --pad: clamp(22px, 5.2vw, 92px);
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Space Grotesk', system-ui, sans-serif;
  --disp: 'Archivo', system-ui, sans-serif;
  --accent: var(--teal);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.noscroll{ overflow:hidden; }
::selection{ background:var(--teal); color:#04121a; }
a{ color:inherit; text-decoration:none; }

/* blueprint vertical grid, fixed behind everything */
.blueprint{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: clamp(120px, 16.66vw, 280px) 100%;
  background-position: var(--pad) 0;
  opacity:.6;
  mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
}
.blueprint.off{ display:none; }
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- scroll progress + section rail ---------- */
.progress{ position:fixed; top:0; left:0; height:2px; width:0; background:var(--accent); z-index:90; box-shadow:0 0 12px var(--accent); }


/* ---------- header ---------- */
header.nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--pad);
  transition:background .3s, border-color .3s, padding .3s;
  border-bottom:1px solid transparent;
}
header.nav.solid{ background:rgba(7,9,10,.78); backdrop-filter:blur(14px); border-color:var(--line); padding-top:14px; padding-bottom:14px; }
.brand{ display:flex; align-items:center; gap:8px; font-family:var(--disp); font-weight:900; font-size:17px; letter-spacing:-.01em; text-transform:uppercase; }
.brand .logo{ width:30px; height:30px; object-fit:contain; filter:brightness(0) invert(1); }
.brand .sub{ font-family:var(--mono); font-weight:400; font-size:10px; letter-spacing:.18em; color:var(--fg-mute); text-transform:uppercase; }
.brand-first, .brand-last{ white-space:nowrap; color:var(--fg-mute); font-weight:400;
  font-family:var(--mono); font-size:13px; letter-spacing:.08em;
  max-width:0; overflow:hidden; opacity:0;
  transition:max-width .65s cubic-bezier(.16,1,.3,1), opacity .55s ease, transform .65s cubic-bezier(.16,1,.3,1); }
.brand-first{ transform:translateX(12px); }
.brand-last{  transform:translateX(-12px); }
header.nav.past-hero .brand-first,
header.nav.past-hero .brand-last{ max-width:120px; opacity:1; transform:translateX(0); }
nav.links{ display:flex; gap:30px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--fg-mute); text-transform:uppercase; }
nav.links a{ position:relative; transition:color .2s; }
nav.links a::after{ content:''; position:absolute; left:0; bottom:-5px; height:1px; width:0; background:var(--accent); transition:width .25s; }
nav.links a:hover{ color:var(--fg); } nav.links a:hover::after{ width:100%; }
nav.links a.active{ color:var(--accent); }
nav.links a.active::after{ width:100%; }
.nav-cta{ font-family:var(--mono); font-size:12px; letter-spacing:.05em; color:var(--bg); background:var(--accent); padding:9px 16px; border-radius:2px; text-transform:uppercase; transition:transform .2s, box-shadow .2s; }
.nav-cta:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,229,168,.3); }
@media (max-width:760px){ nav.links{ display:none; } }

/* ---------- scroll progress + section rail ---------- */
.progress{ position:fixed; top:0; left:0; height:2px; width:0; background:var(--accent); z-index:90; box-shadow:0 0 12px var(--accent); }
.rail{ display:none; }

/* ---------- generic section frame ---------- */
.section{ position:relative; z-index:2; padding:clamp(90px,12vh,160px) var(--pad); max-width:var(--maxw); margin:0 auto; }
.sec-head{ display:flex; align-items:baseline; gap:18px; margin-bottom:48px; border-top:1px solid var(--line-2); padding-top:22px; flex-wrap:wrap; }
.sec-idx{ font-family:var(--mono); font-size:13px; letter-spacing:.16em; color:var(--amber); white-space:nowrap; }
.sec-title{ font-family:var(--disp); font-weight:900; text-transform:uppercase; letter-spacing:-.03em; line-height:.9;
  font-size:clamp(34px,6vw,82px); }
.sec-note{ margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--fg-dim); letter-spacing:.04em; max-width:340px; text-align:right; }
@media (max-width:760px){ .sec-note{ margin-left:0; text-align:left; width:100%; } }

/* reveal */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal][data-d="1"]{ transition-delay:.08s; }
[data-reveal][data-d="2"]{ transition-delay:.16s; }
[data-reveal][data-d="3"]{ transition-delay:.24s; }
[data-reveal][data-d="4"]{ transition-delay:.32s; }
[data-reveal][data-d="5"]{ transition-delay:.40s; }
body.reduce [data-reveal]{ opacity:1 !important; transform:none !important; }

/* mono tag chip */
.chip{ font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--fg-mute);
  border:1px solid var(--line-2); border-radius:2px; padding:5px 10px; white-space:nowrap; transition:border-color .2s,color .2s; }
.chip:hover{ border-color:var(--accent); color:var(--fg); }
.chip.t{ color:var(--teal); border-color:rgba(0,229,168,.3); }
.chip.a{ color:var(--amber); border-color:rgba(255,176,0,.3); }

/* ============================================================
   HERO — two-column: intro + live data architecture
   ============================================================ */
#hero{ position:relative; min-height:100svh; overflow:hidden; z-index:2; display:flex; align-items:center; }
.hero-glow{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(52% 55% at 74% 44%, color-mix(in oklab, var(--accent) 13%, transparent), transparent 70%); }
.hero-inner{ position:relative; z-index:5; width:100%; max-width:var(--maxw); margin:0 auto;
  padding:128px var(--pad) 92px; display:grid; grid-template-columns:1fr 1.08fr; gap:clamp(28px,4vw,76px); align-items:center; }
@media (max-width:980px){ .hero-inner{ grid-template-columns:1fr; gap:52px; padding-top:124px; } }

.hero-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--teal); border:1px solid rgba(0,229,168,.25); background:rgba(0,229,168,.05);
  padding:7px 15px; border-radius:100px; margin-bottom:26px; }
.hero-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--teal); animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(0,229,168,.6);} 50%{ box-shadow:0 0 0 6px rgba(0,229,168,0);} }
.hero-h1{ font-family:var(--disp); font-weight:900; text-transform:uppercase; letter-spacing:-.04em; line-height:.86;
  font-size:clamp(52px,7.6vw,118px); }
.hero-h1 .ln{ display:block; overflow:hidden; }
.hero-h1 .ln span{ display:inline-block; transform:translateY(106%); }
.hero-h1 .ln:nth-child(2) span{ color:transparent; -webkit-text-stroke:clamp(1px,.12vw,2.5px) var(--fg); }
.hero-h1.go .ln span{ transform:translateY(0); transition:transform 1.05s cubic-bezier(.16,1,.3,1); }
.hero-h1.go .ln:nth-child(2) span{ transition-delay:.1s; }
.hero-sub{ margin-top:26px; max-width:520px; font-size:clamp(16px,1.4vw,19px); line-height:1.6; color:var(--fg-mute); }
.hero-sub b{ color:var(--fg); font-weight:600; }
.hero-actions{ margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; }
.btn{ font-family:var(--mono); font-size:13px; letter-spacing:.05em; text-transform:uppercase; padding:14px 24px; border-radius:2px;
  display:inline-flex; align-items:center; gap:10px; cursor:pointer; transition:transform .2s, box-shadow .2s, background .2s, border-color .2s; }
.btn.primary{ background:var(--accent); color:#04121a; font-weight:500; }
.btn.primary:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,229,168,.32); }
.btn.ghost{ border:1px solid var(--line-2); color:var(--fg-mute); }
.btn.ghost:hover{ border-color:var(--accent); color:var(--fg); }

/* ---- hero end-to-end data flow ---- */
.hero-viz{ position:relative; width:100%; aspect-ratio:1200/720; }
@media (max-width:980px){ .hero-viz{ max-width:640px; margin:0 auto; } }
.viz-scene{ position:absolute; inset:0; }

/* animated dotted connectors */
.hvz-flow{ position:absolute; inset:0; width:100%; height:100%; z-index:1; overflow:visible; }
.hvz-flow .fb{ fill:none; stroke:color-mix(in oklab, var(--accent) 24%, transparent); stroke-width:1.3; }
.hvz-flow .fd{ fill:none; stroke:var(--accent); stroke-width:1.7; stroke-dasharray:1.5 9; stroke-linecap:round;
  animation:hvzdash .85s linear infinite; filter:drop-shadow(0 0 3px var(--accent)); }
@keyframes hvzdash{ to{ stroke-dashoffset:-10.5; } }
.hvz-flow .pkt{ fill:var(--accent); filter:drop-shadow(0 0 6px var(--accent)); }
body.reduce .hvz-flow .fd{ animation:none; }

/* node cards */
.vn{ position:absolute; z-index:2; transform:translate(-50%,-50%);
  border:1px solid var(--line-2); border-radius:14px; padding:15px 15px 16px;
  background:linear-gradient(165deg, rgba(18,23,25,.96), rgba(10,13,14,.97)); backdrop-filter:blur(8px);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 30px 62px -28px rgba(0,0,0,.95), 0 10px 22px -16px rgba(0,0,0,.8); }
.vn-h{ font-family:var(--mono); font-size:clamp(8.5px,.7vw,10px); letter-spacing:.12em; text-transform:uppercase;
  color:var(--fg-mute); white-space:normal; line-height:1.35; margin-bottom:13px; }
.vn-list{ list-style:none; display:flex; flex-direction:column; gap:clamp(7px,.9vw,10px); }
.vn-list li{ display:flex; align-items:center; gap:8px; font-size:clamp(10px,.8vw,11.5px); color:var(--fg); }
.vn-list li svg{ width:14px; height:14px; color:var(--teal); flex-shrink:0; }
.vn-ic{ width:clamp(30px,3.2vw,44px); height:clamp(30px,3.2vw,44px); color:var(--teal); display:block; margin:4px auto 12px; }
.vn-cap{ font-family:var(--mono); font-size:clamp(8px,.65vw,9.5px); letter-spacing:.05em; text-transform:uppercase;
  color:var(--fg-dim); text-align:center; line-height:1.5; text-wrap:balance; }

/* pipeline — centerpiece */
.v-pipeline{ border-color:color-mix(in oklab, var(--accent) 55%, transparent); padding:17px 17px 18px;
  background:linear-gradient(165deg, rgba(20,29,29,.97), rgba(9,15,15,.98));
  box-shadow:0 0 0 1px color-mix(in oklab,var(--accent) 22%,transparent),
             0 0 36px -6px color-mix(in oklab,var(--accent) 42%,transparent),
             0 38px 72px -26px rgba(0,0,0,.95); }
.v-pipeline .vn-h{ color:var(--teal); }
.v-sources .vn-h, .v-bi .vn-h{ color:var(--teal); }
.v-sources{ padding:13px 11px 14px; }
.vp-node{ display:flex; justify-content:center; padding:4px 0 15px; }
.vp-node svg{ width:clamp(38px,4vw,56px); height:clamp(38px,4vw,56px); color:var(--teal);
  filter:drop-shadow(0 0 8px color-mix(in oklab,var(--accent) 60%,transparent)); }
.vn-checks{ list-style:none; display:flex; flex-direction:column; gap:clamp(8px,.95vw,11px); }
.vn-checks li{ display:flex; align-items:center; gap:10px; font-size:clamp(11px,1vw,13.5px); color:var(--fg); }
.vn-checks .ck{ width:16px; height:16px; border-radius:5px; flex-shrink:0; position:relative;
  background:var(--accent); box-shadow:0 0 8px color-mix(in oklab,var(--accent) 55%,transparent); }
.vn-checks .ck::after{ content:""; position:absolute; left:5px; top:2px; width:4px; height:8px;
  border:solid #04121a; border-width:0 2px 2px 0; transform:rotate(42deg); }

/* storage cards — compact one-row pills: icon · name · format tag */
.vn.store{ padding:0; display:flex; align-items:stretch; gap:0; overflow:hidden; min-height:48px;
  transition:border-color .25s, box-shadow .25s, transform .25s; }
.vn.store .accent{ width:3px; flex-shrink:0; background:var(--teal); box-shadow:0 0 12px color-mix(in oklab,var(--teal) 55%,transparent); }
.vn.store .vn-name{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; padding:8px 10px 8px 12px;
  text-align:left; line-height:1.08; }
.vn.store .vn-ic{ width:16px; height:16px; margin:0; flex-shrink:0; color:var(--teal); }
.vn.store .vn-name{ font-size:clamp(10.5px,.82vw,12px); }
.vn-name{ font-family:var(--disp); font-weight:800; letter-spacing:-.01em; line-height:1.06;
  font-size:clamp(12.5px,1.05vw,15px); text-wrap:balance; }

/* travelling energy glow — sweeps sources → pipeline → storage → BI */
.viz-glow{ position:absolute; z-index:0; width:44%; aspect-ratio:1; border-radius:50%;
  left:8.5%; top:50%; transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(circle, color-mix(in oklab,var(--accent) 32%,transparent), transparent 66%);
  filter:blur(20px); animation:glowtour 9s ease-in-out infinite; }
@keyframes glowtour{
  0%,16%  { left:8.5%; }
  25%,41% { left:35%; }
  50%,66% { left:64%; }
  75%,91% { left:87.5%; }
  100%    { left:8.5%; }
}

/* per-stage activation, synced to the glow's 9s timeline */
.v-sources{ animation:act1 9s ease-in-out infinite; }
.v-pipeline{ animation:act2 9s ease-in-out infinite; }
.v-warehouse,.v-lake,.v-delta,.v-lakehouse{ animation:act3 9s ease-in-out infinite; }
.v-bi{ animation:act4 9s ease-in-out infinite; }
@keyframes act1{
  0%,22%,100%{ border-color:var(--line-2); box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 30px 62px -28px rgba(0,0,0,.95); }
  5%,17%{ border-color:color-mix(in oklab,var(--accent) 60%,transparent); box-shadow:0 0 0 1px color-mix(in oklab,var(--accent) 32%,transparent),0 0 30px -2px color-mix(in oklab,var(--accent) 48%,transparent),0 30px 62px -28px rgba(0,0,0,.95); }
}
@keyframes act2{
  0%,24%,44%,100%{ box-shadow:0 0 0 1px color-mix(in oklab,var(--accent) 18%,transparent),0 0 14px -6px color-mix(in oklab,var(--accent) 28%,transparent),0 38px 72px -26px rgba(0,0,0,.95); }
  28%,40%{ box-shadow:0 0 0 1px color-mix(in oklab,var(--accent) 30%,transparent),0 0 44px -2px color-mix(in oklab,var(--accent) 58%,transparent),0 38px 72px -26px rgba(0,0,0,.95); }
}
@keyframes act3{
  0%,47%,71%,100%{ border-color:var(--line-2); box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 30px 62px -28px rgba(0,0,0,.95); }
  53%,65%{ border-color:color-mix(in oklab,var(--accent) 60%,transparent); box-shadow:0 0 0 1px color-mix(in oklab,var(--accent) 32%,transparent),0 0 30px -2px color-mix(in oklab,var(--accent) 48%,transparent),0 30px 62px -28px rgba(0,0,0,.95); }
}
@keyframes act4{
  0%,72%,96%,100%{ border-color:var(--line-2); box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 30px 62px -28px rgba(0,0,0,.95); }
  78%,90%{ border-color:color-mix(in oklab,var(--accent) 60%,transparent); box-shadow:0 0 0 1px color-mix(in oklab,var(--accent) 32%,transparent),0 0 30px -2px color-mix(in oklab,var(--accent) 48%,transparent),0 30px 62px -28px rgba(0,0,0,.95); }
}
body.reduce .viz-glow{ animation:none; }
body.reduce .vn{ animation:none !important; }

/* desktop placement (left/top are CENTERS via translate -50%,-50%) */
.v-sources{   left:8.5%;  top:50%;   width:16%; }
.v-pipeline{  left:35%;   top:50%;   width:19%; }
.v-warehouse{ left:65%;   top:15%;   width:21.5%; }
.v-lake{      left:65%;   top:38.3%; width:21.5%; }
.v-delta{     left:65%;   top:61.7%; width:21.5%; }
.v-lakehouse{ left:65%;   top:85%;   width:21.5%; }
.v-bi{        left:88%;   top:50%;   width:13%; }

.scrollcue{ position:absolute; z-index:5; left:50%; bottom:20px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10px; letter-spacing:.3em; color:var(--fg-dim); }
.scrollcue .l{ width:1px; height:30px; background:linear-gradient(var(--accent), transparent); animation:drop 1.8s ease-in-out infinite; }
@keyframes drop{ 0%{ transform:scaleY(0); transform-origin:top;} 50%{ transform:scaleY(1);} 100%{ transform:scaleY(0); transform-origin:bottom;} }
@media (max-width:980px){ .scrollcue{ display:none; } }

/* keep transform-based reveal from fighting the -50%,-50% centering */
.vn[data-reveal]{ opacity:0; transform:translate(-50%,-50%) scale(.96); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.vn[data-reveal].in{ opacity:1; transform:translate(-50%,-50%) scale(1); }
body.reduce .vn[data-reveal]{ opacity:1 !important; transform:translate(-50%,-50%) !important; }