/* ===================================================
   FIGLI DI NAPULE — Teatro dell'Anima
   Stile: Gran Teatro, Velluto & Oro
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&display=swap');

/* ---- CSS Variables ---- */
:root {
  --bg-black:     #050307;
  --bg-deep:      #0e0610;
  --bg-velvet:    #160a18;
  --bg-card:      #1c0e20;
  --bg-modal:     #120810;

  --curtain-dark: #2a0409;
  --curtain-mid:  #4a0810;
  --curtain-red:  #6b0f1a;
  --curtain-lite: #8b1a28;

  --gold:         #c9a84c;
  --gold-light:   #e8c97a;
  --gold-bright:  #f5dfa0;
  --gold-dark:    #7a5c20;
  --gold-muted:   #9b7b38;

  --text-cream:   #f0e6d2;
  --text-warm:    #d4c4a8;
  --text-muted:   #8b7a62;
  --text-dim:     #5a4e3c;

  --border-gold:  1px solid rgba(201,168,76,0.35);
  --shadow-gold:  0 0 30px rgba(201,168,76,0.12);
  --shadow-deep:  0 20px 60px rgba(0,0,0,0.8);

  --font-title:   'Cinzel Decorative', serif;
  --font-nav:     'Cinzel', serif;
  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'EB Garamond', serif;

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

  /* === Teatrale aggiuntivo === */
  --color-bg-deep: #0a0608;
  --color-bg-card: #1a0f1e;
  --color-gold-dim: #7a6030;
  --color-text-muted: #8a7a6a;

  --font-size-display: clamp(2.5rem, 6vw, 5rem);
  --font-size-heading: clamp(1.4rem, 3vw, 2.2rem);
  --font-size-body: 1.05rem;
  --font-size-caption: 0.8rem;
  --font-weight-display: 300;

  --space-section: clamp(4rem, 8vw, 8rem);
  --space-ornament: 1.5rem;
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg-black);
  color: var(--text-cream);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ---- Scrollbar ---- */
* { scrollbar-width: thin; scrollbar-color: var(--gold-dark) var(--bg-deep); }
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: var(--bg-deep); }
  ::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--gold); }
}

/* =============================================
   THEATRICAL CURTAIN — Opening Animation
   ============================================= */
#curtain-wrapper {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: auto;
  cursor: pointer;
}

.curtain-panel {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 18px,
      rgba(0,0,0,0.18) 18px,
      rgba(0,0,0,0.18) 20px
    ),
    linear-gradient(
      180deg,
      var(--curtain-dark) 0%,
      var(--curtain-mid) 20%,
      var(--curtain-red) 50%,
      var(--curtain-mid) 80%,
      var(--curtain-dark) 100%
    );
  transition: transform 2.4s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}

/* Velvet fold texture */
.curtain-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0px,
    transparent 4px,
    transparent 14px,
    rgba(0,0,0,0.12) 14px,
    rgba(0,0,0,0.12) 18px
  );
}

/* Gold fringe at bottom */
.curtain-panel::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  height: 60px;
  background: repeating-linear-gradient(
    90deg,
    var(--gold-dark) 0px,
    var(--gold) 3px,
    var(--gold-light) 5px,
    var(--gold) 7px,
    var(--gold-dark) 10px
  );
  mask-image: repeating-linear-gradient(
    90deg,
    transparent 0px,
    black 2px,
    black 8px,
    transparent 10px
  );
  opacity: 0.9;
}

.curtain-left {
  left: 0;
  transform-origin: left center;
}

.curtain-right {
  right: 0;
  transform-origin: right center;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 18px,
      rgba(0,0,0,0.18) 18px,
      rgba(0,0,0,0.18) 20px
    ),
    linear-gradient(
      180deg,
      var(--curtain-dark) 0%,
      var(--curtain-mid) 20%,
      var(--curtain-red) 50%,
      var(--curtain-mid) 80%,
      var(--curtain-dark) 100%
    );
}

/* Gold border between panels */
#curtain-center {
  display: none;
}

.curtain-open .curtain-left  { transform: translateX(-100%); }
.curtain-open .curtain-right { transform: translateX(100%); }
.curtain-open #curtain-center { opacity: 0; }

/* Click-to-start hint */
#curtain-click-hint {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-nav);
  font-size: clamp(0.6rem, 1.4vw, 0.8rem);
  color: var(--gold-muted);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  white-space: nowrap;
  animation: curtainHintBlink 2.2s ease-in-out infinite;
}
@keyframes curtainHintBlink {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1;   }
}

/* Stage reveal text — appears after curtain opens */
#stage-reveal-text {
  position: absolute;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 1s ease;
  white-space: nowrap;
}

#stage-reveal-text.visible { opacity: 1; }

.stage-jamm {
  font-family: var(--font-title);
  font-size: clamp(1.4rem, 3.5vw, 2.8rem);
  color: var(--gold-bright);
  text-shadow: 0 0 40px rgba(232,201,122,0.5), 0 2px 4px rgba(0,0,0,0.9);
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.stage-jamm + .stage-sub {
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 1.8vw, 1.15rem);
  color: var(--gold-muted);
  font-style: italic;
  letter-spacing: 0.12em;
}

/* Curtain title overlay */
#curtain-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.8s ease;
  z-index: 10;
}

.curtain-open #curtain-title { opacity: 0; }

#curtain-title h1 {
  font-family: var(--font-title);
  font-size: clamp(2rem, 5vw, 4.5rem);
  color: var(--gold-bright);
  text-shadow: 0 0 60px rgba(232,201,122,0.6), 0 2px 4px rgba(0,0,0,0.9);
  letter-spacing: 0.08em;
  line-height: 1.15;
}

#curtain-title .subtitle {
  font-family: var(--font-nav);
  font-size: clamp(0.8rem, 1.8vw, 1.1rem);
  color: var(--gold-muted);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  margin-top: 12px;
}

/* =============================================
   NAVIGATION
   ============================================= */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: linear-gradient(180deg, rgba(5,3,7,0.98) 0%, rgba(22,10,24,0.92) 100%);
  border-bottom: var(--border-gold);
  backdrop-filter: blur(12px);
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
}

#navbar.visible {
  opacity: 1;
  transform: translateY(0);
}

