/* =====================================================
   EMBRA v7 — LIQUID GLASS.
   Molten amber light drifts beneath the page; the
   sections are translucent glass organisms that slowly
   morph their shape, refracting the light below.
   Embi lives everywhere on this page.
   ===================================================== */
:root{
  --deep:#050406;
  --ink:#F4EFE8;
  --ash:#9a9a9a;
  --felt:#6d6d6d;
  --amber:#FF9E2C;
  --amber-deep:#E0741A;
  --ease:cubic-bezier(.19,1,.22,1);
  --wake:0;
  --gap:clamp(16px,2.4vh,28px);
  --edge:clamp(12px,2.4vw,32px);
  --glass:linear-gradient(to bottom, rgba(255,255,255,.055), transparent 26%), linear-gradient(150deg, rgba(255,255,255,.04), rgba(255,255,255,.01) 46%, rgba(255,158,44,.03)), linear-gradient(rgba(9,7,11,.92), rgba(9,7,11,.92));
  --glass-edge:1px solid rgba(255,255,255,.1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--deep);
  color:var(--ink);
  font-family:'Inter Tight',system-ui,sans-serif;
  font-weight:300;font-size:18px;line-height:1.55;
  overflow-x:hidden;      /* fallback voor oude browsers */
  overflow-x:clip;        /* iOS: clip breekt position:sticky NIET, hidden wel */
  /* niets is selecteerbaar/sleepbaar: voelt als een app, niet als een pagina */
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;   /* iOS: geen "kopieer/deel" popover op long-press */
}
::selection{background:var(--amber);color:var(--deep)}
img,video{display:block;max-width:100%;-webkit-user-drag:none;user-select:none}

/* ---------- boot: he opens his eyes before the page does ---------- */
#boot{
  position:fixed;inset:0;z-index:100;background:var(--deep);
  display:flex;align-items:center;justify-content:center;gap:16px;
  transition:opacity 1s var(--ease);
}
#boot.gone{opacity:0;pointer-events:none}
.boot-eye{
  width:26px;height:38px;border-radius:999px;background:var(--amber);
  box-shadow:0 0 40px rgba(255,158,44,.8);
  transform:scaleY(.06);
  animation:bootBlink 1.6s var(--ease) forwards;
}
@keyframes bootBlink{
  0%{transform:scaleY(.06)}
  35%{transform:scaleY(1)}
  50%{transform:scaleY(.1)}
  70%,100%{transform:scaleY(1)}
}
@media (prefers-reduced-motion: reduce){.boot-eye{animation:none;transform:scaleY(1)}}

/* ---------- MOLTEN LIGHT — drifting beneath the glass ---------- */
#underglow{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 50% 40%, rgba(255,158,44,.08), transparent 70%);
  opacity:calc(.5 + var(--wake)*.5);
}
.lava{
  position:fixed;z-index:0;pointer-events:none;border-radius:50%;
  opacity:calc(.55 + var(--wake)*.45);
}
#lava-1{width:56vw;height:44vh;left:-8vw;top:6vh;background:radial-gradient(circle, rgba(255,158,44,.4), transparent 65%);animation:lavaA 26s ease-in-out infinite}
#lava-2{width:48vw;height:40vh;right:-10vw;top:42vh;background:radial-gradient(circle, rgba(224,116,26,.36), transparent 65%);animation:lavaB 34s ease-in-out infinite}
#lava-3{width:52vw;height:42vh;left:14vw;bottom:-12vh;background:radial-gradient(circle, rgba(255,120,40,.34), transparent 65%);animation:lavaA 30s ease-in-out infinite reverse}
@keyframes lavaA{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(9vw,7vh) scale(1.15)}66%{transform:translate(-5vw,12vh) scale(.92)}}
@keyframes lavaB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-12vw,-9vh) scale(1.2)}}

#orb{
  position:fixed;width:360px;height:360px;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle, rgba(255,158,44,.16), transparent 65%);
  transform:translate(-50%,-50%);left:50%;top:30%;
}

/* ---------- type ---------- */
.display{font-weight:300;font-size:clamp(2.8rem,9.5vw,8.2rem);line-height:.95;letter-spacing:-.04em}
.statement{font-weight:200;font-size:clamp(1.8rem,5vw,4.1rem);line-height:1.08;letter-spacing:-.02em}
.mono{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:400;letter-spacing:.22em;text-transform:uppercase}
.mono.amber{color:var(--amber)}
.mono.dim{color:var(--felt)}
.body-copy{color:var(--ash);font-weight:300;max-width:30em}
.body-copy strong{color:var(--ink);font-weight:400}

