/* ============ GUIDED EXPERIENCE — WAKE THE SOUND ============ */

/* progress rail */
.gx-rail{display:flex;gap:10px;justify-content:center;margin-bottom:clamp(18px,2.6vh,28px)}
.gx-dot{width:34px;height:4px;border-radius:999px;background:rgba(255,255,255,.14);
  transition:background .5s var(--ease),transform .5s var(--ease)}
.gx-dot.is-on{background:var(--amber);box-shadow:0 0 14px rgba(255,158,44,.6)}
.gx-dot.done{background:rgba(255,158,44,.5)}

.gx{display:grid;gap:clamp(16px,2.4vh,24px)}

/* ---------- THE FRAME ---------- */
.gx-frame{position:relative;border-radius:26px;overflow:hidden;isolation:isolate;
  width:100%;max-width:min(100%,940px);margin-inline:auto;aspect-ratio:16/9;max-height:56vh;
  border:1px solid rgba(255,255,255,.09);background:#06050a;
  transition:border-color .9s var(--ease),box-shadow .9s var(--ease);
  contain:paint}
.gx[data-mode="embra"] .gx-frame{border-color:rgba(255,158,44,.42);
  box-shadow:0 60px 130px -60px rgba(255,158,44,.6)}

/* worlds */
.gx-worlds{position:absolute;inset:0;z-index:0}
.gx-world{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.08) translateZ(0);
  transition:opacity 1.1s var(--ease),filter 1.2s var(--ease);
  filter:grayscale(1) brightness(.4) contrast(1.05)}
.gx-world.is-on{opacity:1}
.gx-world.gx-void{background:radial-gradient(120% 90% at 50% 46%,#141018 0%,#07060a 70%);filter:none}
.gx[data-scene="0"] .gx-void,.gx[data-scene="1"] .gx-void{opacity:1}
/* ken-burns only while a real world is live + in view (JS toggles .anim) */
.gx-world.is-on.anim{animation:gxKen 30s ease-in-out infinite alternate}
@keyframes gxKen{from{transform:scale(1.08) translateZ(0)}to{transform:scale(1.15) translate(-1.3%,1%) translateZ(0)}}
.gx[data-mode="embra"] .gx-world{filter:grayscale(0) brightness(.66) saturate(1.18)}

/* atmosphere */
.gx-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(125% 92% at 50% 42%,transparent 38%,rgba(5,4,6,.74) 100%),
             linear-gradient(to top,rgba(5,4,6,.62),transparent 30%)}
.gx-glow{position:absolute;left:50%;top:56%;z-index:1;width:min(62%,340px);aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.7) translateZ(0);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 55%,rgba(255,158,44,.52),transparent 62%);
  opacity:0;transition:opacity 1s var(--ease),transform 1s var(--ease)}
.gx[data-mode="embra"] .gx-glow{opacity:1;transform:translate(-50%,-50%) scale(1) translateZ(0)}
.gx-particles{position:absolute;inset:0;z-index:1;width:100%;height:100%;opacity:0;pointer-events:none;
  transition:opacity 1s var(--ease)}
.gx[data-mode="embra"] .gx-particles{opacity:1}

/* rings */
.gx-rings{position:absolute;inset:0;z-index:1;display:grid;place-items:center;pointer-events:none}
.gx-rings span{position:absolute;width:22%;max-width:140px;aspect-ratio:1;border-radius:50%;
  border:2px solid rgba(255,158,44,.4);opacity:0;transform:scale(.4) translateZ(0)}
.gx[data-mode="embra"].gx-live .gx-rings span{animation:gxRing 2.7s var(--ease) infinite}
.gx[data-mode="embra"].gx-live .gx-rings span:nth-child(2){animation-delay:.9s}
.gx[data-mode="embra"].gx-live .gx-rings span:nth-child(3){animation-delay:1.8s}
@keyframes gxRing{from{transform:scale(.4) translateZ(0);opacity:.55}to{transform:scale(1.85) translateZ(0);opacity:0}}

