/* ===========================
   INTRO CNC - FULLSCREEN (THEME-DRIVEN)
   File: assets/css/home/intro-cnc.css
   - usa var(--bg, --panel, --accent, --accent2, --pattern-*)
   - font da var(--font-*)
=========================== */

/* blocca scroll mentre intro attiva */
body.is-intro { overflow: hidden; }

/* ===========================
   HEADER: nascosto durante intro, poi appare
=========================== */
.site-header,
header.site-header{
  transition: opacity .45s ease, transform .45s ease, filter .45s ease;
  will-change: opacity, transform, filter;
}

body.is-intro .site-header,
body.is-intro header.site-header{
  opacity: 0;
  transform: translateY(-14px);
  filter: blur(6px);
  pointer-events: none;
}

body:not(.is-intro) .site-header,
body:not(.is-intro) header.site-header{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  pointer-events: auto;
}

/* ===========================
   INTRO overlay (prima volta)
=========================== */
.sp-intro{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;

  /* base: solo dark */
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--panel) 65%, #000) 0%,
      color-mix(in srgb, var(--bg) 70%, #000) 100%
    );
}

/* spot “brand” */
.sp-intro::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 0;
  opacity: .95;
}

@supports (color: color-mix(in srgb, white 50%, black)){
  .sp-intro::after{
    background:
      radial-gradient(1200px 700px at 50% 18%,
        color-mix(in srgb, var(--accent2) 20%, transparent) 0%,
        transparent 55%),
      radial-gradient(900px 600px at 50% 60%,
        color-mix(in srgb, var(--accent) 14%, transparent) 0%,
        transparent 65%);
  }
}

/* pattern coerente col tema */
.sp-intro::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: var(--pattern-size) var(--pattern-size);
  opacity: var(--pattern-opacity);
  pointer-events:none;
  z-index: 1;
}

/* ==================================================
   ✅ MODALITÀ SEZIONE 1 (dopo "unpin" dal JS)
================================================== */
.sp-intro.sp-intro--section{
  position: relative;
  inset: auto;
  z-index: 1;

  min-height: 100vh;
  height: 100vh;

  padding-top: 84px;
  padding-bottom: 54px;

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

  pointer-events: auto;
  opacity: 1;
}

/* ===========================
   FRAME (macchina)
=========================== */
.sp-intro__frame{
  width: min(1240px, 96vw);
  height: min(720px, 88vh);

  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  position: relative;
  overflow: hidden;

  box-shadow: 0 30px 80px var(--shadow);
}

.sp-intro.sp-intro--section .sp-intro__frame{
  height: min(760px, 78vh);
}

/* overlay texture */
.sp-intro__grain{
  position:absolute;
  inset:0;
  opacity: calc(var(--pattern-opacity) + .10);
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: var(--pattern-size) var(--pattern-size);
  mix-blend-mode: overlay;
  pointer-events:none;
}

.sp-intro__vignette{
  position:absolute; inset:-40px;
  background: radial-gradient(900px 540px at 50% 40%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}

/* ===========================
   PORTE (IMMAGINI REALI)
=========================== */
.sp-door{
  position:absolute;
  top:0;
  width:50%;
  height:100%;
  z-index: 5;

  background-color: rgba(255,255,255,.03);
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
  filter: contrast(1.08) saturate(1.05);
  will-change: transform;
}

/* porta sinistra */
.sp-door--left{
  left:0;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,.12) 42%, rgba(0,0,0,.42) 100%),
    url("../../img/home/door-left.jpg");
  background-position: 30% center;
  border-right: 1px solid rgba(255,255,255,.10);
  box-shadow:
    inset -46px 0 78px rgba(0,0,0,.50),
    inset  0 0 0 1px rgba(255,255,255,.06);
}

/* porta destra */
.sp-door--right{
  right:0;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,.12) 42%, rgba(0,0,0,.42) 100%),
    url("../../img/home/door-right.jpg");
  background-position: 70% center;
  border-left: 1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 46px 0 78px rgba(0,0,0,.50),
    inset  0 0 0 1px rgba(255,255,255,.06);
}

