/* spun.video — base: token SPUN Beta (v2), tipografia, griglia, nav, bottoni, footer.
   Valori da spunai/SPUN-saas/DESIGN_SYSTEM.md §4–§6 e §10. Stili delle sezioni in video.css. */

@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/InstrumentSans-normal-latin.woff2") format("woff2");
  font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/InstrumentSans-normal-latin-ext.woff2") format("woff2");
  font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Mono";
  src: url("/assets/fonts/SpaceMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- Token ------------------------------------------------------ */
:root {
  --sx-ink: #101013;
  --sx-ink-2: #1A1A1E;
  --sx-ink-3: #27272B;
  --sx-muted: #6D6D78;
  --sx-muted-2: #A1A1AA;
  --sx-paper: #FAFAF4;
  --sx-paper-2: #F5F4EF;
  --sx-line-light: #E4E3DE;
  --sx-cobalt: #2348FF;
  --sx-lime: #B6F36B;
  --sx-sky: #9EE7FF;
  --sx-coral: #FF6B4A;
  --sx-butter: #FFD64A;
  --sx-plum: #E9D5FF;
  --sx-video: var(--sx-coral);           /* colore di campo di SPUN Video */
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;

  /* Tema chiaro di default, scuro a scelta (D-027) */
  --bg: var(--sx-paper);
  --surface: var(--sx-paper-2);
  --rule: var(--sx-line-light);
  --text: var(--sx-ink);
  --text-2: var(--sx-muted);
  --btn: var(--sx-ink);
  --btn-text: var(--sx-paper);
  --soft: rgba(16, 16, 19, .05);
  --soft-2: rgba(16, 16, 19, .1);
  --focus: var(--sx-cobalt);
  --ok: #2E7D32;
  --pad: 16px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: var(--sx-ink);
  --surface: var(--sx-ink-2);
  --rule: var(--sx-ink-3);
  --text: var(--sx-paper);
  --text-2: var(--sx-muted-2);
  --btn: var(--sx-paper);
  --btn-text: var(--sx-ink);
  --soft: rgba(250, 250, 244, .07);
  --soft-2: rgba(250, 250, 244, .13);
  --focus: var(--sx-lime);
  --ok: var(--sx-lime);
  color-scheme: dark;
}
@media (min-width: 1024px) { :root { --pad: 40px; } }
/* Pagine con il tema scelto per il film (page_theme, DV-021): il selettore del tema non avrebbe effetto */
[data-theme-force] .sv-theme { display: none; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- Reset ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 64px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: 16px; line-height: 24px; letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
}
:where(a) { color: inherit; text-decoration: none; }
:where(ul, ol) { list-style: none; margin: 0; padding: 0; }
:where(h1, h2, h3, h4, p, dl, dd, figure, fieldset) { margin: 0; }
:where(fieldset) { border: 0; padding: 0; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(img) { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.sv-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sv-px { display: block; width: 16px; height: 16px; flex: none; fill: currentColor; overflow: visible; shape-rendering: crispEdges; }
.sv-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sv-skip { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--btn); color: var(--btn-text); padding: 8px 12px; border-radius: 6px; }
.sv-skip:focus { top: 8px; }

/* ---------- Griglia a celle ---------------------------------------------- */
.sv-frame { padding-inline: var(--pad); }
.sv-shell { max-width: 1728px; margin-inline: auto; border-inline: 1px solid var(--rule); }
.sv-section { border-bottom: 1px solid var(--rule); }
.sv-cells { display: grid; gap: 1px; background: var(--rule); }
.sv-cells > * { background: var(--bg); }

/* ---------- Tipografia (§5) ----------------------------------------------- */
.sv-eyebrow { font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.sv-chip {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; white-space: nowrap;
  font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: .05em; text-transform: uppercase;
  background: var(--surface); color: var(--text); padding: 4px 8px; border-radius: 4px;
}
.sv-chip .sv-sq { width: 16px; height: 16px; border-radius: 2px; }
.sv-chip .sv-sq .sv-px { width: 8px; height: 8px; }
.sv-chip--lime { background: var(--sx-lime); color: var(--sx-ink); }
.sv-dot { width: 6px; height: 6px; background: var(--sx-lime); flex: none; }
.sv-dot--ink { background: var(--sx-ink); }
.sv-h1 { font-size: 40px; line-height: 48px; font-weight: 500; letter-spacing: -.02em; text-wrap: balance; }
.sv-h2 { font-size: 28px; line-height: 40px; font-weight: 500; letter-spacing: -.01em; text-wrap: balance; }
.sv-h3 { font-size: 24px; line-height: 28px; font-weight: 500; letter-spacing: -.01em; }
.sv-h5 { font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: 0; }
.sv-lead { font-size: 16px; line-height: 24px; letter-spacing: -.02em; }
.sv-body { font-size: 16px; line-height: 24px; color: var(--text-2); }
.sv-note { font-size: 13px; line-height: 20px; color: var(--text-2); }
@media (min-width: 768px) {
  .sv-eyebrow { font-size: 13px; line-height: 20px; }
  .sv-chip { font-size: 11px; }
  .sv-h1 { font-size: 72px; line-height: 72px; }
  .sv-h2 { font-size: 56px; line-height: 60px; }
  .sv-h3 { font-size: 44px; line-height: 52px; }
  .sv-lead { font-size: 20px; line-height: 28px; }
}

/* ---------- Quadratini icona: colore di campo e accenti di categoria ------ */
.sv-sq { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 4px; background: var(--sx-video); color: var(--sx-ink); }
.sv-sq .sv-px { width: 16px; height: 16px; }
.sv-sq--48 { width: 48px; height: 48px; border-radius: 0; }
.sv-sq--48 .sv-px { width: 32px; height: 32px; }
.sv-sq--cinema { background: var(--sx-coral); }
.sv-sq--discover { background: var(--sx-butter); }
.sv-sq--factory { background: var(--sx-sky); }
.sv-sq--tv { background: var(--sx-plum); }
.sv-sq--live { background: var(--sx-lime); }
.sv-sq--all { background: var(--sx-paper); }

/* ---------- Bottoni (§10) ------------------------------------------------- */
.sv-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 48px; padding: 0 16px 0 20px; border-radius: 6px; white-space: nowrap;
  font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: .01em;
  transition: background-color .2s, color .2s;
}
.sv-btn--sm { height: 32px; padding: 0 10px 0 12px; gap: 8px; font-size: 14px; line-height: 20px; letter-spacing: .02em; }
.sv-btn--primary { background: var(--btn); color: var(--btn-text); }
.sv-btn--secondary { background: var(--soft); color: var(--text); }
.sv-btn--secondary:hover { background: var(--soft-2); }
.sv-btn--ink { background: var(--sx-ink); color: var(--sx-paper); }
.sv-btn--paper { background: var(--sx-paper); color: var(--sx-ink); }
.sv-btn-arrow { display: block; width: 16px; height: 16px; overflow: hidden; }
.sv-btn-arrow .sv-px { transition: transform .3s steps(4, end); }
.sv-btn:hover .sv-btn-arrow .sv-px, .sv-btn:focus-visible .sv-btn-arrow .sv-px { transform: translateX(4px); }

/* ---------- Nav fissa 48px ------------------------------------------------ */
.sv-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.sv-nav-bar { display: flex; height: 47px; }
.sv-logo { display: flex; align-items: center; padding-inline: 16px; border-right: 1px solid var(--rule); color: var(--text); }
.sv-logo-svg { display: block; width: 88px; color: inherit; }
.sv-logo-svg svg { display: block; width: 100%; height: auto; fill: currentColor; }
.sv-nav-product {
  display: flex; align-items: center; gap: 8px; padding-inline: 12px; border-right: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.sv-nav-links { display: none; }
.sv-nav-links a {
  display: flex; align-items: center; padding-inline: 16px; border-right: 1px solid var(--rule);
  font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-2); transition: color .2s, background-color .2s;
}
.sv-nav-links a:hover { color: var(--text); background: var(--soft); }
.sv-nav-links a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--sx-video); }
.sv-nav-end { margin-left: auto; display: flex; align-items: center; gap: 8px; border-left: 1px solid var(--rule); }
.sv-nav-end .sv-btn { display: none; }
.sv-menu-btn { display: grid; place-items: center; width: 47px; height: 47px; color: var(--text); }
.sv-menu-close, .sv-menu-btn[aria-expanded="true"] .sv-menu-open { display: none; }
.sv-menu-btn[aria-expanded="true"] .sv-menu-close { display: block; }
.sv-mobile { position: fixed; inset: 48px 0 0 0; z-index: 49; overflow: auto; background: var(--bg); padding: 8px 16px 24px; }
.sv-mobile > a { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: 20px; line-height: 24px; font-weight: 500; }
.sv-mobile > a .sv-px { color: var(--text-2); }
.sv-mobile-actions { display: grid; gap: 8px; margin-top: 24px; }
@media (min-width: 1280px) {
  .sv-nav-links { display: flex; }
  .sv-nav-end { padding-inline: 8px; }
  .sv-nav-end .sv-btn { display: inline-flex; }
  .sv-menu-btn, .sv-mobile { display: none !important; }
}

