/* ============================================================
   VIDYA - Shared floating dock + video modal + Lenis helpers.
   Loaded on every page. Uses tokens from colors_and_type.css.
   The markup is injected by assets/dock.js.
   ============================================================ */

/* ===== FLOATING DOCK - Zero-style glass bar; docks in after the hero ===== */
.dock{position:fixed;left:50%;bottom:clamp(16px,3vh,28px);z-index:60;display:flex;align-items:center;gap:10px;padding:8px;border-radius:999px;width:max-content;max-width:600px;transform:translate(-50%,170%) scale(.9);opacity:0;pointer-events:none;background:rgba(246,250,249,.74);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 2px 8px rgba(12,42,46,.10),0 20px 50px -12px rgba(12,42,46,.22),0 10px 36px -10px rgba(55,190,176,.14);transition:transform .5s cubic-bezier(0.22,1,0.36,1),opacity .35s ease;will-change:transform,opacity}
.dock.docked{transform:translate(-50%,0) scale(1);opacity:1;pointer-events:auto;transition:transform .66s cubic-bezier(0.16,1,0.3,1),opacity .44s ease}
.dock.is-form{transition:transform .66s cubic-bezier(0.16,1,0.3,1),opacity .44s ease,bottom .24s cubic-bezier(0.2,0.7,0.2,1)}
/* dock-in shimmer, played once */
.dock::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);opacity:0}
.dock.shimmer::after{opacity:1;animation:dockshimmer 1.1s var(--ease-out) forwards}
@keyframes dockshimmer{to{transform:translateX(120%);opacity:0}}

.dock-node{position:relative;width:48px;height:48px;border-radius:999px;flex-shrink:0;cursor:pointer;border:0;padding:0;background:transparent;display:flex;align-items:center;justify-content:center;transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.dock-node:hover{transform:scale(1.06) translateY(-2px);box-shadow:0 0 0 3px rgba(55,190,176,.4)}
.dock-node:active{transform:scale(.97)}
.dock-node:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(55,190,176,.6)}
/* left play-icon node: static dimmed poster + permanent play glyph (no live video) */
.dock-play{overflow:hidden;background:#0A1413;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.dock-poster{width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(.9);transition:filter .25s var(--ease-out),transform .4s var(--ease-out)}
.dock-play:hover .dock-poster{filter:brightness(.84)}
.dock-play-glyph{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.dock-play-glyph::before{content:"";position:absolute;width:26px;height:26px;border-radius:999px;background:rgba(8,16,15,.42);box-shadow:0 1px 3px rgba(0,0,0,.3);transition:background .25s var(--ease-out)}
.dock-play-glyph svg{position:relative;width:12px;height:12px;margin-left:1px;fill:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));transition:transform .25s var(--ease-out)}
.dock-play:hover .dock-play-glyph::before{background:rgba(8,16,15,.55)}
.dock-play:hover .dock-play-glyph svg{transform:scale(1.14)}
/* sonar invite ring */
.dock-play::after{content:"";position:absolute;inset:0;border-radius:999px;border:1px solid rgba(164,229,224,.6);animation:sonar 3s var(--ease-out) infinite;pointer-events:none}
.dock-play:hover::after{opacity:0}
@keyframes sonar{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(1.7);opacity:0}}
.dock-sep{width:1px;height:26px;background:rgba(21,32,30,.12);flex-shrink:0}

