/* ============================================================
   TALES OF BRANCO — effetti WOW nelle card (solo CSS)
   4 stati: mistero · pre-reveal · reveal · nft
   Nessun video, nessuna GIF: peso zero, gira su qualsiasi telefono.
   ============================================================ */

.tob-griglia{display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.tob-wrap{display:flex;flex-direction:column;gap:11px}

.tob{
  position:relative;aspect-ratio:1/1;border-radius:18px;overflow:hidden;
  background:#000;isolation:isolate;
  border:1px solid color-mix(in srgb,var(--tob-glow,#D4AF37) 34%,transparent);
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 18px 44px rgba(0,0,0,.62);
  transition:transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s
}
.tob:hover{transform:translateY(-7px);
  box-shadow:0 0 34px color-mix(in srgb,var(--tob-glow,#D4AF37) 40%,transparent),0 26px 60px rgba(0,0,0,.7)}
.tob>img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1}

/* palette per tier */
.tob.common{--tob-glow:#8a7355}
.tob.uncommon{--tob-glow:#4fb3a0}
.tob.rare{--tob-glow:#D4AF37}
.tob.epic{--tob-glow:#7c5cff}
.tob.legendary{--tob-glow:#FB6B00}
.tob.mythic{--tob-glow:#ff3d6e}
.tob.genesis{--tob-glow:#e8d5ff}
.tob.mystery{--tob-glow:#6f6f7a}

/* etichetta tier */
.tob-lab{position:absolute;top:11px;left:11px;z-index:9;
  font-size:9.5px;font-weight:900;letter-spacing:1.9px;padding:4px 10px;border-radius:20px;
  background:rgba(0,0,0,.66);backdrop-filter:blur(6px);
  color:var(--tob-glow,#D4AF37);
  border:1px solid color-mix(in srgb,var(--tob-glow,#D4AF37) 48%,transparent)}

/* ---------- 1. RESPIRO (tutte) ---------- */
.tob.wow>img{animation:tobRespiro 8s ease-in-out infinite;transform-origin:50% 52%}
@keyframes tobRespiro{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

/* ---------- 2. BAGLIORE pulsante ---------- */
.tob.wow::before{content:"";position:absolute;inset:-24%;z-index:2;pointer-events:none;
  background:radial-gradient(circle at 50% 48%,
    color-mix(in srgb,var(--tob-glow) 46%,transparent) 0%,transparent 62%);
  mix-blend-mode:screen;animation:tobPulsa 5.5s ease-in-out infinite}
@keyframes tobPulsa{0%,100%{opacity:.30}50%{opacity:.72}}

/* ---------- 3. FASCIO di luce ---------- */
.tob.wow::after{content:"";position:absolute;top:-60%;left:-130%;width:58%;height:230%;z-index:4;
  pointer-events:none;transform:rotate(24deg);mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
  animation:tobFascio 7.5s ease-in-out infinite}
@keyframes tobFascio{0%,62%{left:-130%}100%{left:150%}}

/* ---------- 4. FUMO / NEBBIA ---------- */
.tob-fu2{position:absolute;inset:-18%;z-index:3;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:
    radial-gradient(ellipse 62% 40% at 22% 78%, rgba(210,215,230,.30), transparent 70%),
    radial-gradient(ellipse 54% 34% at 74% 66%, rgba(190,200,225,.24), transparent 72%),
    radial-gradient(ellipse 78% 46% at 48% 92%, rgba(230,232,245,.22), transparent 74%);
  filter:blur(9px);animation:tobFumo 21s ease-in-out infinite alternate}
@keyframes tobFumo{
  0%  {transform:translate3d(-5%,3%,0)  scale(1.02) rotate(-1.6deg);opacity:.40}
  35% {transform:translate3d(4%,-3%,0)  scale(1.12) rotate(1.4deg); opacity:.66}
  70% {transform:translate3d(-3%,-5%,0) scale(1.06) rotate(-.8deg); opacity:.50}
  100%{transform:translate3d(5%,2%,0)   scale(1.15) rotate(2deg);   opacity:.62}}
/* secondo strato più lento, dà profondità */
.tob-fu3{position:absolute;inset:-22%;z-index:3;pointer-events:none;mix-blend-mode:screen;opacity:.34;
  background:radial-gradient(ellipse 90% 52% at 50% 84%, rgba(255,255,255,.20), transparent 76%);
  filter:blur(16px);animation:tobFumo 33s ease-in-out infinite alternate-reverse}

/* ---------- 5. STELLE che brillano ---------- */
.tob-st{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.tob-st i{position:absolute;width:3px;height:3px;border-radius:50%;
  background:#fff;box-shadow:0 0 7px 2px rgba(255,255,255,.9), 0 0 16px 5px color-mix(in srgb,var(--tob-glow) 62%,transparent);
  opacity:0;animation:tobBrilla 3.4s ease-in-out infinite}
@keyframes tobBrilla{0%,100%{opacity:0;transform:scale(.3)}
  42%{opacity:1;transform:scale(1.45)}62%{opacity:.35;transform:scale(.85)}}

/* ---------- 6. SCINTILLE che salgono ---------- */
.tob-sp{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.tob-sp i{position:absolute;bottom:-8px;width:2.5px;height:2.5px;border-radius:50%;
  background:var(--tob-glow);box-shadow:0 0 8px 2px var(--tob-glow);
  animation:tobSale 6.5s linear infinite}
@keyframes tobSale{0%{transform:translateY(0) scale(.4);opacity:0}
  12%{opacity:1}80%{opacity:.7}100%{transform:translateY(-320px) scale(1.15);opacity:0}}

/* ---------- 7. DIAMANTI (solo stato NFT) ---------- */
.tob-di{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.tob-di i{position:absolute;width:11px;height:11px;opacity:0;
  background:linear-gradient(135deg,#fff,color-mix(in srgb,var(--tob-glow) 70%,#fff));
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  filter:drop-shadow(0 0 6px rgba(255,255,255,.95)) drop-shadow(0 0 14px var(--tob-glow));
  animation:tobDiamante 5.2s ease-in-out infinite}
@keyframes tobDiamante{
  0%,100%{opacity:0;transform:scale(.2) rotate(0deg)}
  20%{opacity:1;transform:scale(1.25) rotate(120deg)}
  46%{opacity:.5;transform:scale(.8)  rotate(220deg)}
  66%{opacity:.9;transform:scale(1.05) rotate(320deg)}}

/* ---------- 8. FULMINE (solo EPIC) ---------- */
.tob.epic .tob-fu{position:absolute;inset:0;z-index:7;pointer-events:none;
  background:linear-gradient(112deg,transparent 44%,rgba(190,170,255,.95) 47%,
    rgba(255,255,255,.98) 49%,rgba(140,110,255,.9) 51%,transparent 55%);
  clip-path:polygon(52% 0,42% 40%,58% 38%,44% 100%,50% 46%,36% 48%);
  opacity:0;mix-blend-mode:screen;animation:tobFulmine 6.4s steps(1) infinite}
@keyframes tobFulmine{0%,86%{opacity:0}88%{opacity:1}90%{opacity:0}92%{opacity:.85}94%{opacity:0}}

/* ---------- 9. AURORA (solo GENESIS) ---------- */
.tob.genesis .tob-au{position:absolute;inset:-30%;z-index:3;pointer-events:none;
  mix-blend-mode:screen;filter:blur(26px);opacity:.55;
  background:
    radial-gradient(ellipse 60% 34% at 26% 26%, rgba(120,220,255,.65), transparent 68%),
    radial-gradient(ellipse 56% 30% at 74% 40%, rgba(255,140,220,.55), transparent 70%),
    radial-gradient(ellipse 70% 38% at 50% 74%, rgba(180,255,190,.48), transparent 72%);
  animation:tobAurora 17s ease-in-out infinite alternate}
@keyframes tobAurora{0%{transform:translate3d(-7%,-4%,0) scale(1)}
  100%{transform:translate3d(7%,5%,0) scale(1.22)}}

/* ============================================================
   STATI
   ============================================================ */

/* MISTERO — buio, niente si vede */
.tob.stato-mistero>img{filter:brightness(.26) contrast(1.35) saturate(.35)}
.tob.stato-mistero .tob-q{position:absolute;inset:0;z-index:8;display:grid;place-items:center;
  font-size:78px;font-weight:900;color:rgba(255,255,255,.10);
  text-shadow:0 0 34px var(--tob-glow);animation:tobPulsa 3.6s ease-in-out infinite;pointer-events:none}

/* PRE-REVEAL — sigillato: fumo denso, forma appena leggibile */
.tob.stato-prereveal>img{filter:blur(6px) brightness(.60) contrast(1.42) saturate(.62)}
.tob.stato-prereveal .tob-fu2{opacity:.92;filter:blur(6px)}
.tob.stato-prereveal .tob-fu3{opacity:.70}
.tob.stato-prereveal::after{animation-duration:11s}

/* REVEAL — si sveglia: fumo leggero + stelle */
.tob.stato-reveal>img{animation:tobSveglia 3s cubic-bezier(.2,.8,.25,1) 1 both,
                                 tobRespiro 8s ease-in-out 3s infinite}
@keyframes tobSveglia{
  0%{filter:blur(16px) brightness(.28) saturate(.4);transform:scale(1.14)}
  62%{filter:blur(2.5px) brightness(1.10) saturate(1.12);transform:scale(1.03)}
  100%{filter:none;transform:scale(1)}}
.tob.stato-reveal .tob-fu2{opacity:.42}

/* NFT — il pezzo finale: fumo + zoom in/out ampio + stelle + diamanti */
.tob.stato-nft{border-width:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.6),
             0 0 30px color-mix(in srgb,var(--tob-glow) 34%,transparent),
             0 22px 56px rgba(0,0,0,.72)}
.tob.stato-nft>img{animation:tobZoom 14s cubic-bezier(.45,0,.55,1) infinite}
@keyframes tobZoom{
  0%  {transform:scale(1)     translate3d(0,0,0)}
  25% {transform:scale(1.13)  translate3d(-1.6%,1.2%,0)}
  50% {transform:scale(1.19)  translate3d(1.4%,-1.4%,0)}
  75% {transform:scale(1.09)  translate3d(1.1%,1.5%,0)}
  100%{transform:scale(1)     translate3d(0,0,0)}}
.tob.stato-nft .tob-fu2{opacity:.62}
.tob.stato-nft::before{animation-duration:4.2s}

/* ============================================================
   PLAYER 10 SECONDI
   ============================================================ */
.tob-play{position:absolute;bottom:11px;right:11px;z-index:12;
  width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;
  display:grid;place-items:center;font-size:15px;color:#0b0b0b;
  background:linear-gradient(135deg,var(--tob-glow),#fff);
  box-shadow:0 0 18px color-mix(in srgb,var(--tob-glow) 72%,transparent);
  transition:transform .2s, box-shadow .2s}
.tob-play:hover{transform:scale(1.13)}
.tob-play.on{animation:tobPulsa 1.1s ease-in-out infinite}
.tob-bar{position:absolute;bottom:0;left:0;height:3px;width:0;z-index:12;
  background:linear-gradient(90deg,var(--tob-glow),#fff);
  box-shadow:0 0 10px var(--tob-glow);transition:width .1s linear}

/* ============================================================
   TESTI SOTTO LA CARD
   ============================================================ */
.tob-nome{font-weight:800;font-size:15.5px;color:#fff;letter-spacing:.2px}
.tob-sub{font-size:12.5px;color:#8d8d8d;margin-top:3px;line-height:1.5}
.tob-prezzo{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tob-prezzo b{color:var(--tob-glow,#D4AF37);font-size:14px}
.tob-mint{display:inline-block;padding:7px 15px;border-radius:22px;font-size:12px;font-weight:800;
  text-decoration:none;color:#0b0b0b;background:linear-gradient(135deg,#FB6B00,#D4AF37);
  transition:filter .2s}
.tob-mint:hover{filter:brightness(1.14)}
.tob-mint.off{background:#2a2a2a;color:#767676;cursor:not-allowed;pointer-events:none}

/* ============================================================
   ACCESSIBILITÀ — chi soffre il movimento vede tutto fermo
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .tob *,.tob::before,.tob::after,.tob>img{animation:none!important;transition:none!important}
  .tob.stato-reveal>img{filter:none}
}

/* ============================================================
   CARD A 4 PASSI — le immagini impilate, una sola visibile
   ============================================================ */
.tob>img.lv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;visibility:hidden;transition:opacity .85s ease}
.tob>img.lv.on{opacity:1;visibility:visible}
.tob>img.lv.esce{opacity:0;transition:opacity .85s ease}

/* pallini di avanzamento */
.tob-passi{position:absolute;bottom:12px;left:12px;z-index:12;display:flex;gap:6px}
.tob-passi i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22);
  transition:background .35s, box-shadow .35s, transform .35s}
.tob-passi i.on{background:var(--tob-glow,#D4AF37);transform:scale(1.32);
  box-shadow:0 0 10px var(--tob-glow,#D4AF37)}

/* riga bottoni sotto la card */
.tob-azioni{display:flex;gap:9px;align-items:center;margin-top:10px;flex-wrap:wrap}
.tob-svela{flex:1 1 auto;padding:10px 18px;border-radius:24px;border:1px solid
  color-mix(in srgb,var(--tob-glow,#D4AF37) 52%,transparent);
  background:transparent;color:var(--tob-glow,#D4AF37);font-weight:800;font-size:12.5px;
  letter-spacing:1.4px;cursor:pointer;transition:background .25s,color .25s,transform .18s}
.tob-svela span{display:inline-block;transition:transform .3s}
.tob-svela:hover{background:color-mix(in srgb,var(--tob-glow,#D4AF37) 16%,transparent)}
.tob-svela:hover span{transform:translateX(4px)}
.tob-svela:active{transform:scale(.96)}
.tob-svela.fine{border-color:#2a2a2a;color:#6d6d6d;cursor:default}
.tob-svela.fine span{display:none}
.tob-sup{margin-top:7px;font-size:11.5px;color:#6d6d6d;letter-spacing:.4px}
.tob-info{min-height:46px}
.tob-nome,.tob-sub{transition:opacity .35s}
.tob-info.cambia .tob-nome,.tob-info.cambia .tob-sub{opacity:0}

/* il lampo che accompagna ogni passo */
@keyframes tobLampo{0%{opacity:0}22%{opacity:.85}100%{opacity:0}}
.tob.lampo::after{animation:tobLampo .9s ease-out 1!important;left:-130%!important;
  width:300%!important;background:radial-gradient(circle at 50% 50%,
  rgba(255,255,255,.55),transparent 62%)!important;transform:none!important}

/* il pezzo unico non ha prezzo: ha una ruota */
.tob-mint.ruota{background:linear-gradient(135deg,#e8d5ff,#b98fff,#e8d5ff);
  box-shadow:0 0 16px rgba(185,143,255,.5)}