/* ── RESET ──────────────────────────── */
:root {
  --bg:#081017; --surface:rgba(18,35,46,0.82); --border:rgba(174,204,217,0.26);
  --blue:#7fd6ff; --violet:#f2bd68; --warm:rgba(255,185,105,0.94);
  --text:#f6fbff; --dim:rgba(213,229,237,0.72); --mid:rgba(231,241,246,0.88);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{zoom:1.5}
html,body{width:100%;height:100%;overflow:hidden}
body{
  background:
    radial-gradient(circle at 18% 12%, rgba(127,216,255,.12), transparent 32%),
    radial-gradient(circle at 82% 78%, rgba(242,189,104,.10), transparent 30%),
    var(--bg);
  color:var(--text);font-family:'Outfit',sans-serif;cursor:default}


/* ── AMBIENT ─────────────────────────── */
.orbs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(100px)}
.o1{width:700px;height:700px;background:#1d91c7;opacity:.09;top:-260px;right:-140px;animation:da 22s ease-in-out infinite}
.o2{width:500px;height:500px;background:#d58d2b;opacity:.075;bottom:-180px;left:-120px;animation:db 28s ease-in-out infinite}
.o3{width:280px;height:280px;background:#36c29b;opacity:.055;top:55%;left:58%;animation:dc 18s ease-in-out infinite}
@keyframes da{0%,100%{transform:translate(0,0)}40%{transform:translate(40px,25px)}70%{transform:translate(-20px,40px)}}
@keyframes db{0%,100%{transform:translate(0,0)}35%{transform:translate(-30px,-18px)}65%{transform:translate(25px,-35px)}}
@keyframes dc{0%,100%{transform:translate(0,0)}50%{transform:translate(-38px,20px)}}


/* ── SLIDE SYSTEM ───────────────────── */
.slides{position:fixed;inset:0;z-index:1}
.slide{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;opacity:0;pointer-events:none}
.slide.active{opacity:1;pointer-events:all}
.slide.s-enter{animation:irisIn .75s cubic-bezier(.4,0,.2,1) both;pointer-events:all}
.slide.s-exit{animation:irisOut .55s ease forwards;pointer-events:none}
@keyframes irisIn{from{clip-path:circle(0% at 50% 50%);opacity:1}to{clip-path:circle(150% at 50% 50%);opacity:1}}
@keyframes irisOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.97)}}

/* ── NAV ────────────────────────────── */
.nav-dots{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);
  display:flex;gap:10px;z-index:100;align-items:center}
.dot{width:6px;height:6px;border-radius:3px;background:rgba(213,229,237,.38);transition:all .35s;cursor:pointer}
.dot.active{width:22px;background:var(--blue)}
.slide-lbl{position:fixed;bottom:1.8rem;right:2.5rem;font-size:.63rem;
  letter-spacing:.2em;color:var(--dim);z-index:100;font-weight:300}
.nav-btn{position:fixed;top:50%;transform:translateY(-50%);background:none;border:none;
  cursor:pointer;color:rgba(213,229,237,.42);font-size:2rem;padding:1rem;z-index:100;
  transition:color .2s;line-height:1}
.nav-btn:hover{color:rgba(246,251,255,.86)}
.nb-l{left:.5rem}.nb-r{right:.5rem}

/* ── TOUCH NAV ──────────────────────── */
.touch-nav{position:fixed;bottom:2rem;left:2rem;display:flex;gap:.7rem;z-index:200}
.touch-btn{width:58px;height:58px;border-radius:50%;border:1px solid rgba(127,214,255,.35);
  background:rgba(127,214,255,.08);
  color:rgba(246,251,255,.9);font-size:1.7rem;cursor:pointer;line-height:1;padding:0;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s,border-color .18s,transform .12s;user-select:none}
.touch-btn:hover{background:rgba(127,214,255,.18);border-color:rgba(127,214,255,.65)}
.touch-btn:active{transform:scale(.92);background:rgba(127,214,255,.26)}

/* ── PARTICLES ──────────────────────── */
.ptcl{position:fixed;width:5px;height:5px;border-radius:50%;background:var(--violet);
  pointer-events:none;z-index:400;transform:translate(-50%,-50%);
  animation:scatter .9s ease-out forwards}
