/* ==========================================================================
   Ninova Technology · pages/home.css
   Home only: the intro loader, the entry-gate game and the scroll journey
   (cosmos canvas, captions, detail panels, rail, scroll hint).
   ========================================================================== */

/* ---------- Scene layers ---------- */
/* touch: a sideways swipe on the canvas spins the globe; up, down and pinch still belong to the page */
.cosmos{position:fixed;inset:0;width:100%;height:100%;touch-action:pan-y pinch-zoom}
.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,transparent 50%,rgba(0,0,0,.7))}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.035}

/* Without JavaScript the journey is a plain, readable page: the canvas layers go
   and every stop simply stacks. The fixed, scroll-driven layout below is opt-in via .js */
.no-js .cosmos,.no-js .vignette,.no-js .grain,.no-js .rail,.no-js .scroll-hint,.no-js .loader{display:none}
.no-js .journey{padding:calc(var(--header-h) + 40px) var(--gutter) 0;display:grid;gap:72px}
.no-js .stop{display:grid;gap:28px;max-width:720px}

/* ---------- Journey: seven stops, one scroll track ---------- */
.js .journey{height:900vh}
.stop{--o:0;--dir:1}

/* Captions. --o (0 → 1) is the stop's presence, written by home.js from scroll position.
   Each part starts a little later than the one before (--d), so they arrive in sequence. */
.js .cap{position:fixed;z-index:var(--z-content);left:var(--gutter);bottom:calc(clamp(28px,8vh,88px) + var(--safe-bottom));max-width:min(36ch,86vw);visibility:hidden;pointer-events:none;text-shadow:0 2px 24px #000;
  transform:translate3d(calc(var(--tx,0) * -10px),calc((1 - var(--o)) * var(--dir) * 18px + var(--ty,0) * -8px),0)}
