/* Cosmic UI v5: shared look for the intro and the hero (one family).
   Buttons: the Fluid Glass shader fills the pill (canvas.gfx, drawn by cosmic-ui.js); ONE thin line with a single
   blue highlight travels round it. Preloader: black pixel grid, counter, corner crosses, film grain. */
@property --orb { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.gbtn{
  --track:rgba(110,190,255,.16);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;isolation:isolate;
  padding:17px 30px;border:0;border-radius:999px;color:#eef6ff;cursor:pointer;
  background:#000;
  font:500 12px/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.7);
  animation:gbtn-orb 4s linear infinite;
  transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s;
  -webkit-tap-highlight-color:transparent;
}
/* the one line: a faint track with a single blue highlight running along it */
.gbtn:before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--orb),var(--track) 0deg 250deg,#45c8ff 318deg,#bfefff 336deg,#45c8ff 348deg,var(--track) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:gbtn-orb 4s linear infinite;
}
@keyframes gbtn-orb{to{--orb:360deg}}
.gbtn > canvas.gfx{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;z-index:-1;pointer-events:none}
.gbtn .lbl{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;pointer-events:none}
.gbtn:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(69,200,255,.1),0 0 26px -8px rgba(69,200,255,.5),0 12px 32px -12px rgba(0,0,0,.7)}
.gbtn:active{transform:scale(.97)}
.gbtn:focus-visible{outline:1px solid #8fe9ff;outline-offset:4px}
.gbtn.ghost{background:#03050a}
.gbtn.ghost:before{animation-delay:-2s}
@media (prefers-reduced-motion:reduce){.gbtn,.gbtn:before{animation:none}}

/* round icon button in the same style (menu); the dots → lines → X morph sits inside */
.mmb{position:relative;width:48px;height:48px;border:0;padding:0;border-radius:50%;cursor:pointer;color:#eef6ff;isolation:isolate;
  background:conic-gradient(from var(--orb),rgba(69,200,255,0) 0deg 230deg,rgba(69,200,255,.16) 320deg,rgba(69,200,255,0) 360deg),linear-gradient(180deg,#070b12,#020306);
  box-shadow:0 8px 24px -10px rgba(0,0,0,.8);animation:gbtn-orb 4s linear infinite;transition:transform .5s cubic-bezier(.34,1.56,.64,1),background .3s;
  -webkit-tap-highlight-color:transparent}
.mmb:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--orb),rgba(110,190,255,.18) 0deg 250deg,#45c8ff 318deg,#bfefff 336deg,#45c8ff 348deg,rgba(110,190,255,.18) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:gbtn-orb 4s linear infinite}
.mmb:hover{transform:scale(1.06)}
.mmb:active{transform:scale(.96)}
.mmb:focus-visible{outline:1px solid #8fe9ff;outline-offset:4px}
.mmb .ic{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px}
.mmb .grp{position:absolute;left:0;right:0;height:5px;transition:top .55s cubic-bezier(.34,1.3,.64,1),left .55s cubic-bezier(.34,1.3,.64,1),right .55s cubic-bezier(.34,1.3,.64,1),transform .55s cubic-bezier(.34,1.3,.64,1)}
.mmb .grp.t{top:0}.mmb .grp.b{top:13px}
.mmb .grp i{position:absolute;top:0;width:5px;height:5px;border-radius:100px;background:currentColor;
  transition:width .55s cubic-bezier(.34,1.3,.64,1),height .55s cubic-bezier(.34,1.3,.64,1),top .55s cubic-bezier(.34,1.3,.64,1)}
.mmb .grp i:first-child{left:0}.mmb .grp i:last-child{right:0}
.mmb.s2 .grp,.mmb.s3 .grp{left:-2px;right:-2px}
.mmb.s2 .grp i,.mmb.s3 .grp i{width:13px;height:2px;top:1.5px}
.mmb.s3 .grp.t,.mmb.s3 .grp.b{top:6.5px}
.mmb.s3 .grp.t{transform:rotate(225deg)}.mmb.s3 .grp.b{transform:rotate(-225deg)}

/* menu panel: the button grows into it from the top-right (after the reference), same material as the buttons */
.mpanel{position:fixed;z-index:13;width:min(320px,calc(100vw - 28px));padding:70px 14px 14px;border-radius:24px;color:#eef6ff;
  background:linear-gradient(150deg,rgba(255,255,255,.13),rgba(255,255,255,.035) 42%,rgba(120,200,255,.07));
  -webkit-backdrop-filter:blur(26px) saturate(1.7) brightness(1.06);backdrop-filter:blur(26px) saturate(1.7) brightness(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 1px 0 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(255,255,255,.06),
    inset 0 -18px 40px -24px rgba(69,200,255,.28),0 30px 80px -20px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.09);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-origin:top right;
  clip-path:inset(0 0 calc(100% - 48px) calc(100% - 48px) round 24px);pointer-events:none;
  transition:clip-path .62s cubic-bezier(.65,0,.35,1)}
.mpanel.open{clip-path:inset(0 0 0 0 round 24px);pointer-events:auto;transition:clip-path .72s cubic-bezier(.34,1.18,.64,1)}
/* glass: a specular sheen that follows the pointer, and a light-catching edge */
.mpanel:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(70% 50% at var(--gx,25%) var(--gy,0%),rgba(255,255,255,.2),rgba(255,255,255,0) 60%),linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 30%)}
.mpanel:after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.6),rgba(255,255,255,.1) 35%,rgba(255,255,255,.04) 60%,rgba(143,233,255,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.mpanel > *{position:relative}
.mpanel .mlabel{font:400 10px var(--mono,"Geist Mono",monospace);letter-spacing:.2em;text-transform:uppercase;color:#7f93ad;padding:0 10px 10px}
.mpanel nav{display:grid}
.mpanel nav a{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 9px;border-radius:12px;text-decoration:none;color:#eef6ff;overflow:hidden;cursor:pointer;
  transition:background .3s}
.mpanel nav a .row{display:flex;align-items:baseline;gap:12px;transform:translateY(110%);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.mpanel.open nav a .row{transform:none}
.mpanel.open nav a:nth-child(1) .row{transition-delay:.16s}.mpanel.open nav a:nth-child(2) .row{transition-delay:.22s}.mpanel.open nav a:nth-child(3) .row{transition-delay:.28s}
.mpanel nav a .t{font-family:var(--display,"Entuista"),sans-serif;font-size:32px;line-height:1.05}
.mpanel nav a em{font:400 10px var(--mono,"Geist Mono",monospace);letter-spacing:.14em;text-transform:uppercase;color:#7f93ad;font-style:normal}
/* the arrow: a small pixel-built diagonal arrow that slides on hover */
.mpanel nav a .arr{position:relative;width:14px;height:14px;flex:none;opacity:.55;transform:translateY(110%);transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .3s}
.mpanel.open nav a .arr{transform:none}
.mpanel nav a .arr i{position:absolute;width:3px;height:3px;background:#8fe9ff}
.mpanel nav a:hover,.mpanel nav a:focus-visible{background:rgba(69,200,255,.07);outline:0}
.mpanel nav a:hover .arr,.mpanel nav a:focus-visible .arr{opacity:1;transform:translate(3px,-3px)}
.mpanel .mfoot{display:grid;gap:6px;margin:14px 10px 2px;padding-top:14px;border-top:1px solid rgba(110,190,255,.12);opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s cubic-bezier(.16,1,.3,1)}
.mpanel.open .mfoot{opacity:1;transform:none;transition-delay:.34s}
.mpanel .mfoot small{font:400 10px var(--mono,"Geist Mono",monospace);letter-spacing:.2em;text-transform:uppercase;color:#7f93ad}
.mpanel .mfoot div{display:flex;gap:16px;flex-wrap:wrap}
.mpanel .mfoot a{font:400 12px var(--mono,"Geist Mono",monospace);letter-spacing:.06em;color:#eef6ff;text-decoration:none;transition:color .2s}
.mpanel .mfoot a:hover{color:#8fe9ff}

/* text: white cosmic pixels + alien glyphs flicker and lock in, left → right */
.dt .w{display:inline-block;white-space:nowrap}
.dt .ch{display:inline-block;text-align:center;white-space:pre;visibility:hidden}
.dt .ch.g,.dt .ch.r{visibility:visible}
.dt .ch.g{color:#eaf6ff !important;font-family:"Noto Sans Runic","Segoe UI Historic","Segoe UI Symbol","DejaVu Sans Mono",monospace;font-weight:400;letter-spacing:0;font-size:var(--gs,1em);text-shadow:0 0 6px rgba(143,233,255,.45)}
.dt .ch.g.c{color:#8fe9ff !important}
.dt .ch.g.v{color:#c4b2ff !important}

/* first paint is black; the reveal canvas dissolves it with glowing glyph pixels rising bottom → top */
.pxl{position:fixed;inset:0;z-index:95;background:#030304;pointer-events:none}
.pxl.revealing{background:transparent}
.pxl .pxl-grid{position:absolute;inset:0;width:100%;height:100%}