/* ============================================================
   KZSTORE — motion layer. Loaded after style.css.
   Ambient light, cursor light, tile spotlight + tilt, staggered
   entrances, nav glider, button shine, count-up bumps, reveal
   glow and sparks. Everything collapses under reduced motion.
   ============================================================ */

@property --spot { syntax: '<number>'; inherits: false; initial-value: 0; }

:root {
    --accent-glow: rgba(255, 255, 255, 0.05);
    --accent-glow-strong: rgba(255, 255, 255, 0.16);
}

/* ambient drift: two soft lights slowly wandering behind everything */
body::after {
    content: '';
    position: fixed;
    inset: -30%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 22% 28%, rgba(255,255,255,0.05), transparent 28%),
        radial-gradient(circle at 78% 72%, var(--accent-glow), transparent 30%);
    filter: blur(50px);
    animation: drift 28s var(--ease) infinite alternate;
}
@keyframes drift {
    from { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1); }
    to   { transform: translate3d(4%, 5%, 0) rotate(8deg) scale(1.08); }
}

/* cursor light */
.cursor-light {
    position: fixed;
    left: 0; top: 0;
    width: 520px; height: 520px;
    margin: -260px 0 0 -260px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.02) 30%, transparent 62%);
    opacity: 0;
    transition: opacity 0.6s var(--ease);
    will-change: transform;
}
.cursor-light.is-on { opacity: 1; }
.shell, .auth { position: relative; z-index: 1; }

/* tile: spotlight fill + lit ring following the cursor, 3D tilt */
.tile {
    --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg;
    background:
        radial-gradient(520px circle at var(--mx) var(--my), rgba(255,255,255,var(--spot)), transparent 45%) padding-box,
        linear-gradient(var(--tile), var(--tile)) padding-box,
        var(--lit) border-box;
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), --spot 0.35s var(--ease);
    transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
}
.tile:hover { --spot: 0.06; }
.tile.is-link:hover { transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-3px); }
.tile::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(360px circle at var(--mx) var(--my), rgba(255,255,255,0.45), transparent 42%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.35s var(--ease);
    pointer-events: none;
}
.tile:hover::after { opacity: 1; }
.modal::after { display: none; }

/* hero: drifting bloom + a light sweep along the top edge */
.hero::after {
    display: block;
    inset: auto;
    -webkit-mask: none; mask: none;
    padding: 0;
    opacity: 1;
    right: -60px; top: -80px;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-glow-strong), transparent 65%);
    animation: bloom 9s var(--ease) infinite alternate;
}
@keyframes bloom {
    from { transform: translate3d(0,0,0) scale(1); }
    to   { transform: translate3d(-90px, 40px, 0) scale(1.25); }
}
.hero::before {
    content: '';
    position: absolute;
    top: 0; left: 10%;
    width: 30%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
    animation: sweep 6s var(--ease) infinite;
    pointer-events: none;
}
@keyframes sweep {
    0% { transform: translateX(-120%); opacity: 0; }
    15% { opacity: 1; }
    45% { transform: translateX(320%); opacity: 0; }
    100% { transform: translateX(320%); opacity: 0; }
}