.nav-logo {
  font-family: var(--font-title);
  font-size: 1.1rem;
  color: var(--gold);
  text-decoration: none;
  letter-spacing: 0.05em;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.3s ease;
}
.nav-logo:hover { color: var(--gold-bright); }
.nav-logo .ornament { color: var(--gold-dark); font-size: 0.85em; }

.nav-links {
  display: flex;
  gap: 0;
  align-items: center;
  list-style: none;
}

.nav-links li a, .nav-links li button {
  display: block;
  font-family: var(--font-nav);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  padding: 8px 18px;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.3s ease;
  position: relative;
}

.nav-links li a::after, .nav-links li button::after {
  content: '';
  position: absolute;
  bottom: 0; left: 18px; right: 18px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.nav-links li a:hover, .nav-links li button:hover { color: var(--gold-light); }
.nav-links li a:hover::after, .nav-links li button:hover::after { transform: scaleX(1); }
.nav-links li a.active, .nav-links li button.active { color: var(--gold); }
.nav-links li a.active::after, .nav-links li button.active::after { transform: scaleX(1); }

.nav-divider {
  width: 1px;
  height: 20px;
  background: var(--gold-dark);
  opacity: 0.5;
  margin: 0 4px;
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  background: none;
  border: none;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--gold);
  transition: all 0.3s ease;
}

.nav-kiosk-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(201,168,76,0.4);
  opacity: 0.85;
  transition: opacity 0.2s, background 0.2s, border-color 0.2s;
  color: var(--gold);
  text-decoration: none;
  margin-left: 10px;
  flex-shrink: 0;
  font-family: var(--font-nav);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.nav-kiosk-btn:hover {
  opacity: 1;
  background: rgba(201,168,76,0.1);
  border-color: rgba(201,168,76,0.8);
}

/* =============================================
   PAGES WRAPPER
   ============================================= */
#app {
  padding-top: 72px;
  min-height: 100vh;
}

.page {
  display: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  min-height: calc(100vh - 72px);
}

.page.active {
  display: block;
}

.page.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================
   HOME PAGE
   ============================================= */
#page-home {
  padding: 0;
}

/* Hero */
/* La sala e' buia, il quadro e' illuminato: il titolo a sinistra, il disegno
   di Francesco appeso a destra. Niente piu' immagine di sfondo — quel file e'
   un'opera incorniciata, non una tappezzeria. */
.hero {
  position: relative;
  height: calc(100vh - 72px);
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Stretto apposta: a 1360 fra il titolo e il quadro restava un vuoto di
     quattrocento pixel e i due pezzi non si parlavano piu'. */
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(28px, 5vw, 60px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, #0a0210 0%, #1a0a20 30%, #0e0615 70%, #050308 100%);
  overflow: hidden;
}

/* Animated starfield / atmosphere */
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 15% 20%, rgba(201,168,76,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 60%, rgba(201,168,76,0.2) 0%, transparent 100%),
    radial-gradient(2px 2px at 55% 30%, rgba(232,201,122,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 70%, rgba(201,168,76,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 15%, rgba(232,201,122,0.35) 0%, transparent 100%);
  animation: starFloat 8s ease-in-out infinite alternate;
}

@keyframes starFloat {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-10px) scale(1.02); }
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(106,15,26,0.18) 0%, transparent 70%);
}

/* Gold vignette overlay */
.hero-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 120% at 50% 50%, transparent 30%, rgba(5,3,7,0.85) 100%),
    linear-gradient(180deg, rgba(5,3,7,0.3) 0%, transparent 30%, transparent 60%, rgba(5,3,7,0.95) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 30rem;
}

/* Il quadro appeso. Il disegno porta gia' la sua cornice stampata — bordo nero
   e passe-partout oro — quindi qui non se ne aggiunge un'altra: solo il filo
   d'oro che lo stacca dal fondo e l'ombra che lo solleva dalla parete. */
.hero-quadro {
  position: relative;
  width: min(34vw, 360px);
  margin: 0;
  animation: quadroEntra 1.4s var(--ease-theatre) both;
}

@keyframes quadroEntra {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Il fascio di luce che lo illumina */
.hero-quadro::before {
  content: '';
  position: absolute;
  inset: -14% -20%;
  background: radial-gradient(ellipse at 50% 45%,
    rgba(201,168,76,0.26) 0%, rgba(201,168,76,0.07) 48%, transparent 72%);
  z-index: -1;
  pointer-events: none;
}

.hero-quadro-img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 30px 70px rgba(0,0,0,0.75), 0 0 0 1px rgba(201,168,76,0.18);
}

.hero-quadro-didascalia {
  margin-top: 16px;
  text-align: center;
  font-family: var(--font-nav);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-muted);
}

/* Schermi bassi: il quadro rimpicciolisce invece di uscire dall'inquadratura */
@media (max-height: 820px) and (min-width: 901px) {
  .hero-quadro { width: min(26vw, 280px); }
}

.hero-ornament {
  font-family: var(--font-nav);
  font-size: 0.75rem;
  letter-spacing: 0.4em;
  color: var(--gold-muted);
  text-transform: uppercase;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero-ornament::before, .hero-ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dark));
}
.hero-ornament::after {
  background: linear-gradient(90deg, var(--gold-dark), transparent);
}

/* Se la dicitura va a capo i due filetti si accorciano a zero e spariscono:
   meglio tenerla su una riga sola. */
.hero-ornament span { white-space: nowrap; }

.hero h1 {
  font-family: var(--font-title);
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--gold-bright);
  text-shadow: 0 4px 40px rgba(201,168,76,0.25);
  margin-bottom: 10px;
}

.hero-subtitle {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  color: var(--text-warm);
  font-style: italic;
  margin-bottom: 40px;
  font-weight: 300;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-nav);
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  border: var(--border-gold);
  padding: 14px 32px;
  cursor: pointer;
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
}

.hero-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(201,168,76,0.08);
  transform: translateX(-100%);
  transition: transform 0.35s ease;
}

.hero-cta:hover { color: var(--gold-bright); border-color: var(--gold); box-shadow: var(--shadow-gold); }
.hero-cta:hover::before { transform: translateX(0); }

.hero-scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--gold-dark);
  font-family: var(--font-nav);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  animation: bounceDown 2s ease-in-out infinite;
}

@keyframes bounceDown {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.6; }
  50%       { transform: translateX(-50%) translateY(6px); opacity: 1; }
}

