/* OnchainApe palette: neon-lime NFT backdrops, ink outlines, sailor-blue accents. */
:root {
  --ink: #071412;
  --paper: #fff9e9;
  --yellow: #caff00;
  --coral: #ff634e;
  --cyan: #a8e1e8;
  --purple: #132620;
}

body { background: #071412; }
.nav { background: #081311; border-color: #2f4a39; }
.brand i { background: linear-gradient(90deg, #caff00 0 33%, #ff634e 33% 66%, #a8e1e8 66%); }
.notify, .primary, button { background: #caff00; color: #071412 !important; }

.hero {
  background:
    radial-gradient(circle at 85% 18%, rgba(202, 255, 0, .33), transparent 20%),
    linear-gradient(180deg, #0b1914 0%, #123825 53%, #6e9d21 78%, #caff00 92%, #a8e1e8 92.5%, #071412 93%);
}
.hero:after { background: repeating-linear-gradient(90deg, #071412 0 45px, #0c211a 45px 90px); }
.intro { background: #10251c; border-left-color: #caff00; }
.eyebrow { color: #caff00; border-color: #caff00; }
.secondary { border-color: #a8e1e8; color: #fff9e9; }
.facts { color: #d2dfc4; }
.ticker { background: #caff00; color: #071412; }
.ticker {
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
}
.ticker-track {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  width: max-content;
  gap: 20px;
  padding: 0 14px;
  animation: ticker-ping-pong 14s cubic-bezier(.45, .05, .55, .95) infinite alternate;
  will-change: transform;
}
.ticker-track span { color: #ff634e; }
@keyframes ticker-ping-pong {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% + 100vw)); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

.story, .faq { background: #091713; }
.roadmap { background: #0c2019; }
.mint { background: linear-gradient(135deg, #123a28, #091713); }
.roadmap article, .gallery-card { background: #10251c; border-color: #345541; }
.trait-grid div { border-color: #345541; background: #0c2019; }
.trait-grid b { color: #caff00; }
.section-tag, .gallery-card p { color: #a8e1e8; }
.gallery-card:hover { border-color: #caff00; box-shadow: 0 10px 0 #040a08; }
.nft-card { border-color: #071412; box-shadow: 7px 8px 0 #071412; }
.nft-card img { image-rendering: auto; }
.mint input { background: #071412; border-color: #caff00; }
.follow-button { background: #a8e1e8; color: #071412; }
.faq details { border-color: #345541; }
footer { background: #06100d; }

/* Page-wide motion: fast enough to feel alive, calm enough to keep the art central. */
.hero .eyebrow,
.hero h1,
.hero .intro,
.hero .hero-actions,
.hero .facts {
  opacity: 0;
  transform: translateY(18px);
  animation: hero-enter .7s cubic-bezier(.2, .8, .2, 1) forwards;
}
.hero h1 { animation-delay: .12s; }
.hero .intro { animation-delay: .24s; }
.hero .hero-actions { animation-delay: .36s; }
.hero .facts { animation-delay: .48s; }
@keyframes hero-enter { to { opacity: 1; transform: translateY(0); } }

.scroll-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s ease var(--reveal-delay, 0ms), transform .65s cubic-bezier(.2, .8, .2, 1) var(--reveal-delay, 0ms);
}
.scroll-reveal.is-visible { opacity: 1; transform: translateY(0); }
.gallery-card { transform-origin: center bottom; }
.gallery-card.is-visible { animation: card-settle .48s cubic-bezier(.2, .9, .25, 1.1) both; }
@keyframes card-settle { from { transform: translateY(24px) scale(.96); } to { transform: translateY(0) scale(1); } }

.primary, .secondary, .notify, .follow-button, .mint button {
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.primary:hover, .notify:hover, .mint button:not(:disabled):hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 0 #071412;
  filter: brightness(1.05);
}
.secondary:hover, .follow-button:hover { transform: translateY(-3px); box-shadow: 0 5px 0 #071412; }
.trait-grid div, .roadmap article { transition: transform .22s ease, border-color .22s ease; }
.trait-grid div:hover, .roadmap article:hover { transform: translateY(-6px); border-color: #caff00; }

@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow, .hero h1, .hero .intro, .hero .hero-actions, .hero .facts,
  .scroll-reveal, .gallery-card.is-visible {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
}