@keyframes scatter{
  from{transform:translate(-50%,-50%) translate(0,0);opacity:.9}
  to{transform:translate(-50%,-50%) translate(var(--tx),var(--ty));opacity:0}}

/* ── RIPPLE ─────────────────────────── */
.ripple{position:absolute;left:50%;top:50%;width:154px;height:154px;
  transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid rgba(127,214,255,.52);pointer-events:none;z-index:4;
  animation:rippleOut 1.2s ease-out forwards}
@keyframes rippleOut{
  from{transform:translate(-50%,-50%) scale(1);opacity:.55}
  to{transform:translate(-50%,-50%) scale(3);opacity:0}}

/* ═══════════ SLIDE 1 · TITLE ═══════════ */
#s1{padding:0}
.ghost-word{position:absolute;font-family:'Cormorant Garamond',serif;
  font-size:clamp(.8rem,1.4vw,1rem);font-style:italic;font-weight:300;
  color:rgba(213,229,237,.18);letter-spacing:.12em;
  animation:ghostFloat 10s ease-in-out infinite;user-select:none;pointer-events:none}
@keyframes ghostFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

.letter{display:inline-block;font-family:'Cormorant Garamond',serif;
  font-size:clamp(3.2rem,8.5vw,7rem);font-weight:300;letter-spacing:.22em;
  opacity:0;transform:translateY(28px) scale(.96);
  animation:lRise .65s cubic-bezier(.4,0,.2,1) forwards}
@keyframes lRise{to{opacity:1;transform:translateY(0) scale(1)}}

#s1 .tagline{margin-top:1.4rem;font-size:.7rem;letter-spacing:.55em;
  text-transform:uppercase;color:var(--dim);font-weight:300;
  opacity:0;animation:fIn .8s 1.2s forwards}
#s1 .hint-s1{position:fixed;bottom:4.5rem;font-size:.65rem;letter-spacing:.25em;
  text-transform:uppercase;color:var(--dim);font-weight:300;
  animation:pulse 2.5s 1.8s infinite}
@keyframes fIn{to{opacity:1}}
@keyframes pulse{0%,100%{opacity:.2}50%{opacity:.6}}

/* ═══════════ SLIDE 2 · DEFINITION ═══════════ */
#s2 .def-wrap{max-width:820px;text-align:center}
#s2 .eyebrow{font-size:.78rem;letter-spacing:.5em;text-transform:uppercase;
  color:var(--blue);font-weight:400;margin-bottom:2rem}
.def-line{display:block;font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.4rem,3.2vw,2.1rem);font-weight:300;font-style:italic;
  line-height:1.8;color:var(--text);
  opacity:0;transform:translateY(12px);transition:opacity .6s,transform .6s}
.def-line.show{opacity:1;transform:translateY(0)}
.def-line strong{font-style:normal;font-weight:600;color:var(--blue)}
#s2 .def-note{margin-top:2rem;font-size:1rem;line-height:1.88;
  color:var(--mid);font-weight:300;
  opacity:0;transform:translateY(10px);transition:opacity .6s,transform .6s}
#s2 .def-note.show{opacity:1;transform:translateY(0)}
#s2 .def-note em{color:var(--violet);font-style:normal}

/* ═══════════ SLIDE 3 · vs HOMONYMY ═══════════ */
#s3{padding:1.5rem 2.5rem}
.vs-wrap{display:grid;grid-template-columns:1fr 1px 1fr;
  gap:0 2rem;width:100%;max-width:1020px;align-items:center}
.vs-divider{background:rgba(174,204,217,.22);height:58vh;align-self:center}
.vs-panel{display:flex;flex-direction:column;align-items:center;gap:1.2rem;padding:0 .8rem}