/* ---------- LIQUID GLASS SURFACE ---------- */
.glass{
  position:relative;
  background:var(--glass);
  border:var(--glass-edge);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(255,158,44,.08),
    0 18px 34px -24px rgba(0,0,0,.75);
}
/* morphs cost paint — only run them while on screen */
.segment{animation-play-state:paused !important}
.segment.on-screen{animation-play-state:running !important}
/* (top sheen now lives inside the --glass background layers,
   so it always clips perfectly to the morphing shape) */

/* — LIVING SHAPES: organic px-based morphs that never eat the text — */
@keyframes morphA{
  0%,100%{border-radius:170px 80px 200px 100px / 120px 190px 110px 180px}
  33%{border-radius:100px 210px 90px 180px / 190px 110px 200px 120px}
  66%{border-radius:150px 110px 180px 140px / 130px 170px 120px 190px}
}
@keyframes morphB{
  0%,100%{border-radius:200px 90px 110px 190px / 150px 200px 100px 160px}
  50%{border-radius:100px 190px 200px 90px / 110px 130px 190px 200px}
}
@keyframes morphC{
  0%,100%{border-radius:130px 190px 90px 200px / 190px 110px 180px 120px}
  25%{border-radius:200px 100px 180px 110px / 120px 200px 100px 190px}
  75%{border-radius:90px 180px 130px 190px / 180px 120px 200px 110px}
}

main{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:calc(var(--gap)*1.6);
  padding:calc(var(--gap)*1.4) var(--edge) calc(var(--gap)*1.4);
}
.segment{
  padding:clamp(76px,11vh,132px) clamp(40px,8vw,120px);
  overflow:hidden;
}
.statement,.display{text-shadow:0 2px 20px rgba(0,0,0,.5)}
.seg-1{width:min(100%,1240px);border-radius:170px 80px 200px 100px / 120px 190px 110px 180px}
.seg-2{width:min(97%,1180px);border-radius:200px 90px 110px 190px / 150px 200px 100px 160px}
.seg-3{width:min(100%,1280px);border-radius:130px 190px 90px 200px / 190px 110px 180px 120px}
.seg-4{width:min(95%,1140px);border-radius:100px 210px 90px 180px / 190px 110px 200px 120px}
.seg-5{width:min(80%,820px);text-align:center;border-radius:200px 100px 180px 110px / 120px 200px 100px 190px;padding-top:clamp(84px,12vh,150px);padding-bottom:clamp(84px,12vh,150px)}
.seg-6{width:min(98%,1200px);border-radius:90px 180px 130px 190px / 180px 120px 200px 110px}

.segment-inner{max-width:1160px;margin:0 auto;position:relative;z-index:1}
.eyebrow{margin-bottom:34px}
.zig{display:grid;gap:52px;align-items:center}
@media(min-width:900px){.zig{grid-template-columns:7fr 5fr}.zig.flip{grid-template-columns:5fr 7fr}.zig.flip>*:first-child{order:2}}

/* ---------- Embi presences ---------- */
.embi-float{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px}
.embi-float img{width:min(80%,380px);filter:drop-shadow(0 26px 80px rgba(255,158,44,.28))}
.nameplate{color:var(--felt)}
/* Embi peeking over the edge of a glass section */
.embi-peek{
  position:absolute;z-index:3;pointer-events:none;
  width:clamp(160px,20vw,280px);aspect-ratio:1/1;object-fit:contain;
  filter:drop-shadow(0 18px 50px rgba(255,158,44,.35));
}
.seg-1{overflow:visible !important}
.peek-premise{
  right:clamp(230px,24vw,400px);
  top:auto;bottom:0;
  transform:translateY(var(--peek-shift,15%));
}
.seg-1 .statement{padding-right:clamp(0px,10vw,140px)}
@media(max-width:760px){
  .embi-peek{width:130px}
  .peek-premise{left:50%;right:auto;transform:translate(-50%,var(--peek-shift,15%))}
  .seg-1 .statement{padding-right:0}
  .seg-1 .segment-inner{padding-bottom:130px}
}

