:root{
  --bg:#0b0b0d; --fg:#e8e6e3; --muted:#b8b1aa;
  --accent:#8b0000; --accent-2:#b31217; --ring:#ffffff22;
  --scarlet:#500000;                 /* rosso acceso per le frasi */
  --font-ui:"Cinzel", serif; --font-logo:"UnifrakturMaguntia", serif;

  --dur:48s;                         /* ciclo per 6 slide (~8s cad.) */
  --fade:1.2s;
  --kb-zoom:1.06;
}

*{box-sizing:border-box}
html,body{height:100%}
body.intro-body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-ui); overflow:hidden;
}

.intro-root{
  position:relative; height:100dvh; width:100%;
  display:grid; place-items:center;
}

/* ---------- STAGE (slideshow + effetti) ---------- */
.stage{position:absolute; inset:0; overflow:hidden; background:#070708; z-index:0}
.slideshow{position:absolute; inset:0}
.slide{
  position:absolute; inset:0;
  background-image:var(--img); background-size:cover; background-position:center;
  background-color:#111; /* fallback */
  opacity:0; transform:scale(1.04);
  animation:
    slideFade var(--dur) linear infinite,
    kenburns var(--dur) ease-in-out infinite;
}
.s1{animation-delay:0s}
.s2{animation-delay:calc(var(--dur)/6)}
.s3{animation-delay:calc(2*var(--dur)/6)}
.s4{animation-delay:calc(3*var(--dur)/6)}
.s5{animation-delay:calc(4*var(--dur)/6)}
.s6{animation-delay:calc(5*var(--dur)/6)}

@keyframes slideFade{
  0%{opacity:0} 5%{opacity:1} 25%{opacity:1} 30%{opacity:0} 100%{opacity:0}
}
@keyframes kenburns{
  0%  {transform:scale(1) translate(0,0)}
  25% {transform:scale(var(--kb-zoom)) translate(-1.5%,-1.5%)}
  50% {transform:scale(1) translate(0,0)}
  75% {transform:scale(var(--kb-zoom)) translate(1.5%,1.5%)}
  100%{transform:scale(1) translate(0,0)}
}

/* Effetti (non intercettano click) */
.fx-grain,.fx-fog,.vignette{pointer-events:none}
.fx-grain{
  position:absolute; inset:-20%;
  background-image:url('../media/grain.png');
  background-size:300px 300px; mix-blend-mode:overlay; opacity:.12;
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}
  20%{transform:translate(-2%,1%)}
  40%{transform:translate(2%,-1%)}
  60%{transform:translate(-1%,2%)}
  80%{transform:translate(1%,-2%)}
  100%{transform:translate(0,0)}
}
.fx-fog{
  position:absolute; inset:-10%;
  background-repeat:repeat-x; background-size:contain;
  opacity:.26; filter:blur(1.2px) contrast(1.1);
}
.fog-a{background-image:url('../media/fog_a.png'); animation:fogMove 120s linear infinite}
.fog-b{background-image:url('../media/fog_b.png'); animation:fogMoveReverse 160s linear infinite; opacity:.20}
@keyframes fogMove{from{transform:translateX(-10%)} to{transform:translateX(10%)}}
@keyframes fogMoveReverse{from{transform:translateX(10%)} to{transform:translateX(-10%)}}

.vignette{
  position:absolute; inset:0;
  box-shadow:inset 0 0 140px 40px #000, inset 0 0 360px 160px #000;
}

/* ---------- COPY (logo + frasi + CTA) ---------- */
.copy{
  position:relative; z-index:5;                      /* sopra agli effetti */
  width:min(1100px,92vw);
  display:grid; grid-template-rows:auto auto auto;   /* logo - lines - cta */
  align-items:center; justify-items:center;
  gap:1.1rem; text-align:center;
  padding:3dvh 1.5rem 1.75rem;
}

/* Logo */
.logo{margin:0; line-height:.95; display:flex; flex-direction:column; gap:.25rem; filter:drop-shadow(0 3px 18px #000c)}
.logo-top{font-family:var(--font-logo); font-size:clamp(38px,8vw,86px); letter-spacing:.5px; color:var(--fg); text-shadow:0 0 0 var(--accent), 0 .04em .08em #000}
.logo-sub{font-size:clamp(12px,1.8vw,18px); color:var(--muted); text-transform:uppercase; letter-spacing:.3em}

/* Frasi (rosse, più piccole, con outline per leggibilità sopra la nebbia) */
.lines{
  display:grid;
  gap:.16rem;
  line-height:1.10;
  max-width:60ch;
  max-height:clamp(5.5rem,16vh,8rem);
  overflow:hidden; margin:0;
}
.line{
  margin:0;
  opacity:0; transform:translateY(6px);
  filter:blur(3px);
  color:var(--scarlet);
  font-size:clamp(13px,1.5vw,18px);
  letter-spacing:.02em;
  text-shadow:
    0 0 10px rgba(0,0,0,.55),
    0 0 4px rgba(0,0,0,.55),
    0 1px 0 rgba(0,0,0,.8);
  -webkit-text-stroke:.3px rgba(0,0,0,.55);
}
.line.show{
  opacity:1; transform:translateY(0); filter:blur(0);
  transition:opacity 800ms ease, transform 800ms ease, filter 800ms ease;
}

/* CTA: fissata in basso, sempre visibile */
.cta{
  position:fixed;
  left:50%; bottom:26px; transform:translateX(-50%);
  z-index:15;
  display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center;
}
.btn{
  -webkit-tap-highlight-color:transparent;
  appearance:none; border:1px solid var(--ring);
  background:#111215; color:#fff;
  padding:.9rem 1.2rem; border-radius:999px; cursor:pointer;
  font-weight:700; letter-spacing:.04em;
  transition:transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  filter:drop-shadow(0 2px 10px #0008);
}
.btn:hover{transform:translateY(-1px); border-color:#ffffff55; background:#14151a}
.btn:active{transform:translateY(0) scale(.99)}
.btn-primary{
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  border-color:#000; box-shadow:0 8px 30px #b312171f, inset 0 0 0 1px #ffffff18;
}
.btn-ghost{background:#0e0f12; color:#ddd}

/* Progress (più in alto per non stare sotto ai bottoni) */
.progress{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:120px;                    /* alzata */
  width:min(420px,80vw); height:3px;
  background:#ffffff14; border-radius:999px; overflow:hidden; z-index:4;
}
.progress .bar{
  width:0%; height:100%;
  background:linear-gradient(90deg,#700,#b31217,#e2452c);
  animation:introProgress 14s linear forwards;
}
@keyframes introProgress{to{width:100%}}

/* Accessibilità / Ridotta animazione */
@media (prefers-reduced-motion:reduce){
  .slide,.fx-grain,.fx-fog,.progress .bar{animation:none!important}
}

/* Schermi bassi: ancora più compatti */
@media (max-height:720px){
  .logo-top{font-size:clamp(32px,6.5vw,72px)}
  .logo-sub{font-size:clamp(11px,1.5vw,16px)}
  .lines{max-height:clamp(5rem,15vh,7rem)}
  .line{font-size:clamp(12px,1.3vw,17px)}
  .progress{bottom:96px}          /* resta sopra alla CTA */
  .cta{bottom:20px}
}