/* ══════════════════════════════════════════════
   SURESH KUMAR UNNIKRISHNAN
   Coming Soon v4 · coming-soon.css
   ★ Replace --amber value if you change brand colour
══════════════════════════════════════════════ */

/* ══════════════════════════════════════
   COMING SOON v4
   Progress bar + Typewriter bio + Tools
   layered on v2 parallax canvas
══════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#080808;--s1:#111;--s2:#181818;
  --border:rgba(255,255,255,.07);
  --text:#F0EDE6;--muted:rgba(240,237,230,.38);
  --amber:#E8A020;--amber2:#f0b030;--amber3:#ffd080;
  --adim:rgba(232,160,32,.1);
  --sans:'Syne',sans-serif;
  --serif:'DM Serif Display',Georgia,serif;
  --mono:'DM Mono',monospace;
  --expo:cubic-bezier(.19,1,.22,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}
html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:var(--text);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;cursor:none;user-select:none;}
::selection{background:var(--amber);color:#000}
::-webkit-scrollbar{width:2px}::-webkit-scrollbar-thumb{background:var(--amber)}

/* ── DOT GRID BACKGROUND (from image 1) ── */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle, rgba(232,160,32,.13) 1px, transparent 1px);
  background-size:28px 28px;opacity:.5;}

/* ── CURSOR ── */
#cursor{position:fixed;z-index:9999;pointer-events:none;top:0;left:0;will-change:transform}
.c-dot{width:10px;height:10px;background:var(--amber);border-radius:50%;
  transform:translate(-50%,-50%);mix-blend-mode:exclusion;
  transition:width .3s var(--spring),height .3s var(--spring),opacity .2s}
.c-ring{position:absolute;top:50%;left:50%;width:38px;height:38px;border-radius:50%;
  border:1.5px solid rgba(232,160,32,.4);transform:translate(-50%,-50%);
  transition:width .5s var(--expo),height .5s var(--expo),border-color .3s}
body.hov .c-dot{width:0;height:0;opacity:0}
body.hov .c-ring{width:52px;height:52px;border-color:rgba(232,160,32,.9)}
.trail{position:fixed;border-radius:50%;pointer-events:none;z-index:9990;
  transform:translate(-50%,-50%);background:var(--amber);
  animation:trail-fade .6s var(--expo) forwards}
@keyframes trail-fade{0%{opacity:.35;width:7px;height:7px}100%{opacity:0;width:1px;height:1px}}

/* ── SCENE ── */
#scene{position:fixed;inset:0;overflow:hidden;perspective:1400px;transform-style:preserve-3d}
#bg-layer{position:absolute;inset:0;z-index:0}
.orb{position:absolute;border-radius:50%;filter:blur(130px);opacity:.1;pointer-events:none}
.orb-a{width:800px;height:800px;background:var(--amber);top:-280px;right:-180px;animation:dA 22s ease-in-out infinite alternate}
.orb-b{width:500px;height:500px;background:#2244dd;bottom:-180px;left:-130px;animation:dB 26s ease-in-out infinite alternate}
@keyframes dA{from{transform:translate(0,0) scale(1)}to{transform:translate(-70px,50px) scale(1.1)}}
@keyframes dB{from{transform:translate(0,0)}to{transform:translate(50px,-60px) scale(1.1)}}
#bg-layer::after{content:'';position:absolute;inset:0;z-index:1;opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── PARALLAX LAYERS ── */
.layer{position:absolute;inset:0;will-change:transform}
#l1{z-index:1}#l2{z-index:3}#l3{z-index:5;pointer-events:auto}

/* ── FLOATING ARTIFACTS ── */
.art{position:absolute;pointer-events:auto;cursor:none;will-change:transform}
.art:hover{z-index:99}
.wf{border:1.5px dashed rgba(232,160,32,.28);border-radius:8px;padding:10px 14px;
  background:rgba(232,160,32,.03);font-family:var(--mono);font-size:10px;
  color:rgba(232,160,32,.45);letter-spacing:.06em;
  transition:border-color .3s,background .3s,transform .4s var(--spring);
  animation:flt1 7s ease-in-out infinite}
.wf:hover{border-color:rgba(232,160,32,.8);background:var(--adim);transform:scale(1.1) rotate(-2deg)!important}
@keyframes flt1{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.ann{display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--s2);
  border:1px solid rgba(255,255,255,.09);border-radius:6px;
  font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.32);letter-spacing:.06em;
  animation:flt2 6s ease-in-out infinite;
  transition:transform .4s var(--spring),color .3s,border-color .3s}
.ann:hover{color:var(--amber);border-color:rgba(232,160,32,.4);transform:scale(1.06)!important}
.ad{width:6px;height:6px;border-radius:50%;flex-shrink:0}
@keyframes flt2{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.orb-widget{animation:flt1 10s ease-in-out infinite .8s;opacity:.5;transition:opacity .3s}
.orb-widget:hover{opacity:.9}
@media(max-width:900px){.desktop-only{display:none}}

/* ══════════════════════════════════════
   STAGE — scrollable inner container
══════════════════════════════════════ */
#stage{
  position:absolute;inset:0;z-index:10;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  padding:24px 20px 80px;
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:var(--amber) transparent}

