/* ═══════════════════════════════════════════════════════════
   EDITION 04 — "WORLDS" · core: tokens, chrome, text systems,
   cursor, buttons, read mode. Per-world palettes via [data-world].
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:#EDF2F4;
  --ink-dim:#8A96A0;
  --base:#07090C;
  --base-2:#0D1117;
  --hair:rgba(237,242,244,.12);

  /* world accents (resolved per page/section via data-world) */
  --w-science:#0FDFD0;
  --w-career:#4FB8FF;
  --w-coaching:#FF4D6D;
  --w-humanity:#E8B44A;
  --accent:var(--w-science);

  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Manrope",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --g:clamp(1.25rem,5vw,5rem);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-slam:cubic-bezier(.34,1.56,.64,1);
}

[data-world="science"]{--accent:var(--w-science)}
[data-world="career"]{--accent:var(--w-career)}
[data-world="coaching"]{--accent:var(--w-coaching)}
[data-world="humanity"]{--accent:var(--w-humanity)}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  background:var(--base);color:var(--ink);
  font-family:var(--sans);font-weight:300;
  font-size:clamp(.95rem,.9rem + .2vw,1.05rem);line-height:1.65;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent);color:var(--base)}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{max-width:1500px;margin-inline:auto;padding-inline:var(--g)}
.serif{font-family:var(--serif);font-weight:400;line-height:.98;letter-spacing:-.02em}
.serif em{font-style:italic;color:var(--accent)}
.eyebrow{font-family:var(--mono);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);display:inline-flex;align-items:center;gap:.7rem}
.eyebrow::before{content:"";width:1.5rem;height:1px;background:currentColor;opacity:.6}

/* ═══ TOP BAR ═══ */
.bar{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;
  justify-content:space-between;padding:1rem clamp(1.25rem,3vw,2.5rem);
  transition:background .5s var(--ease)}
.bar.scrolled{background:linear-gradient(rgba(7,9,12,.85),transparent);backdrop-filter:blur(8px)}
.bar__mono{font-family:var(--serif);font-size:1.35rem;letter-spacing:.02em}
.bar__mono em{font-style:italic;color:var(--accent)}
.bar__links{display:flex;gap:1.6rem;align-items:center}
.bar__links a{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-dim);position:relative;padding:.3rem 0;
  transition:color .35s var(--ease)}
.bar__links a:hover,.bar__links a.on{color:var(--ink)}
.bar__links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.bar__links a:hover::after,.bar__links a.on::after{transform:scaleX(1);transform-origin:left}
@media(max-width:900px){.bar__links{display:none}}
.bar__ctl{display:flex;gap:.9rem;align-items:center}
.icobtn{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);border:1px solid var(--hair);border-radius:100px;padding:.45rem .85rem;
  transition:all .35s var(--ease)}
.icobtn:hover{color:var(--ink);border-color:var(--accent)}
.icobtn.on{color:var(--base);background:var(--accent);border-color:var(--accent)}

/* ═══ FULLSCREEN MENU ═══ */
#menu{position:fixed;inset:0;z-index:120;background:rgba(5,7,9,.96);backdrop-filter:blur(14px);
  display:grid;place-items:center;opacity:0;visibility:hidden;transition:all .5s var(--ease)}
#menu.open{opacity:1;visibility:visible}
.menu__grid{display:grid;gap:1rem;grid-template-columns:1fr;width:min(92vw,64rem)}
@media(min-width:760px){.menu__grid{grid-template-columns:repeat(4,1fr)}}
.mcard{position:relative;aspect-ratio:3/4;border-radius:10px;overflow:hidden;
  border:1px solid var(--hair);display:flex;align-items:flex-end;
  transform:translateY(24px);opacity:0;transition:all .6s var(--ease)}
#menu.open .mcard{transform:none;opacity:1}
#menu.open .mcard:nth-child(2){transition-delay:.07s}
#menu.open .mcard:nth-child(3){transition-delay:.14s}
#menu.open .mcard:nth-child(4){transition-delay:.21s}
.mcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.8) brightness(.7);transition:all .6s var(--ease)}
.mcard:hover img{filter:saturate(1) brightness(.9);transform:scale(1.05)}
.mcard__t{position:relative;z-index:1;padding:1.2rem;width:100%;
  background:linear-gradient(transparent,rgba(5,7,9,.9))}
.mcard__t b{font-family:var(--serif);font-weight:400;font-size:1.4rem;display:block}
.mcard__t span{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent)}
.menu__close{position:absolute;top:1.3rem;right:1.6rem;font-family:var(--mono);
  font-size:.65rem;letter-spacing:.2em;color:var(--ink-dim)}
.menu__close:hover{color:var(--ink)}