/* Embi guide */
.gx-embi{position:absolute;left:50%;bottom:0;transform:translateX(-50%) translateZ(0);
  height:88%;aspect-ratio:1;z-index:2;will-change:transform}
.gx-embi img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .6s var(--ease),transform .8s var(--ease);
  transform:translateY(3%) scale(.98) translateZ(0)}
.gx-embi img.is-on{opacity:1;transform:translateY(0) scale(1) translateZ(0)}
.gx[data-mode="raw"] .gx-embi img.is-on{filter:grayscale(.5) brightness(.85)}
.gx[data-mode="embra"] .gx-embi img[data-pose="dance"].is-on{animation:gxBob 2.2s ease-in-out infinite}
@keyframes gxBob{0%,100%{transform:translateY(0) translateZ(0)}50%{transform:translateY(-3.4%) translateZ(0)}}

/* speech bubble */
.gx-say{position:absolute;left:50%;top:clamp(16px,4vh,30px);z-index:4;
  transform:translateX(-50%) translateY(-6px) translateZ(0);
  display:flex;align-items:center;gap:10px;max-width:min(78%,460px);
  padding:11px 18px;border-radius:999px;
  background:rgba(9,7,13,.92);
  border:1px solid rgba(255,158,44,.28);
  opacity:0;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.gx-say.show{opacity:1;transform:translateX(-50%) translateY(0) translateZ(0)}
.gx-say-dot{width:8px;height:8px;border-radius:50%;background:var(--amber);flex:0 0 auto;
  box-shadow:0 0 10px rgba(255,158,44,.8);animation:gxPulse 1.6s ease-in-out infinite}
@keyframes gxPulse{0%,100%{opacity:.5;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.gx-say-text{font-size:clamp(13px,1.7vw,15px);color:var(--ink);letter-spacing:.01em;line-height:1.35}

/* waveform in-frame */
.gx-wave{position:absolute;left:50%;bottom:clamp(14px,4vh,26px);z-index:3;
  transform:translateX(-50%) translateZ(0);
  display:flex;align-items:flex-end;gap:3px;width:min(74%,460px);height:clamp(30px,7vh,54px);
  opacity:0;transition:opacity .6s var(--ease)}
.gx[data-scene="1"] .gx-wave,.gx[data-scene="2"] .gx-wave{opacity:1}
.gx-wave .b{flex:1;height:100%;border-radius:3px;background:var(--felt);
  transform-origin:bottom;transform:scaleY(.02);will-change:transform;
  transition:background .5s var(--ease)}
.gx[data-mode="embra"] .gx-wave .b{background:linear-gradient(to top,var(--amber-deep),var(--amber))}

/* corner tag */
.gx-tag{position:absolute;right:clamp(12px,3vw,20px);bottom:clamp(12px,3vw,18px);z-index:4;
  font-size:11px;letter-spacing:.18em;color:var(--ash);padding:5px 12px;border-radius:999px;
  background:rgba(5,4,6,.8);
  border:1px solid rgba(255,255,255,.08);
  transition:color .6s var(--ease),border-color .6s var(--ease)}
.gx[data-mode="embra"] .gx-tag{color:var(--amber);border-color:rgba(255,158,44,.4)}

/* ---------- CONTROLS ---------- */
/* the container hugs the ACTIVE step's height (inactive steps are absolute) so
   scenes 0-2 don't reserve scene-3's tall layout -> no dead whitespace */
.gx-ctl{position:relative;display:flex;justify-content:center}
.gx-step{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;
  opacity:0;pointer-events:none;transform:translateY(8px) translateZ(0);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.gx-step.is-on{position:relative;opacity:1;pointer-events:auto;transform:none}

/* CTA button */
.gx-cta{display:inline-flex;align-items:center;gap:12px;cursor:pointer;
  padding:15px 26px;border-radius:999px;border:none;text-decoration:none;
  background:var(--amber);color:var(--deep);font-weight:500;font-size:15px;letter-spacing:.01em;
  box-shadow:0 18px 44px -18px rgba(255,158,44,.7);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.gx-cta:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 24px 56px -18px rgba(255,158,44,.8)}
.gx-arrow{width:15px;height:15px;position:relative}
.gx-arrow::before,.gx-arrow::after{content:"";position:absolute;background:var(--deep)}
.gx-arrow::before{top:50%;left:0;width:13px;height:2px;transform:translateY(-50%);border-radius:2px}
.gx-arrow::after{background:transparent;top:50%;right:0;width:7px;height:7px;border-top:2px solid var(--deep);border-right:2px solid var(--deep);border-radius:1px;transform:translateY(-50%) rotate(45deg)}
.gx-final{background:transparent;color:var(--amber);border:1px solid rgba(255,158,44,.5);box-shadow:none}
.gx-final .gx-arrow::before{background:var(--amber)}
.gx-final .gx-arrow::after{background:transparent;border-color:var(--amber)}
.gx-final:hover{background:rgba(255,158,44,.08);transform:translateY(-2px)}

/* tracks (scene 3) */
.gx-tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(9px,1.4vw,15px);width:100%}
.gx-tk{position:relative;display:flex;align-items:center;gap:11px;cursor:pointer;padding:9px;
  border-radius:15px;text-align:left;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);opacity:.6;
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease),opacity .4s var(--ease),background .4s var(--ease)}
.gx-tk-art{flex:0 0 auto;width:clamp(40px,5vw,52px);aspect-ratio:1;border-radius:10px;overflow:hidden}
.gx-tk-art img{width:100%;height:100%;object-fit:cover;display:block}
.gx-tk-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.gx-tk-meta b{font-weight:500;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-tk-meta i{font-style:normal;font-size:10px;letter-spacing:.14em;color:var(--ash)}
.gx-tk:hover{opacity:.9;transform:translateY(-2px)}
.gx-tk.is-active{opacity:1;background:rgba(255,158,44,.06);border-color:rgba(255,158,44,.5);
  box-shadow:0 16px 40px -22px rgba(255,158,44,.5)}

/* switch (scene 3) */
.gx-switch{position:relative;display:grid;grid-template-columns:1fr 1fr;width:min(100%,360px);
  border-radius:999px;background:rgba(5,4,6,.5);border:1px solid rgba(255,255,255,.12);
  padding:6px;cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent}
.gx-side{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;padding:13px 8px}
.gx-side .mono{font-size:13px;letter-spacing:.12em;color:var(--ash);transition:color .4s var(--ease)}
.gx[data-mode="raw"] .gx-side.raw .mono{color:var(--deep)}
.gx[data-mode="embra"] .gx-side.live .mono{color:var(--deep)}
.gx-knob{position:absolute;top:6px;left:6px;height:calc(100% - 12px);width:calc(50% - 6px);z-index:1;
  border-radius:999px;background:var(--amber);box-shadow:0 0 28px rgba(255,158,44,.55);
  display:grid;place-items:center;transition:transform .55s var(--ease);will-change:transform}
.gx[data-mode="embra"] .gx-knob{transform:translateX(100%)}
.gx-eyes{display:flex;gap:5px}.gx-eyes i{width:7px;height:13px;border-radius:999px;background:var(--deep);
  transition:transform .4s var(--ease)}
.gx[data-mode="raw"] .gx-eyes i{transform:scaleY(.3)}

@media(max-width:640px){
  .gx-frame{height:clamp(280px,54vh,360px)}
  .gx-embi{height:80%}
  .gx-tk{flex-direction:column;align-items:flex-start;gap:7px;padding:8px}
  .gx-tk-art{width:100%}.gx-tk-meta b{font-size:11px}
  .gx-say{max-width:86%}
}
@media(prefers-reduced-motion:reduce){
  .gx-world.is-on.anim,.gx-embi img[data-pose="dance"].is-on,.gx-rings span,.gx-say-dot{animation:none!important}
}

/* ================= CINEMATIC LAYER (Higgsfield clips) ================= */
.gx-cine{position:absolute;inset:0;z-index:0;overflow:hidden;opacity:0;
  transition:opacity .9s var(--ease)}
.gx-cine.on{opacity:1}
.gx-cine video{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.06);
  filter:grayscale(1) brightness(.42) contrast(1.06);
  transition:filter 1.2s var(--ease), transform 9s linear}
.gx-cine.on video{transform:scale(1.12)}
.gx[data-mode="embra"] .gx-cine video{filter:grayscale(0) brightness(.8) saturate(1.28) contrast(1.05)}
.gx-cine::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(125% 85% at 50% 42%,transparent 38%,rgba(5,4,6,.6) 100%),
             linear-gradient(to top,rgba(5,4,6,.9) 0%,transparent 46%)}

