/* ===================================================================
   FantaSanRocco — Intro 3D (prima schermata)
   Banner festivo + logo 3D + titolo "fantasanrocco" + frase + scroll.
   Tema premium scuro/verde, full-bleed sopra l'hero cinematic.
   =================================================================== */

/* Schermata iniziale full-bleed: esce dal .container come fa .cine */
.intro-screen {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: -1.5rem;              /* annulla il padding-top del .container */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(20,58,38,.55) 0%, rgba(8,20,14,.2) 40%, transparent 70%),
    radial-gradient(100% 80% at 50% 110%, rgba(212,160,26,.12) 0%, transparent 55%),
    linear-gradient(180deg, #07100b 0%, #060810 55%, #04050a 100%);
  overflow: hidden;
}
/* Quando l'hero cinematic segue la intro, niente sovrapposizione */
.intro-screen + .cine { margin-top: 0; }

/* Trama leggera a griglia (decorativa) */
.intro-screen::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(243,198,75,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243,198,75,.04) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 80%);
  mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 80%);
}

/* ── Corpo intro: logo, titolo, frase ───────────────────────────── */
.intro3d {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(.6rem, 2vh, 1.4rem);
  padding: 2rem 1.2rem;
  text-align: center;
}

/* Palco del logo 3D (il canvas non copre i testi: sta sopra il titolo) */
.intro3d-stage {
  position: relative;
  width: min(92vw, 560px);
  height: clamp(180px, 38vh, 380px);
  display: flex; align-items: center; justify-content: center;
}
/* Bagliore/contatto sotto il logo, per profondità senza ombre pesanti */
.intro3d-stage::after {
  content: ''; position: absolute; left: 50%; bottom: 6%;
  width: 60%; height: 16%; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(243,198,75,.30), transparent 70%);
  filter: blur(10px); pointer-events: none;
}
.intro3d-canvas {
  width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity .9s var(--ease, ease);
}
.intro3d-canvas.is-ready { opacity: 1; }

/* Fallback (WebGL assente o modello non caricato) */
.intro3d-fallback {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center; flex-direction: column; gap: .6rem;
  color: var(--gold-2);
}
.intro3d-fallback .ico { width: clamp(70px, 18vh, 130px); height: auto; filter: drop-shadow(0 8px 30px rgba(212,160,26,.4)); }
.intro-screen.is-fallback .intro3d-fallback { display: flex; }
.intro-screen.is-fallback .intro3d-canvas { display: none; }

/* Titolo "fantasanrocco" */
.intro3d-title {
  font-family: var(--font-display, 'Cinzel', serif);
  font-weight: 900; letter-spacing: -.02em; line-height: .95;
  font-size: clamp(1.7rem, 8.5vw, 6rem);
  max-width: 96vw;
  background: linear-gradient(120deg, #fffaee 0%, var(--gold-2) 32%, var(--gold) 56%, var(--amber) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 4px 26px rgba(212,160,26,.35));
  margin: 0;
  opacity: 0; transform: translateY(26px);
  animation: intro-rise 1s cubic-bezier(.2,.8,.2,1) .35s forwards;
}
/* Frase sotto il titolo */
.intro3d-phrase {
  max-width: 30ch;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: clamp(1rem, 2.6vw, 1.45rem);
  line-height: 1.5; color: var(--text-2, #c9c4b8);
  margin: 0;
  opacity: 0; transform: translateY(20px);
  animation: intro-rise .9s cubic-bezier(.2,.8,.2,1) .65s forwards;
}
.intro3d-phrase b { color: var(--gold-2); font-style: normal; font-weight: 600; }

@keyframes intro-rise { to { opacity: 1; transform: translateY(0); } }

/* ── Mobile: logo più piccolo e centrato, tutto leggero ──────────── */
@media (max-width: 768px) {
  .intro3d-stage { height: clamp(150px, 30vh, 280px); width: min(90vw, 380px); }
  .intro3d { padding-bottom: 3rem; }
}

/* ── Riduzione movimento: niente animazioni vistose ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .intro3d-title, .intro3d-phrase { animation: none; opacity: 1; transform: none; }
  .intro3d-canvas { transition: none; }
}