/* =====================================================================
   EFFETTI WOW 2 — ASD Ponte agli Stolli
   Si aggiunge a fx.css. Per disattivare tutto: togliere <link fx2.css>
   e <script fx2.js> dalle pagine. I dati non cambiano.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Aurora in WebGL dietro l'hero
   --------------------------------------------------------------------- */
.fx-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.8s ease .2s;
}
.fx-gl.ready { opacity: 1; }

/* riflesso di luce che attraversa lo stemma (solo sulla sagoma del logo) */
.fx-float { position: relative; }
.fx-float::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%);
  background-size: 260% 100%;
  background-position: 160% 0;
  -webkit-mask: url(../img/logo.png) center / contain no-repeat;
  mask: url(../img/logo.png) center / contain no-repeat;
  animation: fx-crest-shine 7s ease-in-out 4s infinite;
}
@keyframes fx-crest-shine { 0% { background-position: 160% 0; } 38%, 100% { background-position: -60% 0; } }

/* ---------------------------------------------------------------------
   2. Cursore a pallone con anello "magnetico"
   --------------------------------------------------------------------- */
html.fx-cursor-on,
html.fx-cursor-on * { cursor: none !important; }

.fx-cursor, .fx-ring {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}
.fx-cursor.on, .fx-ring.on { opacity: 1; }

.fx-cursor { width: 22px; height: 22px; transition: opacity .25s ease; }
.fx-ball {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .4));
  transition: transform .3s var(--ease-spring);
}
.fx-ball svg { width: 100%; height: 100%; display: block; }
.fx-cursor.is-hover .fx-ball { transform: scale(1.3); }
.fx-cursor.is-down .fx-ball { transform: scale(.7); }

.fx-ring {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(109, 27, 52, .55);
  border-radius: 999px;
  transition: width .38s var(--ease-out), height .38s var(--ease-out), border-radius .38s var(--ease-out),
              background-color .3s ease, border-color .3s ease, opacity .25s ease;
}
.fx-ring.is-hover { background: rgba(169, 212, 245, .3); border-color: rgba(143, 42, 72, .75); }
.fx-ring.is-down { background: rgba(143, 42, 72, .18); }
.fx-ring.on-dark { border-color: rgba(255, 255, 255, .75); }
.fx-ring.on-dark.is-hover { background: rgba(169, 212, 245, .24); }
.fx-ring.has-label { background: var(--maroon); border-color: transparent; }
.fx-ring-label {
  font: 700 .66rem/1 'Montserrat', sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s ease;
}
.fx-ring.has-label .fx-ring-label { opacity: 1; }

/* ---------------------------------------------------------------------
   3. Cambio pagina a cerchio che si allarga dal punto del click
   --------------------------------------------------------------------- */
html.fx-vt-wipe::view-transition-old(root),
html.fx-theme-vt::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
html.fx-vt-wipe::view-transition-new(root),
html.fx-theme-vt::view-transition-new(root) {
  mix-blend-mode: normal;
  animation: fx-wipe .9s cubic-bezier(.65, 0, .25, 1) both;
}
@keyframes fx-wipe {
  from { clip-path: circle(0px at var(--vt-x, 50%) var(--vt-y, 50%)); }
  to { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 50%) var(--vt-y, 50%)); }
}
/* durante il cambio tema nulla deve "dissolvere" a parte: tutto viene spazzato dal cerchio */
html.fx-theme-vt .site-header,
html.fx-theme-vt .brand-logo,
html.fx-theme-vt .hero-logo { view-transition-name: none; }

/* ---------------------------------------------------------------------
   4. Stemma che vola nell'header mentre si scorre (solo home)
   --------------------------------------------------------------------- */
.fx-fly {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 101;
  display: block;
  pointer-events: none;
  opacity: 0;
  transform-origin: 0 0;
  will-change: transform;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .35));
}
.fx-crest-flying .hero-badge { visibility: hidden; }
body[data-page="home"] .site-header.is-scrolled .brand-logo { width: 46px; }

