/* Krodity revamp — shared tokens + components (login + home). Dark-first: the app UI is built on light-on-dark. */
@font-face{font-family:"Space Grotesk";src:url(/revamp/fonts/space-grotesk.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Inter";src:url(/revamp/fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  color-scheme:dark;
  --bg:#07040f; --ink:#f4efff; --muted:#a99fc4; --dim:#776d93;
  --line:rgba(190,160,255,.14); --line-2:rgba(190,160,255,.28);
  --glass:rgba(16,9,32,.52); --glass-2:rgba(20,12,40,.72); --glass-hi:rgba(28,17,54,.9);
  --violet:#a855f7; --violet-2:#c084fc; --magenta:#ec4899; --cyan:#22d3ee; --gold:#fbbf24; --gold-2:#fde68a; --ok:#4ade80; --bad:#f87171;
  --glow-v:rgba(168,85,247,.45); --glow-m:rgba(236,72,153,.35); --glow-c:rgba(34,211,238,.32); --glow-g:rgba(251,191,36,.4);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 24px 60px rgba(0,0,0,.5);
  --chip:rgba(168,85,247,.14);
  --ease:cubic-bezier(.2,.7,.2,1);
  --font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Space Grotesk",Inter,ui-sans-serif,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
}

html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font)!important;color:var(--ink);background-color:transparent!important;-webkit-font-smoothing:antialiased}
::selection{background:rgba(168,85,247,.45);color:#fff}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* thin glowing scrollbars */
*{scrollbar-width:thin;scrollbar-color:rgba(168,85,247,.5) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--violet),var(--magenta));border-radius:10px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}

/* ---------- backdrop layers: wallpaper (body::before) < shader < grain ---------- */
body::before{z-index:-3!important;transition:opacity .8s var(--ease),filter .8s var(--ease)}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:-2;display:block;pointer-events:none;transition:opacity .8s var(--ease);
  background:radial-gradient(120% 70% at 50% 60%,rgba(236,72,153,.28),transparent 60%),linear-gradient(180deg,#05020c 0%,#1a0b33 60%,#0c0618 100%)}
.scrim{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:0;transition:opacity .8s var(--ease);
  background:radial-gradient(120% 90% at 50% 30%,transparent 30%,rgba(7,4,15,.55) 100%),linear-gradient(180deg,rgba(7,4,15,.35),rgba(7,4,15,.15) 40%,rgba(7,4,15,.6))}
.grain{position:fixed;inset:-50%;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:k-grain 1.2s steps(6) infinite}
@keyframes k-grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}}

/* backdrop modes, set on <html data-backdrop>: mix = wallpaper + shader glow, wall = wallpaper only.
   With no wallpaper set, the shader is the whole backdrop in either mode. */
html[data-backdrop="mix"] body.has-wallpaper #sky{opacity:.85;mix-blend-mode:screen;-webkit-mask:linear-gradient(0deg,#000 0%,rgba(0,0,0,.7) 22%,transparent 48%);mask:linear-gradient(0deg,#000 0%,rgba(0,0,0,.7) 22%,transparent 48%)}
html[data-backdrop="mix"] body.has-wallpaper .scrim{opacity:.9}
html[data-backdrop="wall"] body.has-wallpaper #sky{opacity:0}
html[data-backdrop="wall"] body.has-wallpaper .scrim{opacity:.6}
html.no-sky body:not(.has-wallpaper) #sky{opacity:1}

/* ---------- text ---------- */
.k-display,h1.k-h,h2.k-h,.k-h{font-family:var(--display);letter-spacing:-.03em;line-height:1.04;font-weight:700}
.k-mono{font-family:var(--mono)}
.grad{background:linear-gradient(100deg,var(--gold) 0%,var(--magenta) 35%,var(--violet) 65%,var(--cyan) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:k-shift 7s ease-in-out infinite alternate}
@keyframes k-shift{to{background-position:100% 0}}
.k-label{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}
.k-label::before{content:"";width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan))}
.kicker{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 10px;border-radius:999px;border:1px solid var(--line-2);background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:.78rem;font-weight:600;letter-spacing:.06em;color:var(--muted)}
.kicker i{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:k-ping 2.2s infinite}
@keyframes k-ping{0%{box-shadow:0 0 0 0 rgba(74,222,128,.6)}80%,100%{box-shadow:0 0 0 10px rgba(74,222,128,0)}}