/* ================= MOTION-GRAPHIC HUD ================= */
.gx-hud{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:.85;
  transition:opacity .6s var(--ease)}
.gx[data-mode="embra"] .gx-hud{opacity:1}
.gx-hud-c{position:absolute;width:24px;height:24px;border:1.5px solid rgba(255,158,44,.5)}
.gx-hud-c.tl{top:13px;left:13px;border-right:0;border-bottom:0}
.gx-hud-c.tr{top:13px;right:13px;border-left:0;border-bottom:0}
.gx-hud-c.bl{bottom:13px;left:13px;border-right:0;border-top:0}
.gx-hud-c.br{bottom:13px;right:13px;border-left:0;border-top:0}
.gx-hud-top{position:absolute;top:15px;left:0;right:0;
  display:flex;justify-content:space-between;padding:0 44px;
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.26em;
  color:rgba(255,158,44,.72);text-transform:uppercase}
.gx-rec{display:flex;align-items:center;gap:7px}
.gx-rec i{width:7px;height:7px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 10px var(--amber);animation:gxRec 1.4s ease-in-out infinite}
@keyframes gxRec{0%,100%{opacity:1}50%{opacity:.2}}
.gx-hud-mode{color:var(--ink);transition:color .5s var(--ease)}
.gx[data-mode="embra"] .gx-hud-mode{color:var(--amber)}
.gx-scan{position:absolute;inset:0;pointer-events:none;opacity:.1;mix-blend-mode:overlay;
  background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(255,255,255,.6) 2px 3px)}