.vs-label{font-size:.78rem;letter-spacing:.5em;text-transform:uppercase;font-weight:400;
  opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
.panel-l .vs-label{color:var(--warm)}
.panel-r .vs-label{color:var(--blue)}
.vs-label.show{opacity:1;transform:translateY(0)}

/* Homonymy - BANK bubbles */
.homo-stage{position:relative;width:280px;height:170px}
.homo-b{position:absolute;width:118px;height:118px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-weight:300;
  opacity:0;top:50%;transform:translateY(-50%)}
.homo-b span{font-size:.7rem;font-weight:300;letter-spacing:.08em;
  color:rgba(255,220,176,.82);margin-top:.15rem}
.homo-1{left:0;background:rgba(80,45,18,.82);border:1px solid rgba(242,189,104,.5);color:#ffe0ad}
.homo-2{right:0;background:rgba(80,45,18,.82);border:1px solid rgba(242,189,104,.5);color:#ffe0ad}
.homo-b.show{animation:homoReveal .5s ease forwards}
@keyframes homoReveal{from{opacity:0;transform:translateY(-50%) scale(.7)}to{opacity:1;transform:translateY(-50%) scale(1)}}
.homo-drift-1{animation:hD1 3.5s 0s ease-in-out infinite}
.homo-drift-2{animation:hD2 3.5s 0s ease-in-out infinite}
@keyframes hD1{0%,100%{left:0}50%{left:-10px}}
@keyframes hD2{0%,100%{right:0}50%{right:-10px}}
.vs-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:.52rem;letter-spacing:.12em;color:rgba(246,251,255,.42);font-weight:400}

/* Polysemy mini cluster */
.poly-stage{position:relative;width:280px;height:240px}
.poly-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:84px;height:84px;border-radius:50%;
  background:rgba(18,61,79,.9);border:1px solid rgba(127,214,255,.54);
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;font-size:1rem;font-weight:600;
  letter-spacing:.05em;color:var(--blue);z-index:5;
  opacity:0;transition:opacity .4s .4s}
.poly-center.show{opacity:1}
.poly-sat{position:absolute;border-radius:50%;
  background:rgba(65,46,23,.82);border:1px solid rgba(242,189,104,.42);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:.68rem;font-weight:300;line-height:1.3;color:var(--mid);
  opacity:0;transition:opacity .4s}
.poly-sat.show{opacity:1}
.ps1{width:68px;height:68px;left:12px;top:16px}
.ps2{width:68px;height:68px;right:12px;top:16px}
.ps3{width:68px;height:68px;left:50%;bottom:6px;transform:translateX(-50%)}

.vs-desc{font-size:.9rem;line-height:1.65;color:var(--mid);font-weight:300;
  text-align:center;max-width:240px;
  opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.vs-desc.show{opacity:1;transform:translateY(0)}
.vs-origin{font-size:.72rem;letter-spacing:.12em;color:var(--dim);
  font-weight:300;text-align:center;font-style:italic;
  opacity:0;transition:opacity .5s}
.vs-origin.show{opacity:1}

/* ═══════════ SLIDE 4 · TABLE BUBBLES ═══════════ */
#s4{padding:0;overflow:hidden}
.b-stage{position:absolute;inset:0}
#conn-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bubble{position:absolute;border-radius:50%;display:flex;align-items:center;
  justify-content:center;text-align:center;transform:translate(-50%,-50%);
}
.b-main{width:190px;height:190px;background:rgba(18,61,79,.94);
  border:1px solid rgba(127,214,255,.56);
  box-shadow:0 0 55px rgba(127,214,255,.16),inset 0 0 28px rgba(127,214,255,.08);
  font-family:'Cormorant Garamond',serif;font-size:2.5rem;font-weight:600;
  letter-spacing:.08em;color:var(--blue);left:50%;top:50%;
  animation:bmF 7s ease-in-out infinite;z-index:10}
@keyframes bmF{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-10px)}}
.b-sat{background:rgba(43,51,35,.9);border:1px solid rgba(242,189,104,.42);
  box-shadow:0 0 28px rgba(242,189,104,.14);font-size:.84rem;font-weight:300;
  line-height:1.4;padding:.85rem .7rem;color:var(--text);
  opacity:0;pointer-events:none;z-index:5}
.b-sat .bnum{display:block;font-family:'Cormorant Garamond',serif;
  font-size:1.5rem;font-weight:300;color:var(--violet);margin-bottom:.1rem;line-height:1}
