/* Cybergate "living" homepage layer (2026-10-23). Pairs with alive.js. Everything here is progressive enhancement. */

/* ---- intro / preloader ---- */
.al-pre{position:fixed;inset:0;z-index:100000;display:none;color:#fff;pointer-events:none}
html.al-pre-on .al-pre{display:block;pointer-events:auto;animation:alfail 0s 3.8s forwards}
@keyframes alfail{to{visibility:hidden;opacity:0}}
.al-pre:before,.al-pre:after{content:"";position:absolute;left:0;right:0;height:50.2%;background:#05070d;transition:transform .7s cubic-bezier(.77,0,.18,1)}
.al-pre:before{top:0}.al-pre:after{bottom:0}
.al-pre.al-out:before{transform:translateY(-100%)}.al-pre.al-out:after{transform:translateY(100%)}
.al-pc{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .3s,transform .5s}
.al-pre.al-out .al-pc{opacity:0;transform:scale(1.08)}
.al-ring{position:relative;width:112px;height:112px}
.al-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.al-ring circle{fill:none;stroke-width:2}
.al-ring .t{stroke:rgba(255,255,255,.12)}
.al-ring .f{stroke:url(#alg);stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:calc(327 - 327 * var(--p,0))}
.al-ring img{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;animation:alpulse 1.4s ease-in-out infinite}
@keyframes alpulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(0,172,239,0))}50%{transform:scale(1.08);filter:drop-shadow(0 0 14px rgba(0,172,239,.8))}}
.al-pn{font:700 2.4rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;color:#fff}
.al-pl{font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;color:#7f90ad}

/* ---- hero entrance choreography ---- */
html.al-init:not(.al-go) .v2-hero.sp .v2-eyebrow,html.al-init:not(.al-go) .v2-hero.sp .v2-sub,html.al-init:not(.al-go) .v2-hero.sp .fan,html.al-init:not(.al-go) .v2-hero.sp .v2-note,html.al-init:not(.al-go) .v2-hero.sp .sp-proofbar{opacity:0;transform:translateY(26px);animation:alshow 0s 4s forwards}
@keyframes alshow{to{opacity:1;transform:none}}
.v2-hero.sp .v2-eyebrow,.v2-hero.sp .v2-sub,.v2-hero.sp .fan,.v2-hero.sp .v2-note,.v2-hero.sp .sp-proofbar{transition:opacity .9s ease,transform 1s cubic-bezier(.2,.8,.2,1)}
.v2-hero.sp .v2-sub{transition-delay:.55s}.v2-hero.sp .fan{transition-delay:.75s}.v2-hero.sp .v2-note{transition-delay:.9s}.v2-hero.sp .sp-proofbar{transition-delay:1.05s}
html.al-init:not(.al-go) .v2-hero.sp .sp-stage{opacity:0}
.v2-hero.sp .sp-stage{transition:opacity 1.6s ease .2s}

/* ---- kinetic type: masked word-by-word rise ---- */
.al-kin .al-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .04em .16em 0;margin:-.08em -.04em -.16em 0}
.al-kin .al-wi{display:inline-block;transform:translateY(115%) rotate(5deg);transform-origin:0 100%;transition:transform 1s cubic-bezier(.2,.85,.2,1);transition-delay:calc(var(--wi) * 80ms + .15s)}
html.al-go .al-kin:not(.al-kin-s) .al-wi,.al-kin-s.al-seen .al-wi{transform:none}
html:not(.al-init) .al-kin:not(.al-kin-s) .al-wi{transform:none}
.v2-hero.sp h1.al-kin .grad{background:none;-webkit-text-fill-color:inherit}
.al-kin .grad .al-wi{background:linear-gradient(90deg,#4da3ff,#00ACEF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---- smooth scroll / cursor ---- */
html.al-smooth{scroll-behavior:auto!important}
html.al-cur,html.al-cur body,html.al-cur a,html.al-cur button,html.al-cur label,html.al-cur summary{cursor:none!important}
html.al-cur input,html.al-cur textarea,html.al-cur select{cursor:text!important}
.al-cd,.al-cr{position:fixed;left:0;top:0;pointer-events:none;z-index:100001;opacity:0;transition:opacity .25s}
.al-cd.on,.al-cr.on{opacity:1}
.al-cd{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#00ACEF;box-shadow:0 0 12px rgba(0,172,239,.9)}
.al-cr{width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;border:1.5px solid rgba(120,185,255,.9);mix-blend-mode:difference;display:flex;align-items:center;justify-content:center;transition:opacity .25s,scale .3s cubic-bezier(.34,1.45,.64,1),background .25s,border-color .25s}
.al-cr span{font:800 .56rem/1 Inter,system-ui,sans-serif;letter-spacing:.14em;color:#fff;opacity:0;transition:opacity .2s}
.al-cr.hot{scale:1.7;background:rgba(77,163,255,.18);border-color:rgba(255,255,255,.9)}
.al-cr.lab{scale:2.2}.al-cr.lab span{opacity:1}
.al-cr.down{scale:.8}
.v2-hero.sp .fan{translate:var(--px,0) var(--py,0);transition:translate .35s ease-out,opacity .9s,transform 1s cubic-bezier(.2,.8,.2,1)}

/* ---- kinetic band ---- */
.al-band{position:relative;overflow:hidden;background:#05070d;padding:34px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);user-select:none}
.al-band:before,.al-band:after{content:"";position:absolute;top:0;bottom:0;width:14%;z-index:2;pointer-events:none}
.al-band:before{left:0;background:linear-gradient(90deg,#05070d,transparent)}.al-band:after{right:0;background:linear-gradient(270deg,#05070d,transparent)}
.al-row{display:flex;width:max-content;white-space:nowrap;will-change:transform;margin:6px 0}
.al-seq{display:flex;align-items:center;gap:.5em;padding-right:.5em;font-weight:900;font-size:clamp(2.6rem,8.5vw,7.5rem);line-height:1.05;letter-spacing:-.03em;text-transform:uppercase;color:#fff}
.al-seq .o{color:transparent;-webkit-text-stroke:1.5px rgba(120,175,255,.65)}
.al-seq .d{display:inline-block;width:.22em;height:.22em;border-radius:50%;background:linear-gradient(135deg,#0F62D6,#00ACEF);box-shadow:0 0 24px rgba(0,172,239,.8)}
.al-row.r2 .al-seq{color:transparent;-webkit-text-stroke:1.5px rgba(120,175,255,.5)}.al-row.r2 .al-seq .o{color:#fff;-webkit-text-stroke:0}

/* ---- pinned story: How it works ---- */
.al-story .al-cv{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.al-story>.container{position:relative;z-index:3}
.al-rail,.al-num{display:none}
@media(min-width:900px){
  .al-story{padding:0!important;height:340vh;overflow:visible!important;overflow-x:clip!important}
  .al-story .al-cv{position:sticky;top:0;height:100vh;margin-bottom:-100vh;display:block}
  .al-story>.container{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;gap:34px;max-width:1180px}
  .al-story .section-head{text-align:left!important;margin:0!important;max-width:520px}
  .al-story .section-head h2:after{margin-left:0!important}
  .al-story .v2-steps{display:flex!important;flex-direction:column;gap:12px;max-width:470px;margin:0!important}
  .al-story .v2-steps:before{display:none!important}
  .al-story .v2-step{opacity:.38;transform:scale(.95);transform-origin:0 50%;transition:opacity .5s,transform .6s cubic-bezier(.34,1.45,.64,1),border-color .4s,box-shadow .4s;padding-left:64px}
  .al-story .v2-step.is-past{opacity:.62}
  .al-story .v2-step.is-on{opacity:1;transform:scale(1);border-color:rgba(77,163,255,.7);box-shadow:0 0 0 1px rgba(77,163,255,.35),0 24px 60px rgba(0,100,255,.3)}
  .al-story .v2-step:before{left:16px}
  .al-num{display:flex;align-items:flex-end;gap:10px;position:absolute;right:2%;bottom:5vh;z-index:0;pointer-events:none;line-height:.8}
  .al-num b{font-size:clamp(8rem,20vw,18rem);font-weight:900;color:transparent;-webkit-text-stroke:1.5px rgba(120,175,255,.32);letter-spacing:-.04em}
  .al-num span{font:700 1.4rem ui-monospace,Menlo,Consolas,monospace;color:#7f90ad;padding-bottom:1.4rem}
  .al-rail{display:block;position:absolute;left:14px;top:22%;height:56%;width:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
  .al-rail i{display:block;height:100%;background:linear-gradient(180deg,#0F62D6,#00ACEF,#F5A623);transform-origin:50% 0;transform:scaleY(0)}
}

@media(min-width:900px) and (max-height:760px){.al-story .section-head .lead{display:none}.al-story .v2-step{padding-top:10px;padding-bottom:10px}.al-story .v2-step p{font-size:.88rem;margin-top:2px}.al-story>.container{gap:22px}}
/* ---- touch / small screens: keep it light ---- */
@media(max-width:899px){.al-story .al-cv{opacity:.55}}
@media(prefers-reduced-motion:reduce){
  .al-pre,html.al-pre-on .al-pre{display:none!important}
  .al-kin .al-wi{transform:none!important;transition:none!important}
  html.al-init:not(.al-go) .v2-hero.sp *{opacity:1!important;transform:none!important}
}