:root{
  --bg:#070709;
  --bg2:#0c0d12;
  --ink:#f3f4f7;
  --muted:#9aa0ad;
  --faint:#6b7080;
  --red:#ea1c24;
  --purple:#8e54c4;   --purple-glow:#b884f2;
  --navy:#2f5c8f;     --navy-glow:#5ea6f0;
  --magenta:#d51a6f;  --magenta-glow:#f24a96;
  --hair:rgba(255,255,255,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Manrope',system-ui,sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
#stage{position:fixed;inset:0;overflow:hidden}
/* layered background */
#bg{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 90% at 50% -10%, #15161d 0%, var(--bg2) 38%, var(--bg) 78%);
}
#bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(140% 110% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);}
#grain{position:absolute;inset:0;z-index:1;opacity:.05;pointer-events:none;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
canvas#helix{position:absolute;inset:0;z-index:2;display:block}

/* ---------- Intro (combined helix state) ---------- */
#intro{position:absolute;z-index:5;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;text-align:center;
  transition:opacity .7s ease, transform .7s ease;padding:8vh 24px 7vh;}
#intro .logo{width:min(340px,62vw);filter:drop-shadow(0 8px 40px rgba(234,28,36,.18));}
#intro .tagline{margin-top:30px;font-family:'Sora';font-weight:300;letter-spacing:.02em;
  font-size:clamp(22px,3.4vw,40px);color:#fff;}
#intro .tagline b{font-weight:600}
#intro .sub{margin-top:14px;color:var(--muted);font-size:clamp(13px,1.25vw,16px);
  letter-spacing:.34em;text-transform:uppercase;font-weight:500;}
#enter{margin-top:auto;display:inline-flex;align-items:center;gap:12px;
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28);
  font-family:'Sora';font-weight:500;font-size:15px;letter-spacing:.04em;
  padding:15px 28px;border-radius:100px;cursor:pointer;
  transition:.35s cubic-bezier(.2,.8,.2,1);backdrop-filter:blur(4px);}
#enter:hover{border-color:rgba(255,255,255,.7);transform:translateY(-2px);
  box-shadow:0 14px 40px rgba(0,0,0,.5);}
#enter .dot{width:7px;height:7px;border-radius:50%;background:var(--red);
  box-shadow:0 0 14px var(--red);}
#enter svg{transition:transform .35s}
#enter:hover svg{transform:translateX(5px)}
body.opened #intro{opacity:0;transform:scale(.96);pointer-events:none}

/* ---------- Top bar (after unravel) ---------- */
#topbar{position:absolute;z-index:6;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:26px clamp(22px,4vw,56px);
  opacity:0;transform:translateY(-12px);transition:opacity .7s .25s ease,transform .7s .25s ease;
  pointer-events:none;}
body.opened #topbar{opacity:1;transform:none}
#topbar img{height:clamp(42px,4.4vw,64px);width:auto}
body.opened #topbar img{pointer-events:auto;cursor:pointer}
#topbar .meta{display:flex;align-items:center;gap:26px;color:var(--faint);
  font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  pointer-events:auto;}
#topbar .meta a{color:var(--muted);text-decoration:none;transition:color .25s}
#topbar .meta a:hover{color:#fff}
@media(max-width:720px){#topbar .meta .hide-sm{display:none}}

/* ---------- Language switcher ---------- */
#lang{position:fixed;z-index:8;top:32px;display:flex;align-items:center;gap:11px;
  font-family:'Sora';font-size:13px;font-weight:600;letter-spacing:.14em;
  left:calc(100% - clamp(22px,4vw,56px));transform:translateX(-100%);
  transition:left .85s cubic-bezier(.2,.8,.2,1), transform .85s cubic-bezier(.2,.8,.2,1);}
body.opened #lang{left:50%;transform:translateX(-50%);}
#lang button{background:none;border:none;cursor:pointer;color:var(--faint);
  font:inherit;letter-spacing:inherit;padding:5px 2px;transition:color .25s;}
#lang button:hover{color:var(--muted)}
#lang button.active{color:#fff}
#lang .sep{color:rgba(255,255,255,.2)}

/* ---------- Columns (three strands) ---------- */
#columns{position:absolute;z-index:5;inset:0;display:grid;grid-template-columns:repeat(3,1fr);
  align-items:flex-end;pointer-events:none;}
.col{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;text-decoration:none;color:inherit;pointer-events:auto;cursor:pointer;
  padding:0 clamp(16px,2.2vw,40px) clamp(48px,8vh,96px);
  opacity:0;transform:translateY(26px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);}
body.opened .col{opacity:1;transform:none}
body.opened .col:nth-child(1){transition-delay:.45s}
body.opened .col:nth-child(2){transition-delay:.58s}
body.opened .col:nth-child(3){transition-delay:.71s}
.col::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 38%, transparent 60%);
  opacity:0;transition:opacity .5s;}