.js .stop.is-on .cap{visibility:visible}
.js .cap::before{content:'';position:absolute;inset:-48px -72px -36px -48px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 32% 62%,rgba(var(--void-rgb),.62),rgba(var(--void-rgb),0) 72%)}
.js .cap>*{--k:clamp(0,calc((var(--o) - var(--d,0)) * 1.8),1);opacity:var(--k)}
.cap .eyebrow{--d:0;margin-bottom:18px;white-space:nowrap}
/* min-width keeps a short closing phrase ("to scale.") together even where the caption column is narrower than the type is wide */
.cap__title{--d:0;min-width:3.3em;font-size:var(--fs-display);letter-spacing:-.045em;line-height:.93}
.cap__text{--d:.16;margin-top:18px;max-width:44ch;font-size:clamp(14px,1.5vw,17px);line-height:1.55;color:var(--ink-dim)}
.cap__actions{--d:.3;display:flex;gap:10px;margin-top:26px;flex-wrap:wrap;pointer-events:auto}
/* the title is split into words by home.js; each word rises a beat after the previous one */
.js .cap__title{opacity:1}
.js .cap__title .word{display:inline-block;white-space:nowrap;--k:clamp(0,calc((var(--o) - var(--wi,0) * .045) * 2.2),1);opacity:var(--k);transform:translate3d(0,calc((1 - var(--k)) * .42em),0)}
/* the accent word: italic serif, lit by a gradient that follows the pointer instead of looping */
.cap__title em{font-family:var(--font-accent);font-style:italic;font-weight:400;font-size:1.06em;letter-spacing:-.02em;padding-right:.06em;text-shadow:none;
  background:linear-gradient(100deg,#ff9a6b 0%,#fff 35%,#6ff0d8 70%,#ff9a6b 100%);background-size:220% 100%;background-position:calc(50% + var(--tx,0) * -160%) 0;-webkit-background-clip:text;background-clip:text;color:transparent}

/* Detail panels: a glass card per stop, parked on the right */
.js .panel{position:fixed;z-index:var(--z-overlay);right:clamp(58px,6.5vw,100px);top:calc(50% + 24px);width:clamp(290px,29vw,400px);max-height:calc(100svh - 190px);overflow:hidden;visibility:hidden;pointer-events:none;
  opacity:clamp(0,calc((var(--o) - .18) * 1.7),1);
  transform-origin:100% 50%;
  transform:translate3d(calc((1 - var(--o)) * 28px + var(--tx,0) * 14px),calc(-50% + var(--ty,0) * 10px),0) perspective(900px) rotateY(calc(var(--tx,0) * -5deg)) rotateX(calc(var(--ty,0) * 4deg)) scale(var(--fit,1))}
/* on short screens home.js shrinks a tall card to fit (--fit) instead of letting it be cut off */
.js .panel.is-fitted{max-height:none}
.js .stop.is-on .panel{visibility:visible}
/* once the footer has arrived nothing of the journey may be seen or clicked */
.js .journey.is-past .cap,.js .journey.is-past .panel{visibility:hidden}
.panel{position:relative;padding:20px 22px 22px;border:1px solid rgba(255,255,255,.12);border-radius:24px;background:linear-gradient(160deg,rgba(15,12,28,.66),rgba(var(--void-rgb),.5));box-shadow:0 30px 80px -30px #000}
.panel::before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(70% 60% at 85% 0%,var(--tone),transparent 70%);opacity:.14;pointer-events:none}
.panel>*{position:relative}
.panel__art svg{width:100%;height:auto;margin:-4px 0 10px;overflow:hidden}
.panel__art text{font-family:var(--font-mono)}
.panel__title{font-weight:300;font-size:clamp(17px,1.5vw,21px);letter-spacing:-.01em;line-height:1.3;margin-bottom:14px;color:var(--ink)}
.panel__list{display:grid;gap:11px;margin-bottom:14px}
.panel__list li{padding-left:14px;border-left:2px solid var(--tone)}
.panel__list b{display:block;font-weight:400;font-size:14px;color:var(--ink)}
.panel__list span{display:block;font-size:12.5px;line-height:1.45;color:var(--ink-dim)}
.panel .chips>li{--chip:var(--tone);font-size:11.5px;font-weight:400;padding:5px 11px;background:none}
@media (max-height:780px){.panel__art svg{max-height:96px}}

/* ---------- Hero: the three pillars, a quiet list beside the globe instead of a card ----------
   Each pillar's dot is the colour of its moon on the globe. */
.panel--hero,.js .panel.panel--hero{padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.panel--hero::before{display:none}
.panel--hero{text-shadow:0 1px 18px #000}
.js .panel.panel--hero{width:clamp(210px,21vw,300px)}
.pillars__title{font-weight:300;font-size:clamp(14px,1.15vw,16px);line-height:1.35;color:var(--ink-soft);padding-bottom:14px}
.pillars{counter-reset:pillar;border-top:1px solid var(--line)}
.pillars li{--d:.22;position:relative;counter-increment:pillar;border-bottom:1px solid var(--line)}
.pillars li:nth-child(2){--d:.3}
.pillars li:nth-child(3){--d:.38}
/* the rows arrive one after another, on the same scroll-driven clock as the headline */
.js .pillars li{--k:clamp(0,calc((var(--o) - var(--d)) * 2.4),1);opacity:var(--k);transform:translate3d(calc((1 - var(--k)) * 16px),0,0)}
.pillars a{display:flex;align-items:center;gap:12px;padding:15px 0;color:var(--ink);text-decoration:none;font-size:clamp(15px,1.25vw,18px);letter-spacing:-.01em;-webkit-tap-highlight-color:transparent}
.pillars a::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--tone);box-shadow:0 0 12px var(--tone);transition:transform .6s var(--ease-spring)}
.pillars a::after{content:counter(pillar,decimal-leading-zero);margin-left:auto;font:400 10px/1 var(--font-mono);letter-spacing:.14em;color:var(--ink-dim);text-shadow:none;transition:color .3s}
.pillars a span{transition:transform .6s var(--ease-spring)}
/* pointed at: the rule under the pillar draws itself in its colour, the name steps forward */
.pillars li::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--tone);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-out)}
.pillars li:hover::after,.pillars li:focus-within::after{transform:scaleX(1)}
.pillars a:hover span,.pillars a:focus-visible span{transform:translateX(6px)}
.pillars a:hover::before,.pillars a:focus-visible::before{transform:scale(1.5)}
.pillars a:hover::after,.pillars a:focus-visible::after{color:var(--tone)}
.pillars a:focus-visible{outline-offset:2px}
.js .stop.is-on .pillars{pointer-events:auto}

