/* kliktron.space — cover page
   One screen, no scroll. Type runs large → small from the top; the card orbit
   takes whatever height is left; the launch line and the footer close it. */

@font-face{font-family:"Rubik";src:url(/assets/fonts/rubik-var.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#0B1D3F;--ink-2:#2B3A58;--muted:#5A6B8C;--faint:#8593AE;
  --blue:#1269F7;--blue-deep:#0B4FC4;--lime:#C9FA64;--ice:#F3F7FF;
  --line:rgba(11,29,63,.10);--line-2:rgba(11,29,63,.16);
  --card:#fff;
  --head:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Code",Consolas,Menlo,monospace;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --gutter:clamp(16px,4vw,48px);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--ice)}
body{font-family:var(--body);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overscroll-behavior:none}
img{display:block;max-width:100%}
h1,h2,p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}

/* ---------- background ---------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--ice)}
.bg-gl{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s var(--ease-out)}
html.gl-on .bg-gl{opacity:1}
.bg-fallback{position:absolute;inset:-10%;filter:blur(60px);opacity:.75;transition:opacity 1.2s var(--ease-out)}
html.gl-on .bg-fallback{opacity:0}
.bg-fallback i{position:absolute;border-radius:50%}
.bg-fallback i:nth-child(1){width:48vmax;height:48vmax;left:-4%;top:6%;background:#BFD5FF;animation:fa 19s ease-in-out infinite}
.bg-fallback i:nth-child(2){width:38vmax;height:38vmax;right:-2%;top:22%;background:#E6F9B8;animation:fb 23s ease-in-out infinite}
.bg-fallback i:nth-child(3){width:34vmax;height:34vmax;left:36%;bottom:-8%;background:#DCD6FF;animation:fc 17s ease-in-out infinite}
@keyframes fa{50%{transform:translate(14vw,10vh) scale(1.12)}}
@keyframes fb{50%{transform:translate(-16vw,-8vh) scale(1.2)}}
@keyframes fc{50%{transform:translate(10vw,-14vh) scale(.88)}}
.bg-scrim{position:absolute;inset:0;background:
  radial-gradient(ellipse 58% 40% at 50% 18%,rgba(243,247,255,.78) 0%,rgba(243,247,255,.34) 55%,rgba(243,247,255,0) 80%),
  linear-gradient(to top,rgba(243,247,255,.7) 0%,rgba(243,247,255,0) 22%)}
.bg-grain{position:absolute;inset:0;opacity:.06;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- page frame ---------- */
.page{position:relative;z-index:1;height:100vh;height:100dvh;display:grid;
  grid-template-rows:auto minmax(0,1fr) auto auto;
  padding:max(clamp(14px,3.2vh,36px),env(safe-area-inset-top)) var(--gutter) max(clamp(10px,1.8vh,18px),env(safe-area-inset-bottom));
  max-width:1440px;margin:0 auto}

/* ---------- hero: large → small ---------- */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-logo{width:clamp(46px,8.6vh,92px);height:auto;aspect-ratio:1;filter:drop-shadow(0 10px 22px rgba(18,105,247,.28));
  margin-bottom:clamp(8px,1.6vh,18px)}
.hero-brand{font-family:var(--head);font-weight:500;font-size:clamp(27px,min(6.4vh,5.6vw),64px);line-height:1.04;
  letter-spacing:-.035em;color:var(--ink);display:flex;flex-wrap:wrap;justify-content:center;column-gap:.26em}
.hero-brand .accent{color:var(--blue)}
.hero-brand sup{font-size:.36em;font-weight:400;vertical-align:top;position:relative;top:.28em;margin-left:.04em;letter-spacing:0}
.hero-tagline{font-family:var(--head);font-weight:400;font-size:clamp(15px,min(2.7vh,2.6vw),25px);line-height:1.25;letter-spacing:-.015em;
  color:var(--ink-2);margin-top:clamp(6px,1.2vh,12px)}
.hero-desc{font-size:clamp(12.5px,min(1.85vh,1.7vw),16px);line-height:1.55;color:var(--muted);max-width:44ch;
  margin-top:clamp(4px,.9vh,10px)}

/* entrance */
html.js .hero > *{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease-out),transform 1s var(--ease-out)}
html.js.ready .hero > *{opacity:1;transform:none}
html.js.ready .hero > :nth-child(2){transition-delay:.08s}
html.js.ready .hero > :nth-child(3){transition-delay:.16s}
html.js.ready .hero > :nth-child(4){transition-delay:.24s}
html.js .orbit,html.js .soon,html.js .foot{opacity:0;transition:opacity 1s var(--ease-out) .3s}
html.js.ready .orbit,html.js.ready .soon,html.js.ready .foot{opacity:1}

