/* ============================================================
   TAKEAWAY — Hero
   Video + fade to black allo scroll. Sezioni invariate.
   ============================================================ */

:root {
  --hero-sub-size-desktop: var(--text-body-lg);
  --hero-sub-size-mobile:  var(--text-body-md);
}

#hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}

.hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #000;
  will-change: opacity;
}

.hero-video-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  pointer-events: none;
  z-index: 1;
}

.hero-blackout {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  will-change: opacity;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* hero-center non usato — nascosto via JS */
.hero-center { display: none !important; }

/* ── Header fisso ── */
.hero-header {
  position: fixed;
  top: var(--margin-page);
  left: var(--margin-page);
  right: var(--margin-page);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
}

.logo-small { width: 110px; flex-shrink: 0; }

.hero-email {
  font-family: var(--font);
  font-size: var(--text-body-md);
  line-height: var(--lh-body-md);
  font-weight: var(--fw-regular);
  color: var(--c-text);
  letter-spacing: var(--ls-body);
}

.hero-email--mobile  { display: none; }
.hero-email--desktop { display: block; }

/* ── Footer hero ── */
.hero-footer {
  position: absolute;
  bottom: var(--margin-page);
  left: var(--margin-page);
  right: var(--margin-page);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 10;
  will-change: opacity;
}

.hero-credits {
  font-family: var(--font);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-regular);
  color: var(--c-text);
  letter-spacing: var(--ls-body);
}

.hero-social { display: flex; gap: var(--sp-xl); align-items: center; }

.hero-social a {
  font-family: var(--font);
  font-size: var(--text-body-md);
  font-weight: var(--fw-regular);
  color: var(--c-text);
  letter-spacing: var(--ls-body);
  transition: opacity 0.2s;
}
.hero-social a:hover { opacity: 0.5; }

/* ── Mobile ── */
@media (max-width: 768px) {
  #hero { height: 100svh; }
  .logo-small { width: 90px; }
  .hero-email--desktop { display: none; }
  .hero-email--mobile {
    display: block;
    font-size: var(--text-body-md);
    letter-spacing: var(--ls-md);
  }
}

@media (max-width: 400px) {
  .hero-email { font-size: var(--text-body-sm); }
  .logo-small { width: 72px; }
}

@media (max-width: 768px) and (orientation: portrait) {
  .hero-footer { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-credits { text-align: center; width: 100%; }
  .hero-social  { display: none; }
}

@media (max-width: 768px) and (orientation: landscape) {
  .hero-social { gap: 20px; }
}