/* ---------- Rail (stop navigation) and scroll hint ---------- */
.rail{--accent-rgb:255,255,255;position:fixed;z-index:var(--z-overlay);right:clamp(16px,3vw,36px);top:50%;transform:translateY(-50%);height:34vh;width:1px;background:rgba(255,255,255,.12);opacity:0}
.rail__dot{position:absolute;left:-2px;top:0;width:5px;height:5px;border-radius:50%;background:rgb(var(--accent-rgb));box-shadow:0 0 12px rgb(var(--accent-rgb))}
.rail button{position:absolute;left:-12px;width:25px;height:25px;transform:translateY(-50%);background:none;border:0}
.rail button::after{content:'';position:absolute;left:11px;top:12px;width:3px;height:1px;background:rgba(255,255,255,.35);transition:width .5s var(--ease-spring),left .5s var(--ease-spring),background var(--t-fast)}
.rail button::before{content:attr(data-name);position:absolute;right:28px;top:50%;transform:translateY(-50%) translateX(6px);white-space:nowrap;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);opacity:0;transition:opacity var(--t-fast),transform .5s var(--ease-spring);pointer-events:none;text-shadow:0 1px 12px #000}
.rail button:hover::after,.rail button:focus-visible::after{width:10px;left:4px;background:#fff}
.rail button[aria-current="true"]::after{width:10px;left:4px;background:rgb(var(--accent-rgb))}
.rail button:hover::before,.rail button:focus-visible::before{opacity:1;transform:translateY(-50%)}
.rail button:focus-visible{outline:1px solid rgb(var(--accent-rgb));outline-offset:0;border-radius:2px}
.scroll-hint{position:fixed;z-index:var(--z-content);left:50%;bottom:calc(28px + var(--safe-bottom));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:var(--fs-small);color:var(--ink-dim);letter-spacing:.05em;opacity:0;transition:opacity .6s;pointer-events:none}
.scroll-hint::after{content:'';width:1px;height:32px;background:linear-gradient(rgba(255,255,255,.7),transparent);transform-origin:top;animation:hint-drop 2.2s var(--ease-in-out) infinite}
@keyframes hint-drop{0%{transform:scaleY(0)}55%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

@media (max-width:1000px){.js .panel{width:clamp(250px,34vw,330px);right:clamp(44px,5vw,60px)}.panel__list li:nth-child(n+4){display:none}}
/* tablets and small laptops: headline, globe and card share one row, so the headline steps down a size */
@media (min-width:701px) and (max-width:1100px){:root{--fs-display:clamp(40px,5.6vw,62px)}.js .cap{max-width:min(34ch,38vw)}}
@media (max-width:700px){
  .cap .eyebrow{font-size:var(--fs-micro);margin-bottom:12px}
  .js .cap::before{inset:-40px -24px -30px -24px}
  /* phones: the card becomes a slim header strip, and the caption clears the scroll hint */
  .js .cap{bottom:calc(64px + var(--safe-bottom))}
  .js .panel{left:16px;right:16px;width:auto;top:calc(78px + var(--safe-top));max-height:30svh;padding:14px 16px;border-radius:18px;transform:translate3d(0,calc((1 - var(--o)) * -14px),0)}
  .js .panel__art,.js .panel__list{display:none}
  .js .panel__title{font-size:16px;margin-bottom:10px}
  .panel .chips>li{font-size:11px;padding:4px 9px}
  /* the pillars become one slim line under the header */
  .js .panel.panel--hero{width:auto}
  .pillars__title{font-size:13px;padding-bottom:4px}
  .pillars{display:flex;flex-wrap:wrap;gap:0 12px;border-top:0}
  .pillars li{border-bottom:0}
  .pillars li::after,.pillars a::after{display:none}
  .pillars a{gap:7px;padding:9px 0;font-size:12px;letter-spacing:0}
  .scroll-hint{bottom:calc(10px + var(--safe-bottom));gap:6px;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase}
  .scroll-hint::after{height:18px}
}
@media (max-width:700px) and (max-height:620px){.scroll-hint{display:none}.js .cap{bottom:calc(24px + var(--safe-bottom))}}
/* phones held sideways: smaller headline, slim card, so nothing slides under the header */
@media (min-width:701px) and (max-height:520px){
  :root{--fs-display:clamp(30px,9vh,44px)}
  .js .cap{bottom:calc(18px + var(--safe-bottom));max-width:min(40ch,40vw)}
  .cap .eyebrow{margin-bottom:10px}
  .cap__text{margin-top:10px}
  .cap__actions{margin-top:16px}
  .js .panel__art,.js .panel__list{display:none}
  .js .panel{top:calc(50% + 34px);padding:14px 16px}
  .pillars__title{padding-bottom:10px}
  .pillars a{padding:10px 0}
  .scroll-hint{display:none}
}

/* ---------- Intro loader: "genesis sequence" ---------- */
html.is-loading,html.is-loading body{overflow:hidden}
.loader{position:fixed;inset:0;z-index:var(--z-loader);display:grid;place-items:center;color:var(--ink)}
.loader__panel{position:absolute;left:0;right:0;height:50.5%;background:var(--void);transition:transform 1s cubic-bezier(.77,0,.18,1) .15s;will-change:transform}
.loader__panel--top{top:0}
.loader__panel--bottom{bottom:0}
.loader__canvas{position:absolute;inset:0;width:100%;height:100%}
.loader__center{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px;transition:opacity .5s,transform .7s cubic-bezier(.5,0,.2,1)}
.loader__mark{width:clamp(84px,14vw,132px);height:auto;overflow:visible;filter:drop-shadow(0 0 22px rgba(var(--brand-rgb),.45))}
.loader__mark polygon{fill:var(--brand);fill-opacity:0;stroke:var(--brand);stroke-width:.9;stroke-dasharray:1;stroke-dashoffset:1;transform-box:fill-box;transform-origin:center;animation:loader-draw 1.1s cubic-bezier(.6,0,.2,1) forwards,loader-fill .7s ease-out forwards,loader-gather 1.4s var(--ease-spring) backwards}
.loader__mark polygon:nth-child(1){animation-delay:.1s,.9s,.1s;--dx:-26px;--dy:-14px}
.loader__mark polygon:nth-child(2){animation-delay:.25s,1.05s,.25s;--dx:26px;--dy:-22px}
.loader__mark polygon:nth-child(3){animation-delay:.4s,1.2s,.4s;--dx:-22px;--dy:26px}
.loader__mark polygon:nth-child(4){animation-delay:.55s,1.35s,.55s;--dx:24px;--dy:22px}
@keyframes loader-draw{to{stroke-dashoffset:0}}
@keyframes loader-fill{to{fill-opacity:1;stroke-opacity:0}}
@keyframes loader-gather{from{transform:translate(var(--dx),var(--dy)) scale(.85);opacity:0}to{transform:none;opacity:1}}
.loader__name{display:flex;gap:.14em;font-size:clamp(13px,1.6vw,16px);letter-spacing:.34em;font-weight:400;overflow:hidden;padding-left:.34em}
.loader__name i{font-style:normal;display:inline-block;transform:translateY(110%);opacity:0;animation:loader-letter .9s var(--ease-spring) forwards;animation-delay:calc(1.2s + var(--n) * .05s)}
.loader__name i.is-light{font-weight:200;color:var(--ink-dim)}
.loader__name .gap{width:.6em}
/* letter order: N I N O V A · T E C H N O L O G Y */
.loader__name i:nth-child(1){--n:0}.loader__name i:nth-child(2){--n:1}.loader__name i:nth-child(3){--n:2}.loader__name i:nth-child(4){--n:3}.loader__name i:nth-child(5){--n:4}.loader__name i:nth-child(6){--n:5}
.loader__name i:nth-child(8){--n:7}.loader__name i:nth-child(9){--n:8}.loader__name i:nth-child(10){--n:9}.loader__name i:nth-child(11){--n:10}.loader__name i:nth-child(12){--n:11}.loader__name i:nth-child(13){--n:12}.loader__name i:nth-child(14){--n:13}.loader__name i:nth-child(15){--n:14}.loader__name i:nth-child(16){--n:15}.loader__name i:nth-child(17){--n:16}
@keyframes loader-letter{to{transform:none;opacity:1}}
.loader__bar{position:relative;width:min(220px,52vw);height:1px;background:rgba(255,255,255,.12)}
.loader__bar b{position:absolute;left:0;top:0;height:1px;width:100%;background:linear-gradient(90deg,rgba(var(--aqua-rgb),.2),#fff);transform-origin:left;transform:scaleX(0);box-shadow:0 0 12px rgba(161,240,234,.9)}
.loader__pct,.loader__tag{position:absolute;bottom:calc(clamp(24px,6vh,56px) + var(--safe-bottom));font-size:12px;letter-spacing:.14em;color:var(--ink-dim);transition:opacity .4s}
.loader__pct{right:var(--gutter);font-weight:200;font-variant-numeric:tabular-nums}
.loader__tag{left:var(--gutter)}
.loader__hud{position:absolute;top:calc(clamp(24px,5vh,46px) + var(--safe-top));display:flex;flex-direction:column;gap:7px;font-size:var(--fs-micro);letter-spacing:.16em;color:var(--ink-dim);font-variant-numeric:tabular-nums;transition:opacity .4s}
.loader__hud--left{left:clamp(24px,6vw,80px)}
.loader__hud--right{right:clamp(24px,6vw,80px);align-items:flex-end;text-align:right}
.loader__hud b{font-weight:300;font-size:13px;color:var(--ink);letter-spacing:.18em}
.loader.is-leaving .loader__center{opacity:0;transform:scale(1.35)}
.loader.is-leaving .loader__pct,.loader.is-leaving .loader__tag,.loader.is-leaving .loader__hud{opacity:0}
.loader.is-leaving .loader__canvas{opacity:0;transition:opacity .5s}
.loader.is-leaving .loader__panel--top{transform:translateY(-101%);box-shadow:0 1px 60px 4px rgba(var(--aqua-rgb),.5)}
.loader.is-leaving .loader__panel--bottom{transform:translateY(101%)}
.loader.is-gone{display:none}
@media (prefers-reduced-motion:reduce){
  .loader__mark polygon{stroke-dashoffset:0}
  .loader__canvas{display:none}
  .loader__panel{transition-duration:.3s!important;transition-delay:0s!important}
}

/* ---------- Entry gate game ---------- */
html.is-gated,html.is-gated body{overflow:hidden}
.gate{position:fixed;inset:0;z-index:var(--z-gate);background:var(--void);touch-action:none;transition:opacity .9s,transform .9s cubic-bezier(.5,0,.2,1)}
.gate.is-out{opacity:0;transform:scale(1.15);pointer-events:none}
.gate canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.gate__hud{position:absolute;top:calc(18px + var(--safe-top));left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;width:max-content;max-width:94vw;pointer-events:none}
.gate__stats{display:flex;gap:20px;font-size:var(--fs-micro);letter-spacing:.16em;color:var(--ink-dim);white-space:nowrap;font-variant-numeric:tabular-nums}
.gate__stats b{font-weight:300;font-size:14px;color:var(--ink);margin-left:6px}
.gate__toast{position:absolute;z-index:1;left:50%;bottom:calc(74px + var(--safe-bottom));transform:translateX(-50%);max-width:min(92vw,560px);text-align:center;font-size:14px;line-height:1.4;padding:10px 18px;border-radius:999px;background:rgba(var(--void-rgb),.99);border:1px solid rgba(255,255,255,.12);color:var(--ink);pointer-events:none;transition:opacity .3s,border-color .3s,color .3s}
.gate__toast:empty{opacity:0}
.gate__toast.is-bad{border-color:rgba(var(--rose-rgb),.65);color:#ffc9d3}
.gate__toast.is-good{border-color:rgba(110,240,220,.55);color:#c9fff6}
.gate__menu{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;overflow:auto;background:rgba(var(--void-rgb),.86);transition:opacity .4s}
.gate__menu.is-off{opacity:0;pointer-events:none}
.gate__menu small{letter-spacing:.3em;font-size:var(--fs-micro);color:var(--ink-dim)}
.gate__menu h3{font-size:clamp(32px,5.6vw,64px);letter-spacing:-.035em;margin:10px 0 12px}
.gate__menu p{max-width:46ch;margin:0 auto;font-size:var(--fs-body);line-height:1.55;color:var(--ink-dim)}
.gate__actions{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap;justify-content:center}
.gate__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px auto 0;max-width:620px;text-align:left}
.gate__step{display:flex;flex-direction:column;gap:12px;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:16px;background:rgba(255,255,255,.03);font-size:var(--fs-small);line-height:1.5;color:var(--ink-dim)}
.gate__step b{display:block;color:var(--ink);font-weight:400;font-size:14px;margin-bottom:3px}
.gate__icon{height:34px;display:flex;align-items:center;flex:none}
.gate__you{width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(110,240,220,.28),0 0 20px rgba(110,240,220,.8);margin-left:8px}
.gate__orb{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--ink-inverse);display:grid;place-items:center;font-weight:400;font-size:15px;box-shadow:0 0 0 4px rgba(var(--ember-rgb),.28),0 0 22px rgba(var(--ember-rgb),.65)}
.gate__chip{display:inline-flex;flex-direction:column;align-items:center;gap:3px;border:1px solid rgba(var(--rose-rgb),.85);background:rgba(var(--rose-rgb),.1);color:#ffe2e8;border-radius:10px;padding:6px 12px;font-size:12px;font-weight:400;line-height:1.1}
.gate__chip em{font-style:normal;font-size:8px;letter-spacing:.2em;color:#ff96ac}
.gate__skip{position:absolute;z-index:2;right:clamp(16px,3vw,36px);bottom:calc(22px + var(--safe-bottom));font:300 13px/1 var(--font-sans);letter-spacing:.05em;color:var(--ink);background:rgba(var(--void-rgb),.6);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:11px 18px;transition:border-color var(--t-fast)}
.gate__skip:hover{border-color:#fff}
@media (max-width:600px){
  .gate__steps{grid-template-columns:1fr;gap:8px;margin-top:18px}
  .gate__step{flex-direction:row;align-items:center;gap:14px;padding:12px 14px}
  .gate__icon{width:56px;justify-content:center}
  .gate__you{margin-left:0}
  .gate__menu h3{margin-bottom:8px}
  .gate__stats{gap:14px}
}