/* ---------- pebbles ---------- */
.pebble{
  display:inline-block;border-radius:999px;text-decoration:none;cursor:pointer;
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding:13px 26px;border:none;
  transition:transform .7s var(--ease), box-shadow .7s var(--ease), letter-spacing .7s var(--ease);
}
.pebble.fill{background:var(--amber);color:var(--deep);font-weight:500}
.pebble.fill:hover{transform:translateY(-2px);box-shadow:0 6px 34px rgba(255,158,44,.55);letter-spacing:.19em}
.pebble.ghost{
  background:rgba(255,255,255,.05);color:var(--ink);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,158,44,.28);
}
.pebble.ghost:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px var(--amber), 0 0 26px rgba(255,158,44,.24)}
.pebble:focus-visible{outline:1px solid var(--ink);outline-offset:4px}

/* ---------- nav (glass bar) ---------- */
nav{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:60;
  width:min(calc(100% - var(--edge)*2),1240px);
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px 12px 22px;border-radius:999px;
  background:rgba(10,8,12,.86);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 14px 44px -18px rgba(0,0,0,.8);
}
.brand{display:flex;align-items:center;gap:15px;text-decoration:none}
.eyes{display:flex;gap:7px;align-items:center}
.eye{
  width:13px;height:18px;border-radius:999px;background:var(--amber);
  box-shadow:0 0 16px rgba(255,158,44,.85);
  transition:transform .25s var(--ease);
}
.wordmark{font-weight:400;font-size:15px;letter-spacing:.42em;color:var(--ink);padding-left:.42em}

/* tighten the glass nav on phones so the wordmark + CTA never collide */
@media(max-width:760px){
  nav{padding:8px 10px 8px 15px}
  .brand{gap:9px}
  .eye{width:11px;height:15px}
  .wordmark{font-size:12.5px;letter-spacing:.24em;padding-left:.24em}
  .pebble{padding:10px 14px;font-size:10px;letter-spacing:.08em}
}

/* ---------- HERO: glass dome around the awakening ----------
   No 400vh track + no sticky here: GSAP ScrollTrigger pins #ritual-stage
   and creates the scroll distance itself (pinSpacing). padding-top keeps
   the dome inset by --gap so it pins with the same floating look. */
#ritual{position:relative;z-index:2;margin:0 var(--edge);padding-top:var(--gap)}
#ritual-stage{
  height:calc(100vh - var(--gap)*2);
  height:calc(100dvh - var(--gap)*2);
  border-radius:clamp(44px,7vw,120px);
  overflow:hidden;
  background:#0A080C;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 40px 100px -40px rgba(0,0,0,.9);
  display:flex;align-items:center;justify-content:center;
}
#ritual-stage::after{ /* glass reflection over the video */
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg, rgba(255,255,255,.09) 0%, transparent 24%, transparent 78%, rgba(255,158,44,.05) 100%);
}
#hero-canvas{display:block;width:100%;height:100%;background:#0A080C}

/* embi-images stay invisible until fully decoded — no half-loaded glow squares */
.embi-float img,.state-card img,#reaction img,.drop-embi,.embi-peek,.foot-sleeper,.sig-embi{opacity:0;transition:opacity .6s var(--ease)}
.img-ready{opacity:1 !important}
#stage-shade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(5,4,6,.82) 0%, transparent 36%),
             linear-gradient(to bottom, rgba(5,4,6,.5) 0%, transparent 22%);
}
.state-label{position:absolute;top:100px;right:clamp(22px,4vw,48px);text-align:right}
.state-label .mono{display:block}
.state-label .state-name{color:var(--ink);margin-top:6px;transition:color .8s var(--ease)}
.ritual-copy{
  position:absolute;left:clamp(22px,5vw,60px);bottom:9vh;max-width:12em;
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.ritual-copy.hidden{opacity:0;transform:translateY(30px);pointer-events:none}
#copy-final{left:auto;right:clamp(22px,5vw,60px);text-align:right}
#scroll-badge{position:absolute;left:clamp(22px,5vw,60px);top:100px;width:112px;height:112px;transition:opacity .8s var(--ease)}
#scroll-badge svg{width:100%;height:100%;animation:spin 14s linear infinite}
#scroll-badge text{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.32em;fill:var(--amber)}
#scroll-badge .badge-eyes{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;gap:8px;
}
#scroll-badge .badge-eye{
  width:12px;height:17px;border-radius:999px;background:var(--amber);
  box-shadow:0 0 18px rgba(255,158,44,.9);
  transform:scaleY(.12);transition:transform .2s linear;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- demo ---------- */