/* ---------------------------------------------------------------------
   5. Coriandoli e scritte
   --------------------------------------------------------------------- */
.fx-confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9998;
  pointer-events: none;
}
.fx-toast {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  padding: 8px 16px;
  font: 700 .85rem/1 'Montserrat', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--maroon), var(--maroon-light));
  box-shadow: 0 10px 26px rgba(74, 18, 36, .4);
  transform: translate(-50%, -50%);
  animation: fx-toast 1.9s var(--ease-out) forwards;
}
@keyframes fx-toast {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); }
  16% { opacity: 1; transform: translate(-50%, -140%) scale(1.08); }
  80% { opacity: 1; transform: translate(-50%, -190%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -240%) scale(.96); }
}
.hero-badge { cursor: pointer; }

/* ---------------------------------------------------------------------
   6. Bordi luminosi che seguono il mouse
   --------------------------------------------------------------------- */
[data-fx-spot]::before,
[data-fx-tilt]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
[data-fx-spot]::before {
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--maroon-light), var(--sky) 45%, transparent 75%);
}
[data-fx-tilt]::before {
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), var(--maroon-light), var(--sky) 45%, transparent 75%);
}
@media (hover: hover) {
  [data-fx-spot]:hover::before,
  [data-fx-tilt]:hover::before { opacity: 1; }
}

/* ---------------------------------------------------------------------
   7. Interruttore tema
   --------------------------------------------------------------------- */
