/* VoiceOwl homepage v11 (thought 23): the hero and the ring-to-timeline scene (v11.js). Loads after v4.css, so the page
   keeps Eclipse's identity. One motion language: --v11-out for arrivals, --v11-io for travel. */
html:root[data-v11]{--v11-out:cubic-bezier(.16,1,.3,1);--v11-io:cubic-bezier(.65,0,.35,1);--v11-t:300vh}
html[data-v11]{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:hidden}

/* the pinned scene: the hero stays while the timeline, on top of it, starts out invisible */
.v11-stage{position:relative;margin:-64px -20px 0}
.v11-hero{margin:0}
html.v11-live .v11-stage{height:calc(100vh + var(--v11-t));z-index:1}
html.v11-live .v11-hero{position:sticky;top:0;height:100vh;min-height:0}
html.v11-live .tl{z-index:2;margin-top:calc(-100vh - var(--v11-t))}
html.v11-live .tl.tl-live{height:calc(620vh + var(--v11-t));pointer-events:none}
html.v11-live .tl.tl-live.v11-handed{pointer-events:auto}
html.v11-live .tl-pin{background:transparent}
.tl-live .tl-svg .wave{stroke-width:2}
.tl-live .tl-svg .head,.tl-live .tl-svg .halo{transition:opacity .25s ease}

