/* ===============================
   RESET
=============================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

/* ===============================
   VARIABILI GLOBALI (VW / VH)
=============================== */
:root {
  --bg: #111111;
  --text: #FAFAFA;
  --guide: magenta;

  --header-h: 22vh;
  --header-a1: 1;
  --header-a2: 0.80;
  --header-a3: 0.40;
  --header-a4: 0;

  --pad-x: 2.1vw;
  --pad-y: 2.1vh;

  --menu-offset-y: 0em;

  --name-size: 0.85vw;
  --name-track: 0.22em;
  --name-weight: 500;

  --guide-w: 1px;
  --show-guides: 0;

  --x-left: 0px;
  --x-right: 0px;
  --y-top: 0px;
  --y-bottom: 0px;
  --x-nav-right: 0px;

  --min-w: 1200;
  --max-w: 1920;
  --scale: clamp(
    0.85,
    (100vw - (var(--min-w) * 1px)) / ((var(--max-w) - var(--min-w)) * 1px) + 0.85,
    1.15
  );

  --header-pad-x: calc(var(--pad-x) * var(--scale));
  --header-pad-y: calc(var(--pad-y) * var(--scale));

  --track: clamp(0.16em, calc(var(--name-track) * var(--scale)), 0.24em);

  --fs-name: clamp(11px, calc(var(--name-size) * var(--scale)), 15px);
  --fs-nav: clamp(11px, calc(0.8vw * var(--scale)), 13px);

  --nav-gap: clamp(1.6em, calc(3em * var(--scale)), 3.2em);
  --nav-offset: calc(var(--menu-offset-y) * var(--scale));

  /* ===== HERO VARS ===== */
  --breath-x: 0px;
  --breath-y: 0px;

  --temp-hue: 0deg;
  --temp-sat: 1;
  --temp-bri: 1;

  --overlay-dyn: 0.22;

  --hero-pos-x: 50%;
  --hero-pos-y: 50%;

  /* ✅ IMPORTANTISSIMO: default background, evita “immagine non visibile” */
  --hero-bg: url("/assets/img/hero/heroM1.png");
}

/* ===============================
   BASE
=============================== */
body {
  background: var(--bg);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  overflow: hidden;
}

/* ===============================
   HERO
=============================== */
.hero {
  position: relative;
  min-height: 100svh;
  height: 100vh;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: var(--bg);
  z-index: 0;
}

/* ===============================
   HERO CROSSFADE (anti-flicker)
=============================== */
.hero-image {
  position: absolute;
  inset: 0;
  z-index: 1;

  opacity: 0;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;

  will-change: opacity;
  transition: opacity 2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.hero-image.is-active {
  opacity: 1;
}

/* ✅ fallback iniziale per evitare “vuoto” prima del JS */
.hero-a { --hero-bg: url("/assets/img/hero/heroM1.png"); }
.hero-b { --hero-bg: url("/assets/img/hero/heroM2.png"); }

.hero-image::before {
  content: "";
  position: absolute;
  inset: 0;

  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--hero-pos-x) var(--hero-pos-y);
  background-image: var(--hero-bg);

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  image-rendering: -webkit-optimize-contrast;

  transform:
    translate3d(var(--breath-x), var(--breath-y), 0)
    scale(1.02);

  filter:
    hue-rotate(var(--temp-hue))
    saturate(var(--temp-sat))
    brightness(var(--temp-bri));

  transition:
    transform 18s linear,
    filter 2.5s ease-in-out;

  will-change: transform, filter;
}

/* ===============================
   KEN BURNS
=============================== */
.hero-image.is-kenburns::before {
  animation: kenburns 28s ease-in-out forwards;
}

@keyframes kenburns {
  from {
    transform:
      translate3d(var(--breath-x), var(--breath-y), 0)
      scale(1.02);
  }
  to {
    transform:
      translate3d(var(--breath-x), var(--breath-y), 0)
      scale(1.06);
  }
}

/* ===============================
   GRAIN (solo CSS, leggero)
=============================== */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;

  background-image:
    repeating-radial-gradient(
      circle at 50% 50%,
      rgba(255,255,255,0.018) 0,
      rgba(0,0,0,0.018) 1px,
      rgba(0,0,0,0) 2px
    );

  mix-blend-mode: overlay;
  opacity: 0.12;

  animation: grainMove 0.6s steps(2) infinite;
}