#demo .drop-row{
  margin-top:56px;position:relative;
  border-radius:64px;
  background:rgba(255,158,44,.05);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1.5px rgba(255,158,44,.35);
  padding:clamp(30px,5vw,52px);
  display:flex;align-items:center;gap:clamp(22px,4vw,44px);flex-wrap:wrap;
  cursor:pointer;
  transition:box-shadow .8s var(--ease), background .8s var(--ease), transform .8s var(--ease);
}
#demo .drop-row:hover,#demo .drop-row.drag{
  background:rgba(255,158,44,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1.5px var(--amber), 0 0 60px rgba(255,158,44,.25);
  transform:translateY(-3px);
}
#demo .drop-row .drop-embi{
  width:clamp(110px,15vw,180px);height:auto;object-fit:contain;
  filter:drop-shadow(0 10px 30px rgba(255,158,44,.35));
}
#demo .drop-row .drop-copy{flex:1;min-width:220px}
#demo .drop-row input{display:none}
.drop-title{font-weight:200;font-size:clamp(1.4rem,3.4vw,2.4rem);letter-spacing:-.02em}
.drop-hint{display:flex;align-items:center;gap:18px}
.drop-hint img{width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 8px 26px rgba(255,158,44,.3))}
.player{display:none;margin-top:56px}
.player.active{display:block}
.player-head{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:50px}
.play-pill{min-width:132px;text-align:center}
.track-label{color:var(--felt)}

.tswitch{display:flex;align-items:baseline;gap:clamp(20px,5vw,56px);flex-wrap:wrap}
.tswitch button{
  background:none;border:none;cursor:pointer;padding:0;
  font-family:'Inter Tight',sans-serif;font-weight:300;
  font-size:clamp(2.2rem,8vw,5.8rem);letter-spacing:-.04em;line-height:1;
  color:var(--felt);transition:color .8s var(--ease), text-shadow .8s var(--ease);
}
.tswitch button[aria-pressed="true"]{color:var(--ink)}
.tswitch button#btn-embra[aria-pressed="true"]{color:var(--amber);text-shadow:0 0 44px rgba(255,158,44,.6)}
.tswitch button:focus-visible{outline:1px solid var(--ink);outline-offset:6px}
.tswitch .divider{color:var(--felt);font-weight:200;font-size:clamp(2.2rem,8vw,5.8rem);line-height:1}
#reaction{display:flex;align-items:center;gap:24px;margin-top:50px;min-height:104px}
#reaction img{width:104px;height:104px;object-fit:contain;filter:drop-shadow(0 8px 26px rgba(255,158,44,.3))}
#reaction p{color:var(--ash);max-width:26em}
#reaction p em{color:var(--ink);font-style:normal}
.demo-fineprint{margin-top:42px;color:var(--felt)}

/* ---------- the signature: a living EQ landscape ---------- */
.sig-stage{position:relative;margin-top:64px}
#curve-svg{width:100%;height:auto}
#curve-svg .line{stroke:var(--amber);stroke-width:2.5;fill:none;stroke-linecap:round;filter:drop-shadow(0 0 10px rgba(255,158,44,.5))}
#curve-svg .shimmer{
  stroke:rgba(255,235,190,.95);stroke-width:3.5;
  stroke-dasharray:70 1420;
  animation:travel 5.5s linear infinite;
  filter:drop-shadow(0 0 16px rgba(255,210,110,.9));
}
@keyframes travel{to{stroke-dashoffset:-1490}}
#curve-svg .tick{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;fill:var(--felt)}
#curve-svg .note{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;fill:var(--amber)}
.sig-embi{
  position:absolute;left:62%;bottom:28%;transform:translateX(-50%);
  width:clamp(90px,12vw,170px);
  filter:drop-shadow(0 14px 40px rgba(255,158,44,.4));
  animation:sigBob 4.5s ease-in-out infinite;
}
@keyframes sigBob{0%,100%{transform:translateX(-50%) translateY(0) rotate(-2deg)}50%{transform:translateX(-50%) translateY(-12px) rotate(2deg)}}
.sig-caption{display:block;text-align:center;margin-top:14px}
@media(max-width:760px){.sig-embi{width:74px;bottom:30%}}

