/* ╔══════════════════════════════════════════════════════════════

   TOBIA BASKET — BUNDLE FINALE

   Contiene: v2 base + modal news + sponsor minimal

   Utilizzo: <link rel="stylesheet" href="tobia-bundle.css">

             (dopo lo <style> originale)

   ╚══════════════════════════════════════════════════════════════ */



/* ═══════════════════════════════════════════════════════════

   TOKENS AGGIORNATI

═══════════════════════════════════════════════════════════ */

:root {

  --orange:        #F5730A;

  --orange-light:  #FF8C2A;

  --orange-dark:   #C45D00;

  --blue:          #0A2A6E;

  --blue-mid:      #0D3A9E;

  --blue-light:    #1A4FC0;

  --dark:          #06101D;

  --off-white:     #F5F4F1;

  --white:         #FFFFFF;



  /* Gradient tokens */

  --g-orange:  linear-gradient(135deg, #FF6A00 0%, #F5730A 60%, #C45D00 100%);

  --g-blue:    linear-gradient(135deg, #1A4FC0 0%, #0A2A6E 100%);

  --g-dark:    linear-gradient(160deg, #06101D 0%, #0B1E3D 50%, #06101D 100%);



  /* Shadows colorate */

  --s-orange:  0 8px 32px rgba(245,115,10,0.5);

  --s-orange2: 0 20px 60px rgba(245,115,10,0.35);

  --s-blue:    0 8px 32px rgba(10,42,110,0.4);

  --s-card:    0 2px 12px rgba(0,0,0,0.08), 0 8px 40px rgba(0,0,0,0.06);

  --s-card-h:  0 4px 24px rgba(0,0,0,0.12), 0 20px 60px rgba(0,0,0,0.12);



  /* Raggi moderni */

  --r:    10px;

  --r-lg: 20px;

  --r-xl: 28px;



  /* Easing */

  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition: all 0.32s var(--ease);

}



/* ═══════════════════════════════════════════════════════════

   GRAIN TEXTURE (atmoshfera cinematic, opacità micro)

═══════════════════════════════════════════════════════════ */

body::after {

  content: '';

  position: fixed;

  inset: 0;

  z-index: 9998;

  pointer-events: none;

  opacity: 0.03;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  background-size: 160px 160px;

}



/* ═══════════════════════════════════════════════════════════

   NAV — glassmorphism professionale

═══════════════════════════════════════════════════════════ */

.nav.scrolled {

  background: rgba(6,16,29,0.88);

  backdrop-filter: blur(28px) saturate(180%);

  -webkit-backdrop-filter: blur(28px) saturate(180%);

  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 8px 40px rgba(0,0,0,0.5);

  border-bottom: 1px solid rgba(255,255,255,0.04);

}

.logo-mark {

  background: var(--g-orange);

  box-shadow: 0 0 0 2px rgba(245,115,10,0.25), var(--s-orange);

}

.nav-cta {

  background: var(--g-orange);

  border-radius: 6px;

  box-shadow: var(--s-orange);

  transition: var(--transition);

}

.nav-cta:hover {

  box-shadow: var(--s-orange2);

  transform: translateY(-2px) scale(1.03);

}

.nav-link.active { color: var(--orange); }

.nav-link.active::after { transform: scaleX(1); }



/* ═══════════════════════════════════════════════════════════

   ██████████  HERO — REDESIGN TOTALE  ██████████

═══════════════════════════════════════════════════════════ */



.hero {

  min-height: 100vh;

  background: var(--dark);

  position: relative;

  overflow: hidden;

  display: flex;

  flex-direction: column;

}



/* ── BG: spotlight + mesh ── */

.hero-bg {

  background:

    radial-gradient(ellipse 90% 90% at 65% 40%, rgba(10,42,110,0.55) 0%, transparent 55%),

    radial-gradient(ellipse 50% 60% at 15% 70%, rgba(245,115,10,0.10) 0%, transparent 50%),

    radial-gradient(ellipse 70% 60% at 85% 85%, rgba(245,115,10,0.08) 0%, transparent 50%),

    linear-gradient(155deg, #06101D 0%, #091730 35%, #0D3A9E 65%, #06101D 100%);

  animation: heroBreathe 14s ease-in-out infinite alternate;

}

@keyframes heroBreathe {

  0%   { filter: brightness(1)   hue-rotate(0deg);  }

  100% { filter: brightness(1.08) hue-rotate(3deg); }

}



/* ── DIAGONALE arancione — il segno distintivo ── */

.hero::before {

  content: '';

  position: absolute;

  top: -20%;

  right: -5%;

  width: 56%;

  height: 160%;

  background: linear-gradient(

    180deg,

    rgba(245,115,10,0.0)  0%,

    rgba(245,115,10,0.06) 30%,

    rgba(245,115,10,0.12) 50%,

    rgba(245,115,10,0.06) 70%,

    rgba(245,115,10,0.0)  100%

  );

  transform: skewX(-14deg);

  pointer-events: none;

  z-index: 1;

}



/* ── ARCO da campo da basket ── */

.hero::after {

  content: '';

  position: absolute;

  right: -12%;

  top: 50%;

  transform: translateY(-50%);

  width: 70vw;

  height: 70vw;

  max-width: 820px;

  max-height: 820px;

  border-radius: 50%;

  border: 1px solid rgba(245,115,10,0.12);

  box-shadow:

    0 0 0 40px rgba(245,115,10,0.035),

    0 0 0 80px rgba(245,115,10,0.02),

    0 0 0 130px rgba(10,42,110,0.06);

  pointer-events: none;

  z-index: 1;

}



/* ── LOGO watermark ── */

.hero-pattern {

  position: absolute;

  right: 4%;

  top: 50%;

  transform: translateY(-50%);

  width: 42%;

  max-width: 560px;

  opacity: 0.07;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 1;

  filter: blur(0px);

  pointer-events: none;

}

.hero-pattern img {

  width: 100%;

  filter: brightness(10);

}



/* ── Linee diagonali (texture destra) ── */

.hero-lines {

  width: 50%;

  right: 0;

  opacity: 0.04;

  background: repeating-linear-gradient(

    50deg,

    transparent 0px, transparent 44px,

    rgba(245,115,10,1) 44px, rgba(245,115,10,1) 45px

  );

  z-index: 1;

}



/* ── Pallone: molto più visibile ── */

.hero-ball {

  position: absolute;

  right: 6%;

  top: 50%;

  transform: translateY(-50%);

  width: min(580px, 52vw);

  height: min(580px, 52vw);

  border-radius: 50%;

  background:

    radial-gradient(circle at 30% 28%, #FF9E50 0%, #F5730A 28%, #C45D00 55%, #7A3900 80%, #2A1100 100%);

  opacity: 0.22;

  z-index: 1;

  filter: blur(1px);

  animation: ballFloat 11s ease-in-out infinite;

}

@keyframes ballFloat {

  0%, 100% { transform: translateY(-50%) scale(1)    rotate(0deg);   }

  35%       { transform: translateY(-54%) scale(1.02) rotate(5deg);   }

  70%       { transform: translateY(-47%) scale(0.99) rotate(-4deg);  }

}



/* ── CONTENT ── */

.hero-content {

  position: relative;

  z-index: 3;

  flex: 1;

  display: flex;

  flex-direction: column;

  justify-content: center;

  max-width: 1400px;

  margin: 0 auto;

  width: 100%;

  padding: calc(var(--nav-h) + 80px) 48px 160px;

}



/* Eyebrow: con linea più lunga e spessa */

.hero-eyebrow {

  display: flex;

  align-items: center;

  gap: 16px;

  margin-bottom: 28px;

  animation: slideUp 0.9s var(--ease) 0.15s both;

}

.hero-eyebrow-line {

  width: 56px;

  height: 3px;

  background: var(--g-orange);

  border-radius: 2px;

  flex-shrink: 0;

}

.hero-eyebrow-text {

  font-family: var(--font-heading);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 5px;

  text-transform: uppercase;

  color: var(--orange-light);

}



/* TITOLO — immenso, visivamente dominante */

.hero-title {

  font-family: var(--font-display);

  font-size: clamp(72px, 12.5vw, 160px);

  line-height: 0.84;

  letter-spacing: 6px;

  text-transform: uppercase;

  color: var(--white);

  margin-bottom: 0;

  animation: slideUp 0.9s var(--ease) 0.3s both;

  max-width: 58vw;

}



/* "TOBIA" — outline stroke con glow */

.hero-title span {

  display: block;

  color: transparent;

  -webkit-text-stroke: 2.5px var(--orange);

  filter: drop-shadow(0 0 30px rgba(245,115,10,0.5))

          drop-shadow(0 0 80px rgba(245,115,10,0.2));

  letter-spacing: 8px;

}



/* "BASKET" — pieno, bianco */

.hero-title strong {

  display: block;

  color: var(--white);

  text-shadow:

    0 0 120px rgba(10,42,110,0.5),

    0 4px 60px rgba(0,0,0,0.3);

}



/* Sottotitolo */

.hero-sub {

  font-family: var(--font-body);

  font-size: clamp(17px, 1.8vw, 20px);

  font-weight: 300;

  color: rgba(255,255,255,0.6);

  max-width: 460px;

  line-height: 1.65;

  margin-top: 28px;

  margin-bottom: 48px;

  animation: slideUp 0.9s var(--ease) 0.5s both;

  border-left: 3px solid var(--orange);

  padding-left: 20px;

}



/* CTA buttons */

.hero-actions {

  display: flex;

  gap: 16px;

  flex-wrap: wrap;

  animation: slideUp 0.9s var(--ease) 0.65s both;

}



.hero-actions .btn--primary,

.hero-actions .btn.btn--primary {

  background: var(--g-orange);

  box-shadow: var(--s-orange);

  border-radius: 6px;

  font-size: 13px;

  letter-spacing: 2.5px;

  padding: 16px 40px;

  position: relative;

  overflow: hidden;

}

.hero-actions .btn--primary::before {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,0.2) 50%, transparent 75%);

  transform: translateX(-100%);

  transition: transform 0.6s var(--ease);

}

.hero-actions .btn--primary:hover::before { transform: translateX(100%); }

.hero-actions .btn--primary:hover {

  box-shadow: var(--s-orange2);

  transform: translateY(-3px) scale(1.02);

}



.hero-actions .btn--secondary,

.hero-actions .btn.hero-iscriviti {

  background: rgba(255,255,255,0.06) !important;

  border: 1.5px solid rgba(255,255,255,0.2) !important;

  color: var(--white) !important;

  backdrop-filter: blur(12px);

  border-radius: 6px;

  font-family: var(--font-heading);

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 2.5px;

  text-transform: uppercase;

  padding: 16px 40px;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  transition: var(--transition);

}

.hero-actions .btn--secondary:hover,

.hero-actions .btn.hero-iscriviti:hover {

  background: rgba(255,255,255,0.14) !important;

  border-color: rgba(255,255,255,0.5) !important;

  transform: translateY(-3px);

}



/* ── STATS BAR — glassmorphism totale ── */

.hero-stats {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  z-index: 3;

  display: flex;

  gap: 0;

  padding: 0;

  background: transparent;

  border-top: none;

  animation: slideUp 0.9s var(--ease) 0.85s both;

}



/* Redefine stat bar as a glass strip */

.hero-stats {

  background: rgba(6,16,29,0.7);

  backdrop-filter: blur(20px) saturate(160%);

  -webkit-backdrop-filter: blur(20px) saturate(160%);

  border-top: 1px solid rgba(255,255,255,0.07);

  padding: 28px 48px;

}



.hero-stat-item {

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 6px;

  padding: 0 24px;

  border-right: 1px solid rgba(255,255,255,0.07);

  transition: var(--transition);

}

.hero-stat-item:first-child { padding-left: 0; }

.hero-stat-item:last-child  { border-right: none; }

.hero-stat-item:hover { transform: translateY(-2px); }



.hero-stat-num {

  font-family: var(--font-display);

  font-size: 50px;

  line-height: 1;

  letter-spacing: 3px;

  background: var(--g-orange);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.hero-stat-label {

  font-family: var(--font-heading);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 3px;

  text-transform: uppercase;

  color: rgba(255,255,255,0.35);

}



/* Scroll indicator */

.hero-scroll {

  bottom: 48px;

  right: 48px;

}

.hero-scroll span {

  color: rgba(255,255,255,0.3);

  font-size: 10px;

  letter-spacing: 4px;

}



/* ═══════════════════════════════════════════════════════════

   TICKER — striscia atletica

═══════════════════════════════════════════════════════════ */

.ticker {

  background: var(--g-orange);

  height: 48px;

  position: relative;

  box-shadow: 0 4px 24px rgba(245,115,10,0.3), 0 1px 0 rgba(255,255,255,0.1) inset;

}

.ticker-label {

  background: var(--dark);

  font-size: 10px;

  letter-spacing: 4px;

  padding: 0 24px;

}

.ticker-item {

  font-size: 12px;

  letter-spacing: 2.5px;

}



/* ═══════════════════════════════════════════════════════════

   SEZIONI GENERALI — ritmo e spazio

═══════════════════════════════════════════════════════════ */

.section { padding: 96px 0; }



/* Sezione bianca — ombra sottile nella section-title */

.section-title {

  line-height: 0.9;

  letter-spacing: 2px;

}



/* Label / eyebrow — punto arancione + spaziatura */

.label {

  display: flex;

  align-items: center;

  gap: 10px;

  color: var(--orange);

  letter-spacing: 4px;

  font-size: 11px;

  margin-bottom: 10px;

}

.label::before {

  content: '';

  width: 20px;

  height: 2px;

  background: var(--g-orange);

  border-radius: 2px;

  flex-shrink: 0;

  display: block;

}

.label--white { color: rgba(255,255,255,0.55); }

.label--white::before { background: rgba(255,255,255,0.3); }



/* Section header — linea arancione sotto il titolo */

.section-header {

  margin-bottom: 52px;

  position: relative;

}

.section-header::after {

  content: '';

  position: absolute;

  bottom: -20px;

  left: 0;

  width: 60px;

  height: 3px;

  background: var(--g-orange);

  border-radius: 2px;

}



/* ═══════════════════════════════════════════════════════════

   NEXT GAME — card atletica

═══════════════════════════════════════════════════════════ */

.next-game {

  background:

    radial-gradient(ellipse 80% 100% at 50% 120%, rgba(21,101,255,0.15) 0%, transparent 60%),

    linear-gradient(160deg, var(--blue-mid) 0%, var(--blue) 50%, var(--dark) 100%);

  position: relative;

  overflow: hidden;

}

.next-game::before {

  content: '';

  position: absolute;

  inset: 0;

  background: repeating-linear-gradient(

    90deg,

    transparent 0px, transparent 60px,

    rgba(255,255,255,0.015) 60px, rgba(255,255,255,0.015) 61px

  );

  pointer-events: none;

}

.countdown-item {

  background: rgba(255,255,255,0.07);

  border: 1px solid rgba(255,255,255,0.1);

  border-radius: var(--r);

  transition: var(--transition);

  padding: 14px 22px;

  min-width: 78px;

}

.countdown-item:hover {

  background: rgba(255,255,255,0.12);

  border-color: rgba(245,115,10,0.4);

  transform: translateY(-3px);

}

.countdown-num {

  font-size: 40px;

  background: var(--g-orange);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}

.ng-team-logo.home {

  background: var(--g-orange);

  box-shadow: 0 0 0 5px rgba(245,115,10,0.15), var(--s-orange);

}



/* ═══════════════════════════════════════════════════════════

   BUTTONS — sistema coerente

═══════════════════════════════════════════════════════════ */

.btn {

  border-radius: var(--r);

  font-size: 13px;

  letter-spacing: 2px;

  padding: 14px 32px;

  transition: var(--transition);

}

.btn--primary {

  background: var(--g-orange);

  box-shadow: var(--s-orange);

  border-radius: var(--r);

  overflow: hidden;

  position: relative;

}

.btn--primary:hover {

  box-shadow: var(--s-orange2);

  transform: translateY(-3px) scale(1.02);

}

.btn--outline-blue  { border-radius: var(--r); border-width: 1.5px; }

.btn--ghost-orange  { border-radius: var(--r); border-width: 1.5px; }

.btn--outline-blue:hover { background: var(--g-blue); border-color: transparent; color: var(--white); box-shadow: var(--s-blue); }

.btn--ghost-orange:hover { background: var(--g-orange); border-color: transparent; box-shadow: var(--s-orange); }



/* ═══════════════════════════════════════════════════════════

   NEWS CARDS — editoriali, taglienti

═══════════════════════════════════════════════════════════ */

.news-card {

  border-radius: var(--r-lg);

  box-shadow: var(--s-card);

  border: 1px solid rgba(0,0,0,0.05);

  transition: var(--transition);

  overflow: hidden;

}

.news-card:hover {

  transform: translateY(-10px) scale(1.005);

  box-shadow: var(--s-card-h);

  border-color: rgba(245,115,10,0.12);

}

.news-cat-badge {

  background: var(--g-orange);

  border-radius: 999px;

  padding: 5px 14px;

  font-size: 9px;

  letter-spacing: 2px;

}

.news-title { font-size: 21px; }

.news-card:hover .news-title { color: var(--orange); }



.news-card-small {

  border-radius: var(--r);

  border: none;

  border-left: 3px solid transparent;

  transition: var(--transition);

  padding: 14px;

}

.news-card-small:hover {

  border-left-color: var(--orange);

  transform: translateX(8px);

  box-shadow: var(--s-card);

}

.news-card-small:hover .news-card-small-title { color: var(--orange); }



/* ═══════════════════════════════════════════════════════════

   SECTION--DARK — più drammatica

═══════════════════════════════════════════════════════════ */

.section--dark {

  background:

    radial-gradient(ellipse 55% 70% at 15% 50%, rgba(245,115,10,0.07) 0%, transparent 55%),

    radial-gradient(ellipse 50% 70% at 85% 50%, rgba(10,42,110,0.15) 0%, transparent 55%),

    var(--dark);

  position: relative;

}

/* Bordo superiore luminoso */

.section--dark::before {

  content: '';

  position: absolute;

  top: 0; left: 0; right: 0;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(245,115,10,0.4) 30%, rgba(245,115,10,0.4) 70%, transparent);

  pointer-events: none;

}



/* ═══════════════════════════════════════════════════════════

   SECTION--GRAY — più caldo

═══════════════════════════════════════════════════════════ */

.section--gray { background: #F4F3F0; }



/* ═══════════════════════════════════════════════════════════

   SECTION--BLUE — profondo

═══════════════════════════════════════════════════════════ */

.section--blue {

  background:

    radial-gradient(ellipse 70% 80% at 85% 50%, rgba(26,79,192,0.6) 0%, transparent 55%),

    linear-gradient(160deg, var(--blue-mid) 0%, var(--blue) 100%);

}



/* ═══════════════════════════════════════════════════════════

   RISULTATI — cards incisive

═══════════════════════════════════════════════════════════ */

.result-item {

  border-radius: var(--r);

  border-left-width: 4px;

  background: var(--white);

  box-shadow: none;

  border: 1px solid rgba(0,0,0,0.06);

  border-left: 4px solid var(--gray-300, #ccc);

  transition: var(--transition);

}

.result-item:hover {

  box-shadow: var(--s-card);

  transform: translateY(-3px);

  border-color: transparent;

  border-left-color: var(--orange);

}

.result-item.vittoria  { border-left-color: #22C55E; }

.result-item.sconfitta { border-left-color: #EF4444; }

.result-item:hover { border-left-color: inherit; }



.result-league-bar {

  background: linear-gradient(90deg, var(--blue) 0%, var(--blue-mid) 100%);

}

.result-score .win {

  background: var(--g-orange);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}

.result-score { font-size: 44px; }



.result-badge.vittoria  { background: rgba(34,197,94,0.1);  color: #16A34A; border: 1px solid rgba(34,197,94,0.25); }

.result-badge.vittoria::before  { background: #22C55E; }

.result-badge.sconfitta { background: rgba(239,68,68,0.1);  color: #DC2626; border: 1px solid rgba(239,68,68,0.25); }

.result-badge.sconfitta::before { background: #EF4444; }



/* ═══════════════════════════════════════════════════════════

   TEAM CARDS — impatto atletico

═══════════════════════════════════════════════════════════ */

.team-card {

  border-radius: var(--r-lg);

  overflow: hidden;

  border: 1px solid rgba(255,255,255,0.07);

  transition: var(--transition);

}

.team-card:hover {

  transform: translateY(-12px);

  box-shadow:

    0 40px 80px rgba(10,42,110,0.5),

    0 0 0 1px rgba(245,115,10,0.3);

}

.team-card-visual {

  background: linear-gradient(155deg, var(--blue-mid) 0%, var(--dark) 100%);

  height: 220px;

  position: relative;

  overflow: hidden;

}

/* Glow al hover della card */

.team-card:hover .team-card-visual::after {

  content: '';

  position: absolute;

  bottom: -30%;

  left: 50%;

  transform: translateX(-50%);

  width: 240px;

  height: 240px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(245,115,10,0.25) 0%, transparent 70%);

  animation: teamGlow 0.6s var(--ease) both;

}

@keyframes teamGlow {

  from { opacity: 0; transform: translateX(-50%) scale(0.4); }

  to   { opacity: 1; transform: translateX(-50%) scale(1);   }

}

.team-card-body {

  background: linear-gradient(180deg, var(--blue) 0%, rgba(10,42,110,0.95) 100%);

}

.team-card-badge.orange {

  height: 4px;

  background: var(--g-orange);

  box-shadow: 0 3px 16px rgba(245,115,10,0.6);

}

.team-info-num {

  font-size: 26px;

  background: var(--g-orange);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



/* ═══════════════════════════════════════════════════════════

   YOUTH SECTION — blocco impattante

═══════════════════════════════════════════════════════════ */

.youth-banner {

  background:

    radial-gradient(ellipse 60% 80% at 85% 30%, rgba(245,115,10,0.15) 0%, transparent 55%),

    radial-gradient(ellipse 50% 60% at 15% 70%, rgba(10,42,110,0.3) 0%, transparent 55%),

    var(--dark);

}



/* ═══════════════════════════════════════════════════════════

   SOCIAL CARDS

═══════════════════════════════════════════════════════════ */

.social-card {

  border-radius: var(--r-lg);

  border-top: none;

  border-left: 4px solid var(--orange);

  box-shadow: var(--s-card);

  transition: var(--transition);

}

.social-card:hover {

  transform: translateY(-8px);

  box-shadow: var(--s-card-h);

}



/* ═══════════════════════════════════════════════════════════

   GALLERIA — reveal cinematico

═══════════════════════════════════════════════════════════ */

.gallery-item {

  border-radius: var(--r);

  overflow: hidden;

  transition: var(--transition);

}

.gallery-item:hover {

  transform: scale(1.025);

  z-index: 3;

  box-shadow: 0 20px 60px rgba(0,0,0,0.4);

}

.gallery-overlay {

  background: linear-gradient(

    to top,

    rgba(6,16,29,0.9) 0%,

    rgba(6,16,29,0.35) 45%,

    transparent 100%

  );

}



/* ═══════════════════════════════════════════════════════════

   SPONSOR BAR — azzerato, gestito dalla sezione sponsor

═══════════════════════════════════════════════════════════ */

.sponsor-logo-placeholder {

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

  border-radius: 0;

  transition: opacity 0.28s ease;

}

.sponsor-logo-placeholder:hover {

  background: transparent !important;

  box-shadow: none !important;

  transform: none;

}



/* ═══════════════════════════════════════════════════════════

   PAGE HEROES (sottopagine)

═══════════════════════════════════════════════════════════ */

.page-hero {

  background:

    radial-gradient(ellipse 70% 80% at 15% 60%, rgba(26,79,192,0.14) 0%, transparent 55%),

    radial-gradient(ellipse 40% 50% at 85% 25%, rgba(245,115,10,0.09) 0%, transparent 50%),

    var(--dark);

}

.page-hero::before {

  content: '';

  position: absolute;

  inset: 0;

  background: repeating-linear-gradient(

    0deg,

    transparent 0px, transparent 72px,

    rgba(255,255,255,0.012) 72px, rgba(255,255,255,0.012) 73px

  );

  pointer-events: none;

}

.page-title {

  font-size: clamp(52px, 8vw, 104px);

  letter-spacing: 6px;

}



/* Tab bar */

.tab-bar {

  background: linear-gradient(90deg, var(--blue-mid) 0%, var(--blue) 100%);

  border-bottom: 1px solid rgba(255,255,255,0.08);

}

.tab-btn.active {

  color: var(--orange);

  border-bottom-color: var(--orange);

}

.tab-btn:hover { color: rgba(255,255,255,0.92); }



/* ═══════════════════════════════════════════════════════════

   FOOTER — profondo e curato

═══════════════════════════════════════════════════════════ */

footer {

  background:

    radial-gradient(ellipse 50% 60% at 80% 0%, rgba(10,42,110,0.12) 0%, transparent 50%),

    linear-gradient(180deg, var(--dark) 0%, #030810 100%);

  border-top: 1px solid rgba(255,255,255,0.05);

}

.footer-desc { color: rgba(255,255,255,0.36); }

.social-btn {

  border-radius: var(--r);

  transition: var(--transition);

}

.social-btn:hover {

  background: var(--g-orange);

  border-color: transparent;

  box-shadow: var(--s-orange);

  transform: translateY(-3px) rotate(-5deg);

}

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.05); }



/* ═══════════════════════════════════════════════════════════

   MOBILE MENU — più cinematico

═══════════════════════════════════════════════════════════ */

.mobile-menu {

  background:

    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(10,42,110,0.4) 0%, transparent 60%),

    var(--dark);

}

.mobile-menu .mobile-link {

  font-size: 44px;

  letter-spacing: 4px;

  transition: var(--transition);

}

.mobile-menu .mobile-link:hover {

  color: var(--orange);

  transform: translateX(12px);

}



/* ═══════════════════════════════════════════════════════════

   SCROLL REVEAL — aggiungere classe .reveal agli elementi

   poi JS: IntersectionObserver aggiunge .revealed

═══════════════════════════════════════════════════════════ */

.reveal {

  opacity: 0;

  transform: translateY(32px);

  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);

}

.reveal.revealed {

  opacity: 1;

  transform: translateY(0);

}

.reveal:nth-child(2) { transition-delay: 0.1s; }

.reveal:nth-child(3) { transition-delay: 0.2s; }

.reveal:nth-child(4) { transition-delay: 0.3s; }

.reveal:nth-child(5) { transition-delay: 0.4s; }



/* Badge "LIVE" pulsante */

@keyframes livePulse {

  0%, 100% { box-shadow: 0 0 0 0 rgba(245,115,10,0.6); }

  50%       { box-shadow: 0 0 0 8px rgba(245,115,10,0); }

}

.live-badge { animation: livePulse 2s ease-in-out infinite; }



/* ═══════════════════════════════════════════════════════════

   PLAYER / ROSTER CARDS

═══════════════════════════════════════════════════════════ */

.player-card  { border-radius: var(--r-lg); overflow: hidden; }

.roster-card  { border-radius: var(--r-lg); overflow: hidden; }

.coach-card   { border-radius: var(--r); overflow: hidden; }



/* ═══════════════════════════════════════════════════════════

   STAT INLINE (record, classifica nelle pagine squadre)

═══════════════════════════════════════════════════════════ */

[style*="background:var(--off-white)"],

[style*="background: var(--off-white)"] {

  border-radius: var(--r) !important;

  border: 1px solid rgba(0,0,0,0.06) !important;

  box-shadow: var(--s-card) !important;

}



/* ═══════════════════════════════════════════════════════════

   VIEW ALL LINKS

═══════════════════════════════════════════════════════════ */

.view-all {

  display: flex;

  align-items: center;

  gap: 8px;

  letter-spacing: 3px;

  font-size: 11px;

  color: var(--orange);

  transition: var(--transition);

}

.view-all:hover { gap: 14px; color: var(--orange-light); }

.view-all--white { color: rgba(255,255,255,0.5); }

.view-all--white:hover { color: var(--white); }



/* ═══════════════════════════════════════════════════════════

   MOBILE — hero responsive

═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  .hero-content { padding: calc(var(--nav-h) + 48px) 24px 120px; }

  .hero-title   { font-size: clamp(60px, 18vw, 100px); max-width: 100%; }

  .hero-stats   { padding: 20px 24px; }

  .hero-stat-num { font-size: 36px; }

  .hero-ball    { display: none; }

  .hero-pattern { opacity: 0.05; width: 85%; right: -15%; }

  .hero::after  { display: none; }

  .hero::before { width: 100%; }

}



/* ═══════════════════════════════════════════════════════════

   JS SNIPPET — Incollare prima di </body>

   ────────────────────────────────────────────────────────



<script>

(function() {

  // Scroll reveal automatico

  var targets = '.news-card, .team-card, .result-item, .social-card, .section-header, .album-card, .countdown-item';

  document.querySelectorAll(targets).forEach(function(el) {

    el.classList.add('reveal');

  });

  var io = new IntersectionObserver(function(entries) {

    entries.forEach(function(e) {

      if (e.isIntersecting) {

        e.target.classList.add('revealed');

        io.unobserve(e.target);

      }

    });

  }, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });

  document.querySelectorAll('.reveal').forEach(function(el) { io.observe(el); });



  // Nav: aggiungi classe .scrolled allo scroll

  var nav = document.getElementById('mainNav');

  if (nav) {

    window.addEventListener('scroll', function() {

      nav.classList.toggle('scrolled', window.scrollY > 30);

    }, { passive: true });

  }

})();

</script>



═══════════════════════════════════════════════════════════ */





/* ═══════════════════════════════════════════════════════════

   ██  NEWS MODAL — da base a magazine di lusso

═══════════════════════════════════════════════════════════ */



/* Backdrop: più scuro e saturato */

.news-modal {

  background: rgba(6, 14, 30, 0.92);

  backdrop-filter: blur(20px) saturate(160%);

  -webkit-backdrop-filter: blur(20px) saturate(160%);

  padding: 24px;

  align-items: center;

  transition: opacity 0.35s cubic-bezier(.4,0,.2,1);

}



/* Inner container: più largo, angoli più moderni */

.news-modal-inner {

  max-width: 780px;

  border-radius: 20px;

  overflow: hidden;

  box-shadow:

    0 8px 32px rgba(0,0,0,0.4),

    0 40px 120px rgba(0,0,0,0.6),

    0 0 0 1px rgba(255,255,255,0.07);

  animation: modalIn 0.42s cubic-bezier(.34,1.30,.64,1);

}

@keyframes modalIn {

  from { opacity: 0; transform: translateY(48px) scale(.97); }

  to   { opacity: 1; transform: translateY(0) scale(1); }

}



/* Header: immagine hero molto più alta */

.news-modal-header {

  height: 280px;

  border-radius: 20px 20px 0 0;

  position: relative;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: 0;

}



/* Gradient overlay sull'immagine — testo leggibile */

.news-modal-header::after {

  content: '';

  position: absolute; inset: 0;

  background: linear-gradient(

    to bottom,

    rgba(6,14,30,0)    0%,

    rgba(6,14,30,0.2)  40%,

    rgba(6,14,30,0.82) 80%,

    rgba(6,14,30,0.96) 100%

  );

  pointer-events: none;

  z-index: 1;

}



/* Testo e badge dentro l'header (sovrapposto all'immagine) */

.news-modal-header-content {

  position: relative;

  z-index: 2;

  padding: 0 32px 28px;

  display: flex;

  flex-direction: column;

  gap: 10px;

}



/* Close button — in alto a destra, sempre visibile */

.news-modal-close {

  position: absolute;

  top: 16px; right: 16px;

  z-index: 3;

  width: 40px; height: 40px;

  border-radius: 50%;

  background: rgba(8,21,46,0.6);

  border: 1px solid rgba(255,255,255,0.18);

  color: #fff;

  font-size: 17px;

  display: flex; align-items: center; justify-content: center;

  cursor: pointer;

  transition: all 0.25s ease;

  backdrop-filter: blur(8px);

}

.news-modal-close:hover {

  background: var(--orange);

  border-color: var(--orange);

  transform: scale(1.08) rotate(90deg);

}



/* Categoria badge nell'header */

.news-modal-cat {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  font-family: var(--font-heading);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 3px;

  text-transform: uppercase;

  background: var(--orange);

  color: #fff;

  padding: 5px 14px;

  border-radius: 999px;

  width: fit-content;

  box-shadow: 0 4px 16px rgba(245,115,10,0.5);

}



/* Titolo sull'immagine */

.news-modal-header-title {

  font-family: var(--font-heading);

  font-size: 26px;

  font-weight: 800;

  line-height: 1.15;

  color: #fff;

  text-shadow: 0 2px 12px rgba(0,0,0,0.4);

}



/* Content body */

.news-modal-content {

  padding: 28px 32px 36px;

  background: var(--white);

}



/* Meta row: data + reading time */

.news-modal-meta {

  display: flex;

  align-items: center;

  gap: 20px;

  margin-bottom: 20px;

  padding-bottom: 20px;

  border-bottom: 1px solid var(--gray-100);

}

.news-modal-date {

  font-family: var(--font-heading);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 3px;

  text-transform: uppercase;

  color: var(--gray-300);

  margin-bottom: 0; /* override originale */

}

.news-modal-read-time {

  font-family: var(--font-heading);

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 2px;

  text-transform: uppercase;

  color: var(--orange);

  display: flex;

  align-items: center;

  gap: 6px;

}

.news-modal-read-time::before {

  content: '';

  width: 1px; height: 14px;

  background: var(--gray-100);

  display: block;

  margin-right: 4px;

}



/* Titolo nel body — ora è nel header, questo diventa sottotitolo/standfirst */

.news-modal-title {

  font-family: var(--font-heading);

  font-size: 15px;

  font-weight: 600;

  line-height: 1.5;

  color: var(--gray-600);

  margin-bottom: 20px;

  padding: 16px 20px;

  background: var(--off-white);

  border-left: 3px solid var(--orange);

  border-radius: 0 6px 6px 0;

}



/* Body text */

.news-modal-body-text {

  font-size: 16px;

  color: var(--gray-600);

  line-height: 1.85;

  letter-spacing: 0.01em;

}

.news-modal-body-text p + p {

  margin-top: 16px;

}



/* Footer della modal: share + CTA */

.news-modal-footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  margin-top: 28px;

  padding-top: 24px;

  border-top: 1px solid var(--gray-100);

}

.news-modal-share {

  font-family: var(--font-heading);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 2.5px;

  text-transform: uppercase;

  color: var(--gray-300);

  display: flex;

  align-items: center;

  gap: 12px;

}

.share-link {

  width: 36px; height: 36px;

  border-radius: 50%;

  background: var(--off-white);

  border: 1px solid var(--gray-100);

  display: flex; align-items: center; justify-content: center;

  font-size: 15px;

  cursor: pointer;

  transition: all 0.25s ease;

  text-decoration: none;

}

.share-link:hover {

  background: var(--orange);

  border-color: var(--orange);

  transform: scale(1.1);

}

.news-modal-cta {

  font-family: var(--font-heading);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 2px;

  text-transform: uppercase;

  color: var(--orange);

  cursor: pointer;

  transition: gap 0.2s;

  display: flex;

  align-items: center;

  gap: 6px;

}

.news-modal-cta:hover { gap: 12px; }



/* Progress bar in cima alla modal mentre si scorre */

.news-modal-progress {

  position: sticky;

  top: 0;

  left: 0; right: 0;

  height: 3px;

  background: var(--gray-100);

  z-index: 10;

}

.news-modal-progress-bar {

  height: 100%;

  background: linear-gradient(90deg, #FF6A00, var(--orange));

  width: 0%;

  transition: width 0.1s linear;

  border-radius: 0 2px 2px 0;

}



/* Mobile responsive */

@media (max-width: 768px) {

  .news-modal { padding: 0; align-items: flex-end; }

  .news-modal-inner {

    border-radius: 24px 24px 0 0;

    max-height: 94vh;

  }

  .news-modal-header { height: 220px; }

  .news-modal-header-content { padding: 0 20px 22px; }

  .news-modal-header-title { font-size: 20px; }

  .news-modal-content { padding: 22px 20px 28px; }

  .news-modal-footer { flex-direction: column; align-items: flex-start; }

/* ═══════════════════════════════════════════════════════════

   NEWS CARD — micro-upgrades compatibili con v2

═══════════════════════════════════════════════════════════ */



/* "Leggi →" appare sull'hover della featured */

.news-card .news-body::after {

  content: 'Leggi →';

  display: block;

  margin-top: 16px;

  font-family: var(--font-heading);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 3px;

  text-transform: uppercase;

  color: var(--orange);

  opacity: 0;

  transform: translateX(-6px);

  transition: all 0.25s cubic-bezier(.4,0,.2,1);

}

.news-card:hover .news-body::after {

  opacity: 1;

  transform: translateX(0);

}



/* Sidebar card: bordo sinistro al hover */

.news-card-small {

  border-left: 3px solid transparent;

  transition: all 0.28s cubic-bezier(.4,0,.2,1);

}

.news-card-small:hover {

  border-left-color: var(--orange);

  transform: translateX(6px);

  box-shadow: var(--shadow-card);

}





/* Sezione: bianca, ariosa */

.section--gray:has(.sponsors-grid),

.section:has(.sponsors-grid) {

  background: var(--white, #fff);

}

.section--gray:has(.sponsors-grid) .section-title,

.section:has(.sponsors-grid) .section-title {

  color: var(--blue, #0A2A6E);

}



/* Reset totale della griglia */

/* ═══════════════════════════════════════════════════════════

   ██  SPONSOR — LOGO WALL PURO CSS (no JS needed)

   Struttura: .sponsors-grid > 6× .sponsor-card

   Il primo è lo sponsor principale, gli altri la fila loghi.

═══════════════════════════════════════════════════════════ */



/* Sezione bianca */

.section--gray:has(.sponsors-grid),

.section:has(.sponsors-grid) {

  background: #ffffff !important;

}



/* Azzera tutti gli stili base delle card nella griglia */

.sponsors-grid .sponsor-card,

.sponsors-grid .sponsor-card:hover {

  border:        none !important;

  background:    transparent !important;

  box-shadow:    none !important;

  border-radius: 0 !important;

  padding:       0 !important;

  min-height:    0 !important;

  transform:     none !important;

}



/* Azzera tutti i placeholder */

.sponsors-grid .sponsor-logo-placeholder,

.sponsors-grid .sponsor-logo-placeholder:hover {

  background: transparent !important;

  border:     none !important;

  box-shadow: none !important;

  transform:  none !important;

  padding:    0 !important;

}



/* ── GRIGLIA PRINCIPALE ──

   Riga 1: Baumann full-width

   Riga 2: 5 loghi in colonne uguali

   Funziona senza nessun wrapper JS. */

.sponsors-grid {

  display:               grid !important;

  grid-template-columns: repeat(5, 1fr) !important;

  grid-template-rows:    auto auto !important;

  gap:                   0 !important;

  margin-top:            48px !important;

  align-items:           center !important;

}



/* ── SPONSOR PRINCIPALE (Baumann) ── */

.sponsors-grid > .sponsor-card:first-child {

  grid-column:     1 / -1 !important;          /* occupa tutta la riga 1 */

  display:         flex !important;

  flex-direction:  column !important;

  align-items:     center !important;

  justify-content: center !important;

  gap:             12px !important;

  padding:         0 0 44px !important;

  cursor:          pointer !important;

  border-bottom:   1px solid #E8E8E6 !important;

  margin-bottom:   0 !important;

}



.sponsors-grid > .sponsor-card:first-child .sponsor-logo-placeholder {

  width:  auto !important;

  height: auto !important;

}

.sponsors-grid > .sponsor-card:first-child .sponsor-logo-placeholder img {

  max-height:   72px !important;

  max-width:    280px !important;

  width:        auto !important;

  height:       auto !important;

  object-fit:   contain !important;

  filter:       none !important;

  opacity:      0.72 !important;

  display:      block !important;

  transition:   opacity 0.25s ease !important;

}

.sponsors-grid > .sponsor-card:first-child:hover .sponsor-logo-placeholder img {

  opacity: 1 !important;

}

/* Nasconde il nome, mostra solo il tipo "Sponsor Principale" */

.sponsors-grid > .sponsor-card:first-child .sponsor-name {

  display: none !important;

}

.sponsors-grid > .sponsor-card:first-child .sponsor-type {

  font-family:    var(--font-heading, 'Barlow Condensed', sans-serif) !important;

  font-size:      9px !important;

  font-weight:    700 !important;

  letter-spacing: 3.5px !important;

  text-transform: uppercase !important;

  color:          var(--orange, #F5730A) !important;

  background:     transparent !important;

  border:         none !important;

  padding:        0 !important;

  box-shadow:     none !important;

}

.sponsors-grid > .sponsor-card:first-child .sponsor-type::before {

  display: none !important;

}



/* ── Divisore "PARTNER" tra riga 1 e riga 2 ──

   Pseudo-element sul secondo figlio, così appare

   sopra la riga dei loghi senza HTML extra. */

.sponsors-grid > .sponsor-card:nth-child(2) {

  position: relative !important;

}

.sponsors-grid > .sponsor-card:nth-child(2)::before {

  content:      'Partner' !important;

  position:     absolute !important;

  top:          -28px !important;

  left:         50% !important;

  transform:    translateX(-50%) !important;

  font-family:  var(--font-heading, 'Barlow Condensed', sans-serif) !important;

  font-size:    9px !important;

  font-weight:  700 !important;

  letter-spacing: 4px !important;

  text-transform: uppercase !important;

  color:        #BBBBBB !important;

  white-space:  nowrap !important;

  background:   #fff !important;

  padding:      0 12px !important;

  z-index:      1 !important;

}

/* Linea orizzontale sopra i loghi secondari */

.sponsors-grid > .sponsor-card:nth-child(2),

.sponsors-grid > .sponsor-card:nth-child(3),

.sponsors-grid > .sponsor-card:nth-child(4),

.sponsors-grid > .sponsor-card:nth-child(5),

.sponsors-grid > .sponsor-card:nth-child(6) {

  margin-top: 36px !important;

}



/* ── LOGHI SECONDARI (figli 2-6) ──

   Ogni logo: flex centrato, separatore verticale, grayscale→colore */

.sponsors-grid > .sponsor-card:not(:first-child) {

  display:         flex !important;

  align-items:     center !important;

  justify-content: center !important;

  padding:         16px 28px !important;

  cursor:          pointer !important;

  border-right:    1px solid #E8E8E6 !important;

  transition:      opacity 0.2s ease !important;

}

.sponsors-grid > .sponsor-card:last-child {

  border-right: none !important;

}



/* Logo img: grayscale desaturato di default */

.sponsors-grid > .sponsor-card:not(:first-child) .sponsor-logo-placeholder img {

  max-height:  44px !important;

  max-width:   130px !important;

  width:       auto !important;

  height:      auto !important;

  object-fit:  contain !important;

  filter:      grayscale(1) !important;

  opacity:     0.38 !important;

  display:     block !important;

  transition:  filter 0.28s ease, opacity 0.28s ease !important;

}

/* Hover: colori accesi */

.sponsors-grid > .sponsor-card:not(:first-child):hover .sponsor-logo-placeholder img {

  filter:  grayscale(0) !important;

  opacity: 1 !important;

}



/* Nasconde testo sotto i loghi secondari */

.sponsors-grid > .sponsor-card:not(:first-child) .sponsor-name,

.sponsors-grid > .sponsor-card:not(:first-child) .sponsor-type {

  display: none !important;

}



/* ── RESPONSIVE ── */

@media (max-width: 768px) {

  .sponsors-grid {

    grid-template-columns: repeat(3, 1fr) !important;

  }

  .sponsors-grid > .sponsor-card:nth-child(3),

  .sponsors-grid > .sponsor-card:nth-child(6) {

    border-right: none !important;

  }

}

@media (max-width: 480px) {

  .sponsors-grid {

    grid-template-columns: repeat(2, 1fr) !important;

  }

  .sponsors-grid > .sponsor-card:nth-child(2),

  .sponsors-grid > .sponsor-card:nth-child(4),

  .sponsors-grid > .sponsor-card:nth-child(6) {

    border-right: none !important;

  }

  .sponsors-grid > .sponsor-card:not(:first-child) {

    padding: 14px 16px !important;

  }

}