/* ---------- Intestazione di sezione --------------------------------------- */
.sv-head { display: grid; gap: 16px; padding: 64px 16px 40px; border-bottom: 1px solid var(--rule); }
.sv-head-title { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1024px) {
  .sv-head { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: end; gap: 40px; padding: 112px 40px 56px; }
}

/* ---------- Nastro che scorre --------------------------------------------- */
.sv-marquee { display: flex; overflow: hidden; border-bottom: 1px solid var(--rule); }
.sv-marquee-label { display: none; flex: none; align-items: center; padding: 0 24px; border-right: 1px solid var(--rule); }
.sv-marquee-viewport { flex: 1; min-width: 0; overflow: hidden; }
.sv-marquee-track { display: flex; width: max-content; animation: sv-marquee 40s linear infinite; }
.sv-marquee:hover .sv-marquee-track, .sv-marquee:focus-within .sv-marquee-track { animation-play-state: paused; }
.sv-marquee-item { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-right: 1px solid var(--rule); white-space: nowrap; font-size: 14px; line-height: 20px; font-weight: 500; }
.sv-marquee-item .sv-px { color: var(--sx-video); }
@keyframes sv-marquee { to { transform: translateX(-50%); } }
@media (min-width: 768px) { .sv-marquee-label { display: flex; } }