/* entrance: rise from below, blur to sharp, staggered by --i */
.page { animation: none; }
.rise { animation: rise 0.8s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes rise {
    from { opacity: 0; transform: translateY(22px) scale(0.985); filter: blur(8px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}
.topnav-inner > * { animation: nav-in 0.7s var(--ease-out) both; }
.topnav-inner > :nth-child(2) { animation-delay: 80ms; }
.topnav-inner > :nth-child(3) { animation-delay: 160ms; }
@keyframes nav-in { from { opacity: 0; transform: translateY(-10px); } }

/* nav glider: the active pill slides between items */
.nav { position: relative; }
.nav-glider {
    position: absolute;
    left: 0; top: 0;
    border-radius: var(--pill);
    background: var(--accent-weak);
    box-shadow: inset 0 0 0 1px var(--accent-border);
    transition: transform 0.45s var(--ease-out), width 0.45s var(--ease-out), opacity 0.2s;
    pointer-events: none;
    z-index: 0;
}
.nav-item { position: relative; z-index: 1; }
.nav-item[aria-current="page"], .nav-item.active { background: transparent; }
.nav-item svg { transition: transform 0.3s var(--ease-out); }
.nav-item:hover svg { transform: translateY(-1px) scale(1.12); }

/* buttons: shine sweep + press */
.btn { position: relative; overflow: hidden; }
.btn-primary::before {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 60%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s var(--ease-out);
    pointer-events: none;
}
.btn-primary:hover::before { left: 130%; }
.btn-primary:hover { box-shadow: 0 10px 30px var(--accent-glow-strong), inset 0 0 0 1px rgba(255,255,255,0.08); }
.btn:active { transform: scale(0.97); }

/* balance bump when tokens change */
.balance.is-bump { animation: bump 0.6s var(--ease-out); }
@keyframes bump {
    0% { transform: scale(1); }
    30% { transform: scale(1.08); box-shadow: 0 0 0 6px var(--accent-weak); }
    100% { transform: scale(1); }
}
.balance-add { transition: background var(--t-fast) var(--ease), transform 0.35s var(--ease-out); }
.balance-add:hover { transform: rotate(90deg) scale(1.1); }

/* glyph + buttons react to the card hover */
.glyph { transition: transform 0.35s var(--ease-out), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.tile:hover .glyph { transform: translateY(-2px) rotate(-4deg) scale(1.06); }
.product .btn-primary { transition: transform 0.3s var(--ease-out), background var(--t-fast), box-shadow var(--t-fast); }
.product:hover .btn-primary { transform: translateX(-2px) scale(1.04); }

/* meters fill in */
.meter > i { width: var(--w, 0%); transition: width 1.1s var(--ease-out); }

/* inputs breathe on focus */
.input { transition: border-color var(--t-fast) var(--ease), box-shadow 0.3s var(--ease), background var(--t-fast) var(--ease), transform 0.3s var(--ease-out); }
.input:focus { transform: translateY(-1px); box-shadow: 0 0 0 4px var(--accent-weak), 0 10px 30px rgba(0,0,0,0.35); }

/* modal: gentle overshoot */
.modal-overlay.is-open .modal, .modal-overlay.active .modal { animation: modal-in 0.55s var(--ease-out) both; }
@keyframes modal-in {
    0% { opacity: 0; transform: translateY(24px) scale(0.94); filter: blur(6px); }
    60% { opacity: 1; filter: blur(0); }
    100% { transform: none; }
}
.buy-option { transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.buy-option:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 14px 30px rgba(0,0,0,0.35); }

/* reveal glow + sparks */
.reveal-code { animation: glow 2.4s var(--ease) infinite alternate; }
@keyframes glow { from { text-shadow: 0 0 10px var(--accent-glow); } to { text-shadow: 0 0 28px var(--accent-glow-strong); } }
.spark {
    position: fixed;
    z-index: 300;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
    pointer-events: none;
}

/* toast: slide in from the right with a little overshoot */
@keyframes toast-in {
    0% { opacity: 0; transform: translateX(40px) scale(0.96); }
    60% { opacity: 1; transform: translateX(-6px) scale(1); }
    100% { transform: none; }
}

/* history cards lift */
.history-card { transition: transform 0.25s var(--ease-out), border-color 0.2s, box-shadow 0.25s; }
.history-card:hover { transform: translateY(-4px) scale(1.01); }

@media (prefers-reduced-motion: reduce) {
    body::after, .hero::before, .hero::after, .cursor-light, .nav-glider, .reveal-code { animation: none !important; }
    .tile { transform: none !important; transition: none !important; }
    .rise, .topnav-inner > * { animation: none !important; opacity: 1; }
}