/* Tickada — placeholder. Glow system: night, paper and one light, the "tick" dot */
@font-face{font-family:'Archivo';src:url(fonts/archivo.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:'Onest';src:url(fonts/onest.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(fonts/jbmono-latin.woff2) format('woff2');font-weight:100 800;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(fonts/jbmono-cyr.woff2) format('woff2');font-weight:100 800;unicode-range:U+0400-04FF;font-display:swap}

:root{
  --night:#070707; --ink:#0E0E0E; --graphite:#1A1A1A; --paper:#EDEDED; --volt:#D6FF3D;
  --muted:#9A9A97; --glass:rgba(255,255,255,.08); --glass-line:rgba(255,255,255,.18);
  --glow:.68; /* halo strength: idle .68 · tick ~1 · ta-da 1.7 */
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;overflow-x:hidden;
  background:var(--night);color:var(--paper);font:400 16px/1.5 'Onest',system-ui,sans-serif}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font:500 12px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.acc{color:var(--volt)}

/* film grain over everything */
.grain{position:fixed;inset:-50%;z-index:10;pointer-events:none;background:url(assets/grain.png) repeat;background-size:256px;
  mix-blend-mode:overlay;opacity:.16;animation:grain 1s steps(4) infinite}
@keyframes grain{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-1%,-2%)}}

/* ---------- top ---------- */
.top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:22px clamp(16px,4vw,48px)}
.icon{display:block;width:36px;height:36px;border-radius:9px;box-shadow:0 0 0 1px var(--glass-line)}
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}
button:focus-visible{outline:2px solid var(--volt);outline-offset:3px}

/* ---------- stage ---------- */
.stage{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(22px,4vh,40px);padding:12px 16px 32px}

.mark{position:relative;margin:0;width:min(860px,88vw);cursor:pointer;-webkit-tap-highlight-color:transparent}
.mark svg{position:relative;display:block;width:100%;height:auto;overflow:visible}
.l{fill:var(--paper);opacity:0;transform:translateY(6%);transform-box:fill-box;animation:in .7s cubic-bezier(.2,.8,.2,1) forwards}
.l0{animation-delay:.9s}.l1{animation-delay:.98s}.l2{animation-delay:1.06s}.l3{animation-delay:1.14s}.l4{animation-delay:1.24s}.l5{animation-delay:1.34s}.l6{animation-delay:1.44s}
@keyframes in{to{opacity:1;transform:none}}
.dot{fill:var(--volt);transform-box:fill-box;transform-origin:center;animation:dotin .5s cubic-bezier(.3,1.8,.5,1) .3s both}
@keyframes dotin{from{transform:scale(0)}}
.dot.tick{animation:tick .22s ease-out}
@keyframes tick{0%{transform:scale(1)}35%{transform:scale(.9)}70%{transform:scale(1.1)}100%{transform:scale(1)}}

/* the halo lives at the dot over the I */
.orb{position:absolute;left:13.04%;top:14.4%;width:min(95vmax,1300px);aspect-ratio:1;transform:translate(-50%,-50%) scale(calc(.55 + var(--glow) * .45));
  border-radius:50%;pointer-events:none;opacity:calc(var(--glow) * .85);
  background:radial-gradient(circle,rgba(244,255,208,.95) 0,rgba(214,255,61,.75) 6%,rgba(214,255,61,.32) 22%,rgba(214,255,61,.08) 42%,transparent 62%);
  transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .9s;animation:orbin 1.6s cubic-bezier(.2,.8,.2,1) .45s both}
@keyframes orbin{from{opacity:0;transform:translate(-50%,-50%) scale(.1)}}
body.is-tick .orb{transition-duration:.12s}

.line{display:flex;flex-direction:column;align-items:center;gap:16px;opacity:0;animation:fade .8s ease 1.8s forwards}
.line .mono{color:#CFCFCF;letter-spacing:.42em;margin-right:-.42em}
.rail{position:relative;display:block;width:240px;height:1px;background:rgba(255,255,255,.2)}
.rail b{position:absolute;top:50%;left:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--volt);box-shadow:0 0 12px var(--volt);animation:run 4.8s cubic-bezier(.6,0,.4,1) 2s infinite}
@keyframes run{0%,10%{left:0}45%,55%{left:100%}90%,100%{left:0}}
@keyframes fade{to{opacity:1}}

/* ---------- glass card ---------- */
.card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 22px;width:min(600px,100%);padding:20px 22px;border-radius:22px;
  background:var(--glass);box-shadow:inset 0 0 0 1px var(--glass-line),0 30px 60px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);
  opacity:0;animation:rise .8s cubic-bezier(.2,.8,.2,1) 2s forwards}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.card-h{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}
.card-h .mono{display:inline-flex;align-items:center;gap:10px;font-size:11px}
.led{width:6px;height:6px;border-radius:50%;background:var(--volt);box-shadow:0 0 8px var(--volt);animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.3}}
.ticks{display:flex;gap:6px}
.ticks i{width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);transition:background .15s,box-shadow .15s}
.ticks i.on{background:var(--volt);box-shadow:0 0 10px var(--volt)}

.msg{margin:0;font-size:17px;line-height:1.45;color:var(--paper)}
.tada{display:none;margin:0;align-items:baseline;font-family:'Archivo',sans-serif;font-size:52px;line-height:.85;letter-spacing:-.01em}
.tada span{display:inline-block;animation:in .5s cubic-bezier(.2,.8,.2,1) both}
.tada .w0{font-stretch:62%;font-weight:200}.tada .w2{font-stretch:76%;font-weight:450;animation-delay:.05s}.tada .w3{font-stretch:86%;font-weight:600;animation-delay:.1s}
.tada .w4{font-stretch:98%;font-weight:740;animation-delay:.15s}.tada .w6{font-stretch:125%;font-weight:900;animation-delay:.2s}
.tada i{display:inline-block;width:11px;height:11px;margin-left:7px;border-radius:50%;background:var(--volt);box-shadow:0 0 16px var(--volt);animation:dotin .4s cubic-bezier(.3,1.8,.5,1) .3s both}
body.is-tada .msg{display:none}
body.is-tada .tada{display:flex}

.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px 0 22px;border:0;border-radius:999px;cursor:pointer;
  background:var(--volt);color:var(--ink);font:600 16px/1 'Onest',sans-serif;
  box-shadow:0 0 26px rgba(214,255,61,.55);transition:transform .12s,box-shadow .2s}
.btn:hover{box-shadow:0 0 36px rgba(214,255,61,.75)}
.btn:active{transform:scale(.96)}
.bdot{width:8px;height:8px;border-radius:50%;background:var(--ink)}

/* ---------- footer ---------- */
.foot{position:relative;z-index:2;display:flex;justify-content:center;gap:16px;padding:18px clamp(16px,4vw,48px) 26px}
.foot .mono{font-size:11px;color:#6E6E6B}

@media (max-width:560px){
  .card{grid-template-columns:1fr;padding:18px}
  .btn{justify-content:center;width:100%}
  .msg{font-size:16px}
  .tada{font-size:44px}
  .rail{width:180px}
  .foot{flex-direction:column;align-items:center;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important}
  .grain{animation:none}
}