/* ============================================================
   Legends Kit — animações e efeitos
   Tudo aqui é extra: se apagares este ficheiro a loja continua a funcionar.
   Quem tem "reduzir movimento" ligado no sistema não vê animações.
   ============================================================ */

/* Faixa de anúncios a correr */
.ticker{overflow:hidden;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.ticker-in{display:inline-flex;gap:32px;padding-block:7px;padding-left:32px}
.ticker-in span::after{content:"★";margin-left:32px;color:var(--tag)}

/* Cabeçalho ganha sombra ao descer a página */
.top{transition:box-shadow .25s}
.top.scrolled{box-shadow:0 6px 24px color-mix(in srgb,var(--ink) 14%,transparent)}

/* Hero com riscas de relvado e bola */
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0 -16px;z-index:-1;border-radius:14px;
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--accent) 7%,transparent) 0 60px,transparent 60px 120px);
  -webkit-mask:linear-gradient(180deg,#000 30%,transparent);mask:linear-gradient(180deg,#000 30%,transparent)}
.hero h2 em{background:linear-gradient(100deg,var(--accent) 20%,var(--tag) 45%,var(--accent) 70%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ball{position:absolute;left:0;top:18px;width:54px;height:54px;color:var(--ink);pointer-events:none}
.ball svg{width:100%;height:100%;display:block}
@media (max-width:640px){.ball{display:none}}

/* Cartões: reflexo de luz, inclinação, etiqueta de preço */
.card{position:relative;transform-style:preserve-3d;will-change:transform}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,color-mix(in srgb,#fff 45%,transparent) 50%,transparent 65%);
  background-size:250% 100%;background-position:150% 0;mix-blend-mode:soft-light}
.card:hover{box-shadow:0 18px 40px -18px color-mix(in srgb,var(--ink) 45%,transparent)}
.pic img,.pic .shirt{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card:hover .pic img,.card:hover .pic .shirt{transform:scale(1.07)}
.tipo.gold{background:linear-gradient(100deg,#B8860B 0%,#F5D06A 45%,#B8860B 60%);background-size:250% 100%;color:#231800}

/* Botões: efeito de onda ao clicar */
.add,.send,.btn,.cart-btn,.chip,.sz{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.3;transform:scale(0)}
.add:not(:disabled):hover{filter:brightness(1.1)}
.chip,.sz{transition:transform .15s,background .2s,color .2s}
.chip:active,.sz:active{transform:scale(.92)}

/* Voo para o carrinho e confetes */
.fly{position:fixed;z-index:80;width:18px;height:18px;border-radius:50%;background:var(--tag);box-shadow:0 0 0 3px var(--surface);pointer-events:none}
.confetti{position:fixed;z-index:81;width:7px;height:11px;border-radius:2px;pointer-events:none}

@media (prefers-reduced-motion:no-preference){
  .ticker-in{animation:ticker 28s linear infinite}
  .hero h2{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .facts li{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
  .facts li:nth-child(2){animation-delay:.08s}.facts li:nth-child(3){animation-delay:.16s}.facts li:nth-child(4){animation-delay:.24s}
  .hero h2 em{animation:shine 4s ease-in-out infinite}
  .ball{animation:bounce 1.6s cubic-bezier(.3,0,.5,1) infinite}
  .ball svg{animation:spin 3.2s linear infinite}
  .card.enter{animation:rise .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 70ms)}
  .card{transition:transform .2s ease-out,box-shadow .3s}
  .card:hover::after{animation:sweep .9s ease-out}
  .card:hover .price{animation:wiggle .5s ease-in-out}
  .tipo.gold{animation:shine 3s ease-in-out infinite}
  .ripple{animation:ripple .6s ease-out forwards}
  #count.pop{animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
  .cart-btn.bump{animation:bump .45s ease-out}
  .drawer:not([hidden]){animation:slidein .35s cubic-bezier(.2,.8,.2,1)}
  .scrim:not([hidden]){animation:fade .25s}
  .modal:not([hidden]) .mbox{animation:popin .3s cubic-bezier(.3,1.4,.5,1)}
  .toast{animation:toast .35s cubic-bezier(.3,1.4,.5,1)}
  .line{animation:rise .35s ease-out both}
}
@media (prefers-reduced-motion:no-preference) and (max-width:640px){
  .drawer:not([hidden]){animation:slideup .35s cubic-bezier(.2,.8,.2,1)}
}
@keyframes ticker{to{transform:translateX(-50%)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes shine{0%,100%{background-position:100% 0}50%{background-position:0 0}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sweep{from{background-position:150% 0}to{background-position:-60% 0}}
@keyframes wiggle{0%,100%{transform:rotate(-2deg)}30%{transform:rotate(-7deg) scale(1.08)}60%{transform:rotate(3deg) scale(1.08)}}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.6)}100%{transform:scale(1)}}
@keyframes bump{0%,100%{transform:none}30%{transform:scale(1.08) rotate(-3deg)}60%{transform:scale(.97) rotate(2deg)}}
@keyframes slidein{from{transform:translateX(100%)}to{transform:none}}
@keyframes slideup{from{transform:translateY(100%)}to{transform:none}}
@keyframes fade{from{opacity:0}}
@keyframes popin{from{opacity:0;transform:scale(.9) translateY(10px)}}
@keyframes toast{from{opacity:0;transform:translate(-50%,20px) scale(.9)}}