/* ── EYEBROW ── */
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--amber);
  margin-bottom:32px;display:inline-flex;align-items:center;gap:8px;
  opacity:0;animation:sup .8s var(--expo) .1s forwards}
.bd{width:7px;height:7px;background:var(--amber);border-radius:50%;animation:blk 1.4s ease-in-out infinite}
@keyframes blk{0%,100%{opacity:1}50%{opacity:.15}}
@keyframes sup{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* ══════════════════════════════════════
   TYPEWRITER BIO PARAGRAPH (image 2)
══════════════════════════════════════ */
.bio-para{
  max-width:min(760px,90vw);
  font-family:var(--sans);
  font-size:clamp(20px,3.2vw,34px);
  line-height:1.45;
  letter-spacing:-.02em;
  color:var(--muted);
  margin-bottom:48px;
  text-align:left;
  opacity:0;animation:sup .9s var(--expo) .25s forwards}
.bio-para strong{color:var(--text);font-weight:700}
.bio-para .tw-word{color:var(--amber);font-weight:700;border-right:none}
.tw-cursor{display:inline-block;width:2px;height:1.1em;
  background:var(--amber);margin-left:2px;vertical-align:text-bottom;
  animation:twblink .7s ease-in-out infinite}
@keyframes twblink{0%,100%{opacity:1}50%{opacity:0}}

/* ══════════════════════════════════════
   PROGRESS BAR SECTION (image 1)
══════════════════════════════════════ */
.prog-sec{
  width:min(680px,90vw);margin-bottom:44px;
  opacity:0;animation:sup .8s var(--expo) .4s forwards}
.prog-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:10px}
.prog-label{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.prog-pct{
  font-family:var(--mono);font-size:13px;font-weight:500;
  color:var(--amber);letter-spacing:.06em;min-width:40px;text-align:right}
.prog-track{
  height:2px;background:rgba(255,255,255,.07);border-radius:99px;
  position:relative;overflow:visible}
.prog-fill{
  height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,rgba(232,160,32,.5),var(--amber));
  transition:width 3.5s cubic-bezier(.25,1,.5,1);
  position:relative}
/* glowing dot at tip */
.prog-fill::after{
  content:'';position:absolute;right:-4px;top:50%;transform:translateY(-50%);
  width:10px;height:10px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 10px 3px rgba(232,160,32,.5);
  opacity:0;transition:opacity .3s}
.prog-fill.active::after{opacity:1}
.prog-msg{
  display:flex;justify-content:flex-end;margin-top:8px;
  font-family:var(--mono);font-size:10px;
  color:rgba(232,160,32,.45);letter-spacing:.06em;
  min-height:1.4em;transition:opacity .4s}
.prog-msg::before{content:'△ ';opacity:.7}

/* ══════════════════════════════════════
   BIO ROW — avatar + name + tagline (image 1)
══════════════════════════════════════ */
.bio-row{
  display:flex;align-items:center;gap:28px;
  width:min(680px,90vw);margin-bottom:36px;
  padding:28px 32px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(232,160,32,.12);border-radius:16px;
  text-align:left;
  opacity:0;animation:sup .8s var(--expo) .55s forwards}
@media(max-width:600px){.bio-row{flex-direction:column;text-align:center;padding:20px}}
/* SK avatar */
.sk-avatar{
  width:62px;height:62px;border-radius:50%;
  background:linear-gradient(135deg,#2a1e00,#3d2c00);
  border:2px solid rgba(232,160,32,.4);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:18px;font-weight:800;
  color:var(--amber);flex-shrink:0;letter-spacing:.04em;
  box-shadow:0 0 24px rgba(232,160,32,.15)}
.bio-identity{flex:1;min-width:0}
.bio-name{
  font-family:var(--sans);font-size:clamp(15px,1.8vw,18px);
  font-weight:800;letter-spacing:-.01em;margin-bottom:4px;color:var(--text)}
.bio-role{
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.18em;color:var(--muted);text-transform:uppercase;margin-bottom:0}
/* vertical divider */
.bio-div{
  width:1px;height:44px;background:rgba(232,160,32,.15);flex-shrink:0}
@media(max-width:600px){.bio-div{display:none}}
/* tagline */
.bio-tagline{
  font-size:clamp(13px,1.5vw,15px);color:var(--muted);
  line-height:1.65;max-width:320px}
.bio-tagline strong{color:var(--text);font-weight:500}

/* ══════════════════════════════════════
   TOOL CHIPS (image 1)
══════════════════════════════════════ */
.tools-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  width:min(680px,90vw);margin-bottom:44px;
  opacity:0;animation:sup .8s var(--expo) .7s forwards}