.freq-chips{display:grid;gap:18px;margin-top:64px}
@media(min-width:820px){.freq-chips{grid-template-columns:repeat(3,1fr)}}
.chip{
  padding:36px 30px;
  background:rgba(255,255,255,.035);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,158,44,.16);
}
.chip:nth-child(1){border-radius:70px 30px 70px 30px}
.chip:nth-child(2){border-radius:30px 70px 30px 70px}
.chip:nth-child(3){border-radius:70px 30px 70px 30px}
.chip .big{display:block;font-weight:200;font-size:clamp(2.2rem,4.5vw,3.6rem);letter-spacing:-.03em;line-height:1;color:var(--ink)}
.chip .big em{color:var(--amber);font-style:normal;font-size:.55em}
.chip h3{margin:16px 0 10px}
.chip p{color:var(--ash);font-size:.95rem}

/* ---------- marquee strips ---------- */
.marquee{width:100%;overflow:hidden;pointer-events:none}
.marquee-inner{
  display:inline-flex;white-space:nowrap;width:max-content;
  animation:mq 30s linear infinite;
  font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--felt);
}
.marquee-inner b{color:var(--amber);font-weight:400}
.marquee.rev .marquee-inner{animation-direction:reverse}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- meet embi: the three states ---------- */
.state-trip{display:grid;gap:18px;margin-top:56px}
@media(min-width:760px){.state-trip{grid-template-columns:repeat(3,1fr)}}
.state-card{
  text-align:center;padding:34px 20px 28px;
  background:rgba(255,255,255,.03);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,158,44,.14);
  border-radius:60px;
}
.state-card img{width:min(64%,190px);margin:0 auto 18px;filter:drop-shadow(0 14px 40px rgba(255,158,44,.28))}
.state-card .mono{display:block}

/* ---------- TE-style honesty: the tuning, visible ---------- */
.eq-readout{
  margin-top:26px;color:var(--felt);font-size:11px;letter-spacing:.16em;
  opacity:0;transition:opacity .8s var(--ease), color .8s var(--ease);
}
.eq-readout.on{opacity:1;color:var(--amber)}
.spec-strip{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;
  margin-top:44px;color:var(--felt);font-size:11px;letter-spacing:.2em;
}
.spec-strip b{color:var(--amber);font-weight:400}

/* ---------- idle loop: embi, simply existing ---------- */
.idle-wrap{
  display:none;justify-content:center;margin:8px auto 44px;
}
.idle-wrap.on{display:flex}
.idle-wrap video{
  width:min(70%,340px);border-radius:50%;
  box-shadow:0 0 60px rgba(255,158,44,.25), inset 0 0 0 1px rgba(255,255,255,.08);
}

/* ---------- the sleeper between the feet ---------- */
.foot-sleeper{
  width:56px;align-self:center;cursor:pointer;
  filter:drop-shadow(0 8px 20px rgba(255,158,44,.28));
  opacity:.9;transition:transform .3s var(--ease),filter .3s var(--ease);
}
.foot-sleeper:hover{transform:translateY(-3px)}

/* ---------- old freq-row (kept for safety) ---------- */
.freq-rows{display:none}

/* ---------- product ---------- */
#product .display{margin-top:32px;text-shadow:0 0 90px rgba(255,158,44,.3)}
#product .body-copy{margin:40px auto 0}

/* ---------- waitlist ---------- */
.sign-wrap{position:relative;display:flex;justify-content:center}
.sign-wrap img{width:min(88%,400px);filter:drop-shadow(0 26px 80px rgba(255,158,44,.3))}
.sign-text{
  position:absolute;top:13.5%;left:50%;transform:translateX(-50%);
  width:52%;text-align:center;
  font-family:'IBM Plex Mono',monospace;font-weight:500;
  font-size:clamp(.6rem,2vw,.9rem);letter-spacing:.14em;color:var(--amber);
  text-shadow:0 0 16px rgba(255,158,44,.6);
}
.wl-form{margin-top:50px;max-width:30rem}
.wl-form input[type=email]{
  width:100%;
  background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:none;border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,158,44,.24);
  color:var(--ink);font-family:'Inter Tight',sans-serif;font-weight:200;
  font-size:clamp(1.2rem,2.6vw,1.7rem);letter-spacing:-.01em;
  padding:18px 28px;
  transition:box-shadow .8s var(--ease);
}
.wl-form input[type=email]::placeholder{color:var(--felt)}
.wl-form input[type=email]:focus{outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px var(--amber), 0 0 34px rgba(255,158,44,.25)}
.wl-form button{margin-top:22px}
.wl-success{display:none;margin-top:36px;color:var(--amber)}
.wl-fineprint{margin-top:24px;color:var(--felt)}