/* ---------- orbit ---------- */
.orbit{position:relative;min-height:0;display:flex;flex-direction:column;outline:none;
  touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.orbit.dragging{cursor:grabbing}
.orbit:focus-visible .orbit-count{outline:2px solid var(--blue);outline-offset:4px;border-radius:6px}
.orbit-stage{position:relative;flex:1;min-height:0}
.card{--w:320px;position:absolute;left:50%;top:50%;width:var(--w);margin-left:calc(var(--w) / -2);
  transform-origin:50% 50%;will-change:transform}
/* Each card carries its own perspective() (orbit.js), so the three are
   independent flat layers and z-index alone decides who is in front. It is
   centred with a margin, not translateY(-50%), so it shrinks toward its own
   middle and the side cards stay level with the front one.
   Cards are solid: a see-through card lets the one behind it read through.
   Depth is shown with --veil (an ice wash over the card), not opacity. */
.card-inner{position:relative;border-radius:22px;background:var(--card);border:1px solid rgba(255,255,255,.95);
  box-shadow:0 1px 2px rgba(11,29,63,.05),0 24px 60px -22px rgba(11,29,63,.35),0 8px 20px -12px rgba(18,105,247,.22);
  overflow:hidden;transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.card.front .card-inner{box-shadow:0 1px 2px rgba(11,29,63,.05),0 34px 80px -26px rgba(11,29,63,.42),0 10px 26px -12px rgba(18,105,247,.32)}
.card-media{position:relative;margin:10px 10px 0;border-radius:14px;overflow:hidden;aspect-ratio:16/10;background:#dfe7f6}
.card-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.14) translate(var(--px,0px),var(--py,0px));
  transition:transform .6s var(--ease-out);pointer-events:none}
.card-body{padding:14px 18px 18px}
.card-tag{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.card-tag span{font-family:var(--mono);letter-spacing:.04em;font-weight:600;color:#fff;background:var(--blue);border-radius:99px;padding:2px 7px}
.card-title{font-family:var(--head);font-weight:500;font-size:23px;line-height:1.1;letter-spacing:-.025em;margin-top:9px;color:var(--ink)}
.card-text{font-size:13.2px;line-height:1.5;color:var(--muted);margin-top:7px}
.card-meta{margin-top:12px;padding-top:11px;border-top:1px solid var(--line);font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--blue)}
.card-inner::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:rgb(236,242,255);opacity:var(--veil,0)}
.card-glare{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s var(--ease-out);
  background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.55),rgba(255,255,255,0) 55%)}
.card.hover .card-glare{opacity:1}
.card.hover .card-media img,.card.hover .card-inner{transition-duration:.18s}

.orbit-ctrl{display:flex;align-items:center;justify-content:center;gap:14px;padding-top:clamp(4px,1vh,10px)}
.orbit-btn{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-2);
  background:rgba(255,255,255,.7);cursor:pointer;transition:background .2s,transform .2s var(--ease-out),border-color .2s}
.orbit-btn:hover{background:#fff;border-color:rgba(18,105,247,.4)}
.orbit-btn:active{transform:scale(.92)}
.orbit-btn svg{width:14px;height:14px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.orbit-count{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--muted);min-width:64px;text-align:center}
.orbit-count b{color:var(--ink);font-weight:600}

/* ---------- launch line ---------- */
.soon{display:flex;flex-direction:column;align-items:center;gap:clamp(5px,.9vh,9px);text-align:center;padding:clamp(8px,1.6vh,18px) 0 clamp(8px,1.4vh,14px)}
.soon-pill{display:inline-flex;align-items:center;gap:9px;padding:6px 14px;border-radius:99px;border:1px solid rgba(18,105,247,.18);
  background:rgba(255,255,255,.66);font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.pulse{position:relative;width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--blue);animation:pulse 2s infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(3.2);opacity:0}}
.soon-text{font-size:clamp(12.5px,min(1.8vh,1.6vw),15px);line-height:1.5;color:var(--ink-2);max-width:60ch}

/* ---------- footer ---------- */
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 22px;
  padding-top:clamp(8px,1.4vh,14px);border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.foot-co{display:flex;flex-wrap:wrap;gap:4px 10px}
.foot-co b{color:var(--ink);font-weight:600}
.foot-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px}
.foot-links a{text-decoration:none;transition:color .2s}
.foot-links a:hover{color:var(--blue)}
.foot-copy{color:var(--faint)}

/* ---------- smaller screens ---------- */
@media (max-width:900px){
  .foot{justify-content:center;text-align:center;font-size:11.5px}
  .foot-co,.foot-links{justify-content:center}
  .foot-copy{display:none}
}
@media (max-width:560px){
  .foot{gap:4px 12px}
  .foot-links{gap:2px 12px}
  .foot-links li:nth-child(n+3){display:none}
  .soon-pill{font-size:9.5px;padding:5px 12px}
  .orbit-btn{width:30px;height:30px}
}
/* short landscape screens: keep the essentials, drop the extras */
@media (max-height:560px){
  .hero-desc{display:none}
  .soon-text{display:none}
  .foot-links{display:none}
  .orbit-ctrl{padding-top:2px}
  .orbit-btn{width:28px;height:28px}
}
@media (max-height:420px){
  .hero-tagline{display:none}
  .soon{display:none}
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  .bg-fallback i,.pulse::after{animation:none}
  html.js .hero > *,html.js .orbit,html.js .soon,html.js .foot{transition:opacity .3s linear;transform:none}
  .card-inner,.card-media img{transition:none}
}

/* ---------- 404 ---------- */
.nf-box{position:relative;z-index:1;height:100vh;height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px}
.nf-link{margin-top:10px;display:inline-flex;padding:10px 18px;border-radius:99px;background:var(--blue);color:#fff;text-decoration:none;font-weight:600;font-size:14px}
.nf-link:hover{background:var(--blue-deep)}