/* ═══════════════════════════════════════════════════════
   effects.css — ambience, animation, motion
   (structure & components live in style.css)
   ═══════════════════════════════════════════════════════ */

/* ── PAGE ENTRANCE ── */
body { animation: pageIn .5s ease both; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

/* ── AMBIENT LAYERS (aurora → particles → grain) ── */
.aurora { position: fixed; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; }
.aurora span { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }
.aurora .a1 {
  width: 52vmax; height: 52vmax; top: -22vmax; left: -12vmax;
  background: radial-gradient(circle, rgba(20,184,166,.16), transparent 65%);
  animation: drift1 26s ease-in-out infinite alternate;
}
.aurora .a2 {
  width: 44vmax; height: 44vmax; top: 8vmax; right: -16vmax;
  background: radial-gradient(circle, rgba(34,211,238,.13), transparent 65%);
  animation: drift2 32s ease-in-out infinite alternate;
}
.aurora .a3 {
  width: 30vmax; height: 30vmax; bottom: -14vmax; left: 28vw;
  background: radial-gradient(circle, rgba(245,158,11,.08), transparent 65%);
  animation: drift3 38s ease-in-out infinite alternate;
}
html:not(.dark) .aurora span { opacity: .55; }
@keyframes drift1 { to { transform: translate(9vmax, 7vmax) scale(1.12); } }
@keyframes drift2 { to { transform: translate(-8vmax, 10vmax) scale(.92); } }
@keyframes drift3 { to { transform: translate(-10vmax, -7vmax) scale(1.18); } }

#net { position: fixed; inset: 0; z-index: -2; pointer-events: none; }

.grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .035;
  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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── SCROLL PROGRESS ── */
#progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 400;
  background: linear-gradient(90deg, var(--cy), var(--am));
  transform-origin: 0 50%; transform: scaleX(0);
}

/* ── CUSTOM CURSOR (enabled by JS on fine pointers only) ── */
.cursor-on, .cursor-on * { cursor: none !important; }
#c-dot, #c-ring { display: none; }
.cursor-on #c-dot, .cursor-on #c-ring { display: block; }
#c-dot {
  width: 7px; height: 7px; background: var(--cy); border-radius: 50%;
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 99999;
  transform: translate(-50%,-50%);
  transition: transform .12s ease, background .2s;
  box-shadow: 0 0 12px var(--glow);
}
#c-ring {
  width: 34px; height: 34px; border: 1.5px solid rgba(var(--cy-raw),.5);
  border-radius: 50%;
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 99998;
  transform: translate(-50%,-50%);
  transition: width .22s ease, height .22s ease, border-color .22s ease, background .22s ease;
}
#c-dot.hov  { transform: translate(-50%,-50%) scale(2.4); background: var(--am); }
#c-ring.hov { width: 54px; height: 54px; border-color: rgba(var(--am-raw),.45); background: rgba(var(--am-raw),.05); }
#c-dot.tap  { transform: translate(-50%,-50%) scale(.5); }
#c-ring.tap { width: 22px; height: 22px; }

/* ── BOOT LOG — pure CSS typing ── */
.bootlog {
  width: 0; border-right: 7px solid var(--cy);
  animation: typing 1s steps(32) .3s forwards, caretOff .1s 2.6s forwards;
}
@keyframes typing   { to { width: 32ch; } }
@keyframes caretOff { to { border-color: transparent; } }

/* ── NAME — token decode ── */
.hero-name .tk {
  display: inline-block;
  animation: decode .5s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(.9s + var(--i) * .09s);
}
@keyframes decode {
  from { opacity: 0; transform: translateY(.35em); filter: blur(10px); }
  to   { opacity: 1; transform: translateY(0);     filter: blur(0); }
}
.hero-name .acc .tk {
  background: linear-gradient(100deg, var(--cy) 20%, #2DD4BF 45%, var(--cy) 70%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: decode .5s cubic-bezier(.22,1,.36,1) both,
             sheen 7s linear 2.4s infinite;
  animation-delay: calc(.9s + var(--i) * .09s), 2.4s;
}
@keyframes sheen { to { background-position: -220% 0; } }
.hero-name .caret {
  display: inline-block; width: .12em; height: .82em;
  background: var(--cy); margin-left: .08em; vertical-align: baseline;
  animation: caretBlink .55s steps(1) 1.8s 5, caretGone .1s 4.6s forwards;
}
@keyframes caretBlink { 50% { opacity: 0; } }
@keyframes caretGone  { to { opacity: 0; } }

/* ── RAIL ENTRANCE SEQUENCE ── */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rail-role    { animation: riseIn .7s cubic-bezier(.22,1,.36,1) 1.7s both; }
.rail-tag     { animation: riseIn .7s cubic-bezier(.22,1,.36,1) 1.85s both; }
.rail-nav     { animation: riseIn .7s cubic-bezier(.22,1,.36,1) 2s both; }
.rail-foot    { animation: riseIn .7s cubic-bezier(.22,1,.36,1) 2.15s both; }
.role-dot     { box-shadow: 0 0 10px rgba(var(--am-raw),.8); animation: pulse 2.2s ease-in-out infinite; }
.term-led     { animation: pulse 2.6s ease-in-out infinite; }
.term-cur     { animation: caretBlink 1s steps(1) infinite; }
@keyframes pulse {
  0%,100% { box-shadow: 0 0 8px rgba(var(--am-raw),.8); }
  50%     { box-shadow: 0 0 16px rgba(var(--am-raw),.25); }
}

/* ── TICKER SCROLL ── */
.ticker-track { animation: tick 44s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ── GLASS SPOTLIGHT (position fed by JS as --mx/--my) ── */
.glass::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
              rgba(var(--cy-raw), .07), transparent 65%);
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.glass:hover::after { opacity: 1; }

/* ── SCROLL REVEAL ── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.on { opacity: 1; transform: none; }

/* ── HEATMAP CASCADE (column index fed as --wi) ── */
.contrib-grid .contrib-cell {
  animation: cellIn .45s ease both;
  animation-delay: calc(var(--wi, 0) * 11ms);
}
.contrib-grid .contrib-cell[data-level="-1"] { animation: none; }
@keyframes cellIn { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }

/* ── THEME SWEEP (view transitions, JS sets --sx/--sy) ── */
.theme-transitioning *, .theme-transitioning *::before, .theme-transitioning *::after {
  transition: background-color .4s ease, color .4s ease,
              border-color .4s ease, box-shadow .4s ease, background .4s ease !important;
}
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: sweep .55s ease-out both; z-index: 1; }
@keyframes sweep {
  from { clip-path: circle(0 at var(--sx, 90%) var(--sy, 5%)); }
  to   { clip-path: circle(150% at var(--sx, 90%) var(--sy, 5%)); }
}

/* ── REDUCED MOTION — kill everything, show final states ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .ticker-track { animation: none; }
  .bootlog { width: auto; border-right-color: transparent; }
}