/* =====================================================
   42069 Protocol - animation layer
   Brutalist / terminal motion. Subtle, technical, not bouncy.
   Layered on top of theme.css. Respects prefers-reduced-motion.
   ===================================================== */

/* ===== Page entry ===== */

@keyframes powPageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
body { animation: powPageIn 0.45s cubic-bezier(.2,.7,.2,1); }

@keyframes powTopbarIn {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.topbar { animation: powTopbarIn 0.4s cubic-bezier(.2,.7,.2,1) 0.05s backwards; }

/* ===== Slow ambient grid drift (very subtle) ===== */

@keyframes powGridDrift {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 32px 32px, 32px 32px; }
}
body {
  animation:
    powPageIn 0.45s cubic-bezier(.2,.7,.2,1),
    powGridDrift 60s linear infinite;
}

/* ===== Scroll-reveal ===== */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s cubic-bezier(.2,.7,.2,1),
              transform 0.6s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
[data-reveal].in {
  opacity: 1;
  transform: none;
}

/* Stagger children inside a [data-stagger] reveal container */
[data-stagger].in > * {
  animation: powStaggerIn 0.5s cubic-bezier(.2,.7,.2,1) backwards;
}
[data-stagger].in > *:nth-child(1)  { animation-delay: 0.02s; }
[data-stagger].in > *:nth-child(2)  { animation-delay: 0.08s; }
[data-stagger].in > *:nth-child(3)  { animation-delay: 0.14s; }
[data-stagger].in > *:nth-child(4)  { animation-delay: 0.20s; }
[data-stagger].in > *:nth-child(5)  { animation-delay: 0.26s; }
[data-stagger].in > *:nth-child(6)  { animation-delay: 0.32s; }
[data-stagger].in > *:nth-child(7)  { animation-delay: 0.38s; }
[data-stagger].in > *:nth-child(8)  { animation-delay: 0.44s; }
@keyframes powStaggerIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ===== Stat value flash on update ===== */

@keyframes powStatFlash {
  0%   { color: var(--primary-fixed); text-shadow: 0 0 12px var(--primary-fixed-dim); }
  100% { color: inherit; text-shadow: none; }
}
.stat-v.flash {
  animation: powStatFlash 0.9s ease-out;
}

/* ===== Card scan-line on hover ===== */

.card {
  overflow: hidden;
  isolation: isolate;
}
.card::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -2px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--primary-fixed-dim) 50%,
    transparent 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.card:hover::after {
  opacity: 0.55;
  animation: powScan 1.4s linear infinite;
}
@keyframes powScan {
  0%   { top: -2px; opacity: 0; }
  10%  { opacity: 0.55; }
  90%  { opacity: 0.55; }
  100% { top: 100%; opacity: 0; }
}

/* ===== Stat tile colored bar shine ===== */

.stat {
  position: relative;
  overflow: hidden;
}
.stat::after {
  content: '';
  position: absolute;
  top: 0; left: -40%; width: 40%; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
  opacity: 0;
  pointer-events: none;
}
.stat:hover::after {
  opacity: 0.5;
  animation: powTopBarShine 1.2s ease-out;
}
@keyframes powTopBarShine {
  from { left: -40%; }
  to   { left: 120%; }
}

/* ===== Nav link underline grow (already partial in theme) ===== */

.nav-links a {
  background-image: linear-gradient(var(--primary), var(--primary));
  background-size: 0 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.22s cubic-bezier(.2,.7,.2,1),
              color 0.15s, text-shadow 0.15s, transform 0.075s;
}
.nav-links a:hover {
  background-size: 100% 2px;
}
.nav-links a.active {
  background-size: 100% 2px;
  border-bottom-color: transparent;
}

/* ===== Brand pulse ===== */

@keyframes powBrandPulse {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50%      { text-shadow: 0 0 16px rgba(0, 221, 221, 0.45); }
}
.brand { animation: powBrandPulse 5s ease-in-out infinite; }

/* ===== Pixel-cluster (hero) gentle float + glow breathe ===== */

@keyframes powClusterFloat {
  0%, 100% { transform: rotate(8deg) translateY(0); }
  50%      { transform: rotate(8deg) translateY(-6px); }
}
.pixel-cluster {
  animation: powClusterFloat 7s ease-in-out infinite;
}
@keyframes powClusterBreathe {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.15); }
}
.pixel-cluster .pc.fill-cyan,
.pixel-cluster .pc.fill-yellow,
.pixel-cluster .pc.fill-purple,
.pixel-cluster .pc.fill-red {
  animation: powClusterBreathe 4s ease-in-out infinite;
}
.pixel-cluster .pc:nth-child(odd)  { animation-delay: 0.3s; }
.pixel-cluster .pc:nth-child(even) { animation-delay: 0.0s; }