@media(prefers-reduced-motion:reduce){.gx-rec i{animation:none}.gx-cine video{transition:filter .01ms}}

/* HUD tightens on phones so it never crowds the caption bubble */
@media(max-width:760px){
  .gx-hud-top{padding:0 26px;font-size:8px;letter-spacing:.16em}
  .gx-hud-c{width:16px;height:16px;top:10px;bottom:10px}
  .gx-hud-c.tl,.gx-hud-c.tr{top:10px}
  .gx-hud-c.bl,.gx-hud-c.br{bottom:10px}
}

/* scene 2 (the bloom reveal) is a cinematic clip that already contains Embi, so
   the guide pose steps aside there. Scene 3 uses creature-FREE world clips, so the
   guide Embi stays as your companion. Never two creatures on screen at once. */
.gx-embi{transition:opacity .55s var(--ease), transform .55s var(--ease)}
.gx[data-scene="2"] .gx-embi{opacity:0;pointer-events:none;
  transform:translateX(-50%) translateZ(0) scale(.97)}

/* ================= CONTROLS: play/pause + RAW|EMBRA ================= */
.gx-controls{display:flex;align-items:stretch;justify-content:center;gap:12px;margin-top:22px}
.gx-play{flex:0 0 auto;width:58px;border-radius:999px;border:1.5px solid rgba(255,158,44,.42);
  background:rgba(255,158,44,.06);cursor:pointer;display:grid;place-items:center;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .25s var(--ease),box-shadow .3s var(--ease)}
.gx-play:hover{background:rgba(255,158,44,.14);border-color:var(--amber);transform:translateY(-1px);
  box-shadow:0 6px 22px -8px rgba(255,158,44,.6)}