.hero-scroll-hint .arrow {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, var(--gold-dark), transparent);
}

/* Home intro text */
.home-intro {
  max-width: 900px;
  margin: 0 auto;
  padding: 100px 40px 80px;
  text-align: center;
}

.section-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
}

.ornament-line {
  flex: 0 0 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dark));
}
.ornament-line.right {
  background: linear-gradient(90deg, var(--gold-dark), transparent);
}

.ornament-diamond {
  width: 8px; height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(201,168,76,0.5);
}

.section-label {
  font-family: var(--font-nav);
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  color: var(--gold-muted);
  text-transform: uppercase;
}

.home-intro h2 {
  font-family: var(--font-title);
  font-size: clamp(1.6rem, 3.5vw, 2.8rem);
  color: var(--gold-light);
  margin-bottom: 24px;
  line-height: 1.2;
}

.home-intro p {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--text-warm);
  line-height: 1.85;
  font-weight: 300;
  /* Su 900px le righe arrivavano a cento battute: centrate, si perde il capo
     della riga dopo. Qui stanno sulle sessanta. */
  max-width: 62ch;
  margin: 0 auto;
}

/* Il libro sulla home. Prima la copertina stava sospesa in mezzo all'hero e
   dopo quindici secondi svaniva: qui ha un posto fermo, accanto al suo testo. */
.home-libro {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 40px 110px;
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: clamp(32px, 5vw, 68px);
  align-items: center;
}

.home-libro-copertina {
  display: block;
  position: relative;
  transition: transform 0.4s var(--ease-theatre);
}

.home-libro-copertina img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 20px 50px rgba(0,0,0,0.7), 0 0 0 1px rgba(201,168,76,0.3);
}

.home-libro-copertina:hover { transform: translateY(-5px); }

.home-libro-testo h2 {
  font-family: var(--font-title);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  color: var(--gold-light);
  line-height: 1.2;
  margin: 14px 0 20px;
}

.home-libro-testo p:not(.section-label) {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--text-warm);
  line-height: 1.8;
  font-weight: 300;
  max-width: 54ch;
}

.home-libro-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  font-family: var(--font-nav);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold);
  border: var(--border-gold);
  padding: 13px 28px;
  transition: color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.home-libro-cta:hover {
  color: var(--gold-bright);
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
}

/* Le altre sale. Tre porte in fila fra due fili d'oro — non tre schede. */
.home-ingressi {
  max-width: 1020px;
  margin: 0 auto 110px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(201,168,76,0.18);
  border-bottom: 1px solid rgba(201,168,76,0.18);
}

.ingresso {
  display: block;
  padding: 38px 34px;
  text-decoration: none;
  border-left: 1px solid rgba(201,168,76,0.18);
  transition: background 0.4s ease;
}

.ingresso:first-child { border-left: 0; }
.ingresso:hover { background: rgba(201,168,76,0.05); }
.ingresso:hover .ingresso-nome { color: var(--gold-bright); }

.ingresso-nome {
  display: block;
  font-family: var(--font-title);
  font-size: 1.2rem;
  color: var(--gold-light);
  margin-bottom: 10px;
  transition: color 0.4s ease;
}

.ingresso-desc {
  display: block;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-muted);
}

/* =============================================
   CHARACTER CARDS
   ============================================= */
.card {
  position: relative;
  background: var(--bg-card);
  border: var(--border-gold);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.35s var(--ease-theatre), box-shadow 0.35s ease;
  aspect-ratio: 3 / 4;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.95) 100%);
  z-index: 1;
  transition: background 0.35s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.7), 0 0 0 1px var(--gold-dark), var(--shadow-gold);
}

.card:hover::before {
  background: linear-gradient(180deg, transparent 20%, rgba(0,0,0,0.97) 100%);
}

@keyframes kenBurns {
  0%   { transform: scale(1.00) translate(0%,    0%);   }
  20%  { transform: scale(1.04) translate(-1.5%, -1%);  }
  50%  { transform: scale(1.06) translate(1%,    -2%);  }
  80%  { transform: scale(1.04) translate(1.5%,  0.5%); }
  100% { transform: scale(1.00) translate(0%,    0%);   }
}

@keyframes portraitFloat {
  0%, 100% { transform: translateY(0px)   scale(1.00); }
  50%       { transform: translateY(-10px) scale(1.015); }
}

.card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: sepia(20%) contrast(1.05);
  animation: kenBurns 14s ease-in-out infinite;
  transform-origin: center top;
}

.card:hover .card-img {
  animation-play-state: paused;
  transform: scale(1.07);
  transition: transform 0.5s ease;
}

.card-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-card), #1e1025);
  font-family: var(--font-title);
  font-size: 2.5rem;
  color: var(--gold-dark);
  opacity: 0.6;
}

.card-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px 16px 16px;
  z-index: 2;
}

.card-number {
  font-family: var(--font-nav);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  color: var(--gold-dark);
  margin-bottom: 4px;
}

.card-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-cream);
  line-height: 1.2;
  margin-bottom: 4px;
}

.card-role {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--gold-muted);
  font-style: italic;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Corner ornament */
.card-corner {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card:hover .card-corner { opacity: 1; }
.card-corner::before, .card-corner::after {
  content: '';
  position: absolute;
  background: var(--gold);
}
.card-corner::before { width: 16px; height: 1px; top: 0; right: 0; }
.card-corner::after  { width: 1px; height: 16px; top: 0; right: 0; }

/* =============================================
   PERSONAGGI PAGE
   ============================================= */
#page-personaggi {
  padding: 60px 40px 100px;
}

.page-header {
  text-align: center;
  padding: 40px 0 60px;
}

.page-header h1 {
  font-family: var(--font-title);
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: var(--gold-light);
  margin-bottom: 16px;
}

.page-header p {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--text-muted);
}

/* Search bar */
.search-wrapper {
  max-width: 600px;
  margin: 0 auto 60px;
  position: relative;
}

.search-input {
  width: 100%;
  background: var(--bg-card);
  border: var(--border-gold);
  border-color: var(--gold-dark);
  color: var(--text-cream);
  font-family: var(--font-display);
  font-size: 1.05rem;
  padding: 14px 52px 14px 22px;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  border-radius: 0;
  -webkit-appearance: none;
}