/* ═══ WATER-DROP CURSOR ═══ */
.drop{position:fixed;z-index:150;top:0;left:0;pointer-events:none;display:none;
  width:14px;height:14px;margin:-7px 0 0 -7px}
.drop__dot{position:absolute;inset:0;border-radius:50%;background:var(--accent);
  box-shadow:0 0 12px var(--accent);transition:background .4s,box-shadow .4s}
.drop__ring{position:absolute;inset:-12px;border-radius:50%;border:1px solid var(--accent);
  opacity:0;transform:scale(.6);transition:all .3s var(--ease)}
.drop__lbl{position:absolute;top:26px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:.55rem;letter-spacing:.18em;color:var(--accent);
  white-space:nowrap;opacity:0;transition:opacity .3s}
.drop.big .drop__ring{opacity:.8;transform:scale(1)}
.drop.big .drop__lbl{opacity:1}
@media(hover:hover) and (pointer:fine){
  body.hascursor{cursor:none}
  body.hascursor a,body.hascursor button,body.hascursor [data-drag]{cursor:none}
  .drop{display:block}
}

/* ═══ BUTTONS — magnetic + liquid fill ═══ */
.btn{position:relative;overflow:hidden;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  padding:.95rem 1.8rem;border-radius:100px;border:1px solid var(--accent);
  display:inline-flex;align-items:center;gap:.6rem;color:var(--ink);
  transition:color .45s var(--ease);will-change:transform}
.btn i{position:absolute;inset:auto 0 0 0;height:0;background:var(--accent);
  border-radius:inherit;transition:height .45s var(--ease);z-index:0}
.btn span{position:relative;z-index:1}
.btn:hover{color:var(--base)}
.btn:hover i{height:100%}
.btn--fill{background:var(--accent);color:var(--base)}
.btn--fill i{background:var(--base)}
.btn--fill:hover{color:var(--ink)}

/* ═══ TEXT SYSTEMS ═══ */
/* tide reveal — luminous wave sweeps through rising letters */
.tide .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.tide .w>i{display:inline-block;font-style:inherit;transform:translateY(110%);
  will-change:transform}
.tide.go .w>i{animation:tideup .9s var(--ease) forwards}
@keyframes tideup{to{transform:translateY(0)}}
.tide.go{background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.85) 50%,transparent 70%),
  linear-gradient(currentColor,currentColor);
  background-size:250% 100%,100% 100%;background-position:120% 0,0 0;
  -webkit-background-clip:text;background-clip:text;
  animation:tidesweep 1.2s .15s var(--ease) both}
@keyframes tidesweep{from{background-position:120% 0,0 0}to{background-position:-120% 0,0 0}}

/* soft stagger rise for body */
.rise{opacity:0;transform:translateY(20px)}
.rise.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}

/* breath on glass — humanity */
.breath{opacity:0;filter:blur(14px);transform:translateY(10px) scale(1.02);
  will-change:opacity,filter,transform}
.breath.on{opacity:1;filter:blur(0);transform:none;
  transition:opacity 1.1s var(--ease),filter 1.1s var(--ease),transform 1.1s var(--ease)}
.breath.off{opacity:0;filter:blur(10px);transform:translateY(-16px) scale(.99);
  transition:opacity .7s var(--ease),filter .7s var(--ease),transform .7s var(--ease)}

/* impact stamp — coaching */
.stamp{opacity:0;transform:scale(1.6);will-change:transform,opacity}
.stamp.on{opacity:1;transform:scale(1);
  transition:transform .28s var(--ease-slam),opacity .18s linear}
@keyframes shake{0%,100%{transform:translate(0,0)}25%{transform:translate(3px,-2px)}
  50%{transform:translate(-3px,2px)}75%{transform:translate(2px,1px)}}
.shake{animation:shake .18s linear 1}

/* liquid-ink text inside glass panels */
.ink{opacity:0;filter:blur(8px);letter-spacing:.06em}
.ink.on{opacity:1;filter:blur(0);letter-spacing:normal;
  transition:opacity .9s var(--ease),filter .9s var(--ease),letter-spacing .9s var(--ease)}

/* frosted glass panel */
.glass{background:rgba(13,17,23,.55);backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(255,255,255,.14);border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.35)}

/* ═══ CARD HOVER (tilt + parallax + lift + caption) — JS drives tilt ═══ */
.tcard{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--hair);
  transform-style:preserve-3d;will-change:transform;
  transition:box-shadow .5s var(--ease)}
.tcard img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);will-change:transform}
.tcard:hover{box-shadow:0 22px 50px rgba(0,0,0,.5),0 0 40px color-mix(in srgb,var(--accent) 25%,transparent)}
.tcard__cap{position:absolute;left:0;right:0;bottom:0;padding:.9rem 1.1rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  background:linear-gradient(transparent,rgba(5,7,9,.9));color:var(--ink);
  transform:translateY(100%);transition:transform .45s var(--ease)}