.gx-play svg{width:22px;height:22px;fill:var(--amber)}
.gx-play .ic-pause{display:none}
.gx-play.is-playing .ic-play{display:none}
.gx-play.is-playing .ic-pause{display:block}
.gx-play:disabled{opacity:.4;cursor:default}

/* eyes now sit LEFT of the EMBRA label — never over the text */
.gx-switch{margin-top:0}
.gx-side.live{gap:9px}
.gx-eyes{display:flex;gap:5px;align-items:center}
.gx-eyes i{width:6px;height:13px;border-radius:999px;background:var(--amber);
  box-shadow:0 0 8px rgba(255,158,44,.7);transition:transform .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
  transform:scaleY(.28)}
.gx[data-mode="embra"] .gx-eyes i{transform:scaleY(1);background:var(--deep);box-shadow:none}

/* scene 3 now uses Embi-IN-world clips too -> hide the separate guide pose there */
.gx[data-scene="3"] .gx-embi{opacity:0;pointer-events:none;
  transform:translateX(-50%) translateZ(0) scale(.97)}

/* every scene now uses an animated Embi clip -> retire the still-pose guide entirely */
.gx-embi{display:none}

/* mobile: keep the caption compact + high so it never covers Embi's face */
@media(max-width:760px){
  .gx-say{top:10px;max-width:90%;padding:8px 13px;gap:7px}
  .gx-say-text{font-size:12px;line-height:1.28}
  .gx-frame{height:clamp(340px,52vh,460px)}
}

/* mobile: drop the HUD label row (brackets keep the trailer feel) so the caption sits clean */
@media(max-width:760px){ .gx-hud-top{display:none} .gx-say{top:12px} }

/* ================= RAIL: clickable, labelled, animated ================= */
.gx-rail{display:flex;gap:clamp(12px,1.8vw,26px);justify-content:center;margin-bottom:clamp(18px,2.6vh,28px)}
.gx-dot{display:flex;flex-direction:column;align-items:center;gap:8px;
  background:none!important;border:none;cursor:pointer;padding:4px 2px;box-shadow:none!important;
  width:auto;height:auto}
.gx-dot i{display:block;width:clamp(34px,5vw,58px);height:4px;border-radius:999px;
  background:rgba(255,255,255,.14);position:relative;overflow:hidden;transition:background .5s var(--ease)}
.gx-dot.done i{background:rgba(255,158,44,.5)}
.gx-dot.is-on i{background:rgba(255,158,44,.22)}
.gx-dot.is-on i::after{content:'';position:absolute;inset:0;border-radius:999px;background:var(--amber);
  box-shadow:0 0 14px rgba(255,158,44,.7);transform-origin:left;animation:gxRailFill 1s var(--ease) forwards}
@keyframes gxRailFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.gx-dot em{font-family:'IBM Plex Mono',monospace;font-style:normal;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--felt);transition:color .4s var(--ease)}
.gx-dot.is-on em{color:var(--amber)}
.gx-dot.done em{color:rgba(255,158,44,.6)}
.gx-dot:hover em{color:var(--ink)}

