/* RAJARAJAN P — video-monument hero + light/dark. Flat surfaces, one bronze accent. */
:root{
  /* OBSIDIAN (dark) — WW company colours: near-black ink + WW blue */
  --bg:#08090C; --panel:#0F1219; --ink:#F2F4F7; --ink-soft:rgba(242,244,247,.62);
  --ink-faint:rgba(242,244,247,.3); --accent:#2C82FF; --muted:#7C828C;
  --line:rgba(242,244,247,.11); --accent-soft:rgba(44,130,255,.32); --glow:rgba(24,119,242,.18);
  --display:'Space Grotesk',system-ui,sans-serif; --editorial:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif; --mono:'Geist Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.30,1); --ease-heavy:cubic-bezier(.76,0,.24,1);
}
:root[data-theme="light"]{
  /* MARBLE (light) — WW company colours: clean white + WW blue */
  --bg:#F4F6F9; --panel:#FFFFFF; --ink:#0B0C0E; --ink-soft:rgba(11,12,14,.62);
  --ink-faint:rgba(11,12,14,.34); --accent:#1877F2; --muted:#6b7280;
  --line:rgba(11,12,14,.10); --accent-soft:rgba(24,119,242,.24); --glow:rgba(24,119,242,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{background:radial-gradient(56% 44% at 50% 15%, var(--glow), transparent 70%),radial-gradient(46% 40% at 85% 86%, var(--glow), transparent 74%),var(--bg);
  color:var(--ink);font-family:var(--body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
  transition:background .8s var(--ease),color .8s var(--ease)}
#bgdots{position:fixed;inset:0;z-index:0;pointer-events:none}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;font-size:11px}

/* theme toggle */
#theme-toggle{position:fixed;top:22px;right:24px;z-index:40;display:flex;align-items:center;gap:9px;
  background:transparent;border:1px solid var(--line);color:var(--ink-soft);cursor:pointer;
  padding:9px 15px;border-radius:40px;font-size:10.5px;letter-spacing:.18em;
  transition:.5s var(--ease);backdrop-filter:blur(4px)}
#theme-toggle:hover{border-color:var(--accent-soft);color:var(--accent)}
.tt-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent-soft)}

/* ---------- HERO (scroll-scrubbed video) ---------- */
#hero{position:relative;height:420vh;z-index:2}
.hero-stick{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;background:#000}
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .9s var(--ease)}
:root[data-theme="dark"] #vid-dark{opacity:1}
:root[data-theme="light"] #vid-light{opacity:1}
:root[data-theme="light"] .hero-stick{background:#EFEBE2}
.hero-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 40%,transparent 55%,rgba(0,0,0,.72) 100%)}
:root[data-theme="light"] .hero-vignette{background:radial-gradient(120% 100% at 50% 40%,transparent 60%,rgba(210,205,193,.6) 100%)}
.hero-overlay{position:absolute;left:0;right:0;bottom:11vh;text-align:center;padding:0 6vw;
  z-index:3;will-change:opacity,transform}
.kicker{color:var(--accent);margin-bottom:20px}
.name{font-family:var(--display);font-weight:600;letter-spacing:.16em;line-height:1.04;
  font-size:clamp(30px,7vw,86px);color:var(--ink);
  text-shadow:0 2px 30px rgba(0,0,0,.55)}
:root[data-theme="light"] .name{text-shadow:0 2px 24px rgba(255,255,255,.4)}
.headline{font-family:var(--editorial);font-weight:400;font-size:clamp(17px,2.4vw,30px);
  color:var(--ink);margin-top:22px;font-optical-sizing:auto}
#cue{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:3;color:var(--accent);
  display:flex;flex-direction:column;align-items:center;gap:10px;transition:opacity .6s var(--ease)}
#cue i{width:1px;height:32px;background:linear-gradient(var(--accent),transparent);
  animation:cue 2.4s var(--ease-heavy) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- CONTENT ---------- */
#content{position:relative;z-index:5;background:transparent}
.sect{padding:16vh 7vw;max-width:1180px;margin:0 auto}
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.nowrap{white-space:nowrap}