@keyframes grainMove {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-1px,1px); }
  50%  { transform: translate(1px,-1px); }
  75%  { transform: translate(-1px,-1px); }
  100% { transform: translate(0,0); }
}

/* ===============================
   OVERLAY DINAMICO
=============================== */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgba(17,17,17,var(--header-a1)) 0%,
      rgba(17,17,17,var(--header-a2)) 30%,
      rgba(17,17,17,var(--header-a3)) 60%,
      rgba(17,17,17,var(--header-a4)) 100%
    ) 0 0 / 100% var(--header-h) no-repeat,

    linear-gradient(
      to bottom,
      rgba(0,0,0,var(--overlay-dyn)),
      rgba(0,0,0,var(--overlay-dyn))
    );
}

/* ===============================
   HEADER
=============================== */
.hero-header {
  position: fixed;
  top: var(--header-pad-y);
  left: 0;
  right: 0;
  z-index: 10;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-left: var(--header-pad-x);
  padding-right: var(--header-pad-x);
}

.hero-header::after {
  content: "";
  position: absolute;
  left: calc(var(--header-pad-x) - 12px);
  right: calc(var(--header-pad-x) - 11px);
  bottom: -2.1vh;
  height: 1.5px;
  background-color: rgba(250, 250, 250, 0.15);
}

/* ===============================
   NOME
=============================== */
.site-name {
  font-size: var(--fs-name);
  font-weight: var(--name-weight);
  letter-spacing: clamp(0.18em, calc(var(--track) * 1.08), 0.28em);
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.site-name,
.site-name:link,
.site-name:visited,
.site-name:hover,
.site-name:active {
  color: #FAFAFA;
  text-decoration: none;
}

.site-name:hover {
  opacity: 0.9;
  cursor: pointer;
}

/* ===============================
   SOTTOTITOLO
=============================== */
.site-subtitle {
  position: fixed;
  z-index: 10;

  top: calc(var(--header-pad-y) + (var(--fs-name) * 1.35));
  left: var(--header-pad-x);

  font-size: clamp(9px, calc(9px * var(--scale)), 10px);
  font-weight: 400;
  letter-spacing: clamp(0.08em, calc(var(--track) * 0.55), 0.16em);

  color: #FAFAFA;
  opacity: 0.5;

  white-space: nowrap;
  pointer-events: none;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===============================
   MICRO-CAPTION
=============================== */
.hero-caption {
  position: fixed;
  z-index: 10;

  left: var(--header-pad-x);
  bottom: calc(var(--header-pad-y) * 1.2);

  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;

  color: #FAFAFA;
  opacity: 0.65;

  white-space: nowrap;
  pointer-events: none;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===============================
   MENU
=============================== */
.side-nav {
  transform: translateY(var(--nav-offset));
  display: flex;
  gap: var(--nav-gap);
  align-items: center;
}

.nav-item {
  font-size: var(--fs-nav);
  font-weight: 400;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.65;
  text-decoration: none;

  transition:
    opacity 0.25s ease,
    transform 0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.nav-item:hover {
  opacity: 1;
  transform: translateY(-2px);
}

/* ===============================
   STABILITÀ DESKTOP
=============================== */
@media (max-width: 1200px) {
  :root { --nav-gap: 2em; }

  .site-subtitle {
    font-size: 9px;
    opacity: 0.48;
  }

  .hero-caption {
    font-size: 9px;
    opacity: 0.38;
  }
}

/* ===============================
   GUIDE (DEBUG)
=============================== */
.guide {
  position: fixed;
  background: var(--guide);
  pointer-events: none;
  z-index: 5;
  opacity: var(--show-guides);
}

.v-left, .v-right {
  top: 0;
  bottom: 0;
  width: var(--guide-w);
}

.v-left { left: var(--x-left); }
.v-right { left: var(--x-right); }

.v-nav-right {
  top: 0;
  bottom: 0;
  width: var(--guide-w);
  left: var(--x-nav-right);
}

.h-top, .h-bottom {
  left: 0;
  right: 0;
  height: var(--guide-w);
}

.h-top { top: var(--y-top); }
.h-bottom { top: var(--y-bottom); }