/* ================= IN-FRAME PLAYER ================= */
.gx-player{position:absolute;left:0;right:0;bottom:0;z-index:5;
  display:flex;align-items:center;gap:clamp(9px,1.4vw,16px);
  padding:clamp(11px,1.7vh,17px) clamp(14px,2.4vw,26px);
  background:linear-gradient(to top,rgba(4,3,6,.95),rgba(4,3,6,.62) 62%,transparent);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.gx[data-scene="3"] .gx-player{opacity:1;transform:none;pointer-events:auto}
.gx-np{display:flex;flex-direction:column;min-width:0;flex:0 0 auto;max-width:30%}
.gx-np b{font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-np i{font-family:'IBM Plex Mono',monospace;font-style:normal;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--felt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-time{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;color:var(--ash);
  flex:0 0 auto;font-variant-numeric:tabular-nums}
.gx-seek{position:relative;flex:1;height:4px;border-radius:999px;background:rgba(255,255,255,.15);cursor:pointer}
.gx-seek::before{content:'';position:absolute;left:0;right:0;top:-10px;bottom:-10px}
.gx-seek-fill{position:absolute;inset:0;border-radius:999px;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--amber-deep),var(--amber));will-change:transform}
.gx-seek-knob{position:absolute;top:50%;left:0;width:11px;height:11px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 12px rgba(255,158,44,.85);transform:translate(-50%,-50%) scale(0);
  transition:transform .25s var(--ease)}
.gx-seek:hover .gx-seek-knob{transform:translate(-50%,-50%) scale(1)}
/* in scene 3 the spectrum floats above the player, the corner tag steps aside */
.gx[data-scene="3"] .gx-wave{opacity:1;bottom:clamp(58px,8.6vh,74px)}
.gx[data-scene="3"] .gx-tag{opacity:0}

/* ================= LITTLE EMBI POINTERS ================= */
/* (step 3 gets position:relative only when active, via .gx-step.is-on — the hints anchor to it then) */
.gx-hint{position:absolute;display:flex;align-items:center;gap:6px;pointer-events:none;z-index:3;
  opacity:0;transform:translateY(8px);
  transition:opacity .6s var(--ease) .45s,transform .6s var(--ease) .45s}
.gx[data-scene="3"] .gx-hint{opacity:1;transform:none}
.gx-hint img{width:clamp(46px,4.6vw,66px);height:auto;
  filter:drop-shadow(0 8px 20px rgba(255,158,44,.35));animation:gxHintBob 3.4s ease-in-out infinite}
@keyframes gxHintBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.gx-hint span{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--amber);white-space:nowrap}
.hint-tracks{left:-84px;top:14px}
.hint-tracks img{transform:scaleX(-1)}      /* mirror so the arm points right, at the tracks */
.hint-tracks{flex-direction:column;gap:2px}
.hint-switch{right:-78px;bottom:96px;flex-direction:column;gap:2px}
@media(max-width:1180px){.gx-hint{display:none}}

/* song length on each track card */
.gx-tk-len{font-family:'IBM Plex Mono',monospace;font-style:normal;text-decoration:none;
  font-size:9.5px;letter-spacing:.1em;color:var(--felt);margin-top:2px;font-variant-numeric:tabular-nums}
.gx-tk.is-active .gx-tk-len{color:rgba(255,158,44,.75)}

/* per-scene grading: scene 0 is moody but readable, scene 1 is the dead flat grey */
.gx[data-scene="0"] .gx-cine video{filter:grayscale(.3) brightness(1) contrast(1.03)}
.gx[data-scene="1"] .gx-cine video{filter:grayscale(1) brightness(.52) contrast(1.06)}

/* ---- layout hardening + caption + safer hints ---- */
#demo{overflow-x:clip}
.gx-say{max-width:min(72%,440px);white-space:normal;text-align:left}
.gx-say-text{white-space:normal}
/* hints now live INSIDE the frame's lower corners, pointing at the tracks/switch below */
.gx-hint{position:absolute;bottom:auto}
.hint-tracks{left:16px;bottom:74px;top:auto;flex-direction:row;gap:7px}
.hint-tracks img{transform:none}
.hint-switch{right:16px;bottom:74px;top:auto;flex-direction:row-reverse;gap:7px}
.hint-switch img{transform:scaleX(-1)}
@media(max-width:1000px){.gx-hint{display:none}}

/* ================= CAPTION: EMBI TRANSMISSION (overrides old bubble) ================= */
.gx-say{align-items:center;gap:12px;max-width:min(80%,520px);
  padding:9px 20px 9px 16px;border-radius:16px;
  background:linear-gradient(180deg,rgba(20,13,7,.94),rgba(8,6,11,.95));
  border:1px solid rgba(255,158,44,.34);
  box-shadow:0 14px 40px -20px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06),0 0 0 3px rgba(255,158,44,.05)}