/* ---------- STORY BEATS ---------- */
.story{min-height:80vh;display:flex;flex-direction:column;justify-content:center;gap:14px}
.story-a{gap:20px}
.story-line{font-family:var(--editorial);font-weight:300;font-size:clamp(23px,4vw,50px);
  line-height:1.14;letter-spacing:-.02em;max-width:20ch}
.story-line.big{font-weight:600;font-size:clamp(32px,6.4vw,88px);line-height:1.02;max-width:15ch}
.story-ask{font-family:var(--editorial);font-weight:600;font-size:clamp(30px,6vw,84px);
  line-height:1.04;letter-spacing:-.03em;max-width:16ch}
.story-line.accent .w{color:var(--accent)}
.story-answer{font-family:var(--body);font-weight:300;font-size:clamp(16px,1.9vw,23px);
  line-height:1.55;max-width:36ch;color:var(--ink-soft);margin-top:12px}
.story-answer b{color:var(--ink);font-weight:500}
.sect-sub{font-size:clamp(15px,1.6vw,18px);line-height:1.6;color:var(--ink-soft);
  max-width:48ch;margin-top:-5vh;margin-bottom:6vh;font-weight:300}
.works-sect .sect-sub{padding-left:7vw}

/* kinetic word reveal — words rise + fade in, staggered (delay set inline per word) */
.kin{opacity:1!important;transform:none!important}
.kin .w{display:inline-block;opacity:0;transform:translateY(.6em);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.kin.in .w{opacity:1;transform:none}

/* section eyebrow */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--accent);
  text-transform:uppercase;margin-bottom:10px}
.sect-head{font-family:var(--display);font-weight:600;letter-spacing:.06em;
  font-size:clamp(22px,3vw,34px);margin-bottom:8vh}

/* ribbon (keyword spine) */
.ribbon{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:20px 0;position:relative;z-index:5;background:transparent}
.ribbon-track{display:inline-block;will-change:transform;animation:ribbon 30s linear infinite}
.ribbon span{font-family:var(--display);font-weight:600;font-size:clamp(18px,2.6vw,36px);letter-spacing:-.015em;
  color:var(--ink-faint);padding:0 20px}
.ribbon em{font-style:normal;color:var(--accent);font-size:clamp(18px,2.6vw,36px)}
@keyframes ribbon{to{transform:translateX(-50%)}}

/* works — flower-bloom carousel (stem grows on scroll, cards bloom off nodes) */
.works-sect{max-width:100%;padding-left:0;padding-right:0;overflow-x:clip}
.works-sect .eyebrow,.works-sect .sect-head{padding-left:7vw}

/* --- FLOWER-BLOOM CAROUSEL --- */
.bloom-wrap{max-width:920px;margin:0 auto;position:relative}
.bloom-list{position:relative;margin:6vh auto 0}
@media (min-width:760px){.bloom-list{min-height:2560px}}   /* no-JS fallback: reserve height for absolute cards */
.spine{position:absolute;left:0;top:0;z-index:2;pointer-events:none;overflow:visible}
.spine-line{stroke:var(--muted);stroke-width:2;stroke-linecap:round;opacity:.34;vector-effect:non-scaling-stroke}
.spine-active{stroke:var(--accent);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:0}
.spine-node{stroke-width:1.5;vector-effect:non-scaling-stroke}
.spine-node.live{fill:var(--accent);stroke:none}
.spine-node.soon{fill:transparent;stroke:var(--muted)}
.bloom{position:absolute;width:344px;top:calc(var(--y) - 195px);opacity:1}   /* default VISIBLE (no-JS) */
.bloom[data-side="r"]{left:calc(50% + 44px)}
.bloom[data-side="l"]{right:calc(50% + 44px)}
/* override the ring layout/blur so cards sit static, sharp, un-stacked (spec pitfall #2) */
.bloom .rcard{position:static;margin:0;width:344px;height:390px;opacity:1;filter:none;transition:none}
.bloom .rcard-in{transform:none;overflow:hidden}                              /* Ken-Burns clip */
.connector{position:absolute;top:195px;height:1px;width:44px;opacity:.8}
.bloom[data-side="r"] .connector{left:-44px;transform-origin:left center;background:linear-gradient(270deg,var(--accent),transparent)}
.bloom[data-side="l"] .connector{right:-44px;transform-origin:right center;background:linear-gradient(90deg,var(--accent),transparent)}
/* JS opts INTO the animation; without it, everything above is the finished readable state */
.js-bloom .bloom{opacity:0}
.js-bloom .spine-active{opacity:1}
@media (prefers-reduced-motion:reduce){
  .js-bloom .bloom{opacity:1!important}.js-bloom .rcard-in{transform:none!important}.js-bloom .spine-active{opacity:0!important}
}
@media (max-width:759px){
  .bloom{position:relative!important;top:auto!important;left:auto!important;right:auto!important;margin:0 0 28px 36px;width:min(88vw,344px)}
  .bloom .rcard{width:100%}
  .connector{width:14px;left:-14px!important;right:auto!important;transform-origin:left center;background:linear-gradient(270deg,var(--accent),transparent)}
  .bloom-list{margin-top:4vh}
}