/* the hero's own canvas shows at once: the opening draws the ring, so no fade is needed */
.v11-hero .v4-bg{transition:none;opacity:1}
.v11-hero{background:#050506}
/* grain is in the shader, only where there is light: this layer turned the black disc grey */
.v11-hero .v4-grain,html[data-v11] .v4-close .v4-grain{display:none}
/* the closing band: the threads reach further now, so they fade before the band's top edge */
html[data-v11] .v4-close .v4-shade{background:linear-gradient(0deg,#050506 0%,rgba(5,5,6,0) 22%),linear-gradient(180deg,#050506 0%,rgba(5,5,6,0) 34%)}
/* the plumes at the poles pass behind the header and the logos: the words there stay readable */
html[data-v11] .v11-hero .v4-shade{background:linear-gradient(0deg,rgba(5,5,6,.96) 0%,rgba(5,5,6,.86) 8%,rgba(5,5,6,0) 14.5%),linear-gradient(180deg,rgba(5,5,6,.9) 0%,rgba(5,5,6,.74) 52px,rgba(5,5,6,0) 92px)}
.v11-hero.v4-nogl{background:radial-gradient(60% 72% at 50% 46%,#050506 56%,#b9bcc2 59%,#2b2d31 64%,#050506 84%)}

/* before the opening (the class is set in <head>, and removed if the script never arrives) */
.v11-js:not(.v11-open) .v11-li{opacity:0}   /* opacity, not transform: GSAP would read a transform in and keep it */
.v11-js:not(.v11-open) [data-v11-x]>*,.v11-js:not(.v11-open) .v4-logos>*,.v11-js:not(.v11-open) .v4-trust>p{opacity:0}
.v11-l,.v11-li{display:block}
html[data-v11] .v4-mask{margin-bottom:-.16em}

/* the rotating word */
.v11-word{position:relative;display:inline-block;vertical-align:baseline;text-align:left;white-space:nowrap}
.v11-w{display:inline-block;white-space:nowrap}
.v11-w.is-out{position:absolute;left:0;top:0}
.v11-ch{display:inline-block;will-change:transform}

/* the button: a small eclipse. A bead of light circles it just off its edge, as on the ring; its glow follows the voice (--v11-lv, v11.js);
   the fill brightens where the pointer is; it leans towards the pointer and its letters roll on hover. Nothing bounces. */
@property --v11-a{syntax:'<angle>';inherits:false;initial-value:0deg}
html[data-v11] .v11-btn{isolation:isolate;overflow:visible;height:min(56px,6.8vh);min-height:46px;padding:0 38px;font-size:16px;will-change:transform;
  background:radial-gradient(130px 80px at var(--mx,50%) var(--my,50%),#fff 0%,var(--o-plat) 72%);
  box-shadow:0 0 0 1px rgba(255,255,255,.4) inset,0 0 calc(14px + 46px*var(--v11-lv,0)) calc(var(--v11-lv,0)*5px) rgba(238,237,232,calc(.1 + .3*var(--v11-lv,0)));transition:background-color .3s ease}
html[data-v11] .v11-btn::after{display:none}
html[data-v11] .v11-btn::before{content:"";position:absolute;inset:-6px;z-index:-1;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--v11-a),rgba(255,255,255,0) 0deg,rgba(255,255,255,.07) 190deg,rgba(255,255,255,.7) 336deg,#fff 356deg,rgba(255,255,255,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:v11-orbit 5.2s linear infinite}
@keyframes v11-orbit{to{--v11-a:360deg}}
.v11-btn-t{display:inline-flex;overflow:hidden;line-height:1.35}
html[data-v11] .v11-lt{display:inline-block;white-space:pre;transition:transform .62s var(--v11-out);transition-delay:calc(var(--i)*11ms)}
.v11-lt::after{content:attr(data-c);position:absolute;left:0;top:100%}
.v11-btn:hover .v11-lt,.v11-btn:focus-visible .v11-lt{transform:translateY(-100%)}

/* the slogan. Plain and complete by default (phones, reduced motion, no script): two lines with a hairline between them.
   Pinned over the hero on wide screens, where the ring's own line stands between them and v11.js stretches the letters out of it. */
html[data-v11] .v11-sl{margin:0;padding:clamp(72px,14vh,140px) 20px;background:#050506;color:var(--o-plat);text-align:center;font:var(--o-weight) clamp(38px,10.5vw,76px)/1.05 var(--f-serif);letter-spacing:var(--o-track)}
.v11-sl-a,.v11-sl-b,.v11-sl-why,.v11-sl-rule{display:block}
.v11-sl-rule{width:min(520px,72%);height:1px;margin:.3em auto;background:linear-gradient(90deg,transparent,var(--o-plat),transparent)}
html[data-v11] .v11-sl-why{margin-top:1.2em;font:400 clamp(16px,1.25vw,19px)/1.4 var(--f-sans);letter-spacing:0;color:var(--o-smoke)}
html.v11-live .v11-stage{--v11-sl:min(8.2vw,15.5vh)}
html[data-v11].v11-live .v11-sl{position:sticky;top:0;z-index:3;height:100vh;margin:-100vh 0 0;padding:0;overflow:hidden;background:none;pointer-events:none;font-size:var(--v11-sl);line-height:1}
html.v11-live .v11-sl-rule{display:none}
html.v11-live .v11-sl-a{position:absolute;left:0;right:0;bottom:calc(100% - var(--v11-line,46vh) + .03em);white-space:nowrap}
html.v11-live .v11-sl-b{position:absolute;left:0;right:0;top:calc(var(--v11-line,46vh) + .1em);white-space:nowrap}
html[data-v11].v11-live .v11-sl-why{position:absolute;left:0;right:0;margin:0;top:calc(var(--v11-line,46vh) + var(--v11-sl)*1.3)}
.v11-sl-ch{display:inline-block;will-change:transform,opacity}

/* the logos stay on one line where they fit; below that, the words sit above them, never under the ring */
@media (min-width:1200px){
  html[data-v11] .v4-logos{flex-wrap:nowrap;gap:0 18px}
  html[data-v11] .v4-logos .clogo{height:20px;max-height:20px;max-width:100px}
  html[data-v11] .v4-logos span{font-size:13px}
}
@media (min-width:761px) and (max-width:1199px){
  html[data-v11] .v4-trust{flex-direction:column;gap:10px}
  html[data-v11] .v4-trust p{max-width:none;text-align:center}
  html[data-v11] .v4-logos{justify-content:center;gap:8px 22px}
  html[data-v11] .v4-logos .clogo{height:18px;max-height:18px}
}

/* phones and small windows: the arc over the copy, nothing pinned */
@media (max-width:760px){
  html[data-v11] .v11-btn{height:50px}
}