/* center: collapsed CTA <-> inline name/email form (crossfade + width morph) */
.dock-cta-wrap{position:relative;height:48px;width:150px;flex-shrink:0;transition:width .42s cubic-bezier(0.16,1,0.3,1)}
.dock.is-form .dock-cta-wrap{width:clamp(252px,76vw,322px)}
.dock-cta{position:absolute;inset:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;background:var(--ink-900);color:var(--paper);font-family:inherit;font-size:14px;font-weight:600;letter-spacing:-.005em;cursor:pointer;border:0;white-space:nowrap;transition:filter .25s var(--ease-out),box-shadow .12s var(--ease-out),transform .12s var(--ease-out),opacity .2s var(--ease-out)}
.dock-cta svg{width:15px;height:15px;stroke:currentColor;fill:none;transition:transform .25s var(--ease-out)}
.dock-cta:hover{filter:brightness(1.14)}
.dock-cta:hover svg{transform:translateX(3px)}
.dock-cta:active{transform:scale(.985);box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.dock-cta:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(55,190,176,.6)}
.dock.is-form .dock-cta{opacity:0;pointer-events:none}
.join-form{position:absolute;inset:0;display:flex;align-items:center;gap:6px;padding:0 6px 0 18px;border-radius:999px;background:var(--ink-900);opacity:0;pointer-events:none;transition:opacity .22s var(--ease-out) .1s}
.dock.is-form .join-form{opacity:1;pointer-events:auto}
.join-form[hidden]{display:none}
.jf-track{position:relative;flex:1;height:100%;display:flex;align-items:center;overflow:hidden}
.jf-in{position:absolute;left:0;right:0;width:100%;border:0;background:transparent;font-family:inherit;font-size:14px;color:var(--paper);outline:none;transition:opacity .18s var(--ease-out),transform .18s var(--ease-out)}
.jf-in::placeholder{color:rgba(241,246,244,.5)}
.jf-name{opacity:1;transform:none}
.jf-email{opacity:0;transform:translateX(12px);pointer-events:none}
.join-form[data-step="email"] .jf-name{opacity:0;transform:translateX(-12px);pointer-events:none}
.join-form[data-step="email"] .jf-email{opacity:1;transform:none;pointer-events:auto}
.jf-go{position:relative;flex-shrink:0;width:36px;height:36px;border-radius:999px;border:0;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;cursor:pointer;transition:filter .2s var(--ease-out),transform .12s var(--ease-out)}
.jf-go::before{content:"";position:absolute;inset:-5px}
.jf-go svg{width:15px;height:15px;stroke:currentColor;fill:none}
.jf-go:hover{filter:brightness(1.06)}
.jf-go:active{transform:scale(.94)}
.jf-go:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(55,190,176,.7)}
.jf-go.is-busy{pointer-events:none}
.jf-go.is-busy svg{animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.jf-msg{display:none;font-size:12.5px;font-weight:500;color:var(--tide-300);white-space:nowrap;padding:0 12px;flex:1;text-align:center}
.jf-msg.show{display:block}
.jf-msg.err{color:#E8A9A9}
.jf-track.jf-shake{animation:jfshake .36s var(--ease-out)}
@keyframes jfshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* children assemble as the bar docks */
.dock > *{opacity:0}
.dock.docked > *{opacity:1;transition:opacity .28s var(--ease-out)}
.dock.docked > *:nth-child(1){transition-delay:.08s}
.dock.docked > *:nth-child(2){transition-delay:.12s}
.dock.docked > *:nth-child(3){transition-delay:.16s}
.dock.docked > *:nth-child(4){transition-delay:.2s}
@media (max-width:640px){
  .dock{left:16px;right:16px;bottom:max(12px,env(safe-area-inset-bottom));width:auto;max-width:none;transform:translateY(170%) scale(.92);gap:8px;backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%)}
  .dock.docked{transform:translateY(0) scale(1)}
  .dock-sep{display:none}
  .dock-cta-wrap{flex:1;width:auto}
  .dock.is-form .dock-cta-wrap{width:auto}
  .dock-node{width:44px;height:44px}
  .jf-in{font-size:16px}            /* >=16px stops iOS focus auto-zoom */
  .jf-go{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  .dock{transform:translate(-50%,0);transition:opacity .2s ease!important}
  .dock.docked{transform:translate(-50%,0);transition:opacity .2s ease!important}
  .dock > *,.dock.docked > *{transition:none!important;transform:none!important;opacity:1}
  .dock::after,.dock-play::after{animation:none!important;opacity:0}
  .dock-cta-wrap,.dock-cta,.join-form,.jf-in{transition:none!important}
  .jf-go.is-busy svg,.jf-track.jf-shake{animation:none!important}
}
@media (prefers-reduced-motion:reduce) and (max-width:640px){
  .dock,.dock.docked{transform:none}
}

/* ===== VIDEO MODAL (Zero-style lightbox, opened from the play node) ===== */
.vmodal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px}
.vmodal[hidden]{display:none}
.vmodal-backdrop{position:absolute;inset:0;background:rgba(6,16,15,.74);backdrop-filter:blur(8px) saturate(120%);-webkit-backdrop-filter:blur(8px) saturate(120%);opacity:0;transition:opacity .28s var(--ease-out)}
.vmodal-stage{position:relative;width:min(960px,92vw);aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#0A1413;box-shadow:0 30px 90px rgba(0,0,0,.55),0 16px 60px -20px rgba(55,190,176,.22);border:1px solid rgba(255,255,255,.12);opacity:0;transform:scale(.94) translateY(12px);transition:opacity .42s cubic-bezier(0.16,1,0.3,1),transform .42s cubic-bezier(0.16,1,0.3,1)}
.vmodal video{width:100%;height:100%;display:block;object-fit:cover;background:#0A1413}
.vmodal-close{position:absolute;top:12px;right:12px;z-index:2;width:40px;height:40px;border-radius:999px;border:0;background:rgba(6,16,15,.55);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .2s var(--ease-out)}
.vmodal-close svg{width:18px;height:18px;stroke:currentColor;fill:none}
.vmodal-close:hover{background:rgba(6,16,15,.82)}
.vmodal-close:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(55,190,176,.7)}
.vmodal.open .vmodal-backdrop{opacity:1}
.vmodal.open .vmodal-stage{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .vmodal-backdrop,.vmodal-stage{transition:opacity .2s ease!important;transform:none!important}
}

/* ===== Lenis smooth scroll ===== */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}

/* ============================================================
   UNIFIED "JOIN BETA" BUTTON - one look + animation on every page.
   Matches the dock's signature dark capsule. Higher specificity than the
   per-page .btn-primary so it overrides without !important; the dock's own
   #dock-join (.dock-cta) is excluded (already styled, keeps its SVG arrow).
   ============================================================ */
/* nav-waitlist classes are doubled (a.nav-waitlist.nav-waitlist = 0,2,1) so this
   override beats page-scoped rules like mascot's .nav-cta .btn (0,2,0). */
a.js-join-beta:not(.dock-cta), button.js-join-beta:not(.dock-cta),
a.nav-waitlist.nav-waitlist, a.nav-waitlist-m.nav-waitlist-m{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(180deg,#26403B 0%,var(--ink-900) 72%);color:var(--paper);border:0;border-radius:999px;
  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:600;text-transform:none;letter-spacing:-.005em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.35),0 1px 2px rgba(12,42,46,.18),0 10px 24px -10px rgba(12,42,46,.42);
  transition:transform .22s var(--ease-spring,cubic-bezier(.34,1.56,.64,1)),box-shadow .28s var(--ease-out),filter .2s var(--ease-out);
  cursor:pointer;text-decoration:none}
a.js-join-beta:not(.dock-cta)::after, button.js-join-beta:not(.dock-cta)::after,
a.nav-waitlist.nav-waitlist::after, a.nav-waitlist-m.nav-waitlist-m::after{
  content:"";width:1em;height:1em;flex-shrink:0;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .22s var(--ease-out)}
a.js-join-beta:not(.dock-cta):hover, button.js-join-beta:not(.dock-cta):hover,
a.nav-waitlist.nav-waitlist:hover, a.nav-waitlist-m.nav-waitlist-m:hover{
  background:linear-gradient(180deg,#2C4A44 0%,#16221F 78%);color:var(--paper);transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.35),0 2px 6px rgba(12,42,46,.18),0 18px 36px -12px rgba(12,42,46,.40),0 14px 32px -12px rgba(55,190,176,.45)}
a.js-join-beta:not(.dock-cta):hover::after, button.js-join-beta:not(.dock-cta):hover::after,
a.nav-waitlist.nav-waitlist:hover::after, a.nav-waitlist-m.nav-waitlist-m:hover::after{transform:translateX(3px)}
a.js-join-beta:not(.dock-cta):active, button.js-join-beta:not(.dock-cta):active,
a.nav-waitlist.nav-waitlist:active, a.nav-waitlist-m.nav-waitlist-m:active{transform:translateY(0) scale(.98)}
a.js-join-beta:not(.dock-cta):focus-visible, button.js-join-beta:not(.dock-cta):focus-visible,
a.nav-waitlist.nav-waitlist:focus-visible, a.nav-waitlist-m.nav-waitlist-m:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(55,190,176,.55)}
@media (prefers-reduced-motion:reduce){
  a.js-join-beta:not(.dock-cta),button.js-join-beta:not(.dock-cta),a.nav-waitlist.nav-waitlist,a.nav-waitlist-m.nav-waitlist-m,
  a.js-join-beta::after,a.nav-waitlist.nav-waitlist::after{transition:none!important}
}

/* a11y helpers + modal scroll lock (independent of Lenis) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html.modal-open{overflow:hidden}
.jf-in:focus-visible{box-shadow:inset 0 -2px 0 var(--accent)}