/* ---------- footer: two glass feet ---------- */
footer{
  position:relative;z-index:2;
  display:flex;gap:calc(var(--gap)*1.4);justify-content:center;flex-wrap:wrap;
  padding:0 var(--edge) calc(var(--gap)*1.6);
}
footer .foot{
  border-radius:999px;
  padding:24px clamp(30px,5vw,52px);
  display:flex;align-items:center;color:var(--felt);
}
footer .mono{letter-spacing:.18em;font-size:11px}
footer a{color:var(--felt);text-decoration:none;transition:color .6s var(--ease)}
footer a:hover{color:var(--amber)}

/* ---------- reveals ---------- */
.reveal{opacity:0;transform:translateY(44px);transition:opacity 1.1s var(--ease), transform 1.1s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- images never shift layout: space is pre-reserved ---------- */
.embi-float img,.state-card img,#reaction img,.drop-embi,.embi-peek,.foot-sleeper{aspect-ratio:1/1;object-fit:contain}

/* ---------- mobile: stability beats spectacle ---------- */
@media(max-width:760px){
  .segment{animation:none !important;border-radius:56px 30px 56px 30px !important}
  
  .lava{opacity:.5 !important;animation-duration:40s}
  .reveal{transform:translateY(20px);transition-duration:.7s}
  .chip,.state-card,#demo .drop-row{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
}

@media (prefers-reduced-motion: reduce){
  #scroll-badge svg{animation:none}
  #orb,.lava{animation:none}
  .segment{animation:none;border-radius:60px}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- nav experience link ---------- */
.nav-cta{display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
.nav-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ash);transition:color .35s var(--ease)}
.nav-link .nav-dot{width:7px;height:7px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 9px rgba(255,158,44,.8);animation:gxRec 1.6s ease-in-out infinite}
.nav-link:hover{color:var(--ink)}
@media(max-width:640px){.nav-link{display:none}}

/* ---------- CUSTOM CURSOR: Embi's eyes ---------- */
html.embi-active, html.embi-active *{cursor:none}
html.embi-active input, html.embi-active textarea{cursor:text}
.embi-cursor{position:fixed;top:0;left:0;z-index:200;pointer-events:none;
  display:flex;gap:7px;opacity:0;transition:opacity .3s var(--ease);will-change:transform;
  transform:translate(-50%,-50%)}
.embi-cursor.on{opacity:1}
.embi-cursor i{width:8px;height:15px;border-radius:999px;background:var(--amber);
  box-shadow:0 0 12px rgba(255,158,44,.95),0 0 26px rgba(255,158,44,.5);
  transition:transform .12s var(--ease),width .2s var(--ease),height .2s var(--ease),margin-top .12s linear}
.embi-cursor.blink i{transform:scaleY(.12)}
.embi-cursor.down i{transform:scaleY(.55) scaleX(1.1)}
.embi-cursor.hot i{width:11px;height:19px;box-shadow:0 0 16px rgba(255,158,44,1),0 0 34px rgba(255,158,44,.6)}
@media (pointer:coarse){.embi-cursor{display:none!important}}
@media (prefers-reduced-motion: reduce){html.embi-active,html.embi-active *{cursor:auto}.embi-cursor{display:none}}

/* ---------- footer social: Embi icons ---------- */
.foot-social{display:flex;align-items:center;gap:18px}
.soc{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;
  transition:transform .3s var(--ease),background .3s var(--ease);background:transparent}
.soc img{width:52px;height:52px;object-fit:contain;
  filter:drop-shadow(0 6px 16px rgba(255,158,44,.32));transition:filter .3s var(--ease),transform .3s var(--ease)}
.soc:hover{transform:translateY(-3px)}
.soc:hover img{filter:drop-shadow(0 10px 26px rgba(255,158,44,.6));transform:scale(1.06)}