.gx-say-eq{display:flex;align-items:flex-end;gap:2.5px;height:15px;flex:0 0 auto}
.gx-say-eq i{width:3px;height:100%;border-radius:2px;background:var(--amber);transform-origin:bottom;
  transform:scaleY(.3);box-shadow:0 0 8px rgba(255,158,44,.7);animation:gxSayEq .9s ease-in-out infinite}
.gx-say-eq i:nth-child(2){animation-delay:.15s}
.gx-say-eq i:nth-child(3){animation-delay:.3s}
.gx-say-eq i:nth-child(4){animation-delay:.45s}
@keyframes gxSayEq{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}
.gx-say-body{display:flex;flex-direction:column;gap:0;min-width:0;text-align:left}
.gx-say-who{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--amber);opacity:.8;line-height:1.4}
.gx-say-text{font-size:clamp(14px,1.9vw,17px);color:var(--ink);letter-spacing:.005em;line-height:1.3;font-weight:400}
.gx-say-text .w{display:inline-block;opacity:0;transform:translateY(7px);
  animation:gxWord .42s var(--ease) forwards}
@keyframes gxWord{to{opacity:1;transform:none}}

/* ================= DEMO SECTION INTRO ================= */
.gx-intro{text-align:center;max-width:640px;margin:0 auto clamp(26px,4vh,44px)}
.gx-intro-eyebrow{display:inline-block;font-size:10px;letter-spacing:.34em;color:var(--amber);
  margin-bottom:18px;opacity:.85}
.gx-headline{font-family:'Inter Tight',sans-serif;font-weight:200;letter-spacing:-.02em;
  font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.04;color:var(--ink)}
.gx-headline span{color:var(--amber)}
.gx-sub{margin-top:16px;color:var(--ash);font-weight:300;font-size:clamp(14px,1.6vw,16.5px);
  line-height:1.5;max-width:34em;margin-inline:auto}

/* mobile: the 16:9 frame is too short on narrow screens -> go portrait so Embi fills it */
@media(max-width:760px){
  .gx-frame{aspect-ratio:3/4;max-height:66vh;max-width:100%}
  .gx-intro{margin-bottom:22px}
  .gx-headline{font-size:clamp(1.9rem,7.5vw,2.6rem)}
}

/* mobile: keep the transmission caption compact */
@media(max-width:760px){
  .gx-say{max-width:min(88%,320px);padding:8px 14px 8px 12px;gap:9px}
  .gx-say-text{font-size:13px;line-height:1.25}
  .gx-say-who{font-size:8px}
}

/* ================= RESPONSIVE: whole experience compact + within reach ================= */
.gx{gap:clamp(13px,1.9vh,20px)}
.gx-intro{margin-bottom:clamp(20px,3vh,32px)}
.gx-rail{margin-bottom:clamp(15px,2.2vh,22px)}

@media(max-width:760px){
  #demo{padding-top:clamp(50px,8vh,80px)!important;padding-bottom:clamp(50px,8vh,80px)!important}
  .gx-frame{aspect-ratio:4/5;max-height:50vh;max-width:100%}
  .gx-intro{margin-bottom:15px}
  .gx-headline{font-size:clamp(1.8rem,7vw,2.4rem)}
  .gx-sub{font-size:12.5px;margin-top:12px}
  .gx-controls{margin-top:15px;gap:10px}
  .gx-play{width:52px}
  .gx-tracks{gap:8px}
  /* caption: compact single line (label hidden to save room) */
  .gx-say{max-width:94%;padding:7px 13px 7px 11px;gap:8px;top:10px}
  .gx-say-who{display:none}
  .gx-say-text{font-size:11.5px;line-height:1.25}
  .gx-say-eq{height:13px}
}

/* mobile caption: force a clean single line (nowrap expands the bubble to fit) */
@media(max-width:760px){
  .gx-say{max-width:97%;padding:6px 12px 6px 10px;gap:7px;width:max-content}
  .gx-say-text{white-space:nowrap;font-size:10.5px;line-height:1.2}
  .gx-say-eq{height:12px}
  .gx-say-eq i{width:2.5px}
}