.tool{
  padding:7px 16px;
  border:1px solid rgba(232,160,32,.18);border-radius:8px;
  font-family:var(--mono);font-size:11px;font-weight:500;
  color:var(--muted);letter-spacing:.06em;
  background:rgba(232,160,32,.03);
  transition:border-color .25s,color .25s,background .25s,transform .3s var(--spring);
  cursor:default}
.tool:hover{
  border-color:rgba(232,160,32,.5);color:var(--amber);
  background:rgba(232,160,32,.08);transform:translateY(-3px)}

/* ══════════════════════════════════════
   CTA + EMAIL + SOCIAL
══════════════════════════════════════ */
.action-row{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  opacity:0;animation:sup .8s var(--expo) .85s forwards}

/* Magnetic CTA */
.mag-wrap{position:relative;display:inline-block}
.mag-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 34px;background:var(--amber);color:#000;
  border:none;border-radius:99px;
  font-family:var(--sans);font-size:15px;font-weight:800;letter-spacing:.02em;
  cursor:none;position:relative;overflow:hidden;
  box-shadow:0 0 0 0 rgba(232,160,32,.3);
  transition:background .2s,box-shadow .3s,transform .25s var(--expo)}
.mag-btn:hover{background:var(--amber2);box-shadow:0 0 40px 8px rgba(232,160,32,.2)}
.shimmer{position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  transform:translateX(-100%);transition:transform .55s}
.mag-btn:hover .shimmer{transform:translateX(100%)}
.ping{position:absolute;inset:-6px;border-radius:99px;border:2px solid var(--amber);
  opacity:0;animation:ping 2.5s cubic-bezier(.4,0,.2,1) infinite 2s}
@keyframes ping{0%{transform:scale(.94);opacity:.55}100%{transform:scale(1.14);opacity:0}}

/* Email notify */
.email-w{display:flex;align-items:center;gap:6px}
.e-in{
  padding:9px 16px;background:rgba(255,255,255,.05);
  border:1px solid var(--border);border-radius:99px;
  color:var(--text);font-family:var(--mono);font-size:12px;
  width:200px;outline:none;cursor:none;
  transition:border-color .2s,width .4s var(--expo)}
.e-in::placeholder{color:var(--muted)}
.e-in:focus{border-color:rgba(232,160,32,.5);width:240px}
.e-sub{
  padding:9px 16px;background:transparent;
  border:1px solid rgba(232,160,32,.4);border-radius:99px;
  color:var(--amber);font-family:var(--mono);font-size:12px;font-weight:500;
  cursor:none;transition:background .2s,transform .25s var(--spring)}
.e-sub:hover{background:var(--adim);transform:scale(1.05)}
.e-ok{display:none;font-family:var(--mono);font-size:12px;
  color:#57E89C;letter-spacing:.06em;align-items:center;gap:6px}
.e-ok.on{display:inline-flex;animation:sup .4s var(--expo)}

/* Social pills */
.soc{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.sp{
  display:flex;align-items:center;gap:7px;padding:6px 14px;
  border:1px solid var(--border);border-radius:99px;
  font-family:var(--mono);font-size:11px;color:var(--muted);
  text-decoration:none;cursor:none;
  transition:border-color .25s,color .25s,transform .3s var(--spring),background .25s}
.sp:hover{border-color:rgba(232,160,32,.4);color:var(--amber);
  background:var(--adim);transform:translateY(-3px)}

/* ── HUD ── */
#hud{
  position:fixed;bottom:20px;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;pointer-events:none;
  opacity:0;animation:sup .8s var(--expo) 1.1s forwards}
.h-l,.h-r{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.16);letter-spacing:.08em}
.h-ctr{display:flex;align-items:center;gap:10px}
.h-badge{padding:4px 12px;border:1px solid var(--border);border-radius:99px;
  font-family:var(--mono);font-size:10px;color:var(--muted);background:rgba(255,255,255,.025)}
.av-badge{display:flex;align-items:center;gap:6px;padding:4px 12px;
  border:1px solid rgba(87,232,156,.2);border-radius:99px;
  background:rgba(87,232,156,.06);font-family:var(--mono);font-size:10px;color:#57E89C}
.av-dot{width:5px;height:5px;border-radius:50%;background:#57E89C;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ── POP RING ── */
.pop-r{position:fixed;border-radius:50%;border:2px solid var(--amber);pointer-events:none;
  z-index:9995;transform:translate(-50%,-50%) scale(0);opacity:1;
  animation:popr .5s var(--expo) forwards}
@keyframes popr{to{transform:translate(-50%,-50%) scale(2.5);opacity:0}}

/* ── MOBILE ── */
#tilt-h{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.2);
  letter-spacing:.1em;display:none;align-items:center;gap:6px;
  animation:tltf 4s ease-in-out 2s forwards}
@keyframes tltf{0%{opacity:1}80%{opacity:1}100%{opacity:0}}

@media(max-width:600px){
  .h-l{display:none}
  .soc{gap:5px}.sp{padding:5px 10px}
  .bio-para{font-size:clamp(17px,5vw,22px)}
}