.search-input::placeholder { color: var(--text-dim); font-style: italic; }
.search-input:focus { border-color: var(--gold); box-shadow: 0 0 20px rgba(201,168,76,0.15); }

.search-icon {
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  color: var(--gold-dark);
  pointer-events: none;
  font-size: 1.1rem;
}

.search-count {
  text-align: center;
  font-family: var(--font-nav);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--gold-dark);
  margin-bottom: 40px;
  text-transform: uppercase;
}

/* Characters grid */
.characters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 28px;
  max-width: 1400px;
  margin: 0 auto;
}

.no-results {
  text-align: center;
  padding: 80px 20px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--text-muted);
}

/* =============================================
   CHARACTER DETAIL MODAL
   ============================================= */
#modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(5,3,7,0.96);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  overflow-y: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
}

#modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-container {
  position: relative;
  max-width: 1100px;
  width: 100%;
  background: var(--bg-modal);
  border: var(--border-gold);
  border-color: var(--gold-dark);
  transform: translateY(30px) scale(0.97);
  transition: transform 0.45s var(--ease-theatre);
  overflow: hidden;
}

#modal-overlay.open .modal-container {
  transform: translateY(0) scale(1);
}

/* Ornate corner frames */
.modal-corner {
  position: absolute;
  width: 40px; height: 40px;
  z-index: 10;
}
.modal-corner::before, .modal-corner::after {
  content: '';
  position: absolute;
  background: var(--gold);
}
.modal-corner::before { width: 100%; height: 1px; top: 0; left: 0; }
.modal-corner::after  { width: 1px; height: 100%; top: 0; left: 0; }

.modal-corner.tl { top: 12px; left: 12px; }
.modal-corner.tr { top: 12px; right: 12px; transform: scaleX(-1); }
.modal-corner.bl { bottom: 12px; left: 12px; transform: scaleY(-1); }
.modal-corner.br { bottom: 12px; right: 12px; transform: scale(-1); }

/* Modal close */
.modal-close {
  position: absolute;
  top: 20px; right: 20px;
  width: 40px; height: 40px;
  background: transparent;
  border: var(--border-gold);
  color: var(--gold);
  font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 20;
  transition: all 0.3s ease;
  font-family: var(--font-nav);
}
.modal-close:hover { background: rgba(201,168,76,0.1); color: var(--gold-bright); }

/* Modal layout */
.modal-body {
  display: grid;
  grid-template-columns: 360px 1fr;
  min-height: 600px;
}

.modal-visual {
  position: relative;
  background: var(--bg-deep);
  overflow: hidden;
}

.modal-main-img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  object-position: top center;
  display: block;
  filter: sepia(15%) contrast(1.05);
  animation: portraitFloat 6s ease-in-out infinite;
  transform-origin: center top;
}

.modal-img-placeholder {
  width: 100%;
  height: 450px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--bg-card), #1e0f28);
  font-family: var(--font-title);
  font-size: 3rem;
  color: var(--gold-dark);
}

/* Landscape bozzetto (De Filippo family) */
#modal-img-container.landscape {
  height: auto;
  min-height: 0;
}
.modal-main-img.landscape-img {
  height: auto !important;
  max-height: 320px;
  width: 100%;
  object-fit: contain !important;
  object-position: center !important;
  background: var(--bg-deep);
  padding: 12px 0;
}

.modal-video-wrapper {
  padding: 16px 0 4px;
  border-top: 1px solid rgba(201,168,76,0.2);
  margin-top: 8px;
}
.modal-video {
  width: 100%;
  display: block;
  border: 1px solid rgba(201,168,76,0.35);
}

/* Tratteggio section */
.modal-tratteggio {
  padding: 24px;
  border-top: var(--border-gold);
  background: rgba(0,0,0,0.3);
}

.modal-tratteggio-label {
  font-family: var(--font-nav);
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  color: var(--gold-dark);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.modal-tratteggio-img {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  display: block;
  filter: sepia(20%) contrast(1.1);
  margin-bottom: 16px;
}


/* Audio player */
.audio-player {
  width: 100%;
}

audio {
  width: 100%;
  height: 36px;
  accent-color: var(--gold);
  filter: none;
}

/* Modal text area */
.modal-text {
  padding: 50px 50px 50px 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.modal-number {
  font-family: var(--font-nav);
  font-size: 0.65rem;
  letter-spacing: 0.4em;
  color: var(--gold-dark);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.modal-name {
  font-family: var(--font-title);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  color: var(--gold-bright);
  line-height: 1.1;
  margin-bottom: 8px;
}

.modal-role {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--gold-muted);
  font-style: italic;
  margin-bottom: 6px;
}

.modal-dates {
  font-family: var(--font-nav);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-bottom: 30px;
}

.modal-divider {
  width: 60px; height: 1px;
  background: var(--gold-dark);
  margin-bottom: 28px;
}

.modal-bio {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--text-warm);
  flex: 1;
  overflow-y: auto;
  max-height: 480px;
  padding-right: 8px;
}

.modal-bio::-webkit-scrollbar { width: 4px; }
.modal-bio::-webkit-scrollbar-track { background: transparent; }
.modal-bio::-webkit-scrollbar-thumb { background: var(--gold-dark); }

.modal-nav {
  display: flex;
  justify-content: space-between;
  padding: 20px 28px;
  border-top: var(--border-gold);
  background: rgba(0,0,0,0.2);
}

.modal-nav-btn {
  font-family: var(--font-nav);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 0;
  display: flex; align-items: center; gap: 8px;
  transition: color 0.3s ease;
}
.modal-nav-btn:hover { color: var(--gold); }
.modal-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* =============================================
   EXTRA PAGES (Autore, Musiche, etc.)
   ============================================= */
.static-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 60px 40px 100px;
}

.static-page-header {
  text-align: center;
  margin-bottom: 80px;
}

.static-page-header h1 {
  font-family: var(--font-title);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  color: var(--gold-light);
  margin-bottom: 12px;
}

.static-page-header p {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-muted);
}

/* Author layout */
.author-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 60px;
  align-items: start;
}

.author-portrait {
  position: relative;
}

.author-portrait img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: top;
  filter: sepia(15%);
  display: block;
  border: var(--border-gold);
}

