/* =========================================================
   BTC'26, Subtle animations
   Loaded across every page. Honors prefers-reduced-motion.
   ========================================================= */

/* ---------- keyframes ---------- */
@keyframes btcFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes btcFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes btcScaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes btcDotPulse {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(226, 106, 31, 0.55); }
  50%      { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(226, 106, 31, 0); }
}
@keyframes btcDrift {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(2.5%, -1.5%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes btcSlowSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes btcBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes btcShine {
  from { background-position: -160% 0; }
  to   { background-position: 260% 0; }
}
@keyframes btcCaret {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}

/* ---------- hero load cascade ---------- */
.hero .hero-meta,
.hero .hero-title .row,
.hero .hero-sub .hero-lede,
.hero .hero-sub .hero-actions,
.hero .hero-countdown {
  opacity: 0;
  animation: btcFadeUp 0.9s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero .hero-meta              { animation-delay: 0.05s; }
.hero .hero-title .row:nth-child(1) { animation-delay: 0.18s; }
.hero .hero-title .row:nth-child(2) { animation-delay: 0.28s; }
.hero .hero-title .row:nth-child(3) { animation-delay: 0.38s; }
.hero .hero-sub .hero-lede    { animation-delay: 0.55s; }
.hero .hero-sub .hero-actions { animation-delay: 0.65s; }
.hero .hero-countdown         { animation-delay: 0.80s; }

/* schedule / venue / faq sub-hero load */
.sched-hero .eyebrow,
.sched-hero .sched-title,
.sched-hero .sched-lede,
.venue-hero .eyebrow,
.venue-hero .venue-title,
.venue-hero .venue-lede,
.faq-hero .eyebrow,
.faq-hero .faq-title,
.faq-hero .faq-lede {
  opacity: 0;
  animation: btcFadeUp 0.8s cubic-bezier(.2,.7,.2,1) forwards;
}
.sched-hero .eyebrow,
.venue-hero .eyebrow,
.faq-hero .eyebrow       { animation-delay: 0.05s; }
.sched-hero .sched-title,
.venue-hero .venue-title,
.faq-hero .faq-title     { animation-delay: 0.18s; }
.sched-hero .sched-lede,
.venue-hero .venue-lede,
.faq-hero .faq-lede      { animation-delay: 0.32s; }

/* ---------- nav fade in ---------- */
.nav .brand,
.nav .nav-side a,
.nav .btn-primary {
  opacity: 0;
  animation: btcFadeIn 0.7s ease-out forwards;
}
.nav .brand                       { animation-delay: 0.0s; }
.nav .nav-left a:nth-child(1)     { animation-delay: 0.10s; }
.nav .nav-left a:nth-child(2)     { animation-delay: 0.16s; }
.nav .nav-right a:nth-child(1)    { animation-delay: 0.22s; }
.nav .nav-right a:nth-child(2)    { animation-delay: 0.28s; }

/* ---------- hands ---------- */
/* hands start invisible; inline JS sets opacity to 0.35 so the CSS transition fades them in */
.hand {
  opacity: 0;
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1), opacity 1.1s ease-out 0.4s;
}

/* ---------- pulse on the hero meta dot ---------- */
.hero-meta .dot {
  animation: btcDotPulse 2.6s ease-in-out infinite;
}

/* ---------- subtle gradient drift behind hero and CTA ---------- */
.hero-bg,
.cta-bg {
  animation: btcDrift 22s ease-in-out infinite;
  will-change: transform;
}

/* hero countdown halo drift */
.hero-countdown::before {
  animation: btcDrift 18s ease-in-out infinite;
}

/* ---------- reveal-on-scroll ---------- */
.btc-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.85s cubic-bezier(.2,.7,.2,1),
    transform 0.85s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--btc-i, 0) * 70ms);
  will-change: opacity, transform;
}
.btc-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* slide-from-left variant for horizontal lists (value rows, timeline) */
.btc-reveal-x {
  opacity: 0;
  transform: translateX(-22px);
  transition:
    opacity 0.8s cubic-bezier(.2,.7,.2,1),
    transform 0.8s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--btc-i, 0) * 60ms);
}
.btc-reveal-x.is-in {
  opacity: 1;
  transform: translateX(0);
}

