/* Le sei sorprese nascoste (sorprese.js), scelte l'11/10/2026. Effetti a tutto schermo o sopra la foto toccata.
   Ricavato dalla pagina di prova (4_lavoro/sito/sorprese.py), con gli adattamenti per il sito. */

/* il logo, mentre lo si tiene premuto, cresce e gira: si capisce che sta succedendo qualcosa */
.testata-nome .marchio { transition: transform .2s; transform: scale(calc(1 + var(--tieni, 0) * .35)) rotate(calc(var(--tieni, 0) * 200deg)); }
.testata-nome { -webkit-touch-callout: none; }

/* la frase dell'India: un pulsante che non si distingue dal testo */
.ct-india { all: unset; cursor: pointer; }
.ct-india:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* le foto di mani: niente menu «salva immagine» durante la pressione lunga */
.gal-palco img, .st-fascia-foto img, .st-ascolto-foto img, .st-rec-foto img, .st-sede-foto img, .st-citta-foto img { -webkit-touch-callout: none; }

/* Nataraja: l'anello di fuoco sta sopra la foto, allineato a come è ritagliata */
.eff.nataraja { z-index: 5; }
.fuoco-quadro { position: absolute; pointer-events: none; }
.fuoco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 0 10px rgba(255, 150, 60, .7)); }
.fuoco .giro { transform-box: view-box; transform-origin: 599px 809px; animation: gira 7s linear infinite, entra .8s ease both; }
.fuoco .fiamma { animation: guizzo .42s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.09s); transform-box: fill-box; transform-origin: 50% 100%; }
.fuoco .alone { fill: url(#ct-alone); animation: entra 1.2s ease both; }
@keyframes guizzo { from { transform: scale(.85, .8); } to { transform: scale(1.05, 1.25); } }
.fuoco-nota { position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0; padding: 8px 12px; background: rgba(20, 6, 26, .72); color: #fff; font-size: .9375rem; text-align: center; pointer-events: none; animation: sale .8s cubic-bezier(.16, 1, .3, 1) .4s both; }
.tsubo { z-index: 3; }
.tsubo-nota { z-index: 4; }

/* ─── gli effetti (a tutto schermo o sul palco) ─── */
.eff { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; cursor: pointer; }
.eff.nel-palco { position: absolute; }
.eff-testo { position: absolute; left: 0; right: 0; text-align: center; color: #fff; padding: 0 20px; pointer-events: none; }
.eff-t1 { display: block; font: italic 400 clamp(2.6rem, 8vw, 4.6rem)/1 "Bodoni Moda", Georgia, serif; }
.eff-t2 { display: block; margin-top: 14px; font: 500 1.0625rem/1.5 "Hanken Grotesk", sans-serif; opacity: .92; }

/* 1. il saluto al sole */
.sole { overflow: hidden; }
.sole-cielo { position: absolute; inset: 0; background: linear-gradient(to top, #F7B65A 0%, #E9825F 28%, rgba(102, 45, 145, .97) 62%, #1B0B22 100%); animation: entra 1.4s ease both; }
.sole-disco { position: absolute; left: 50%; bottom: 0; width: min(72vw, 440px); --f-disco: #FFD98A; --o-disco: 1; --f-petali: #F08A3C; --f-anse: #FFF0C8;
  animation: sorge 2.8s cubic-bezier(.16, 1, .3, 1) .2s both, gira 40s linear 3s infinite; filter: drop-shadow(0 0 40px rgba(255, 200, 110, .8)); }
.sole-disco line { stroke: #FFE3A3; stroke-width: 34; stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: 220; animation: raggio .5s ease-out both; animation-delay: calc(1.5s + var(--i) * .13s); }
.sole .eff-testo { top: 13%; }
.sole .eff-t1 { animation: sale 1.2s cubic-bezier(.16, 1, .3, 1) 1.4s both; }
.sole .eff-t2 { animation: sale 1.2s cubic-bezier(.16, 1, .3, 1) 1.8s both; }
@keyframes sorge { from { transform: translate(-50%, 75%); } to { transform: translate(-50%, -8%); } }
@keyframes gira { to { rotate: 360deg; } }
@keyframes raggio { to { stroke-dashoffset: 0; } }

/* 3. lo tsubo */
.tsubo { position: absolute; width: 0; height: 0; pointer-events: none; }
.tsubo i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .25); }
.tsubo svg { position: absolute; left: -34px; top: -34px; width: 68px; height: 68px; transform: rotate(-90deg); }
.tsubo svg circle { fill: none; stroke: #fff; stroke-width: 3; stroke-dasharray: 189; stroke-dashoffset: calc(189 - 189 * var(--p, 0)); }
.tsubo b { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .8); animation: onda 2.2s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes onda { from { transform: scale(.2); opacity: .9; } to { transform: scale(4.2); opacity: 0; } }
.ct-preme img { filter: saturate(1.12) brightness(1.05) contrast(1.03); }
.ct-lascia img { filter: saturate(.85) brightness(.88); transition-duration: .4s; }
.tsubo-nota { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 18px 16px; background: linear-gradient(transparent, rgba(20, 6, 26, .85)); color: #fff; text-align: center; font: italic 400 1.25rem/1.3 "Bodoni Moda", Georgia, serif; animation: sale .9s cubic-bezier(.16, 1, .3, 1) both; pointer-events: none; }

/* 4. i petali dall'India */
.ct-petali { position: fixed; inset: 0; z-index: 100; pointer-events: none; overflow: hidden; }
.petalo { position: absolute; top: -8vh; animation: cade var(--d) cubic-bezier(.45, .05, .55, .95) var(--r) both; }
.petalo svg { display: block; width: var(--s); height: var(--s); animation: ondeggia calc(var(--d) / 3) ease-in-out var(--r) infinite alternate; }
@keyframes cade { to { transform: translateY(118vh); } }
@keyframes ondeggia { from { transform: translateX(-28px) rotate(-35deg); } to { transform: translateX(28px) rotate(40deg); } }
.petali-nota { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 101; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px);
  margin: 0; padding: 14px 20px; background: #fff; color: #3F085C; font: italic 400 1.15rem/1.35 "Bodoni Moda", Georgia, serif; box-shadow: 0 18px 40px -12px rgba(20, 6, 26, .5); animation: sale .8s cubic-bezier(.16, 1, .3, 1) .6s both; }

/* 5. shavasana */
.riposo { background: rgba(27, 11, 34, .95); animation: entra 2.6s ease both; }
.riposo .eff-testo { top: 50%; transform: translateY(-60%); }
.riposo .eff-t1 { font-style: normal; animation: entra 2s ease 1.2s both; }
.riposo .eff-t2 { animation: entra 2s ease 2s both; }
.respiro-linea { position: absolute; left: 50%; top: calc(50% + 70px); width: 180px; height: 2px; margin-left: -90px; background: #C5A7CF; border-radius: 2px; transform-origin: center;
  animation: entra 2s ease 2.6s both, respira 10s cubic-bezier(.45, 0, .55, 1) 2.6s infinite; }
@keyframes respira { 0%, 100% { transform: scaleX(.25); } 40% { transform: scaleX(1); } }

/* 6. om */
.om { background: radial-gradient(circle at 50% 45%, rgba(102, 45, 145, .94), rgba(27, 11, 34, .97) 70%); animation: entra 1s ease both; }
.om svg { width: min(62vw, 340px); height: auto; overflow: visible; }
.om text { font: 400 300px/1 "Kohinoor Devanagari", "Noto Sans Devanagari", "Mangal", "Devanagari Sangam MN", serif; fill: rgba(197, 167, 207, 0); stroke: #F3E3C2; stroke-width: 3;
  stroke-dasharray: 2200; stroke-dashoffset: 2200; animation: traccia 2.6s ease-in-out .3s forwards, riempi 1.2s ease 2.6s forwards; }
.om .eff-testo { bottom: 16%; }
.om .eff-t2 { animation: sale 1s cubic-bezier(.16, 1, .3, 1) 2.8s both; }
@keyframes traccia { to { stroke-dashoffset: 0; } }
@keyframes riempi { to { fill: rgba(243, 227, 194, .95); stroke-width: 0; } }

@keyframes entra { from { opacity: 0; } }
@keyframes sale { from { opacity: 0; transform: translateY(18px); } }
.esce { animation: esce .8s ease forwards !important; }
@keyframes esce { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .eff *, .ct-petali *, .eff, .tsubo b { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .sole-disco { transform: translate(-50%, -8%); }
}