.author-portrait-frame {
  position: absolute;
  inset: -8px;
  border: var(--border-gold);
  border-color: var(--gold-dark);
  pointer-events: none;
}

.author-name {
  font-family: var(--font-title);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: var(--gold-bright);
  margin-bottom: 8px;
}

.author-role {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--gold-muted);
  font-style: italic;
  margin-bottom: 32px;
}

.author-bio {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--text-warm);
}

.author-bio p + p { margin-top: 20px; }

/* Audio showcase */
.music-showcase {
  margin-top: 40px;
  padding: 28px;
  border: var(--border-gold);
  background: rgba(0,0,0,0.3);
}

.music-showcase-label {
  font-family: var(--font-nav);
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  color: var(--gold-dark);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.music-showcase-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--text-cream);
  margin-bottom: 16px;
  font-style: italic;
}

/* Bibliography */
.biblio-section {
  margin-bottom: 60px;
}

.biblio-section h2 {
  font-family: var(--font-nav);
  font-size: 0.75rem;
  letter-spacing: 0.35em;
  color: var(--gold-muted);
  text-transform: uppercase;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: var(--border-gold);
}

.biblio-list {
  list-style: none;
}

.biblio-list li {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--text-warm);
  padding: 12px 0;
  border-bottom: 1px solid rgba(201,168,76,0.08);
  padding-left: 20px;
  position: relative;
}

.biblio-list li::before {
  content: '◆';
  position: absolute;
  left: 0;
  color: var(--gold-dark);
  font-size: 0.5rem;
  top: 18px;
}

/* Ringraziamenti */
.thanks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.thanks-card {
  padding: 24px;
  border: var(--border-gold);
  background: var(--bg-card);
  text-align: center;
}

.thanks-card .name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text-cream);
  margin-bottom: 6px;
}

.thanks-card .role {
  font-family: var(--font-nav);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--gold-dark);
  text-transform: uppercase;
}

.thanks-message {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--text-warm);
  line-height: 1.85;
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}

/* =============================================
   FOOTER
   ============================================= */
footer {
  text-align: center;
  padding: 40px 20px;
  border-top: var(--border-gold);
  font-family: var(--font-nav);
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  color: var(--text-dim);
  text-transform: uppercase;
}

footer .gold { color: var(--gold-dark); }

/* =============================================
   LIGHTBOX
   ============================================= */
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 6000;
  background: rgba(0,0,0,0.97);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  padding: 20px;
}

#lightbox.open {
  opacity: 1;
  pointer-events: auto;
}

#lightbox-img {
  max-width: 95vw;
  max-height: 88vh;
  object-fit: contain;
  display: block;
  transform: scale(0.9);
  transition: transform 0.35s ease;
  cursor: zoom-in;
  border: var(--border-gold);
  box-shadow: 0 0 80px rgba(0,0,0,0.9);
}

#lightbox.open #lightbox-img {
  transform: scale(1);
}

#lightbox-caption {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  color: var(--gold-muted);
  text-align: center;
  max-width: 700px;
}

#lightbox-audio-player {
  margin-top: 16px;
  width: min(480px, 90vw);
  accent-color: var(--gold);
  filter: invert(1) sepia(1) saturate(2) hue-rotate(5deg);
  opacity: 0.85;
}

#lightbox-close {
  position: absolute;
  top: 20px; right: 24px;
  background: none;
  border: var(--border-gold);
  color: var(--gold);
  font-size: 1.1rem;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-family: var(--font-nav);
  transition: all 0.3s ease;
}
#lightbox-close:hover { background: rgba(201,168,76,0.1); color: var(--gold-bright); }

.lightbox-zoom-side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(201,168,76,0.15);
  border: var(--border-gold);
  color: var(--gold);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 1.5rem;
  font-family: var(--font-nav);
  transition: background 0.2s ease;
  z-index: 10;
}
.lightbox-zoom-side.left  { left: 16px; }
.lightbox-zoom-side.right { right: 16px; }
.lightbox-zoom-side:hover { background: rgba(201,168,76,0.35); }

.lightbox-zoom-label {
  font-family: var(--font-nav);
  font-size: 0.45rem;
  letter-spacing: 0.1em;
  color: var(--gold-dark);
  opacity: 0.6;
  text-transform: uppercase;
}

/* =============================================
   ZOOM HINTS ON IMAGES
   ============================================= */
.zoomable {
  cursor: zoom-in !important;
  transition: filter 0.3s ease, transform 0.3s ease !important;
}
.zoomable:hover {
  filter: brightness(1.08) sepia(10%) !important;
}

.zoom-hint {
  font-family: var(--font-nav);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--gold-dark);
  text-align: center;
  padding: 6px 0 10px;
  text-transform: uppercase;
  opacity: 0.7;
}

/* =============================================
   AUDIO BLOCK
   ============================================= */
.audio-block {
  padding: 16px;
  background: rgba(0,0,0,0.4);
  border: var(--border-gold);
  border-color: rgba(201,168,76,0.2);
  margin-top: 12px;
}

.audio-label {
  font-family: var(--font-nav);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  color: var(--gold-dark);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.music-title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--gold-muted);
  margin: 8px 0 12px;
  line-height: 1.4;
}

.audio-note {
  font-family: var(--font-nav);
  font-size: 0.58rem;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  margin-top: 8px;
  opacity: 0.7;
  word-break: break-all;
}

.audio-missing {
  opacity: 0.5;
}

.audio-pending {
  font-family: var(--font-nav);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  text-transform: uppercase;
  padding: 8px 0;
  font-style: normal;
}

/* =============================================
   VIDEO BLOCK
   ============================================= */
.video-embed {
  width: 100%;
  aspect-ratio: 16/9;
  display: block;
  border: var(--border-gold);
  border-color: rgba(201,168,76,0.2);
  background: #000;
}

.video-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  border: 1px dashed rgba(201,168,76,0.15);
  margin-top: 16px;
  min-height: 80px;
  opacity: 0.4;
}

.video-placeholder span {
  font-size: 1.4rem;
  opacity: 0.5;
}

.video-placeholder p {
  font-family: var(--font-nav);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--gold-dark);
  text-transform: uppercase;
}

/* =============================================
   LOADING SPINNER
   ============================================= */
