/* ============================================================
   Effetti di sfondo per foto premio con trasparenza reale.
   Si attivano SOLO quando il contenitore .premio-fx riceve
   l'attributo data-effetto (impostato da effetti-premio.js dopo
   aver verificato foto_trasparente) — mai in automatico solo per
   la presenza della classe. Vedi assets/js/effetti-premio.js.
   ============================================================ */

.premio-fx{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: #f3ede0;
  isolation: isolate;
}

.premio-fx .fx-img{
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover; /* comportamento originale: foto senza trasparenza o effetto 'nessuno' */
  display: block;
}

/* quando un effetto è davvero montato, la foto passa a "contain" per
   lasciare vedere lo sfondo animato intorno al soggetto scontornato */
.premio-fx[data-effetto] .fx-img{
  object-fit: contain;
}

.fx-layer-wrap{
  position: absolute;
  inset: 0;
  z-index: 1;
}

@keyframes fx-spin{
  from{ transform: translate(-50%,-50%) rotate(0deg); }
  to{ transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes fx-pulse{
  0%,100%{ opacity:.7; transform:translate(-50%,-50%) scale(.94); }
  50%{ opacity:1; transform:translate(-50%,-50%) scale(1.06); }
}

/* ---------- 1) Sunburst oro (premio/vincita) ---------- */
.premio-fx[data-effetto="sunburst_oro"]{ background:#fbf3e2; }
.premio-fx[data-effetto="sunburst_oro"] .fx-rays{
  position:absolute; left:50%; top:50%; width:260%; height:260%;
  transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg, #c9972e 0deg 9deg, #fbf3e2 9deg 18deg);
  animation: fx-spin 70s linear infinite;
}
.premio-fx[data-effetto="sunburst_oro"] .fx-core{
  position:absolute; left:50%; top:50%; width:60%; height:60%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, #fff3c9, transparent 70%);
  filter:blur(10px); opacity:.9;
  animation: fx-pulse 4.4s ease-in-out infinite;
}
.premio-fx[data-effetto="sunburst_oro"] .fx-mask{
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 50%, transparent 28%, #fbf3e2 82%);
}

/* ---------- 2) Coriandoli terracotta ---------- */
.premio-fx[data-effetto="coriandoli_terracotta"]{ background:#fbf3e6; }
.premio-fx[data-effetto="coriandoli_terracotta"] .fx-confetto{
  position:absolute; top:-10%; opacity:0;
  animation-name: fx-fall;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}
@keyframes fx-fall{
  0%{ opacity:0; transform:translate(0,0) rotate(0deg); }
  8%{ opacity:.9; }
  92%{ opacity:.7; }
  100%{ opacity:0; transform:translate(var(--fx-dx,20px),280px) rotate(var(--fx-rot,360deg)); }
}

/* ---------- 3) Strisce diagonali rosa dolce ---------- */
.premio-fx[data-effetto="strisce_rosa"]{ background:#fdf4f0; }
.premio-fx[data-effetto="strisce_rosa"] .fx-stripes{
  position:absolute; inset:-40%;
  background: repeating-linear-gradient(
    45deg,
    #f2d4c0 0 10%, transparent 10% 24%,
    #e8a3a6 24% 32%, transparent 32% 48%
  );
  background-size:70% 70%;
  opacity:.55;
  animation: fx-stripemove 13s linear infinite;
}
@keyframes fx-stripemove{
  from{ background-position:0 0; }
  to{ background-position:140% 140%; }
}

/* ---------- 4) Onde concentriche verde ---------- */
.premio-fx[data-effetto="onde_verde"]{ background:#f6f4e8; }
.premio-fx[data-effetto="onde_verde"] .fx-ring{
  position:absolute; left:50%; top:50%;
  border:2px solid #8fae5f; border-radius:50%;
  transform:translate(-50%,-50%);
  opacity:0;
  animation: fx-ripple 5s ease-out infinite;
}
@keyframes fx-ripple{
  0%{ width:10%; height:10%; opacity:.6; border-width:3px; }
  100%{ width:170%; height:170%; opacity:0; border-width:.5px; }
}

/* ---------- 5) Raggi di luce crema calda ---------- */
.premio-fx[data-effetto="raggi_crema"]{ background:#faf3e2; }
.premio-fx[data-effetto="raggi_crema"] .fx-rays-soft{
  position:absolute; left:50%; top:50%; width:260%; height:260%;
  transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg, #efd9a0 0deg 8deg, transparent 8deg 22deg);
  filter:blur(5px);
  opacity:.5;
  animation: fx-spin 46s linear infinite;
}
.premio-fx[data-effetto="raggi_crema"] .fx-core{
  position:absolute; left:50%; top:50%; width:55%; height:55%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, #d9b26a, transparent 68%);
  filter:blur(14px); opacity:.7;
  animation: fx-pulse 4.6s ease-in-out infinite;
}

/* ---------- 6) Aurora rotante terracotta ---------- */
.premio-fx[data-effetto="aurora_terracotta"]{ background:#fbf3e6; }
.premio-fx[data-effetto="aurora_terracotta"] .fx-aurora{
  position:absolute; left:50%; top:50%; width:280%; height:280%;
  transform:translate(-50%,-50%);
  background: conic-gradient(
    from 0deg,
    #e0713c 0deg, #f2c14e 70deg, #f7ead3 140deg,
    #c46a3c 210deg, #8a4b3b 280deg, #e0713c 360deg
  );
  filter: blur(16px) saturate(1.15);
  opacity:.55;
  animation: fx-spin 28s linear infinite;
}
.premio-fx[data-effetto="aurora_terracotta"] .fx-sweep{
  position:absolute; inset:-20%;
  background:linear-gradient(
    115deg,
    transparent 35%, rgba(255,255,255,.5) 48%,
    rgba(255,255,255,.85) 50%, rgba(255,255,255,.5) 52%, transparent 65%
  );
  background-size:260% 260%;
  mix-blend-mode: soft-light;
  animation: fx-sweep 8s ease-in-out infinite;
}
@keyframes fx-sweep{
  0%{ background-position:160% 0%; }
  50%{ background-position:-60% 0%; }
  100%{ background-position:-60% 0%; }
}

@media (prefers-reduced-motion: reduce){
  .premio-fx *{ animation: none !important; }
}