/* ==========================================================================
   Home Cinematic — hero reveal + scroll-triggered sections
   Scoped so it only affects the homepage.
   ========================================================================== */

:root {
  --hc-accent: #3ec9f2;
}

/* ---------- Hero: orchestrated load-in ---------- */

.hero .eyebrow,
.hero-avatar,
.hero .headline,
.hero .subcopy,
.hero .countdown-card,
.hero-actions {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(28px);
  animation: hc-rise 1s cubic-bezier(.16,1,.3,1) forwards;
}

.hero .eyebrow { animation-delay: .05s; }
.hero-avatar { animation-delay: .15s; }
.hero .headline { animation-delay: .3s; }
.hero .subcopy { animation-delay: .5s; }
.hero .countdown-card { animation-delay: .65s; }
.hero-actions { animation-delay: .8s; }

@keyframes hc-rise {
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* Title light sweep, once, after rise-in */
.headline {
  position: relative;
  background-image: linear-gradient(100deg,
    currentColor 40%,
    color-mix(in srgb, var(--hc-accent) 70%, white) 50%,
    currentColor 60%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: hc-rise 1s cubic-bezier(.16,1,.3,1) forwards,
             hc-title-sweep 1.5s ease-out 1.1s forwards;
}

@keyframes hc-title-sweep {
  to { background-position: 0% 0; }
}

/* Hero avatar: soft breathing glow */
.hero-avatar {
  animation: hc-rise 1s cubic-bezier(.16,1,.3,1) forwards,
             hc-avatar-glow 3.5s ease-in-out 1.2s infinite;
}

@keyframes hc-avatar-glow {
  0%, 100% { box-shadow: 0 0 0 4px rgba(62,201,242,0.08), 0 0 30px rgba(62,201,242,0.25); }
  50% { box-shadow: 0 0 0 4px rgba(62,201,242,0.15), 0 0 46px rgba(62,201,242,0.4); }
}

/* Punk grid: staggered fade-in */
.punk-grid .punk-card {
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  animation: hc-card-in 0.6s cubic-bezier(.16,1,.3,1) forwards;
}

.punk-grid .punk-card:nth-child(1) { animation-delay: .9s; }
.punk-grid .punk-card:nth-child(2) { animation-delay: .95s; }
.punk-grid .punk-card:nth-child(3) { animation-delay: 1.0s; }
.punk-grid .punk-card:nth-child(4) { animation-delay: 1.05s; }
.punk-grid .punk-card:nth-child(5) { animation-delay: 1.1s; }
.punk-grid .punk-card:nth-child(6) { animation-delay: 1.15s; }
.punk-grid .punk-card:nth-child(7) { animation-delay: 1.2s; }
.punk-grid .punk-card:nth-child(8) { animation-delay: 1.25s; }
.punk-grid .punk-card:nth-child(9) { animation-delay: 1.3s; }
.punk-grid .punk-card:nth-child(10) { animation-delay: 1.35s; }
.punk-grid .punk-card:nth-child(n+11) { animation-delay: 1.4s; }

@keyframes hc-card-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Scroll-revealed sections ---------- */

.community-section,
.stats {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}

.community-section.hc-in,
.stats.hc-in {
  opacity: 1;
  transform: translateY(0);
}

.community-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}

.community-section.hc-in .community-card:nth-child(1) { transition-delay: .1s; }
.community-section.hc-in .community-card:nth-child(2) { transition-delay: .25s; }

.community-section.hc-in .community-card {
  opacity: 1;
  transform: translateY(0);
}

.stat {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: opacity .6s ease, transform .6s ease;
}

.stats.hc-in .stat:nth-child(1) { transition-delay: .05s; }
.stats.hc-in .stat:nth-child(2) { transition-delay: .18s; }
.stats.hc-in .stat:nth-child(3) { transition-delay: .31s; }

.stats.hc-in .stat {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Countdown numbers: quiet pulse on the seconds tick */
.countdown-value {
  transition: text-shadow 0.2s ease;
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow,
  .hero-avatar,
  .hero .headline,
  .hero .subcopy,
  .hero .countdown-card,
  .hero-actions,
  .punk-grid .punk-card,
  .community-section,
  .stats,
  .community-card,
  .stat {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}