/* ===============================================
   TEMA HALLOWEEN ORCHIDEA CLUB – Redesign Completo
   =============================================== */

@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Poppins:wght@300;500;700&display=swap');

:root {
  --violet: #7a3cff;
  --pumpkin: #ff7a18;
  --pumpkin-2: #ffb45b;
  --night: #0a0a0f;
  --web: rgba(255,255,255,0.25);
  --nav-h: 80px;
}

/* ---------------- BASE ---------------- */
body.halloween {
  background: radial-gradient(circle at 50% 10%, var(--night) 0%, #000 90%);
  color: #eee;
  font-family: 'Poppins', sans-serif;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: 'Creepster', cursive;
  color: var(--pumpkin);
  text-shadow: 0 0 10px rgba(255,122,24,0.6);
}

/* Navbar */
header {
  background: rgba(0, 0, 0, 0.9);
  box-shadow: 0 10px 25px rgba(122, 60, 255, 0.3);
  backdrop-filter: blur(4px);
  z-index: 99;
}

/* HERO SECTION */
.hero-halloween {
  position: relative;
  overflow: hidden;
  color: #fff;
}

.hero-halloween video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.5);
  z-index: -3;
}

/* Nebbia */
.fog {
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 50% at 50% 30%, rgba(255,255,255,0.08), transparent 70%);
  mix-blend-mode: screen;
  animation: fog 12s ease-in-out infinite alternate;
  z-index: -2;
}

/* Bagliori */
.glow {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.4;
  pointer-events: none;
  z-index: -1;
}

.glow-1 {
  background: var(--violet);
  top: 20%;
  left: 10%;
  animation: float 12s ease-in-out infinite;
}

.glow-2 {
  background: var(--pumpkin);
  bottom: 15%;
  right: 15%;
  animation: float 14s ease-in-out infinite reverse;
}

/* Contenuto hero */
.hero-content {
  text-align: center;
  padding: calc(var(--nav-h) + 2rem) 1rem 4rem;
  z-index: 5;
  position: relative;
}

.hero-content h1 span {
  display: inline-block;
  transform: rotate(-5deg);
}

.hero-cta {
  margin-top: 1rem;
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Bottoni */
.btn-halloween {
  background: linear-gradient(180deg, var(--violet), #5120ff);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(122, 60, 255, 0.3);
  padding: 0.9rem 1.8rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  transition: all 0.25s ease;
}
.btn-halloween:hover { transform: translateY(-3px); }

.btn-halloween.orange {
  background: linear-gradient(180deg, var(--pumpkin), var(--pumpkin-2));
  color: #2b1200;
  box-shadow: 0 6px 20px rgba(255,122,24,0.4);
}
.btn-halloween.orange:hover { box-shadow: 0 8px 26px rgba(255,122,24,0.6); }

/* Ragnatele e Ragni */
.halloween-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

.spider {
  --x: 10%;
  position: fixed;
  top: var(--nav-h);
  left: var(--x);
  width: 26px;
  height: 26px;
  animation: spiderDrop 8s ease-in-out infinite;
}
.spider.s2 { --x: 50%; animation-delay: 1.5s; }
.spider.s3 { --x: 80%; animation-delay: 3s; }

.spider .thread {
  position: absolute;
  top: calc(-1 * var(--nav-h));
  left: 50%;
  width: 1px;
  height: 260px;
  background: linear-gradient(180deg, var(--web), transparent 90%);
  transform: translateX(-50%);
}
.spider .body {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 26px;
  height: 26px;
  background: #111;
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: inset 0 -6px 0 rgba(255,122,24,0.5), 0 0 10px rgba(122,60,255,0.25);
}
.spider .body::before {
  content: "";
  position: absolute;
  bottom: 16px;
  left: 50%;
  width: 18px;
  height: 18px;
  background: #111;
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: inset 0 -4px 0 rgba(255,122,24,0.4);
}
.spider .eye {
  position: absolute;
  bottom: 7px;
  width: 5px;
  height: 5px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255,255,255,0.8);
}
.spider .eye:nth-child(1) { left: 7px; }
.spider .eye:nth-child(2) { right: 7px; }

/* Pipistrelli */
.bat {
  position: fixed;
  width: 80px;
  height: auto;
  left: -12vw;
  top: 20vh;
  z-index: 60;
  fill: #000;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(122,60,255,.35)) drop-shadow(0 0 6px rgba(255,122,24,.28));
}
.bat-shape {
  transform-origin: 50% 50%;
  animation: flap 0.5s ease-in-out infinite;
}
.bat-a { animation: flyA 18s linear infinite; }
.bat-b { animation: flyB 22s linear infinite; top:30vh; transform:scale(0.8); }
.bat-c { animation: flyC 20s linear infinite; top:35vh; transform:scale(0.9); }

/* Animazioni */
@keyframes flap {
  0%,100% { transform: scaleY(1); }
  50% { transform: scaleY(0.85); }
}
@keyframes flyA {
  0% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(70vw) translateY(-5vh); }
  100% { transform: translateX(130vw) translateY(3vh); }
}
@keyframes flyB {
  0% { transform: translateX(0) translateY(3vh); }
  50% { transform: translateX(75vw) translateY(4vh); }
  100% { transform: translateX(135vw) translateY(-3vh); }
}
@keyframes flyC {
  0% { transform: translateX(0) translateY(-3vh); }
  50% { transform: translateX(65vw) translateY(-5vh); }
  100% { transform: translateX(125vw) translateY(2vh); }
}
@keyframes fog {
  0% { opacity:.6; transform:translateY(0); }
  100% { opacity:.9; transform:translateY(-15px); }
}
@keyframes float {
  0% { transform: translateY(0) translateX(0); }
  100% { transform: translateY(-10px) translateX(6px); }
}
@keyframes spiderDrop {
  0% { transform: translateY(0); }
  40% { transform: translateY(220px); }
  60% { transform: translateY(220px); }
  100% { transform: translateY(0); }
}