/* ---------- Simbolo del logo con la scintilla "Filo che corre" (D-030, DESIGN_SYSTEM §3) ---- */
/* Tinta unita da currentColor; con movimento ridotto la scintilla resta ferma e nascosta. */
.sv-symbol { display: block; width: 100%; height: 100%; overflow: visible; }
.sv-symbol__spark { stroke: var(--sx-lime); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .sv-symbol__spark { opacity: 1; animation: sv-symbol-spark 3.2s linear infinite; }
}
@keyframes sv-symbol-spark { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- Banda CTA nel colore di campo di SPUN Video (DV-010) --------- */
/* Coral con testo ink (6,3:1): su mobile il campo pieno sta in basso, sotto il testo; da 1024px a sinistra. */
.sv-cta {
  --focus: var(--sx-ink);
  position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: 380px; color: var(--sx-ink); border-bottom: 1px solid var(--rule);
  background:
    linear-gradient(0deg, var(--sx-video) 0%, var(--sx-video) 58%, rgba(255, 107, 74, .78) 80%, rgba(255, 107, 74, .42) 100%),
    var(--sx-ink) var(--cta-img) center top / cover no-repeat;
}
@media (min-width: 1024px) {
  .sv-cta {
    background:
      linear-gradient(90deg, var(--sx-video) 0%, var(--sx-video) 48%, rgba(255, 107, 74, .8) 66%, rgba(255, 107, 74, .36) 100%),
      var(--sx-ink) var(--cta-img) right center / cover no-repeat;
  }
}
.sv-cta::before {
  content: ""; position: absolute; inset: 0; opacity: .22; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sv-cta-in { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; max-width: 920px; padding: 120px 16px 40px; }
.sv-cta .sv-eyebrow { color: var(--sx-ink); }
.sv-cta-text { max-width: 560px; color: rgba(16, 16, 19, .82); }
.sv-cta .sv-actions { margin-top: 8px; }
.sv-cta-symbol { position: absolute; z-index: 1; right: 16px; top: 24px; width: 56px; height: 60px; color: var(--sx-ink); }
@media (min-width: 1024px) {
  .sv-cta { min-height: 460px; }
  .sv-cta-in { padding: 56px 40px; }
  .sv-cta-symbol { top: auto; right: 40px; bottom: 40px; width: 98px; height: 105px; }
}

/* ---------- Footer --------------------------------------------------------- */
.sv-foot-cols { grid-template-columns: repeat(2, 1fr); }
.sv-foot-col { display: flex; flex-direction: column; gap: 12px; padding: 32px 16px; }
.sv-foot-col h2 { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.sv-foot-col ul { display: flex; flex-direction: column; gap: 6px; }
.sv-foot-col a { font-size: 14px; line-height: 20px; font-weight: 500; }
.sv-foot-col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sv-foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 16px; border-block: 1px solid var(--rule); font-size: 14px; line-height: 20px; font-weight: 500; }
.sv-foot-claim span { display: block; color: var(--text-2); }
.sv-foot-brand { display: block; color: var(--text); }
.sv-foot-brand .sv-logo-svg { width: 132px; }
.sv-compat .sv-marquee-track { animation-duration: 60s; }
.sv-compat .sv-marquee-item { gap: 10px; padding: 14px 24px; }
.sv-compat .sv-marquee-item b { font-weight: 500; }
.sv-compat .sv-marquee-item span { font-family: var(--font-mono); font-size: 10px; line-height: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.sv-foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; font-size: 13px; line-height: 20px; color: var(--text-2); }
.sv-theme { display: inline-flex; gap: 2px; padding: 2px; background: var(--soft); border-radius: 6px; }
.sv-theme button { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 4px; color: var(--text-2); }
.sv-theme button[aria-checked="true"] { background: var(--bg); color: var(--text); }
@media (min-width: 1024px) {
  .sv-foot-cols { grid-template-columns: repeat(4, 1fr); }
  .sv-foot-col { padding: 40px; }
  .sv-foot-row { padding: 24px 40px; }
  .sv-foot-claim { text-align: right; }
  .sv-foot-bottom { padding: 16px 40px; }
}