/* --- legacy 3D ring (markup removed; styles kept harmless) --- */
.ring-wrap{margin-top:5vh}
.ring-stage{position:relative;height:430px;perspective:1600px;touch-action:pan-y}
.ring{position:absolute;top:0;left:50%;width:0;height:100%;transform-style:preserve-3d;
  transition:transform .8s var(--ease);cursor:grab}
.ring:active{cursor:grabbing}
.rcard{position:absolute;top:50%;left:0;width:344px;height:390px;margin:-195px 0 0 -172px;
  transform-style:preserve-3d;backface-visibility:hidden;transition:opacity .6s var(--ease),filter .6s var(--ease)}
.rcard-in{width:100%;height:100%;border-radius:20px;background:var(--panel);padding:15px 15px 20px;
  display:flex;flex-direction:column;box-shadow:inset 0 0 0 1px var(--line),0 34px 60px -34px rgba(0,0,0,.55)}
.rcard:not(.active){opacity:.4;filter:blur(1.5px)}
.rcard.active .rcard-in{box-shadow:inset 0 0 0 1px var(--accent-soft),0 44px 90px -30px rgba(0,0,0,.7)}
.rcard-viz{position:relative;height:196px;border-radius:13px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#0B1220}
.rcard-viz.shot{background-size:cover;background-position:top center}
.rcard-viz.shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,7,10,.55))}
.rcard-glyph{font-family:var(--display);font-weight:700;font-size:150px;line-height:1;color:#fff;opacity:.2;user-select:none}
.rcard-viz .rcard-num{position:absolute;top:14px;left:15px;z-index:2;color:rgba(255,255,255,.82);font-size:11px;letter-spacing:.14em;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.rcard-meta{padding:20px 14px 0}
.rcard-title{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:24px;line-height:1.04}
.rcard-tag{color:var(--accent);margin-top:9px;font-size:10.5px;letter-spacing:.14em}
.rcard-foot{margin-top:auto;padding:16px 14px 0;display:flex;justify-content:space-between;align-items:center;gap:10px}
/* 6 distinct card visuals — WW-blue family */
.rcard-viz[data-viz="0"]{background:linear-gradient(135deg,#1877F2,#0A2540)}
.rcard-viz[data-viz="1"]{background:linear-gradient(135deg,#2C82FF,#101B33 72%)}
.rcard-viz[data-viz="2"]{background:radial-gradient(130% 130% at 18% 8%,#3B93FF,#0B1220)}
.rcard-viz[data-viz="3"]{background:linear-gradient(160deg,#0E2A57,#1877F2)}
.rcard-viz[data-viz="4"]{background:radial-gradient(130% 130% at 82% 18%,#1877F2,#0A0F1A)}
.rcard-viz[data-viz="5"]{background:linear-gradient(120deg,#123A6B,#2C82FF 92%)}
.ring-ctrl{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:40px}
.ring-nav{width:50px;height:50px;border-radius:50%;background:transparent;border:1px solid var(--line);
  color:var(--ink-soft);font-size:22px;line-height:1;cursor:pointer;transition:.4s var(--ease)}
.ring-nav:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.ring-dots{display:flex;gap:8px;align-items:center}
.ring-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:.45s var(--ease)}
.ring-dots i.on{background:var(--accent);transform:scale(1.5);box-shadow:0 0 12px var(--accent-soft)}
.status{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px}
.status i{width:6px;height:6px;border-radius:50%}
.status.live{color:var(--accent)} .status.live i{background:var(--accent);box-shadow:0 0 10px var(--accent-soft)}
.status.wip{color:var(--muted)} .status.wip i{background:transparent;border:1px solid var(--muted)}
.proof{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-faint)}
.proof a{color:var(--ink-soft);border-bottom:1px solid var(--accent-soft);padding-bottom:1px}
.proof a:hover{color:var(--accent)}

/* craft */
.craft-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:5vh 4vw}
.craft-item{border-top:1px solid var(--line);padding-top:20px}
.craft-item h4{font-family:var(--editorial);font-weight:500;font-size:clamp(17px,1.9vw,22px)}
.craft-item p{font-size:14px;line-height:1.62;color:var(--ink-soft);margin-top:9px;font-weight:300}

/* timeline */
.tl{display:flex;flex-direction:column;gap:0;border-left:1px solid var(--line);margin-left:6px}
.tl-item{display:grid;grid-template-columns:130px 1fr;gap:30px;padding:0 0 7vh 34px;position:relative}
.tl-item::before{content:"";position:absolute;left:-6px;top:5px;width:11px;height:11px;border-radius:50%;
  background:var(--bg);border:1px solid var(--accent)}
.tl-date{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--accent)}
.tl-label{font-family:var(--display);font-weight:600;letter-spacing:.06em;font-size:16px;text-transform:uppercase}
.tl-desc{font-size:14px;line-height:1.62;color:var(--ink-soft);margin-top:8px;font-weight:300;max-width:52ch}

/* contact */
.contact{text-align:center}
.c-line{font-family:var(--editorial);font-weight:300;font-size:clamp(21px,2.8vw,34px);
  line-height:1.34;max-width:20ch;margin:0 auto}
.c-cta{display:inline-block;margin-top:36px;font-family:var(--mono);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);border:1px solid var(--accent-soft);padding:16px 34px;
  transition:.5s var(--ease)}
.c-cta:hover{background:var(--accent);color:var(--bg)}
.c-sign{font-family:var(--display);font-weight:600;letter-spacing:.2em;color:var(--muted);
  font-size:13px;margin-top:46px;text-transform:uppercase}

#foot{text-align:center;padding:6vh 7vw 8vh;color:var(--ink-faint);font-size:10px;letter-spacing:.18em}

/* loader */
#loader{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:24px;transition:opacity 1s var(--ease)}
#loader.done{opacity:0;pointer-events:none}
.l-name{font-family:var(--display);font-weight:600;letter-spacing:.28em;color:var(--muted);
  font-size:clamp(12px,1.7vw,16px)}
.l-bar{width:min(220px,52vw);height:1px;background:var(--line);overflow:hidden}
.l-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .4s var(--ease)}
.noscript{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:8vw;
  text-align:center;color:var(--ink-soft);z-index:70;background:var(--bg)}

@media (max-width:820px){
  .work{grid-template-columns:1fr;gap:26px;direction:ltr!important}
  .work:nth-child(even){direction:ltr}
  .work-visual{aspect-ratio:16/10}
  .work-detail{max-width:none}
  .tl-item{grid-template-columns:84px 1fr;gap:14px}
  .hero-overlay{bottom:14vh}
}
@media (prefers-reduced-motion:reduce){
  .reveal{transition:none;opacity:1;transform:none}#cue i{animation:none}
  .kin .w{opacity:1;transform:none;transition:none}
}