/* scale-in variant, used for the giant 1M number and CTA title */
.btc-reveal-scale {
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity 0.9s cubic-bezier(.2,.7,.2,1),
    transform 0.9s cubic-bezier(.2,.7,.2,1);
}
.btc-reveal-scale.is-in {
  opacity: 1;
  transform: scale(1);
}

/* ---------- card hover lifts (additive, does not break existing hovers) ---------- */
.expect-card  { transition: background .3s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.expect-card:hover { transform: translateY(-3px); }

.ov-cell      { transition: transform .35s cubic-bezier(.2,.7,.2,1), background .25s ease, border-color .25s ease; }
.ov-cell:hover { transform: translateY(-3px); }

/* ---------- subtle shimmer on the featured tier badge ---------- */
.tier-featured .tier-badge {
  background:
    linear-gradient(90deg,
      var(--orange) 0%,
      #ffb37a 40%,
      var(--orange) 60%,
      var(--orange) 100%);
  background-size: 250% 100%;
  animation: btcShine 4.5s ease-in-out infinite;
}

/* ---------- arrow nudge on btn hover already exists; soften timing ---------- */
.btn .arrow { transition: transform .3s cubic-bezier(.2,.7,.2,1); }

/* ---------- back-to-top: slow bob when visible ---------- */
.back-to-top.show svg {
  animation: btcBob 2.4s ease-in-out infinite;
}

/* ---------- FAQ caret rotate handled by existing CSS; add fade for content ---------- */
.qa[open] .a {
  animation: btcFadeUp 0.45s ease-out;
}

/* ---------- timeline dot pulse on key items ---------- */
.tl-item.is-key .tl-dot {
  animation: btcDotPulse 3.2s ease-in-out infinite;
}

/* ---------- million-num gradient gently shifts ---------- */
.million-num {
  background-size: 100% 200%;
  background-position: 0% 0%;
  transition: background-position 1.6s ease-out;
}
.million-card.is-in .million-num,
.million-num:hover {
  background-position: 0% 100%;
}

/* ---------- WORDMARK MARQUEE (between hero and vision) ---------- */
.wm-banner {
  position: relative;
  padding: clamp(16px, 2vw, 28px) 0;
  background: var(--bg);
  overflow: hidden;
}
.wm-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* fade out at edges so the loop seam disappears into the background */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.wm-track {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
  width: max-content;
  animation: wmScroll 50s linear infinite;
  will-change: transform;
}
.wm-item {
  height: clamp(56px, 7vw, 96px);
  width: auto;
  flex-shrink: 0;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}
.wm-sep {
  font-size: clamp(14px, 1.4vw, 18px);
  color: var(--orange);
  flex-shrink: 0;
  opacity: 0.55;
  user-select: none;
}
@keyframes wmScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 720px) {
  .wm-banner { padding: 14px 0; }
  .wm-track  { gap: 40px; animation-duration: 35s; }
}

/* ---------- hero Register Now: subtle glow + pulse ---------- */
@keyframes btcRegisterGlow {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(226, 106, 31, 0.55),
      0 8px 22px rgba(226, 106, 31, 0.20);
  }
  50% {
    box-shadow:
      0 0 0 10px rgba(226, 106, 31, 0),
      0 14px 36px rgba(226, 106, 31, 0.45);
  }
}
.hero-actions .btn-primary {
  position: relative;
  animation: btcRegisterGlow 2.4s ease-in-out infinite;
}
.hero-actions .btn-primary:hover {
  animation-play-state: paused;
  box-shadow: 0 16px 44px rgba(226, 106, 31, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .wm-track { animation: none; }
  .hero-actions .btn-primary { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .btc-reveal,
  .btc-reveal-x,
  .btc-reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero .hero-meta,
  .hero .hero-title .row,
  .hero .hero-sub .hero-lede,
  .hero .hero-sub .hero-actions,
  .hero .hero-countdown,
  .sched-hero .eyebrow, .sched-hero .sched-title, .sched-hero .sched-lede,
  .venue-hero .eyebrow, .venue-hero .venue-title, .venue-hero .venue-lede,
  .faq-hero .eyebrow,   .faq-hero .faq-title,   .faq-hero .faq-lede,
  .nav .brand, .nav .nav-side a, .nav .btn-primary,
  .hand {
    opacity: 1 !important;
  }
}