.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.atmosphere .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.38;
  will-change: transform;
}
.atmosphere .orb.a {
  width: 42vw;
  height: 42vw;
  max-width: 560px;
  max-height: 560px;
  top: -12%;
  left: -8%;
  background: color-mix(in srgb, var(--lime) 55%, transparent);
  animation: drift-a 28s ease-in-out infinite alternate;
}
.atmosphere .orb.b {
  width: 36vw;
  height: 36vw;
  max-width: 480px;
  max-height: 480px;
  right: -10%;
  top: 28%;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  animation: drift-b 34s ease-in-out infinite alternate;
}
.atmosphere .orb.c {
  width: 28vw;
  height: 28vw;
  max-width: 380px;
  max-height: 380px;
  bottom: -12%;
  left: 38%;
  background: color-mix(in srgb, var(--lime) 28%, transparent);
  animation: drift-c 22s ease-in-out infinite alternate;
}
.atmosphere .grain {
  position: absolute;
  inset: 0;
  opacity: 0.07;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.07  0 0 0 0 0.05  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
html[data-theme="dark"] .atmosphere .grain {
  opacity: 0.12;
  mix-blend-mode: overlay;
}
html[data-theme="dark"] .atmosphere .orb.a { opacity: 0.22; }
html[data-theme="dark"] .atmosphere .orb.b { opacity: 0.18; }

@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(8%, 10%, 0) scale(1.08); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-12%, 6%, 0); }
}
@keyframes drift-c {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-6%, -8%, 0) scale(1.12); }
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lime) 45%, transparent); }
  50% { box-shadow: 0 0 0 6px transparent; }
}
@keyframes shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes sheen {
  0% { transform: translateX(-120%) skewX(-18deg); }
  100% { transform: translateX(220%) skewX(-18deg); }
}

header, main, footer { position: relative; z-index: 1; }
html { transition: background-color 0.45s ease, color 0.45s ease; }
body { transition: background-color 0.45s ease, color 0.45s ease; }

.stage { position: relative; min-height: 70vh; }
[data-view-panel] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  transform: translate3d(0, 22px, 0);
  filter: blur(10px);
  transition:
    opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.62s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.62s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.62s;
}
body[data-view="landing"] [data-view-panel="landing"],
body[data-view="method"] [data-view-panel="method"],
body[data-view="rounds"] [data-view-panel="rounds"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  position: relative;
  transform: none;
  filter: none;
}

.nav-pill { position: relative; overflow: hidden; }
.nav-glider {
  position: absolute;
  top: 5px;
  left: 0;
  height: calc(100% - 10px);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--lime) 48%, transparent);
  transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1), width 0.48s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}
.nav-pill a {
  position: relative;
  z-index: 1;
  transition: color 0.25s ease;
}
.nav-pill a[aria-current="page"] { background: transparent; }
.nav-pill a:hover { background: transparent; color: var(--ink); }

.brand { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.brand:hover { transform: translateY(-1px); }
.brand-tile {
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.brand:hover .brand-tile { transform: rotate(-6deg) scale(1.04); }
.brand-tile::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -40%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: sheen 4.8s ease-in-out infinite;
}
.network i { animation: pulse-dot 2.4s ease-out infinite; }

.btn-lime {
  position: relative;
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, filter 0.28s ease;
}
.btn-lime:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--lime) 38%, transparent);
  filter: brightness(1.04);
}
.btn-lime:active:not(:disabled) { transform: translateY(0); }
.theme-toggle {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease, border-color 0.25s ease;
}
.theme-toggle:hover {
  transform: rotate(12deg);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}

.card {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease, box-shadow 0.4s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--ink) 22%, transparent);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--ink) 6%, transparent);
}
html[data-theme="dark"] .card:hover {
  box-shadow: 0 18px 48px rgba(0,0,0,0.35);
  border-color: color-mix(in srgb, var(--lime) 28%, transparent);
}

.split-80 {
  background-image: linear-gradient(110deg, var(--lime) 0%, #e8ff6a 40%, var(--lime) 80%);
  background-size: 200% 100%;
  animation: shimmer 6s linear infinite;
}
.tick-track span {
  box-shadow: 0 0 16px color-mix(in srgb, var(--lime) 50%, transparent);
}

.view-all, footer a, .holder-row a, .round-links a {
  transition: color 0.25s ease, letter-spacing 0.3s ease, opacity 0.25s ease;
}
.view-all:hover { letter-spacing: 0.02em; }

.holder-limits button, .history-pager button {
  transition: color 0.2s ease, border-color 0.25s ease, background 0.25s ease;
}

.reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal.delay-1 { transition-delay: 0.08s; }
.reveal.delay-2 { transition-delay: 0.16s; }
.reveal.delay-3 { transition-delay: 0.24s; }
.reveal.delay-4 { transition-delay: 0.32s; }

.hero h1 { animation: rise-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero p { animation: rise-in 0.9s 0.12s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero .btn-pill { animation: rise-in 0.9s 0.22s cubic-bezier(0.22, 1, 0.36, 1) both; }

@keyframes rise-in {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: none; }
}

.lookup input { transition: box-shadow 0.25s ease; }
.lookup input:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 45%, transparent);
}
.round-row { transition: background 0.25s ease; }

@media (prefers-reduced-motion: reduce) {
  .atmosphere, .brand-tile::after, .split-80, .network i { animation: none; }
  .reveal, .hero h1, .hero p, .hero .btn-pill, [data-view-panel] {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}