.spinner {
  width: 40px; height: 40px;
  border: 2px solid var(--gold-dark);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 60px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 900px) {
  #navbar { padding: 0 20px; }

  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 72px; left: 0; right: 0;
    background: rgba(5,3,7,0.98);
    border-bottom: var(--border-gold);
    padding: 16px 0;
  }
  .nav-hamburger { display: flex; }
  .nav-divider { display: none; }

  /* ── La home su schermo stretto ─────────────────────────
     Sul largo il titolo sta a sinistra e il quadro a destra. Qui non c'e'
     spazio per due colonne: l'altezza diventa quella del contenuto e i due
     pezzi si mettono in fila, prima il disegno e poi il titolo — si entra
     guardando il sipario che si apre. */
  .hero {
    height: auto;
    min-height: 0;
    padding: 48px 0 72px;
  }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 36px;
    justify-items: center;
  }
  .hero-quadro {
    order: -1;
    width: min(66vw, 300px);
  }
  .hero-content { max-width: none; text-align: center; }
  .hero-ornament { justify-content: center; }
  /* Con la spaziatura del largo la didascalia andava a capo lasciando
     "sanguigna" da sola sotto. */
  .hero-quadro-didascalia { letter-spacing: 0.14em; }
  /* Lo "Scorri" era in fondo all'hero a tutta altezza; ora che l'hero e' alto
     quanto il contenuto starebbe sopra al testo, quindi sparisce. */
  .hero-scroll-hint { display: none; }

  .home-libro {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding-bottom: 80px;
  }
  .home-libro-copertina { width: min(52vw, 200px); }
  .home-libro-testo p:not(.section-label) { max-width: none; }

  .home-ingressi {
    grid-template-columns: 1fr;
    margin-bottom: 80px;
  }
  .ingresso {
    border-left: 0;
    border-top: 1px solid rgba(201,168,76,0.18);
    padding: 28px 24px;
  }
  .ingresso:first-child { border-top: 0; }

  .modal-body { grid-template-columns: 1fr; }
  .modal-main-img, .modal-img-placeholder { height: 300px; }
  .modal-text { padding: 32px 28px; }
  .modal-bio { max-height: none; }

  .author-layout { grid-template-columns: 1fr; }
  .author-portrait { max-width: 280px; margin: 0 auto; }

  .characters-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }

  #page-personaggi { padding: 40px 20px 80px; }
  .static-page { padding: 40px 20px 80px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 2rem; }
  .characters-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .modal-container { margin: 0; }
}

/* ── Bottone Avatar nel modal ───────────────────────────── */
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,76,0.45), 0 4px 20px rgba(201,168,76,0.25); }
  50%       { box-shadow: 0 0 0 8px rgba(201,168,76,0),  0 4px 28px rgba(201,168,76,0.45); }
}
.avatar-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
  padding: 16px 36px;
  background: linear-gradient(135deg, rgba(201,168,76,0.28) 0%, rgba(201,168,76,0.18) 100%);
  border: 1.5px solid #c9a84c;
  color: #f0d98a;
  font-family: var(--font-nav);
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  width: 100%;
  animation: ctaPulse 2.4s ease-in-out infinite;
  transition: background 0.25s, transform 0.15s;
}
.avatar-cta-btn:hover {
  background: linear-gradient(135deg, rgba(201,168,76,0.5) 0%, rgba(201,168,76,0.35) 100%);
  transform: translateY(-1px);
}
.avatar-cta-btn:active { transform: translateY(0); }

/* ── Sezione Sostenitori ────────────────────────────────── */
.supporters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 640px));
  justify-content: center;
  gap: 40px;
  max-width: 700px;
  margin: 40px auto;
  padding: 0 24px;
}

.supporter-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 24px;
  border: 1px solid rgba(201,168,76,0.2);
  background: rgba(255,255,255,0.02);
  transition: border-color 0.3s;
}
.supporter-card:hover { border-color: rgba(201,168,76,0.45); }

.supporter-logo {
  max-width: 180px; max-height: 80px;
  object-fit: contain;
  filter: none;
  background: #fff;
  padding: 10px 16px;
  border-radius: 4px;
}
.supporter-logo-placeholder {
  font-family: var(--font-title);
  color: var(--gold-dark);
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-align: center;
}

.supporter-portrait-wrapper {
  width: 260px; height: 260px;
  overflow: hidden;
  border: none;
}
.supporter-portrait {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: none;
  animation: portraitBreathe 4s ease-in-out infinite;
}
.supporter-video-wrapper {
  margin: 24px auto 8px;
  width: 100%;
  max-width: 420px;
  display: flex;
  justify-content: center;
}
.supporter-video {
  width: 100%;
  border-radius: 8px;
  display: block;
}
.supporter-portrait-placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-size: 2.5rem;
  color: rgba(201,168,76,0.3);
}

@keyframes portraitBreathe {
  0%, 100% { transform: scale(1.0);   filter: sepia(15%) brightness(1.0); }
  50%       { transform: scale(1.02); filter: sepia(10%) brightness(1.05); }
}