/* word-by-word entrance */
.w{display:inline-block;opacity:0;transform:translateY(.4em) rotateX(-40deg);filter:blur(10px);animation:k-word 1s var(--ease) forwards;animation-delay:calc(var(--i,0) * 90ms + 150ms)}
@keyframes k-word{to{opacity:1;transform:none;filter:none}}
.fade-up{opacity:0;transform:translateY(16px);animation:k-fu .9s var(--ease) forwards}
@keyframes k-fu{to{opacity:1;transform:none}}

/* ---------- surfaces ---------- */
.glass{position:relative;background:var(--glass);border:1px solid var(--line);border-radius:24px;backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);box-shadow:var(--shadow)}
/* cursor spotlight + gradient rim, driven by --mx/--my */
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),var(--glow-v),transparent 45%);z-index:0}
.spot::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .35s;z-index:3;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),var(--cyan),var(--magenta) 40%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.spot:hover::after{opacity:.45}
.spot:hover::before{opacity:1}
/* rotating conic rim */
@property --k-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.rim::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--k-a),var(--cyan),var(--violet),var(--magenta),var(--gold),var(--cyan));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:k-spin 6s linear infinite}
@keyframes k-spin{to{--k-a:360deg}}

.k-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:14px;text-decoration:none;font-family:var(--font);font-weight:700;font-size:1rem;border:0;cursor:pointer;transition:transform .2s,box-shadow .3s,filter .2s;color:var(--ink)}
.k-btn svg{width:18px;height:18px}
.k-btn.primary{color:#1b0b02;background:linear-gradient(135deg,var(--gold-2),var(--gold) 45%,#f59e0b);box-shadow:0 10px 40px var(--glow-g),inset 0 1px 0 rgba(255,255,255,.5)}
.k-btn.primary:hover{transform:translateY(-2px);box-shadow:0 16px 50px var(--glow-g),inset 0 1px 0 rgba(255,255,255,.5)}
.k-btn.ghost{background:var(--glass);border:1px solid var(--line-2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.k-btn.ghost:hover{transform:translateY(-2px);box-shadow:0 0 30px var(--glow-v)}
.k-btn:disabled{filter:saturate(.4) brightness(.8);cursor:progress;transform:none}

/* ---------- header ---------- */
.k-top{position:fixed;top:0;left:0;right:0;z-index:1500;border-bottom:1px solid transparent;transition:background .3s,border-color .3s,backdrop-filter .3s}
.k-top.solid{background:var(--glass-2);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border-bottom-color:var(--line)}
.k-top .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:12px;max-width:1440px;margin:0 auto;padding:0 16px}
.k-logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);min-width:0}
.k-logo svg{width:38px;height:38px;flex:none;border-radius:11px;box-shadow:0 0 0 1px var(--line-2),0 0 24px var(--glow-v);transition:transform .5s var(--ease)}
.k-logo:hover svg{transform:rotate(-8deg) scale(1.06)}
.k-logo b{font-family:var(--display);font-size:1.2rem;letter-spacing:-.02em;line-height:1;display:block}
.k-logo small{display:block;font-size:.66rem;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-top:4px;white-space:nowrap}
.k-icon-btn{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--glass);color:var(--ink);cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:border-color .2s,box-shadow .2s,transform .2s;text-decoration:none;padding:0}
.k-icon-btn:hover{border-color:var(--line-2);box-shadow:0 0 18px var(--glow-v);transform:translateY(-1px)}
.k-icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor}

/* reveal on scroll */
.js .rv{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s}
.js .rv.in{opacity:1;transform:none;filter:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.w,.fade-up{opacity:1!important;transform:none!important;filter:none!important}
  html{scroll-behavior:auto}
}