/* ==========================================
   HERO (SEZIONE 3) - home-hero
   File: assets/css/home/hero.css
   FULLSCREEN (97vh)
   ✅ Tutto guidato da CSS variables (Customizer)
========================================== */

/* =========================================================
   VARS (fallback)
   ✅ SOLO fallback. Il Customizer inietta valori via inline CSS.
========================================================= */
:root{
  /* Section layout */
  --sp-hero-minh: 97vh;
  --sp-hero-pad-top: clamp(92px, 10vh, 130px);
  --sp-hero-pad-bottom: clamp(64px, 7vh, 96px);
  --sp-hero-align: center; /* center | flex-start | flex-end */
  --sp-hero-inner-max: 1320px;
  --sp-hero-inner-w: 92vw;

  /* Grid */
  --sp-hero-cols: 1.05fr 1fr;
  --sp-hero-gap: clamp(34px, 4vw, 70px);

  /* Background base gradient (mix con tema) */
  --sp-hero-bg-1: color-mix(in srgb, var(--bg) 55%, #000);
  --sp-hero-bg-2: color-mix(in srgb, var(--panel) 70%, #000);
  --sp-hero-bg-3: color-mix(in srgb, var(--bg) 70%, #000);

  /* Spot overlay (radiali accent/accent2) */
  --sp-hero-spot-opacity: .95;
  --sp-hero-spot1-size: 900px 520px;
  --sp-hero-spot1-pos: 18% 10%;
  --sp-hero-spot1-strength: 14%; /* % di accent dentro color-mix */
  --sp-hero-spot1-fade: 60%;

  --sp-hero-spot2-size: 1100px 680px;
  --sp-hero-spot2-pos: 72% 20%;
  --sp-hero-spot2-strength: 12%;
  --sp-hero-spot2-fade: 62%;

  /* Pattern (usa global vars come base, ma puoi override qui) */
  --sp-hero-pattern-opacity: var(--pattern-opacity);
  --sp-hero-pattern-size: var(--pattern-size);
  --sp-hero-pattern-dot: rgba(255,255,255,.05);

  /* Copy */
  --sp-hero-eyebrow-size: 14px;
  --sp-hero-eyebrow-letter: .16em;
  --sp-hero-eyebrow-color: rgba(255,255,255,.72);
  --sp-hero-eyebrow-font: var(--font-subtitle);
  --sp-hero-eyebrow-mb: 16px;

  --sp-hero-title-size: clamp(40px, 4.6vw, 64px);
  --sp-hero-title-line: 1.02;
  --sp-hero-title-weight: 900;
  --sp-hero-title-color: rgba(255,255,255,.95);
  --sp-hero-title-font: var(--font-title);
  --sp-hero-title-mb: 16px;

  --sp-hero-highlight-color: var(--accent);
  --sp-hero-highlight-shadow: 0 0 26px rgba(0,0,0,.25);
  --sp-hero-highlight-shadow-mix: 22%;

  --sp-hero-subtitle-size: clamp(16px, 1.15vw, 18px);
  --sp-hero-subtitle-line: 1.7;
  --sp-hero-subtitle-maxw: 62ch;
  --sp-hero-subtitle-color: rgba(255,255,255,.72);
  --sp-hero-subtitle-font: var(--font-body);
  --sp-hero-subtitle-mb: 26px;

  /* CTA */
  --sp-hero-cta-gap: 12px;
  --sp-hero-cta-mb: 28px;

  --sp-hero-btn-pad-y: 13px;
  --sp-hero-btn-pad-x: 18px;
  --sp-hero-btn-radius: 15px;
  --sp-hero-btn-weight: 800;
  --sp-hero-btn-size: 14px;

  --sp-hero-btn-hover-y: -1px;
  --sp-hero-btn-shadow: 0 18px 46px rgba(0,0,0,.35);
  --sp-hero-btn-shadow-mix: 20%;
  --sp-hero-btn-primary-text: #08101a;

  --sp-hero-btn-ghost-bg: rgba(255,255,255,.06);
  --sp-hero-btn-ghost-border: var(--border);
  --sp-hero-btn-ghost-text: rgba(255,255,255,.92);

  /* Stats */
  --sp-hero-stats-gap: 14px;
  --sp-hero-stats-mt: 6px;

  --sp-hero-stat-pad-y: 14px;
  --sp-hero-stat-pad-x: 16px;
  --sp-hero-stat-radius: 16px;
  --sp-hero-stat-bg: rgba(255,255,255,.05);
  --sp-hero-stat-border: rgba(255,255,255,.10);
  --sp-hero-stat-blur: 10px;

  --sp-hero-stat-num-size: 20px;
  --sp-hero-stat-num-weight: 900;
  --sp-hero-stat-num-color: rgba(255,255,255,.95);
  --sp-hero-stat-num-font: var(--font-title);

  --sp-hero-stat-label-size: 12px;
  --sp-hero-stat-label-letter: .10em;
  --sp-hero-stat-label-color: rgba(255,255,255,.62);
  --sp-hero-stat-label-mt: 5px;
  --sp-hero-stat-label-font: var(--font-subtitle);

  /* Visual wrapper */
  --sp-hero-visual-minh: clamp(460px, 58vh, 640px);

  /* Assembly card */
  --sp-hero-assembly-w: min(640px, 92vw);
  --sp-hero-assembly-h: min(640px, 64vh);
  --sp-hero-assembly-radius: 28px;

  --sp-hero-assembly-bg-top: rgba(255,255,255,.06);
  --sp-hero-assembly-bg-bottom: rgba(255,255,255,.02);
  --sp-hero-assembly-border: rgba(255,255,255,.12);
  --sp-hero-assembly-shadow: 0 34px 110px rgba(0,0,0,.60);

  --sp-hero-assembly-perspective: 1100px;

  /* Assembly overlay (radiali) */
  --sp-hero-assembly-overlay-opacity: .9;
  --sp-hero-assembly-spot1-size: 760px 460px;
  --sp-hero-assembly-spot1-pos: 30% 20%;
  --sp-hero-assembly-spot1-strength: 12%;
  --sp-hero-assembly-spot1-fade: 62%;

  --sp-hero-assembly-spot2-size: 760px 460px;
  --sp-hero-assembly-spot2-pos: 75% 45%;
  --sp-hero-assembly-spot2-strength: 12%;
  --sp-hero-assembly-spot2-fade: 65%;

  /* Top label */
  --sp-hero-top-left: 18px;
  --sp-hero-top-top: 16px;
  --sp-hero-top-gap: 10px;
  --sp-hero-top-color: rgba(255,255,255,.75);
  --sp-hero-top-size: 12px;
  --sp-hero-top-letter: .10em;
  --sp-hero-top-font: var(--font-subtitle);

  /* Dots (Mac style) */
  --sp-hero-dot-size: 10px;
  --sp-hero-dot-gap: 6px;
  --sp-hero-dot-bg: rgba(255,255,255,.18);
  --sp-hero-dot-border: rgba(255,255,255,.14);
  --sp-hero-dot1: rgba(255,95,86,.55);
  --sp-hero-dot2: rgba(255,189,46,.55);
  --sp-hero-dot3: rgba(39,201,63,.55);

  /* Grid overlay */
  --sp-hero-grid-opacity: .10;
  --sp-hero-grid-line: rgba(255,255,255,.08);
  --sp-hero-grid-size: 44px;

  /* Video */
  --sp-hero-video-fit: contain; /* contain | cover */
  --sp-hero-video-opacity: 1;
  --sp-hero-video-brightness: 2.5;
  --sp-hero-video-contrast: 1.08;
  --sp-hero-video-saturate: 1.20;
  --sp-hero-video-blur: 0px;
  --sp-hero-video-rotate: 0deg;

  /* Shadow sotto video */
  --sp-hero-shadow-top: 76%;
  --sp-hero-shadow-w: min(520px, 80vw);
  --sp-hero-shadow-h: 140px;
  --sp-hero-shadow-opacity: .55;
  --sp-hero-shadow-blur: 2px;
  --sp-hero-shadow-strength: rgba(0,0,0,.55);

  /* Responsive */
  --sp-hero-bp-md: 980px;
  --sp-hero-bp-xs: 520px;

  --sp-hero-pad-md-top: 96px;
  --sp-hero-pad-md-bottom: 76px;
  --sp-hero-gap-md: 34px;
  --sp-hero-visual-minh-md: 420px;

  --sp-hero-assembly-w-md: min(620px, 92vw);
  --sp-hero-assembly-h-md: min(560px, 58vh);

  --sp-hero-assembly-h-xs: min(520px, 56vh);
}

/* Fallback se non supporta color-mix */
@supports not (color: color-mix(in srgb, white 50%, black)){
  :root{
    --sp-hero-bg-1: #0b0f14;
    --sp-hero-bg-2: #0f1620;
    --sp-hero-bg-3: #0b0f14;
  }
}

/* =========================================================
   HERO BASE
========================================================= */
.home-hero{
  position: relative;
  min-height: var(--sp-hero-minh);
  padding: var(--sp-hero-pad-top) 0 var(--sp-hero-pad-bottom);
  display: flex;
  align-items: var(--sp-hero-align);

  background: linear-gradient(180deg, var(--sp-hero-bg-1) 0%, var(--sp-hero-bg-2) 45%, var(--sp-hero-bg-3) 100%);
  overflow: hidden;
}

/* Spot gradients */
.home-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 0;
  opacity: var(--sp-hero-spot-opacity);
}

@supports (color: color-mix(in srgb, white 50%, black)){
  .home-hero::after{
    background:
      radial-gradient(var(--sp-hero-spot1-size) at var(--sp-hero-spot1-pos),
        color-mix(in srgb, var(--accent) var(--sp-hero-spot1-strength), transparent),
        transparent var(--sp-hero-spot1-fade)),
      radial-gradient(var(--sp-hero-spot2-size) at var(--sp-hero-spot2-pos),
        color-mix(in srgb, var(--accent2) var(--sp-hero-spot2-strength), transparent),
        transparent var(--sp-hero-spot2-fade));
  }
}

/* Pattern */
.home-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(var(--sp-hero-pattern-dot) 1px, transparent 1px);
  background-size: var(--sp-hero-pattern-size) var(--sp-hero-pattern-size);
  opacity: var(--sp-hero-pattern-opacity);
  pointer-events:none;
  z-index: 1;
}

/* Inner */
.home-hero__inner{
  width: min(var(--sp-hero-inner-max), var(--sp-hero-inner-w));
  margin: 0 auto;

  display: grid;
  grid-template-columns: var(--sp-hero-cols);
  gap: var(--sp-hero-gap);
  align-items: center;

  position: relative;
  z-index: 2;
}

/* =========================================================
   COPY
========================================================= */
.home-hero__copy{
  position: relative;
  z-index: 2;
}

.home-hero__eyebrow{
  margin: 0 0 var(--sp-hero-eyebrow-mb);
  font-size: var(--sp-hero-eyebrow-size);
  letter-spacing: var(--sp-hero-eyebrow-letter);
  text-transform: uppercase;
  color: var(--sp-hero-eyebrow-color);
  font-family: var(--sp-hero-eyebrow-font);
}

.home-hero__title{
  margin: 0 0 var(--sp-hero-title-mb);
  font-size: var(--sp-hero-title-size);
  line-height: var(--sp-hero-title-line);
  font-weight: var(--sp-hero-title-weight);
  color: var(--sp-hero-title-color);
  font-family: var(--sp-hero-title-font);
}

.home-hero__title span{
  display: inline-block;
  color: var(--sp-hero-highlight-color);
  text-shadow: var(--sp-hero-highlight-shadow);
}

@supports (color: color-mix(in srgb, white 50%, black)){
  .home-hero__title span{
    text-shadow: 0 0 26px color-mix(in srgb, var(--accent) var(--sp-hero-highlight-shadow-mix), transparent);
  }
}

.home-hero__subtitle{
  margin: 0 0 var(--sp-hero-subtitle-mb);
  font-size: var(--sp-hero-subtitle-size);
  line-height: var(--sp-hero-subtitle-line);
  max-width: var(--sp-hero-subtitle-maxw);
  color: var(--sp-hero-subtitle-color);
  font-family: var(--sp-hero-subtitle-font);
}

/* CTA */
.home-hero__cta{
  display:flex;
  gap: var(--sp-hero-cta-gap);
  flex-wrap: wrap;
  margin-bottom: var(--sp-hero-cta-mb);
}

.home-hero__cta .btn{
  padding: var(--sp-hero-btn-pad-y) var(--sp-hero-btn-pad-x);
  border-radius: var(--sp-hero-btn-radius);
  font-weight: var(--sp-hero-btn-weight);
  font-size: var(--sp-hero-btn-size);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  will-change: transform;
}

.home-hero__cta .btn--primary{
  background: var(--accent);
  border-color: transparent;
  color: var(--sp-hero-btn-primary-text);
  box-shadow: var(--sp-hero-btn-shadow);
}

@supports (color: color-mix(in srgb, white 50%, black)){
  .home-hero__cta .btn--primary{
    box-shadow: 0 18px 46px color-mix(in srgb, var(--accent) var(--sp-hero-btn-shadow-mix), transparent);
  }
}

.home-hero__cta .btn--ghost,
.home-hero__cta .btn--secondary{
  background: var(--sp-hero-btn-ghost-bg);
  border: 1px solid var(--sp-hero-btn-ghost-border);
  color: var(--sp-hero-btn-ghost-text);
}

.home-hero__cta .btn:hover{
  transform: translateY(var(--sp-hero-btn-hover-y));
}

/* Stats */
.home-hero__stats{
  display:flex;
  gap: var(--sp-hero-stats-gap);
  flex-wrap: wrap;
  margin-top: var(--sp-hero-stats-mt);
}

.home-hero__stats .stat{
  padding: var(--sp-hero-stat-pad-y) var(--sp-hero-stat-pad-x);
  border-radius: var(--sp-hero-stat-radius);
  background: var(--sp-hero-stat-bg);
  border: 1px solid var(--sp-hero-stat-border);
  backdrop-filter: blur(var(--sp-hero-stat-blur));
}

.home-hero__stats .stat__num{
  font-weight: var(--sp-hero-stat-num-weight);
  font-size: var(--sp-hero-stat-num-size);
  color: var(--sp-hero-stat-num-color);
  font-family: var(--sp-hero-stat-num-font);
}

.home-hero__stats .stat__label{
  font-size: var(--sp-hero-stat-label-size);
  letter-spacing: var(--sp-hero-stat-label-letter);
  text-transform: uppercase;
  color: var(--sp-hero-stat-label-color);
  margin-top: var(--sp-hero-stat-label-mt);
  font-family: var(--sp-hero-stat-label-font);
}

/* =========================================================
   VISUAL
========================================================= */
.home-hero__visual{
  position: relative;
  z-index: 2;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: var(--sp-hero-visual-minh);
}

/* Assembly */
.hero-assembly{
  position: relative;

  width: var(--sp-hero-assembly-w);
  height: var(--sp-hero-assembly-h);

  border-radius: var(--sp-hero-assembly-radius);
  background: linear-gradient(180deg, var(--sp-hero-assembly-bg-top), var(--sp-hero-assembly-bg-bottom));
  border: 1px solid var(--sp-hero-assembly-border);
  box-shadow: var(--sp-hero-assembly-shadow);
  overflow: hidden;

  perspective: var(--sp-hero-assembly-perspective);
  transform-style: preserve-3d;
}

/* Overlay spot su assembly */
.hero-assembly::before{
  content:"";
  position:absolute;
  inset:0;
  opacity: var(--sp-hero-assembly-overlay-opacity);
  pointer-events:none;
  z-index: 2;
}

@supports (color: color-mix(in srgb, white 50%, black)){
  .hero-assembly::before{
    background:
      radial-gradient(var(--sp-hero-assembly-spot1-size) at var(--sp-hero-assembly-spot1-pos),
        color-mix(in srgb, var(--accent) var(--sp-hero-assembly-spot1-strength), transparent),
        transparent var(--sp-hero-assembly-spot1-fade)),
      radial-gradient(var(--sp-hero-assembly-spot2-size) at var(--sp-hero-assembly-spot2-pos),
        color-mix(in srgb, var(--accent2) var(--sp-hero-assembly-spot2-strength), transparent),
        transparent var(--sp-hero-assembly-spot2-fade));
  }
}

/* Top label */
.hero-assembly__top{
  position:absolute;
  left: var(--sp-hero-top-left);
  top: var(--sp-hero-top-top);
  display:flex;
  align-items:center;
  gap: var(--sp-hero-top-gap);
  z-index: 6;
  color: var(--sp-hero-top-color);
  font-size: var(--sp-hero-top-size);
  letter-spacing: var(--sp-hero-top-letter);
  text-transform: uppercase;
  font-family: var(--sp-hero-top-font);
}

/* Dots */
.hero-assembly__dots{ display:flex; gap: var(--sp-hero-dot-gap); }

.hero-assembly__dots .dot{
  width: var(--sp-hero-dot-size);
  height: var(--sp-hero-dot-size);
  border-radius: 999px;
  background: var(--sp-hero-dot-bg);
  border: 1px solid var(--sp-hero-dot-border);
}
.hero-assembly__dots .dot:nth-child(1){ background: var(--sp-hero-dot1); }
.hero-assembly__dots .dot:nth-child(2){ background: var(--sp-hero-dot2); }
.hero-assembly__dots .dot:nth-child(3){ background: var(--sp-hero-dot3); }

/* Grid overlay */
.hero-assembly__grid{
  position:absolute;
  inset:0;
  opacity: var(--sp-hero-grid-opacity);
  background-image:
    linear-gradient(var(--sp-hero-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--sp-hero-grid-line) 1px, transparent 1px);
  background-size: var(--sp-hero-grid-size) var(--sp-hero-grid-size);
  pointer-events:none;
  z-index: 1;
}

/* VIDEO */
.hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--sp-hero-video-fit);
  transform: translateZ(0) rotate(var(--sp-hero-video-rotate));
  z-index: 3;
  pointer-events: none;
  opacity: var(--sp-hero-video-opacity);
  filter:
    brightness(var(--sp-hero-video-brightness))
    contrast(var(--sp-hero-video-contrast))
    saturate(var(--sp-hero-video-saturate))
    blur(var(--sp-hero-video-blur));
}

/* Shadow */
.hero-shadow{
  position:absolute;
  left: 50%;
  top: var(--sp-hero-shadow-top);
  width: var(--sp-hero-shadow-w);
  height: var(--sp-hero-shadow-h);
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--sp-hero-shadow-strength), rgba(0,0,0,0));
  opacity: var(--sp-hero-shadow-opacity);
  filter: blur(var(--sp-hero-shadow-blur));
  pointer-events:none;
  z-index: 4;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 980px){
  .home-hero{
    min-height: auto;
    padding: var(--sp-hero-pad-md-top) 0 var(--sp-hero-pad-md-bottom);
  }

  .home-hero__inner{
    grid-template-columns: 1fr;
    gap: var(--sp-hero-gap-md);
  }

  .home-hero__visual{
    min-height: var(--sp-hero-visual-minh-md);
  }

  .hero-assembly{
    width: var(--sp-hero-assembly-w-md);
    height: var(--sp-hero-assembly-h-md);
  }
}

@media (max-width: 520px){
  .home-hero__cta .btn{ width: 100%; }

  .hero-assembly{
    height: var(--sp-hero-assembly-h-xs);
  }
}