.supporter-info   { text-align: center; }
.supporter-name   { font-family: var(--font-title); color: var(--gold-light); font-size: 1.05rem; margin-bottom: 4px; }
.supporter-role   { font-family: var(--font-nav); color: var(--gold-dark); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 12px; }
.supporter-text   { color: var(--text-body, #c8b89a); font-size: 0.88rem; line-height: 1.75; margin: 0 0 10px; }
.supporter-quote  { font-family: Georgia, serif; font-style: italic; color: var(--text-muted); font-size: 0.88rem; line-height: 1.6; margin: 12px 0 12px; padding: 8px 12px; border-left: 2px solid var(--gold-dark); }
.supporter-company { font-family: var(--font-nav); color: var(--gold-dark); font-size: 0.7rem; letter-spacing: 0.2em; }
.btn-parla-sponsor {
  display: inline-block;
  margin-top: 18px;
  padding: 10px 24px;
  background: transparent;
  border: 1px solid var(--gold-dark);
  color: var(--gold-light);
  font-family: var(--font-nav);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.btn-parla-sponsor:hover {
  background: var(--gold-dark);
  color: #0a0a0a;
}

/* =============================================
   ACQUISTO
   ============================================= */
.nav-link-acquisto {
  color: var(--gold) !important;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.acquisto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  max-width: 1100px;
  margin: 48px auto;
  padding: 0 24px;
}

.acquisto-card {
  position: relative;
  background: linear-gradient(160deg, #111 0%, #0d0d0d 100%);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 12px;
  padding: 40px 28px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  transition: transform 0.25s, box-shadow 0.25s;
}

.acquisto-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 48px rgba(201,168,76,0.15);
}

.acquisto-card-featured {
  border-color: var(--gold);
  box-shadow: 0 0 40px rgba(201,168,76,0.12);
}

.acquisto-card-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  border: 1px solid rgba(201,168,76,0.4);
  color: var(--gold-light);
  font-size: 0.7rem;
  font-family: var(--font-nav);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 4px 16px;
  border-radius: 20px;
  white-space: nowrap;
}

.acquisto-card-badge-limited {
  background: #c9a84c22;
  border-color: var(--gold);
  color: var(--gold);
}

.acquisto-card-icon {
  font-size: 2.8rem;
  line-height: 1;
}

.acquisto-card-title {
  font-family: var(--font-title);
  font-size: 1.4rem;
  color: var(--gold-light);
  margin: 0;
}

.acquisto-card-desc {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}

.acquisto-card-price {
  font-family: var(--font-title);
  font-size: 1.1rem;
  color: var(--gold);
  margin: 4px 0;
}

.acquisto-qr-placeholder {
  width: 140px;
  height: 140px;
  border: 2px dashed rgba(201,168,76,0.3);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
}

.acquisto-qr-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #444;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}

.acquisto-qr-icon {
  font-size: 2.5rem;
  opacity: 0.25;
}

.acquisto-btn {
  display: inline-block;
  margin-top: 4px;
  padding: 12px 32px;
  border-radius: 40px;
  background: transparent;
  border: 1px solid rgba(201,168,76,0.5);
  color: var(--gold-light);
  font-family: var(--font-nav);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.acquisto-btn:hover {
  background: rgba(201,168,76,0.12);
  color: var(--gold);
}

.acquisto-btn-gold {
  background: var(--gold);
  color: #000;
  border-color: var(--gold);
  font-weight: 700;
}

.acquisto-btn-gold:hover {
  background: var(--gold-light);
  color: #000;
}

.acquisto-footer {
  text-align: center;
  margin-top: 64px;
  padding: 40px;
  border-top: 1px solid rgba(201,168,76,0.15);
  color: var(--text-secondary);
  font-size: 0.95rem;
}

/* =============================================
   KIOSK MODE
   ============================================= */
.kiosk-mode #app {
  padding-top: 0;
}

/* In kiosk mode la navbar scompare — navigazione affidata solo all'exit button */
.kiosk-mode #navbar {
  display: none;
}

/* Pulsante exit kiosk — nascosto in modalità normale, sempre visibile in kiosk */
#kiosk-exit-btn {
  display: none;
}

.kiosk-mode #kiosk-exit-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 9999;
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 24px;
  padding: 8px 16px 8px 12px;
  color: rgba(201,168,76,0.6);
  font-family: var(--font-nav);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: opacity 0.2s, border-color 0.2s, color 0.2s;
  opacity: 0.5;
}

.kiosk-mode #kiosk-exit-btn:hover {
  opacity: 1;
  border-color: rgba(201,168,76,0.7);
  color: var(--gold);
}

.kiosk-mode #kiosk-exit-btn img {
  filter: invert(75%) sepia(40%) saturate(600%) hue-rotate(5deg);
  opacity: 0.6;
}

/* =============================================
   KIOSK — ATTRACT SCREEN
   ============================================= */
