/* Tema scuro moderno OggiaTeatro */
:root {
  --bg-0: #0e1318;
  --bg-1: #131922;
  --surface-1: #11161f;
  --surface-2: #19202a;
  --surface-3: #202734;
  --text-0: #e7eaee;
  --text-1: #b6bcc3;
  --muted: #8a9098;
  --accent: #c9a44c; /* accento dorato teatrale */
  --accent-2: #8f6b2a;
}

/* Override Bootstrap palette */
:root {
  --bs-body-bg: var(--bg-0);
  --bs-body-color: var(--text-0);
  --bs-secondary-color: var(--text-1);
  --bs-border-color: #2a3240;
  --bs-link-color: var(--accent);
  --bs-link-hover-color: #ddb869;
  --bs-primary: var(--accent);
}

body {
  background-color: var(--bg-0);
  color: var(--text-0);
}

/* Tipografia e spaziatura migliorate */
h1, h2, h3 { line-height: 1.2; }
.lead { color: var(--text-1); }

/* Microinterazioni e accessibilità */
.btn { transition: transform .12s ease, box-shadow .12s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.nav-link:focus-visible,
.btn:focus-visible,
.form-control:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(201,164,76,.25); }

.navbar {
  background-color: #ffffff !important; /* sfondo bianco */
  padding-block: .5rem; /* riduce l'altezza complessiva */
}
.navbar.border-bottom { border-bottom-color: #0d1b2a !important; border-bottom-width: 2px; } /* contorno blu scuro elegante */
.navbar .nav-link { color: #0d1b2a; }
.navbar .nav-link.active, .navbar .nav-link:hover { color: #1b263b; text-decoration: none; }
/* compatta il click target dei link, mantenendo accessibilità */
.navbar .nav-link { padding-top: .25rem; padding-bottom: .25rem; }
/* hamburger visibile su sfondo bianco */
.navbar .navbar-toggler { border-color: #0d1b2a; }
.navbar .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(13,27,42,.25); }
.navbar.navbar-dark .navbar-toggler-icon,
.navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%230d1b2a' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.bg-gradient {
  background: radial-gradient(1200px 600px at 10% 0%, var(--bg-1) 0%, var(--bg-0) 50%, #0b1015 100%);
}

.bg-surface { background-color: var(--surface-1); }
.card { background-color: var(--surface-2); border-color: #273043; transition: transform .2s ease, box-shadow .2s ease; }
.card-title { font-weight: 600; color: var(--text-0); }
.card-text { color: var(--text-1); }

.card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.35); }

/* Reveal up animation for cards and sections */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.reveal-up { opacity: 0; animation: fadeUp .6s ease forwards; }
.reveal-delay-1 { animation-delay: .05s; }
.reveal-delay-2 { animation-delay: .1s; }
.reveal-delay-3 { animation-delay: .15s; }
.reveal-delay-4 { animation-delay: .2s; }

.btn-primary { background-color: var(--accent); border-color: var(--accent-2); color: #0f1216; }
.btn-primary:hover { background-color: #ddb869; border-color: #b58a36; }
.btn-outline-secondary { color: var(--text-0); border-color: #3a4356; }
.btn-outline-secondary:hover { background-color: #2a3240; }

.hero-card { background-color: var(--surface-2); }
.hero-card .emoji { font-size: 1.75rem; }

/* Helper emoji generico */
.emoji { display: inline-block; font-size: 1.25rem; line-height: 1; transform: translateY(1px); }

footer { position: relative; z-index: 10; background-color: var(--surface-1); }
footer .link-secondary { color: var(--text-1); }
footer .link-secondary:hover { color: var(--text-0); }

/* Illustrazione palco teatrale */
.hero-illustration {
  position: relative;
  height: 280px;
  background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-2) 100%);
  border-radius: 1rem;
  overflow: hidden;
}
.hero-illustration svg { display: block; width: 100%; height: 100%; }
.light-sweep { animation: sweep 6s ease-in-out infinite; transform-origin: 0% 100%; }
.curtain { animation: curtainMove 10s ease-in-out infinite alternate; }
.stars circle { animation: twinkle 4s ease-in-out infinite; opacity: 0.6; }

@keyframes sweep { 0% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } 100% { transform: rotate(-6deg); } }
@keyframes curtainMove { 0% { transform: translateX(0); } 100% { transform: translateX(12px); } }
@keyframes twinkle { 0%, 100% { opacity: 0.3 } 50% { opacity: 0.9 } }

/* Responsive refinements */
@media (max-width: 576px) {
  .display-5 { font-size: 2rem; }
  .hero-illustration { height: 220px; }
}

/* Logo sizing */
.brand-logo {
  height: 66px; /* mantiene altezza layout */
  width: auto;
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
  transform: scale(1.3); /* +30% visivo senza aumentare la fascia */
  transform-origin: left center;
}

/* Full wordmark logo for desktop */
.brand-logo-full { height: 108px; width: auto; display: inline-block; vertical-align: middle; transform: scale(1.3); transform-origin: left center; }

/* Responsive tweaks */
@media (max-width: 576px) {
  .brand-logo { height: 60px; transform: scale(1.3); } /* +30% visivo su mobile */
}
@media (min-width: 992px) {
  .navbar { padding-block: .65rem; }
}

/* Generic icon styles for inline SVGs */
.icon { height: 28px; width: 28px; display: inline-block; }
.icon-32 { height: 32px; width: 32px; }
.icon-40 { height: 40px; width: 40px; }
.icon-accent path,
.icon-accent circle,
.icon-accent rect,
.icon-accent polygon { fill: var(--accent); }
.icon-muted path,
.icon-muted circle,
.icon-muted rect,
.icon-muted polygon { fill: var(--muted); }
.icon-breath { animation: iconBreath 3s ease-in-out infinite; }
@keyframes iconBreath {
  0% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-2px); opacity: 0.95; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Footer company info */
.footer-company { color: var(--muted); }
.footer-company a { color: var(--text-1); text-decoration: none; }
.footer-company a:hover { color: var(--text-0); text-decoration: underline; }