/* ===========================
   INTERNO MACCHINA (inside.jpg)
=========================== */
.sp-inside{
  position:absolute;
  z-index: 3;
  inset:0;
  opacity: 0;
  transform: scale(.988);

  background:
    radial-gradient(900px 560px at 50% 35%, rgba(0,0,0,0) 38%, rgba(0,0,0,.48) 100%),
    url("../../img/home/inside.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  will-change: transform, opacity;
}

/* glow guidato dall'accent */
.sp-glow{
  position:absolute; inset:0;
  background: radial-gradient(750px 480px at 50% 35%,
    rgba(255,255,255,.03) 0%,
    rgba(0,0,0,0) 72%);
  opacity: 0;
  pointer-events:none;
}

@supports (color: color-mix(in srgb, white 50%, black)){
  .sp-glow{
    background: radial-gradient(750px 480px at 50% 35%,
      color-mix(in srgb, var(--accent) 18%, transparent),
      color-mix(in srgb, #fff 3%, transparent) 45%,
      transparent 72%);
  }
}

.sp-fog{
  position:absolute; inset:0;
  background: radial-gradient(900px 480px at 40% 70%,
    rgba(255,255,255,.03),
    rgba(0,0,0,0) 60%);
  opacity: 0;
  pointer-events:none;
}

/* ===========================
   LOGO CENTRALE (badge grande)
=========================== */
.sp-logo{
  position:absolute;
  left:50%;
  top: 46%;
  transform: translate(-50%,-50%);
  opacity: 0;
  z-index: 4;
  will-change: transform, opacity;
}

/* badge */
.sp-logo__badge{
  width: min(920px, 94vw);
  padding: 46px 52px 36px;
  border-radius: 26px;

  background: rgba(0,0,0,.28);
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  backdrop-filter: blur(14px);

  box-shadow:
    0 26px 76px var(--shadow),
    inset 0 0 0 1px rgba(255,255,255,.05);

  text-align: center;
}

.sp-logo__mark{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom: 14px;
}

.sp-logo__mark .custom-logo-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.sp-logo__mark img.custom-logo{
  max-width: 520px;
  width: 100%;
  height: auto;
  display:block;
  /* glow dinamico */
  filter: drop-shadow(0 0 26px rgba(0,0,0,.25));
}
@supports (color: color-mix(in srgb, white 50%, black)){
  .sp-logo__mark img.custom-logo{
    filter: drop-shadow(0 0 26px color-mix(in srgb, var(--accent) 14%, transparent));
  }
}

.sp-logo__fallback{
  font-weight: 900;
  font-size: 110px;
  letter-spacing: .10em;
  color: rgba(255,255,255,.92);
  font-family: var(--font-title);
  text-shadow: 0 0 28px rgba(0,0,0,.35);
}
@supports (color: color-mix(in srgb, white 50%, black)){
  .sp-logo__fallback{
    text-shadow: 0 0 28px color-mix(in srgb, var(--accent) 18%, transparent);
  }
}

.sp-logo__kicker{
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin-top: 10px;
  font-family: var(--font-subtitle);
}

.sp-logo__meta{
  margin: 14px auto 0;
  max-width: 72ch;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255,255,255,.74);
  font-family: var(--font-body);
}

.sp-scrollhint{
  margin-top: 14px;
  font-size: 12px;
  color: rgba(255,255,255,.62);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-family: var(--font-subtitle);
}

/* uscita intro */
.sp-intro.is-done{
  pointer-events:none;
  opacity:0;
  transition: opacity .35s ease;
}

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 980px){
  .sp-intro__frame{ height: min(620px, 86vh); }
  .sp-intro.sp-intro--section{ padding-top: 72px; }

  .sp-logo{ top: 44%; }

  .sp-logo__badge{ padding: 30px 22px 22px; width: min(920px, 94vw); }
  .sp-logo__mark img.custom-logo{ max-width: 360px; }
  .sp-logo__meta{ font-size: 15px; }
  .sp-logo__kicker{ font-size: 13px; }
}