.kiosk-attract {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.kiosk-curtain-left,
.kiosk-curtain-right {
  position: absolute;
  top: 0;
  width: 12%;
  height: 100%;
  background: linear-gradient(90deg, #5a0a0a, #3a0808);
  pointer-events: none;
}

.kiosk-curtain-left  { left: 0;  border-radius: 0 0 50% 0; }
.kiosk-curtain-right { right: 0; border-radius: 0 0 0 50%;
  background: linear-gradient(270deg, #5a0a0a, #3a0808); }

.kiosk-attract-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  z-index: 1;
  text-align: center;
}

.kiosk-toto-video {
  width: min(360px, 70vw);
  border-radius: 12px;
  box-shadow: 0 0 60px #c9a84c44;
}

.kiosk-attract-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(28px, 5vw, 56px);
  color: #c9a84c;
  letter-spacing: 4px;
  text-shadow: 0 0 40px #c9a84c88;
}

.kiosk-attract-sub {
  font-size: clamp(12px, 2vw, 18px);
  color: #888;
  font-style: italic;
  letter-spacing: 2px;
}

.kiosk-attract-hint {
  font-size: clamp(14px, 2.5vw, 20px);
  color: #c9a84c;
  font-weight: bold;
  animation: pulse-gold 2s ease-in-out infinite;
  letter-spacing: 2px;
}

@keyframes pulse-gold {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* =============================================
   KIOSK — DISCOVERY SCREEN
   ============================================= */
.kiosk-discovery {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kiosk-spotlight {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 100%;
  background: radial-gradient(ellipse at top, #c9a84c18 0%, transparent 65%);
  pointer-events: none;
}

.kiosk-discovery-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  z-index: 1;
  text-align: center;
  padding: 32px;
}

.kiosk-discovery-img {
  width: min(240px, 45vw);
  border-radius: 8px;
  box-shadow: 0 0 80px #c9a84c33, 0 0 20px #00000088;
  border: 1px solid #c9a84c33;
}

.kiosk-discovery-placeholder {
  width: min(240px, 45vw);
  aspect-ratio: 3/4;
  background: #1a1a1a;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  color: #333;
  border: 1px solid #2a2a2a;
}

.kiosk-discovery-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(22px, 4vw, 40px);
  color: #c9a84c;
  letter-spacing: 1px;
}

.kiosk-discovery-role {
  font-size: clamp(13px, 2vw, 18px);
  color: #888;
  font-style: italic;
}

.kiosk-discovery-dates {
  font-size: clamp(11px, 1.5vw, 14px);
  color: #555;
}

.kiosk-btn-primary {
  margin-top: 8px;
  background: #c9a84c;
  color: #000;
  border: none;
  border-radius: 40px;
  padding: 14px 36px;
  font-size: clamp(14px, 2.5vw, 20px);
  font-weight: bold;
  cursor: pointer;
  letter-spacing: 1px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.kiosk-btn-primary:hover,
.kiosk-btn-primary:focus {
  transform: scale(1.04);
  box-shadow: 0 0 30px #c9a84c66;
  outline: none;
}

.kiosk-discovery-actions {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.kiosk-btn-secondary {
  background: transparent;
  color: #888;
  border: 1px solid #333;
  border-radius: 30px;
  padding: 8px 20px;
  font-size: clamp(12px, 1.8vw, 16px);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.kiosk-btn-secondary:hover,
.kiosk-btn-secondary:focus {
  color: #c9a84c;
  border-color: #c9a84c;
  outline: none;
}

/* ── Citazione kiosk discovery ──────────────────────────── */
.kiosk-citazione {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  color: #c9a84c;
  font-size: clamp(13px, 1.8vw, 17px);
  line-height: 1.6;
  margin: 12px 0 16px;
  padding: 0 8px;
  border-left: 2px solid #c9a84c44;
  text-align: left;
  max-width: 520px;
}

/* ── Citazione tab Video modal ───────────────────────────── */
.modal-citazione {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  color: #c9a84c;
  font-size: 1rem;
  line-height: 1.7;
  margin: 20px 0 0;
  padding: 12px 16px;
  border-left: 3px solid #c9a84c66;
  background: rgba(201, 168, 76, 0.05);
  border-radius: 0 6px 6px 0;
}

/* =============================================
   SCHERMATA DELLO SBLOCCO (solo dentro l'app)
   La griglia dei personaggi resta intravedibile ma sfocata dietro il
   pannello: si vede che c'è qualcosa da aprire, non si legge.
   ============================================= */
#sblocco-schermata {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: radial-gradient(ellipse at center,
              rgba(22, 10, 24, 0.82) 0%,
              rgba(5, 3, 7, 0.94) 100%);
  backdrop-filter: blur(14px) saturate(0.7);
  -webkit-backdrop-filter: blur(14px) saturate(0.7);
  animation: sbloccoEntra 0.5s ease both;
}

@keyframes sbloccoEntra {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.sblocco-pannello {
  max-width: 27rem;
  width: 100%;
  text-align: center;
  padding: 2.5rem 2rem;
  background: var(--bg-modal);
  border: var(--border-gold);
  border-radius: 4px;
  box-shadow: var(--shadow-deep), var(--shadow-gold);
}

.sblocco-fregio {
  color: var(--gold-muted);
  font-size: 1.1rem;
  letter-spacing: 0.5em;
  margin-bottom: 1rem;
}

.sblocco-pannello h2 {
  font-family: var(--font-title);
  color: var(--gold);
  font-size: 1.75rem;
  line-height: 1.2;
  margin: 0 0 0.9rem;
}

.sblocco-invito {
  font-family: var(--font-display);
  color: var(--text-warm);
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0 0 1.5rem;
}

#sblocco-input {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-nav);
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  color: var(--text-cream);
  background: rgba(201, 168, 76, 0.06);
  border: 1px solid rgba(201, 168, 76, 0.4);
  border-radius: 3px;
  transition: border-color 0.25s, box-shadow 0.25s;
}

#sblocco-input::placeholder {
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: 0.04em;
}

#sblocco-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 18px rgba(201, 168, 76, 0.18);
}

#sblocco-input:disabled { opacity: 0.5; }

#sblocco-btn {
  width: 100%;
  margin-top: 1rem;
  padding: 0.9rem;
  font-family: var(--font-nav);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--bg-black);
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  border: none;
  border-radius: 3px;
  transition: filter 0.25s;
}

#sblocco-btn:hover:not(:disabled) { filter: brightness(1.12); }
#sblocco-btn:disabled { opacity: 0.6; cursor: default; }

.sblocco-errore {
  color: #d98a72;
  font-family: var(--font-body);
  font-size: 0.95rem;
  min-height: 1.4em;
  margin: 0.7rem 0 0;
}

.sblocco-nota {
  font-family: var(--font-body);
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 1.4rem 0 0;
}

@media (max-width: 420px) {
  .sblocco-pannello { padding: 2rem 1.25rem; }
  .sblocco-pannello h2 { font-size: 1.5rem; }
}


/* ============================================
   TOTEM — fuori dall'app
   Il totem e' un'installazione fisica: sul telefono i suoi due ingressi
   (il pulsante fisso e la voce di menu) non hanno senso e spariscono.
   ============================================ */
.dentro-app #kiosk-enter-btn,
.dentro-app .nav-kiosk-btn {
  display: none !important;
}

/* =============================================
   CHI HA CHIESTO MENO MOVIMENTO
   Il sistema operativo puo' dire che le animazioni danno fastidio.
   Qui si spengono quelle che partono da sole, senza che nessuno le chieda:
   il quadro dell'hero, il pulviscolo dorato, la freccia che rimbalza.
   Le transizioni al passaggio del mouse restano: quelle rispondono a un gesto.
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  .hero-quadro,
  .hero-bg::before,
  .hero-scroll-hint {
    animation: none;
  }
  .hero-quadro { opacity: 1; transform: none; }
}

/* =============================================
   LA SPIA DELLO SCARICAMENTO
   Musiche e video arrivano in sottofondo dopo lo sblocco. Sono 182 MB:
   troppi per farli aspettare, ma neanche una cosa da nascondere del tutto.
   Una striscia in fondo allo schermo, che se ne va da sola quando ha finito.
   ============================================= */
#fn-spia {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1400;
  padding: 10px 18px 12px;
  background: linear-gradient(180deg, rgba(14,6,16,0.82) 0%, rgba(5,3,7,0.97) 100%);
  border-top: 1px solid rgba(201,168,76,0.28);
  backdrop-filter: blur(10px);
  animation: spiaEntra 0.5s var(--ease-theatre) both;
}

@keyframes spiaEntra {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

.fn-spia-riga {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-nav);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-muted);
  margin-bottom: 8px;
}

.fn-spia-pct { color: var(--gold); white-space: nowrap; }

.fn-spia-barra {
  height: 2px;
  background: rgba(201,168,76,0.16);
  overflow: hidden;
}

.fn-spia-barra i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  transition: width 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  #fn-spia { animation: none; }
  .fn-spia-barra i { transition: none; }
}