.b-sat.shown{animation:bPop .55s cubic-bezier(.34,1.56,.64,1) forwards}
.b-sat.shown.done{opacity:1;transform:translate(-50%,-50%) scale(1)}
@keyframes bPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.05)}
  60%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.bf1{animation:bf1 6s ease-in-out infinite}.bf2{animation:bf2 7.2s ease-in-out infinite}
.bf3{animation:bf3 5.4s ease-in-out infinite}.bf4{animation:bf4 8s ease-in-out infinite}
.bf5{animation:bf5 6.5s ease-in-out infinite}.bf6{animation:bf6 7.8s ease-in-out infinite}
.bf7{animation:bf7 5.2s ease-in-out infinite}
@keyframes bf1{0%,100%{margin-top:0}50%{margin-top:-8px}}
@keyframes bf2{0%,100%{margin-top:0}50%{margin-top:-13px}}
@keyframes bf3{0%,100%{margin-top:0}50%{margin-top:-7px}}
@keyframes bf4{0%,100%{margin-top:0}50%{margin-top:-11px}}
@keyframes bf5{0%,100%{margin-top:0}50%{margin-top:-9px}}
@keyframes bf6{0%,100%{margin-top:0}50%{margin-top:-14px}}
@keyframes bf7{0%,100%{margin-top:0}50%{margin-top:-6px}}
#b-hint{position:absolute;bottom:4.5rem;left:50%;transform:translateX(-50%);
  font-size:.62rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap;font-weight:300}
#b-count{position:absolute;top:2.5rem;left:50%;transform:translateX(-50%);
  font-family:'Cormorant Garamond',serif;font-size:1rem;color:var(--dim);letter-spacing:.08em}

/* ═══════════ SLIDE 5 · FLIP CARDS ═══════════ */
#s5 .flip-label{font-size:.62rem;letter-spacing:.5em;text-transform:uppercase;
  color:var(--violet);font-weight:400;margin-bottom:2.5rem}
#s5 .card-row{display:flex;gap:1.1rem}
.flip-card{width:215px;height:295px;perspective:1000px;cursor:pointer;flex-shrink:0}
.card-inner{width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .75s cubic-bezier(.4,0,.2,1);position:relative}
.flip-card:hover .card-inner,.flip-card.flipped .card-inner{transform:rotateY(180deg)}
.card-f,.card-b{position:absolute;inset:0;backface-visibility:hidden;
  -webkit-backface-visibility:hidden;border-radius:1rem;
  display:flex;align-items:center;justify-content:center;flex-direction:column}
.card-f{background:rgba(18,35,46,.9);border:1px solid rgba(174,204,217,.28);gap:.7rem}
.card-f .fw{font-family:'Cormorant Garamond',serif;font-size:3.3rem;font-weight:600;color:var(--blue)}
.card-f .ft{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);font-weight:300}
.card-b{background:rgba(55,43,25,.94);border:1px solid rgba(242,189,104,.45);
  transform:rotateY(180deg);padding:1.1rem 1rem;
  justify-content:flex-start;align-items:flex-start}
.card-b .bw{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:300;
  color:var(--violet);margin-bottom:.75rem;letter-spacing:.08em;width:100%}
.card-b ul{list-style:none;width:100%}
.card-b li{font-size:.82rem;font-weight:300;color:var(--mid);padding:.3rem 0;
  border-bottom:1px solid rgba(231,241,246,.16);line-height:1.5;display:flex;gap:.4rem}
.card-b li::before{content:'–';color:var(--violet);flex-shrink:0}
.card-b li:last-child{border-bottom:none}

/* ═══════════ SLIDE 6 · DEVELOPMENT ═══════════ */
#s6 .dev-label{font-size:.62rem;letter-spacing:.5em;text-transform:uppercase;
  color:var(--blue);font-weight:400;margin-bottom:2.8rem;text-align:center}
#s6 .timeline{position:relative;padding-left:2rem;max-width:740px;width:100%}
#s6 .timeline::before{content:'';position:absolute;left:0;top:6px;width:1px;height:0;
  background:linear-gradient(to bottom,var(--blue),var(--violet),transparent);
  transition:height 1.9s cubic-bezier(.4,0,.2,1)}