.col:hover::before{opacity:1}

.card{width:100%;max-width:380px;}
.head{margin-bottom:0}
.bead{width:40px;height:auto;display:block;margin-bottom:18px;transition:filter .45s, transform .45s cubic-bezier(.2,.8,.2,1);}
.col:hover .bead{transform:translateY(-2px) rotate(-8deg)}
.col h2{font-family:'Sora';font-weight:600;font-size:clamp(26px,2.5vw,38px);line-height:1.02;
  letter-spacing:-.01em;color:#fff;}
.col .domain{margin-top:12px;font-family:'Sora';font-size:15px;font-weight:500;
  letter-spacing:.02em;}
.col p{margin-top:16px;color:var(--muted);font-size:15px;line-height:1.55;font-weight:400;
  max-width:330px;text-wrap:pretty;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s ease, opacity .45s ease, margin .5s ease;}
.col:hover p, .col:focus-visible p{max-height:120px;opacity:1;}
.enter-link{margin-top:22px;display:inline-flex;align-items:center;gap:11px;
  font-family:'Sora';font-weight:600;font-size:14.5px;letter-spacing:.05em;color:#fff;
  opacity:0;transform:translateY(6px);transition:.45s;}
.col:hover .enter-link,.col:focus-visible .enter-link{opacity:1;transform:none}
.enter-link .arrow{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);transition:.35s}
.col:hover .enter-link .arrow{transform:translateX(3px)}

/* per-strand accent colors */
.col.s0 .domain{color:var(--purple-glow)}
.col.s1 .domain{color:var(--navy-glow)}
.col.s2 .domain{color:var(--magenta-glow)}
.col.s0:hover .bead{filter:drop-shadow(0 0 16px var(--purple-glow))}
.col.s1:hover .bead{filter:drop-shadow(0 0 16px var(--navy-glow))}
.col.s2:hover .bead{filter:drop-shadow(0 0 16px var(--magenta-glow))}
.col.s0:hover .enter-link .arrow{border-color:var(--purple-glow);background:rgba(142,84,196,.18)}
.col.s1:hover .enter-link .arrow{border-color:var(--navy-glow);background:rgba(94,166,240,.16)}
.col.s2:hover .enter-link .arrow{border-color:var(--magenta-glow);background:rgba(242,74,150,.18)}

/* vertical divider hairlines between columns */
.col + .col::after{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;
  background:linear-gradient(to bottom,transparent,var(--hair),transparent);}

#hint{position:absolute;z-index:6;left:50%;bottom:24px;transform:translateX(-50%);
  color:var(--faint);font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  opacity:0;transition:opacity .6s 1.2s ease;text-align:center;}
body.opened #hint{opacity:1}

/* mobile-only tap prompt (shown during intro) */
#mhint{display:none}

/* ---------- Mobile fallback ---------- */
@media(max-width:760px){
  html,body{height:auto}
  body{overflow-x:hidden;overflow-y:visible}
  #stage{position:relative;min-height:100vh;overflow:visible}
  #lang{position:absolute;top:38px;left:50%;transform:translateX(-50%);
    background:none;border:none;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;
    transition:none;}
  canvas#helix{opacity:.42}
  #columns{position:relative;z-index:5;grid-template-columns:1fr;align-items:stretch;
    min-height:100vh;padding:96px 22px 40px;gap:14px;}
  .col{height:auto;justify-content:flex-start;align-items:flex-start;padding:26px 22px;
    border:1px solid var(--hair);border-radius:18px;background:rgba(12,13,18,.66);
    backdrop-filter:blur(8px);}
  .col + .col::after{display:none}
  .col p{max-height:none;opacity:1;}
  .enter-link{opacity:1;transform:none}
  /* compact head: swirl beside the title, centered */
  .head{display:flex;align-items:center;justify-content:flex-start;gap:13px;text-align:left;}
  .bead{width:32px;margin-bottom:0;flex:none}
  .col h2{line-height:1.05}
  #hint{display:none}
  #enter{display:none}
  #mhint{display:block;position:fixed;left:50%;bottom:30px;transform:translateX(-50%);
    z-index:7;color:var(--faint);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
    font-weight:600;text-align:center;line-height:1.4;max-width:80vw;
    transition:opacity .5s;}
  body.opened #mhint{opacity:0;pointer-events:none}
}
@media(prefers-reduced-motion:reduce){
  #intro{transition:none}
}
/* instant settled state for previews/captures */
body.preview #intro{display:none}
body.preview #topbar,body.preview #hint{opacity:1;transform:none;transition:none}
body.preview .col{opacity:1!important;transform:none!important;transition:none!important}