/* Accessibilità */
@media (max-width: 768px) {
  .spider.s3 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fog, .glow, .spider, .bat { animation: none !important; }
}

/* Glow bianco/viola per la scritta principale */
.hero-content h1 {
  color: #9b21ff;
  text-shadow:
    0 0 15px rgba(0, 0, 0, 0.9),
    0 0 35px rgba(122,60,255,0.6);
}

/* Glow anche per il titolo "Dove siamo" nella pagina contatti */
#contatti h2,
#contatti .promo-title,
#mappa h2 {
  color: #8120ff;
  text-shadow:
    0 0 10px rgba(255,255,255,0.9),
    0 0 25px rgba(0, 0, 0, 0.8),
    0 0 45px rgba(122,60,255,0.6);
}

/* === Glow per "I nostri corsi" e titoli simili === */
#corsi h2,
.corsi-section h2,
.corsi-section .promo-title,
body.corsi .promo-title {
  color: #bf3efa;
  text-shadow:
    0 0 10px rgba(0, 0, 0, 0.9),
    0 0 25px rgba(255,122,24,0.8),
    0 0 45px rgba(122,60,255,0.6);
}

/* Variante animata (bagliore pulsante) */
@keyframes glowPulseCourses {
  0%, 100% {
    text-shadow:
      0 0 10px rgba(8, 8, 8, 0.8),
      0 0 25px rgba(158, 12, 255, 0.6),
      0 0 45px rgba(122,60,255,0.4);
  }
  50% {
    text-shadow:
      0 0 20px rgb(14, 12, 12),
      0 0 40px rgba(255,122,24,1),
      0 0 60px rgba(122,60,255,0.9);
  }
}

/* Applica l’animazione al titolo dei corsi */
body.corsi .promo-title,
.corsi-section h2 {
  animation: glowPulseCourses 3s ease-in-out infinite;
}

/* Fast links – Indigo/Violet con accento arancio */
.fast-links--halloween .fast-links__item{
  position: relative;
  border-radius: 18px;
  padding: 1.6rem;
  text-align: center;
  color: #E8E7FF;
  /* base scura in linea con l'hero */
  background:
    radial-gradient(120% 80% at 50% 115%, rgba(255,122,24,0.10) 0%, rgba(255,122,24,0) 40%),
    radial-gradient(80% 60% at 25% -10%, rgba(122,60,255,0.25) 0%, rgba(122,60,255,0) 60%),
    linear-gradient(180deg, #0b0f1a 0%, #0a0a18 100%);
  border: 1px solid rgba(122,60,255,0.28);
  box-shadow:
    0 8px 26px rgba(0,0,0,0.55),
    inset 0 0 0 rgba(0,0,0,0);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}

.fast-links--halloween .fast-links__item:hover{
  transform: translateY(-6px);
  border-color: rgba(255,122,24,0.55);
  box-shadow:
    0 0 26px rgba(122,60,255,0.35),
    0 14px 34px rgba(0,0,0,0.75),
    inset 0 -60px 80px rgba(255,122,24,0.10);
  background:
    radial-gradient(120% 80% at 50% 115%, rgba(255,122,24,0.16) 0%, rgba(255,122,24,0.02) 42%),
    radial-gradient(80% 60% at 25% -10%, rgba(122,60,255,0.35) 0%, rgba(122,60,255,0.05) 60%),
    linear-gradient(180deg, #0d1322 0%, #0a0a18 100%);
}

/* Titolo e testo dentro le card */
.fast-links--halloween .fast-links__item h3{
  color:#FFFFFF;
  letter-spacing:.02em;
  text-shadow: 0 0 10px rgba(122,60,255,0.35);
  margin: .75rem 0 .35rem;
}
.fast-links--halloween .fast-links__item p{
  color:#C9CCDE;
  opacity:.9;
}

/* Icona circolare coerente col tema */
.fast-links--halloween .fl-icon{
  display:inline-grid; place-items:center;
  width:84px; height:84px; border-radius:50%;
  background: radial-gradient(80% 80% at 30% 25%, #6536ff 0%, #a86eff 60%, #5b2be0 100%);
  color:#0a0a0f;
  box-shadow: 0 0 12px rgba(122,60,255,0.45);
  font-size:2rem;
  transition: transform .25s ease, box-shadow .25s ease;
}
.fast-links--halloween .fast-links__item:hover .fl-icon{
  transform: scale(1.06) rotate(-4deg);
  box-shadow: 0 0 18px rgba(255,122,24,0.45), 0 0 10px rgba(122,60,255,0.45);
}

/* Effetto glow arancio per "Dove la passione si trasforma in movimento" */
.section-classes h2 {
  color: #f17c0f;
  text-shadow:
    0 0 12px rgba(255,122,24,0.9),
    0 0 28px rgba(122,60,255,0.5);
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: text-shadow 0.4s ease-in-out;
}

.section-classes h2:hover {
  text-shadow:
    0 0 18px rgba(255,255,255,0.9),
    0 0 35px rgba(255,122,24,0.8);
}