.fx-theme {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  color: var(--maroon);
  background: transparent;
  border: 2px solid var(--maroon);
  border-radius: 50%;
  transition: transform .4s var(--ease-spring), background-color .3s ease, color .3s ease;
}
.fx-theme:hover { transform: rotate(18deg) scale(1.08); background: var(--maroon); color: #fff; }
.fx-theme:active { transform: scale(.9); }
.fx-theme svg { position: absolute; width: 20px; height: 20px; transition: transform .6s var(--ease-spring), opacity .35s ease; }
.fx-theme .sun { opacity: 0; transform: rotate(-90deg) scale(.3); }
.fx-theme .moon { opacity: 1; transform: none; }
[data-theme="dark"] .fx-theme .sun { opacity: 1; transform: none; }
[data-theme="dark"] .fx-theme .moon { opacity: 0; transform: rotate(90deg) scale(.3); }

@media (min-width: 721px) {
  .site-header .container { justify-content: flex-start; }
  .main-nav { margin-left: auto; }
}
@media (max-width: 720px) {
  .fx-theme { margin-left: auto; width: 38px; height: 38px; }
}

/* ---------------------------------------------------------------------
   8. TEMA SCURO
   Le superfici "sempre scure" (hero, footer, striscia, conto alla
   rovescia) restano bordeaux: il resto si inverte.
   --------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;
  --maroon: #c24668;
  --maroon-light: #da6483;
  --maroon-dark: #f6dce5;
  --sky-light: #2a1a23;
  --sky-dark: #5d93bf;
  --white: #1a0f14;
  --off-white: #0e0709;
  --text: #f1e7ea;
  --text-light: #b3a2a9;
  --border: rgba(255, 255, 255, .09);
  --success: #4cc27f;
  --danger: #ef6b5c;
  --warning: #e3a93a;
  --shadow: 0 2px 12px rgba(0, 0, 0, .45);
  --shadow-lg: 0 10px 34px rgba(0, 0, 0, .6);
  --accent-text: #f29ab5;
}

/* header */
[data-theme="dark"] .site-header.is-scrolled { background: rgba(26, 15, 20, .88); }
[data-theme="dark"] .main-nav a:hover,
[data-theme="dark"] .main-nav a.active { color: #fff; }
[data-theme="dark"] a { color: var(--accent-text); }
[data-theme="dark"] .main-nav a,
[data-theme="dark"] .quick-link { color: var(--text); }

/* superfici sempre scure */
[data-theme="dark"] .hero { background: linear-gradient(135deg, #2a0a14, #4a1224 60%, #5f1a33); }
[data-theme="dark"] .hero h1,
[data-theme="dark"] .hero .hero-tagline strong { color: #fff; }
[data-theme="dark"] .hero p.subtitle,
[data-theme="dark"] .hero .hero-tagline { color: #eaf5fd; }
[data-theme="dark"] .hero .league-pill { color: #fff; }
[data-theme="dark"] .site-footer { background: #0a0508; color: #d6e6f3; border-top: 1px solid rgba(255, 255, 255, .06); }
[data-theme="dark"] .site-footer h4 { color: #fff; }
[data-theme="dark"] .site-footer a { color: #d6e6f3; }
[data-theme="dark"] .fx-ticker { background: #1b0a11; }
[data-theme="dark"] .cd-unit { background: linear-gradient(160deg, #6d1b34, #3a0e1c); }
[data-theme="dark"] .cd-live { background: linear-gradient(135deg, #6d1b34, #8f2a48); }
[data-theme="dark"] #fx-intro { background: radial-gradient(circle at 50% 42%, #8f2a48 0%, #6d1b34 38%, #2e0a16 100%); }

/* testi accentati */
[data-theme="dark"] .match-row .teams .own,
[data-theme="dark"] .player-card .number,
[data-theme="dark"] .player-photo,
[data-theme="dark"] .staff-photo,
[data-theme="dark"] .sponsor-logo,
[data-theme="dark"] .result-row .chevron,
[data-theme="dark"] .tab-btn,
[data-theme="dark"] .fx-theme { color: var(--accent-text); }
[data-theme="dark"] .fx-theme:hover { color: #fff; }
[data-theme="dark"] .fx-tabs .tab-btn.active { color: #fff; }

/* pillole, badge, schede, filtri */
[data-theme="dark"] thead th,
[data-theme="dark"] .tab-btn.active,
[data-theme="dark"] .pagella-item .voto { color: #fff; }
[data-theme="dark"] .filter-btn.active,
[data-theme="dark"] .badge-pill { color: #4a1224; }
[data-theme="dark"] .badge-pill.win { background: rgba(76, 194, 127, .16); color: var(--success); }
[data-theme="dark"] .badge-pill.draw { background: rgba(227, 169, 58, .16); color: var(--warning); }
[data-theme="dark"] .badge-pill.loss { background: rgba(239, 107, 92, .16); color: var(--danger); }
[data-theme="dark"] .pos-badge.promo { background: rgba(76, 194, 127, .16); }
[data-theme="dark"] .pos-badge.relega { background: rgba(239, 107, 92, .16); }
[data-theme="dark"] .pos-badge { background: #2a1a23; }
[data-theme="dark"] tbody tr.own-team { background: rgba(194, 70, 104, .18); }
[data-theme="dark"] tbody tr.own-team:hover { background: rgba(194, 70, 104, .28); }
[data-theme="dark"] tbody tr.own-team { background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .1) 50%, transparent 70%); background-size: 250% 100%; background-repeat: no-repeat; }
[data-theme="dark"] .player-photo,
[data-theme="dark"] .staff-photo { background: linear-gradient(160deg, #2a1a23, #3b2431); }
[data-theme="dark"] .score { background: #2a1a23; }
[data-theme="dark"] .league-pill.dark { color: var(--maroon-dark); }
[data-theme="dark"] .fx-glare { mix-blend-mode: overlay; opacity: 0; }
[data-theme="dark"] .section-title,
[data-theme="dark"] .widget-card h3 { border-bottom-color: rgba(169, 212, 245, .35); }

/* scrollbar e selezione */
[data-theme="dark"] ::selection { background: var(--maroon); color: #fff; }
[data-theme="dark"] .fx-ring { border-color: rgba(242, 154, 181, .7); }
[data-theme="dark"] .fx-ring.is-hover { background: rgba(194, 70, 104, .28); }

/* ---------------------------------------------------------------------
   Movimento ridotto
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fx-float::after { animation: none; }
  .fx-toast { animation-duration: .01ms !important; }
  html.fx-vt-wipe::view-transition-new(root),
  html.fx-theme-vt::view-transition-new(root) { animation: none; }
}