/* Bounty Legends — motion layer. Everything animated lives inside the no-preference query. */

/* Always-on structure (no motion) */
.fx-embers,.hero-glare{position:absolute;inset:0;pointer-events:none}
.fx-embers{width:100%;height:100%;z-index:0}
.hero>:not(canvas):not(.hero-glare){position:relative;z-index:1}
.fx-bg{position:fixed;inset:-20%;z-index:-1;pointer-events:none;background:radial-gradient(40% 35% at 25% 30%,rgba(255,22,140,.13),transparent 70%),radial-gradient(35% 30% at 78% 65%,rgba(120,60,255,.10),transparent 70%)}
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-20deg);pointer-events:none}
.ticker{overflow:hidden;border-block:1px solid rgba(255,255,255,.12);background:linear-gradient(90deg,#150c1d,#1d0f26 50%,#150c1d);padding:13px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:flex;width:max-content}
.ticker-track span{font:800 12px "DM Sans",sans-serif;letter-spacing:3px;text-transform:uppercase;color:#d9c8d6;padding:0 22px;white-space:nowrap}
.ticker-track span:nth-child(even){color:#ff4da4}
.fx-spot::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,22,140,.17),transparent 62%);transition:opacity .3s}
.launch-highlight,.card,.tile,.road{position:relative}

@media (prefers-reduced-motion:no-preference){
  /* page load */
  .topbar,.bar{animation:dropin .7s cubic-bezier(.2,.8,.2,1) both}
  .hero{animation:fadein 1s ease both}
  .hero::before{animation:kenburns 26s ease-in-out infinite alternate;will-change:transform}
  .hero-glare{background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%);transform:translateX(-120%);animation:glare 9s ease-in-out 2s infinite;mix-blend-mode:soft-light}
  .fx-bg{animation:drift 32s ease-in-out infinite alternate;will-change:transform}

  /* scroll reveal (only hides content once JS has added .fx) */
  .fx .rv{opacity:0;transform:translateY(28px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
  .fx .rv.in{opacity:1;transform:none}
  .fx .rv.in.settled{transition-delay:0s;transition-duration:.3s}

  /* ticker */
  .ticker-track{animation:marquee 34s linear infinite}
  .ticker:hover .ticker-track{animation-play-state:paused}

  /* buttons */
  .btn:hover::after{left:140%;transition:left .65s ease}
  /* idle glow lives on its own layer and never switches off, so hover has nothing to snap from */
  .lower-cta .btn::before,.hero-cta .btn::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.16);opacity:0;pointer-events:none;animation:glowpulse 3s ease-in-out infinite}

  /* cards */
  .step,.launch-highlight,.card,.tile,.road,section.card{transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s}
  .step.settled:hover,.launch-highlight.settled:hover,.card.settled:hover,.tile.settled:hover,.road.settled:hover,section.card.settled:hover{transform:translateY(-5px);border-color:rgba(255,22,140,.5);box-shadow:0 18px 44px rgba(0,0,0,.45),0 0 28px rgba(255,22,140,.12)}
  @media (hover:hover){.fx-spot:hover::after{opacity:1}}
  .launch-highlight.featured{animation:featured 3.2s ease-in-out infinite}
  .step-icon{animation:floaty 5.5s ease-in-out infinite;transition:box-shadow .3s}
  .step:nth-child(2) .step-icon{animation-delay:-1.8s}.step:nth-child(3) .step-icon{animation-delay:-3.6s}
  .step:hover .step-icon{box-shadow:0 0 26px rgba(255,22,140,.4)}
  .step-number{transition:transform .5s,color .5s}.step:hover .step-number{transform:translateY(6px);color:rgba(255,255,255,.1)}
  .brand-mark{animation:markglow 4s ease-in-out infinite}

  /* dashboard */
  .unit strong.tick{animation:tick .5s cubic-bezier(.2,.8,.2,1)}
  .pill{animation:pillpulse 2.6s ease-in-out infinite}

  /* dialog */
  dialog[open]{animation:dlg .38s cubic-bezier(.2,.8,.2,1)}
  dialog[open]::backdrop{animation:fadein .38s ease}

  @keyframes dropin{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
  @keyframes fadein{from{opacity:0}to{opacity:1}}
  @keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07) translateY(-1%)}}
  @keyframes glare{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
  @keyframes drift{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(3%,3%,0) scale(1.12)}}
  @keyframes marquee{to{transform:translateX(-50%)}}
  @keyframes glowpulse{0%,100%{opacity:0}50%{opacity:1}}
  @keyframes featured{0%,100%{box-shadow:inset 0 3px #ff168c,0 0 0 rgba(255,22,140,0)}50%{box-shadow:inset 0 3px #ff168c,0 0 38px rgba(255,22,140,.3)}}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  @keyframes markglow{0%,100%{filter:drop-shadow(0 0 6px rgba(255,22,140,.35))}50%{filter:drop-shadow(0 0 16px rgba(255,22,140,.8))}}
  @keyframes tick{0%{transform:translateY(-10px);opacity:.25}100%{transform:none;opacity:1}}
  @keyframes pillpulse{0%,100%{box-shadow:0 0 0 rgba(255,22,140,0)}50%{box-shadow:0 0 18px rgba(255,22,140,.35)}}
  @keyframes dlg{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
}

/* V7.2 — unified Bounty Legends primary buttons. Same finish on sign-up,
   main CTA, dashboard/social actions, and header Back buttons. The palette
   matches the warm-pink → magenta paint strokes of the LEGENDS wordmark. */
:root{
  --legend-button-gradient:linear-gradient(110deg,#e21b62 0%,#e31372 38%,#d7127d 72%,#ae0d84 100%);
}
.btn,
.lower-cta .btn,
.hero-cta .btn{
  background:var(--legend-button-gradient);
  background-color:#d7127d;
  clip-path:none;
  border-radius:3px;
  color:#fff;
  border:0;
  box-shadow:0 7px 24px rgba(215,18,125,.18);
  text-shadow:0 1px 2px rgba(55,0,38,.14);
}
/* Retain the larger lower CTA while giving it the exact same gradient. */
.lower-cta .btn{
  box-shadow:0 12px 36px rgba(215,18,125,.22);
}
.btn:hover,
.lower-cta .btn:hover,
.hero-cta .btn:hover{
  color:#fff;
  filter:brightness(1.08);
  box-shadow:0 10px 32px rgba(215,18,125,.31);
}
.btn:focus-visible{
  outline:2px solid #ff8bc2;
  outline-offset:3px;
}