#s6.tl-on .timeline::before{height:calc(100% - 6px)}
.t-item{position:relative;margin-bottom:1.7rem;
  opacity:0;transform:translateX(-14px);transition:opacity .5s,transform .5s}
.t-item.show{opacity:1;transform:translateX(0)}
.t-item::before{content:'';position:absolute;left:-2.35rem;top:5px;
  width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 2px var(--bg)}
.t-item.sec::before{background:var(--violet);width:6px;height:6px;left:-2.27rem}
.t-era{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--blue);margin-bottom:.3rem;font-weight:400}
.t-item.sec .t-era{color:var(--violet)}
.t-body{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-style:italic;
  line-height:1.6;color:var(--mid);font-weight:300}
.t-body strong{font-style:normal;font-weight:400;color:var(--text)}

/* ═══════════ SLIDE 7 · FEATURES ═══════════ */
#s7 .feat-eye{font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.2rem,2.6vw,1.7rem);font-style:italic;font-weight:300;
  color:var(--dim);margin-bottom:3rem;text-align:center}
#s7 .feats{display:flex;flex-direction:column;gap:1.1rem;max-width:720px;width:100%}
.feat{display:flex;gap:1.4rem;align-items:flex-start;padding:1.3rem 1.4rem;
  border:1px solid var(--border);border-radius:.8rem;background:var(--surface);
  opacity:0;transform:translateX(-18px);transition:opacity .5s,transform .5s}
.feat.show{opacity:1;transform:translateX(0)}
.feat:hover{border-color:rgba(127,214,255,.44);background:rgba(18,61,79,.82);transition:border-color .3s,background .3s}
.feat-n{font-family:'Cormorant Garamond',serif;font-size:2.5rem;font-weight:300;
  color:var(--blue);line-height:1;flex-shrink:0;width:1.8rem}
.feat-body h3{font-size:.95rem;font-weight:500;letter-spacing:.04em;margin-bottom:.35rem}
.feat-body p{font-size:.9rem;font-weight:300;color:var(--mid);line-height:1.7}

/* ═══════════ SLIDE 8 · END ═══════════ */
#s8{gap:0}
#s8 .end-top{font-size:.62rem;letter-spacing:.65em;text-transform:uppercase;
  color:rgba(213,229,237,.42);font-weight:300;margin-bottom:2.8rem;text-align:center;
  opacity:0;transition:opacity 1s}
#s8.end-on .end-top{opacity:1}
.end-orn{display:flex;gap:7px;margin-bottom:3rem;
  opacity:0;transition:opacity 1s .2s;align-items:center}
#s8.end-on .end-orn{opacity:1}
.orn-d{border-radius:50%}
.orn-d:nth-child(1){width:6px;height:6px;background:rgba(127,214,255,.6)}
.orn-d:nth-child(2){width:5px;height:5px;background:rgba(242,189,104,.55);margin-top:4px}
.orn-d:nth-child(3){width:4px;height:4px;background:rgba(127,214,255,.42);margin-top:2px}
.orn-d:nth-child(4){width:5px;height:5px;background:rgba(242,189,104,.48);margin-top:5px}
.orn-d:nth-child(5){width:6px;height:6px;background:rgba(127,214,255,.36);margin-top:1px}

.members{display:flex;gap:3.5rem;align-items:flex-start;justify-content:center}
.member{display:flex;flex-direction:column;align-items:center;gap:.6rem;
  opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}
.member.show{opacity:1;transform:translateY(0)}
.member-num{font-family:'Cormorant Garamond',serif;font-size:4.8rem;font-weight:300;
  line-height:1;color:rgba(213,229,237,.28)}
.member-bar{width:28px;height:1px;background:linear-gradient(to right,var(--blue),var(--violet));opacity:.72}
.member-name{font-size:1.3rem;font-weight:300;letter-spacing:.3em;color:var(--mid)}
#s8 .end-sub{margin-top:3.5rem;font-size:.6rem;letter-spacing:.42em;
  text-transform:uppercase;color:var(--dim);font-weight:300;text-align:center;
  opacity:0;transition:opacity .8s 1.1s}
#s8.end-on .end-sub{opacity:1}