/* ===== Falling cells layer (purely decorative) ===== */

.fall-host {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.fall-cell {
  position: absolute;
  width: 14px; height: 14px;
  background: var(--primary-container);
  opacity: 0.0;
  box-shadow: 0 0 10px currentColor;
  color: var(--primary-container);
  will-change: transform, opacity;
  animation: powFall 8s linear infinite;
}
.fall-cell.color-1 { background: var(--tertiary-container); color: var(--tertiary-container); }
.fall-cell.color-2 { background: var(--secondary-container); color: var(--secondary-container); }
.fall-cell.color-3 { background: var(--primary-container);   color: var(--primary-container); }
.fall-cell.color-4 { background: var(--success);             color: var(--success); }

@keyframes powFall {
  0%   { transform: translate3d(0, -20px, 0); opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.7; }
  100% { transform: translate3d(0, 580px, 0); opacity: 0; }
}

/* ===== Board cell drop-in ===== */

@keyframes powBoardDrop {
  0%   { transform: translateY(-160px); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 0.92; }
}
.board-cell {
  transform-origin: center;
  animation: powBoardDrop 0.45s cubic-bezier(.34, 1.2, .64, 1) backwards;
}

/* ===== Term title cursor blink already in theme. Add gentle line-scan to cards titled with `_` ===== */

.card-header h2,
.card-header h3 {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* ===== Pill live dot already pulses. Add general pill subtle border hover ===== */

.pill { transition: color 0.18s, border-color 0.18s, background 0.18s, box-shadow 0.18s; }
.pill.live { box-shadow: 0 0 0 0 rgba(0, 240, 240, 0); }

/* ===== Button press feedback ===== */

.btn { transition: background 0.18s, color 0.18s, transform 0.12s, box-shadow 0.18s, border-color 0.18s; }
.btn:active:not(:disabled) { transform: translateY(0) scale(0.985); }

/* ===== Wallet pill connected pulse ===== */

.wallet-pill {
  animation: powWalletJoin 0.4s cubic-bezier(.2,.7,.2,1) backwards;
}
@keyframes powWalletJoin {
  from { transform: translateY(-4px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ===== Table row enter ===== */

.table tbody tr.fade-in {
  animation: powRowIn 0.35s cubic-bezier(.2,.7,.2,1) backwards;
}
@keyframes powRowIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ===== Reflection event row pop ===== */

.table tbody tr.fresh td:last-child {
  animation: powFreshHit 1.1s ease-out;
}
@keyframes powFreshHit {
  0%   { color: var(--primary-fixed); text-shadow: 0 0 12px var(--primary-fixed-dim); }
  100% { color: var(--tertiary-container); text-shadow: none; }
}

/* ===== Toast in/out ===== */

.toast { animation: toastSlideIn 0.28s cubic-bezier(.2,.7,.2,1); }
@keyframes toastSlideIn {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ===== Tetris board cyan border breathing ===== */

.tboard {
  animation: powBoardBreathe 6s ease-in-out infinite;
}
@keyframes powBoardBreathe {
  0%, 100% { box-shadow: inset 0 0 20px rgba(0, 221, 221, 0.18); }
  50%      { box-shadow: inset 0 0 28px rgba(0, 221, 221, 0.28); }
}

/* ===== Hero word colors gradient slide (subtle) ===== */

.h-lg, .h-md, .h-sm { transition: text-shadow 0.3s; }
.h-lg:hover { text-shadow: 0 0 24px rgba(199, 255, 254, 0.18); }

/* ===== Live indicator dot pulse harder ===== */

.pill.live::before {
  animation: powLiveDot 1.4s ease-in-out infinite;
}
@keyframes powLiveDot {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 6px var(--primary-container); opacity: 1; }
  50%      { transform: scale(0.65); box-shadow: 0 0 12px var(--primary-container); opacity: 0.55; }
}

/* ===== Whitepaper section number reveal ===== */

.wp-body h2 .num {
  animation: powNumPulse 4s ease-in-out infinite;
}
@keyframes powNumPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(199, 255, 254, 0); }
  50%      { box-shadow: 0 0 14px rgba(199, 255, 254, 0.18); }
}

/* ===== Term-title cursor uses keyframes from theme.css ===== */

/* ===== Reduced motion ===== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .fall-cell { display: none !important; }
}