.tcard:hover .tcard__cap{transform:none}

/* ═══ ROTATE NOTICE (mobile portrait) ═══ */
#rotate{position:fixed;inset:0;z-index:200;background:var(--base);display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;text-align:center;
  padding:2rem}
#rotate .ph{width:46px;height:76px;border:2px solid var(--accent);border-radius:10px;
  animation:rot 2.2s var(--ease) infinite}
@keyframes rot{0%,25%{transform:rotate(0)}55%,80%{transform:rotate(90deg)}100%{transform:rotate(90deg)}}
#rotate p{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-dim);max-width:26ch;line-height:2}
#rotate button{margin-top:.5rem}
@media(orientation:portrait) and (max-width:900px){body.rotate-gate #rotate{display:flex}}

/* ═══ READ MODE ═══ */
body.read .drop,body.read #menu,body.read .hero-scroll-cue{display:none!important}
body.read{cursor:auto!important}
body.read .vsec{height:auto!important;min-height:0!important}
body.read .vsec video{display:none!important}
body.read .vsec .poster{display:block!important;position:relative!important;
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
body.read .pin-space{height:auto!important}
body.read .overlaytext,body.read .glasswrap{position:relative!important;opacity:1!important;
  transform:none!important;filter:none!important;inset:auto!important;margin:1.5rem 0}
body.read .breath,body.read .stamp,body.read .ink,body.read .rise,body.read .tide .w>i{
  opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
@media print{
  .bar,.drop,#menu,#rotate,.hero-scroll-cue{display:none!important}
  body{background:#fff;color:#111}
}

/* reduced motion → auto read-ish */
@media(prefers-reduced-motion:reduce){
  .tide.go .w>i{animation:none;transform:none}
  .tide.go{animation:none}
  .rise{opacity:1;transform:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

footer{border-top:1px solid var(--hair);padding-block:2.3rem;position:relative;z-index:2;
  background:var(--base)}
.foot{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim)}

/* ══════════ world compass — prev/next world from any page ══════════ */
.wcompass{position:fixed;left:0;right:0;bottom:1.1rem;z-index:60;display:flex;
  justify-content:space-between;padding-inline:1.2rem;pointer-events:none}
.wcompass__b{pointer-events:auto;display:flex;align-items:center;gap:.55rem;
  padding:.55rem .95rem;border:1px solid var(--hair);border-radius:99px;
  background:color-mix(in srgb,var(--bg,#05090D) 78%,transparent);
  backdrop-filter:blur(10px);color:var(--ink-dim);text-decoration:none;
  font-family:var(--mono);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;
  transition:all .35s var(--ease)}
.wcompass__b i{font-style:normal;font-size:.9rem;line-height:1;color:var(--ink)}
.wcompass__b:hover{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 35%,transparent);
  transform:translateY(-2px)}
@media(max-width:700px){.wcompass__b span{display:none}.wcompass__b{padding:.55rem .7rem}}
body.read .wcompass{position:static;margin:2rem auto;justify-content:center;gap:1rem}
@media print{.wcompass{display:none!important}}

/* ══════════ PRELOADER — the gate ══════════ */
html.loading, html.loading body{overflow:hidden!important}
#preload{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:radial-gradient(70% 60% at 50% 45%,#08131a,#04080c 70%);
  transition:opacity .8s var(--ease),visibility .8s}
#preload.gone{opacity:0;visibility:hidden;pointer-events:none}
.pl__inner{display:flex;flex-direction:column;align-items:center;gap:1.4rem;width:min(24rem,80vw)}
.pl__drop{width:74px;height:auto;overflow:visible;
  filter:drop-shadow(0 0 26px color-mix(in srgb,#0FDFD0 40%,transparent))}
.pl__drop-o{fill:none;stroke:color-mix(in srgb,#0FDFD0 45%,transparent);stroke-width:2}
.pl__fill{transition:y .35s cubic-bezier(.2,.7,.3,1)}
.pl__pct{font-family:var(--serif,Georgia,serif);display:flex;align-items:baseline;gap:.15rem;
  color:#EDE9F5;line-height:1}
.pl__pct b{font-weight:400;font-size:2.9rem;font-variant-numeric:tabular-nums}
.pl__pct i{font-style:normal;font-size:1rem;color:#0FDFD0}
.pl__bar{width:100%;height:2px;background:rgba(237,233,245,.12);border-radius:2px;overflow:hidden}
.pl__bar span{display:block;height:100%;width:0%;background:linear-gradient(90deg,#0FDFD0,#7ff3e8);
  box-shadow:0 0 12px #0FDFD0;transition:width .25s linear}
.pl__cap{font-family:var(--mono,monospace);font-size:.55rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-dim,#8A85A0);margin:0}
@media(prefers-reduced-motion:reduce){#preload{display:none}}