/* Variante "schermo intero": il backstage riempie tutta la pagina, come guardare il monitor del set a tutto schermo.
   Testata e piede stanno nelle fasce del 2.39, i dati camera corrono lungo i lati, il testo sta sopra il video.
   Si appoggia a cs.css + monitor.css (stessa pagina, stesso monitor.js). */

.is-full { background: #000; }

/* il monitor esce dal riquadro e diventa lo sfondo */
.is-full .stage__screen { position: fixed; inset: 0; z-index: 0; width: 100%; max-width: none; display: block; }
.is-full .monitor {
  position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto;
  border: 0; box-shadow: none; container-type: normal;
  --lb: clamp(56px, 11svh, 120px);                /* fasce in alto e in basso: lì stanno testata e piede */
  --mfont: clamp(9px, .5rem + .25vw, 12px);
  --side: max(var(--pad-x), 20px);
}
.is-full .monitor__frame { display: none; }      /* gli angoli li fa già il mirino della pagina */

/* leggibilità: il video si scurisce dove c'è il testo */
.is-full .monitor__mask {
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .78) 0 var(--lb), transparent var(--lb) calc(100% - var(--lb)), rgba(0, 0, 0, .78) calc(100% - var(--lb))),
    linear-gradient(to right, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, .22) 36%, transparent 56%);
}

/* countdown e [7] al centro dello schermo, più contenuti */
.is-full .monitor .leader { --leader: min(46svh, 34vw, 520px); }
/* versione foto: niente countdown, il cerchio con il [7] non si vede mai */
.is-foto .monitor .leader { display: none; }

/* dati camera in alto: al centro della fascia, tra logo e orologio */
.is-full .monitor__top {
  left: 50%; right: auto; translate: -50% 0; height: var(--lb); padding: 0; gap: 2.2em; justify-content: center;
}
.is-full .monitor__top .tc { margin-left: 0; }

/* dati camera di lato: colonna verticale sul bordo sinistro */
.is-full .monitor__bottom {
  left: var(--side); right: auto; top: calc(var(--lb) + 24px); bottom: calc(var(--lb) + 24px); height: auto; width: auto; padding: 0;
  writing-mode: vertical-rl; rotate: 180deg; justify-content: space-between; gap: 1.4em; color: rgba(236, 237, 238, .72);
}
/* sul bordo destro: misuratori audio */
.is-full .monitor__meters { right: var(--side); top: calc(var(--lb) + 24px); bottom: calc(var(--lb) + 24px); }

/* il terminale come sottotitolo, sopra la fascia bassa */
.is-full .monitor .terminal { left: 50%; right: auto; width: min(64ch, 70vw); translate: -50% 0; bottom: calc(var(--lb) + 4svh); font-size: clamp(.8125rem, .7rem + .45vw, 1.125rem); }

/* testata e piede sopra il video, dentro le fasce */
.is-full .top { min-height: calc(var(--lb-page) - var(--pad-y)); align-items: center; }
.is-full .bottom { border-top: 0; background: none; }
.is-full { --lb-page: clamp(56px, 11svh, 120px); }

/* testo sopra il video: a sinistra, lasciando spazio alla colonna dei dati */
.is-full .stage { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; justify-items: start; padding-left: calc(var(--mfont-col, 28px) + 1vw); }
.is-full .stage__copy { order: 0; justify-items: start; text-align: left; align-content: center; gap: clamp(28px, 6svh, 64px); max-width: min(46rem, 58vw); }
.is-full .copy, .is-full .cta { justify-items: start; }
.is-full .cta__links { justify-content: flex-start; }
.is-full .title { font-size: clamp(2rem, min(4.6vw, 9svh), 5.5rem); text-shadow: 0 2px 30px rgba(0, 0, 0, .5); }
.is-full .lede { color: rgba(236, 237, 238, .78); text-shadow: 0 1px 12px rgba(0, 0, 0, .7); }
.is-full .cta .eyebrow { color: rgba(236, 237, 238, .7); }

/* il testo entra quando il monitor si accende (prima c'è solo il countdown) */
.motion .is-full .stage__copy { opacity: 0; translate: 0 12px; transition: opacity .9s ease .2s, translate .9s ease .2s; }
.motion .is-full.is-on-air .stage__copy { opacity: 1; translate: 0 0; }

/* tablet e telefoni in verticale: niente colonna di lato, il testo scende in basso */
@media (max-width: 959px), (orientation: portrait) {
  .is-full .monitor { --lb: clamp(52px, 9svh, 96px); }
  .is-full { --lb-page: clamp(52px, 9svh, 96px); }
  .is-full .monitor__mask {
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, .7) 0 var(--lb), transparent calc(var(--lb) + 8svh)),
      linear-gradient(to top, rgba(0, 0, 0, .92) 0, rgba(0, 0, 0, .7) 42%, transparent 72%);
  }
  .is-full .monitor__bottom { display: none; }
  .is-full .monitor__mask::after { display: none; }   /* la riga della fascia bassa tagliava i dati legali */
  .is-full .monitor__meters { top: calc(var(--lb) + 16px); bottom: auto; height: 22svh; }
  .is-full .monitor__top { top: var(--lb); height: auto; padding-top: 10px; gap: 1.4em; }
  .is-full .monitor .terminal { top: calc(var(--lb) + 9svh); bottom: auto; width: 86vw; }
  .is-full .monitor .leader { --leader: min(60vw, 34svh); }
  .is-full .stage { align-items: end; padding-left: 0; }
  .is-full .stage__copy { max-width: none; gap: clamp(16px, 3svh, 28px); }
  .is-full .title { font-size: clamp(1.6rem, .5rem + 6vw, 3rem); }
}

/* testata e piede sopra il video (il palco ha lo stesso livello e viene dopo nel codice) */
.is-full .top, .is-full .bottom { z-index: 3; }
/* a tutto schermo il focus peaking va più leggero, altrimenti copre le persone */
.is-full .monitor.is-live .monitor__peak { opacity: .5; }
/* il backstage è girato di notte e in interni: a tutto schermo lo schiariamo un po' (resta valido anche durante la messa a fuoco) */
.is-full .monitor { --vf: brightness(1.08); }   /* le clip full-0x sono già schiarite all'origine */
.is-full .monitor__video { filter: var(--vf); }

/* ── dati camera solo in alto: una riga sotto la testata, a sinistra REC/clip/timecode, a destra i parametri ── */
.is-full .monitor__meters { display: none; }
@media (min-width: 960px) and (orientation: landscape) {
  .is-full .monitor__top, .is-full .monitor__bottom {
    top: var(--lb); bottom: auto; height: 38px; translate: none; rotate: none; writing-mode: horizontal-tb;
    padding: 0; gap: 2em; color: var(--ink);
  }
  .is-full .monitor__top { left: var(--side); right: auto; justify-content: flex-start; }
  .is-full .monitor__bottom { left: auto; right: var(--side); justify-content: flex-end; color: rgba(236, 237, 238, .78); }
  .is-full .stage { padding-left: 0; }
}

/* ── schermata d'ingresso ── */
.gate {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(ellipse at 50% 45%, #15171a 0, #050506 70%); color: var(--ink);
  transition: opacity .55s ease;
}
.gate.is-out { opacity: 0; pointer-events: none; }
.gate__box { display: grid; justify-items: center; gap: clamp(18px, 3.4svh, 30px); text-align: center; }
.gate__logo { height: clamp(54px, 5.4vw, 72px); width: auto; }   /* logo 2026: mai sotto i 120 px di larghezza delle lettere */
.gate__title { font: 800 clamp(1.25rem, .9rem + 1.6vw, 2.1rem)/1.15 var(--f-sans); font-variation-settings: "wdth" 125; text-transform: uppercase; letter-spacing: -.01em; }
.gate__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 22px; }
.gate__btn {
  display: inline-flex; align-items: center; gap: .8em; margin: 0; padding: 14px 22px; cursor: pointer;
  font: 500 var(--t-label)/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); background: none; border: 1px solid rgba(236, 237, 238, .35);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.gate__btn::before { content: "[\00a0"; color: var(--lime); }
.gate__btn::after { content: "\00a0]"; color: var(--lime); }
.gate__btn--sound { background: var(--lime); border-color: var(--lime); color: var(--dark); }
.gate__btn--sound::before, .gate__btn--sound::after { color: var(--dark); }
.gate__btn--sound .soundtrack__icon { background: linear-gradient(var(--dark), var(--dark)) 0 100% / 3px 40% no-repeat, linear-gradient(var(--dark), var(--dark)) 5px 100% / 3px 80% no-repeat, linear-gradient(var(--dark), var(--dark)) 10px 100% / 3px 55% no-repeat; }
.motion .gate__btn--sound .soundtrack__icon { animation: eq .9s steps(4) infinite; }
.gate__btn:hover, .gate__btn:focus-visible { border-color: var(--lime); color: var(--lime); outline: none; }
.gate__btn--sound:hover, .gate__btn--sound:focus-visible { background: transparent; color: var(--lime); }
.gate__btn--sound:hover::before, .gate__btn--sound:hover::after, .gate__btn--sound:focus-visible::before, .gate__btn--sound:focus-visible::after { color: var(--lime); }
.gate__note { font: 400 .6875rem/1.4 var(--f-mono); letter-spacing: .08em; color: var(--mute); }

/* ── player di YouTube: piccolo "monitor B" in basso a destra (YouTube chiede che resti visibile, almeno 200 px) ── */
.yt-card {
  position: fixed; z-index: 45; right: max(var(--pad-x), 16px); bottom: calc(var(--lb-page) + 14px);
  width: min(356px, calc(100vw - 32px)); padding: 8px; background: rgba(5, 5, 6, .86); border: 1px solid rgba(236, 237, 238, .18);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6); display: grid; gap: 6px;
}
.yt-card[hidden] { display: none; }
.yt-card iframe { display: block; width: 100%; height: 200px; border: 0; }
.yt-card__label, .yt-card__close { font: 500 .625rem/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.yt-card__label .br { color: var(--lime); margin-right: .6em; }
.yt-card__label .br::before { content: "[\00a0"; } .yt-card__label .br::after { content: "\00a0]"; }
.yt-card__close { justify-self: end; margin: 0; padding: 4px 0; background: none; border: 0; color: var(--mute); cursor: pointer; }
.yt-card__close::before { content: "[\00a0"; } .yt-card__close::after { content: "\00a0]"; }
.yt-card__close:hover, .yt-card__close:focus-visible { color: var(--lime); }
.soundtrack__btn[aria-pressed="true"] { color: var(--lime); }
/* colonna sonora solo su richiesta: "Roll sound" in lime, il titolo del brano accanto (sparisce sugli schermi stretti) */
.soundtrack__btn { color: var(--lime); cursor: pointer; }
.soundtrack__btn:hover .soundtrack__cta, .soundtrack__btn:focus-visible .soundtrack__cta { text-decoration: underline; text-underline-offset: .35em; }
.soundtrack__song { color: var(--mute); }
.soundtrack__song .sep { margin: 0 .7em; }
@media (max-width: 1199px) { .soundtrack__song { display: none; } }

/* telefoni: il testo sta in basso; il player sale sotto la testata */
@media (max-width: 959px), (orientation: portrait) {
  .is-full .stage { align-content: end; }
  .yt-card { top: calc(var(--lb-page) + 40px); bottom: auto; right: 16px; }
}

/* ── versione showreel: il video è già in color, niente correzioni; il focus peaking lime più presente ── */
.is-reel .monitor { --vf: none; }
.is-reel .monitor__video { filter: none; }
.is-reel .monitor.is-live .monitor__peak { opacity: .9; }

/* ── versione foto: bianco e nero, lo scan rivela lo scheletro (scan.js) ── */
.is-foto .monitor__video, .is-foto .monitor__peak { display: none; }
.is-foto .scan-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(.8); opacity: 0; transition: opacity 1.2s ease; }
.is-foto .monitor.is-live .scan-photo { opacity: 1; }
.is-foto .scan { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
.is-foto .scan.is-ready { opacity: 1; }
.is-foto { cursor: crosshair; }
.foto-switch { position: fixed; z-index: 46; left: max(var(--pad-x), 16px); bottom: calc(var(--lb-page) + 12px);
  font: 500 .625rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); display: flex; gap: 10px; align-items: center; }
.foto-switch a { color: var(--ink); text-decoration: none; padding: 4px 6px; border: 1px solid rgba(236, 237, 238, .25); }
.foto-switch a[aria-current] { background: var(--lime); color: var(--dark); border-color: var(--lime); }
@media (max-width: 959px), (orientation: portrait) { .foto-switch { bottom: auto; top: calc(var(--lb-page) + 40px); } }

/* ── versione foto: etichette di quello che c'è sotto il cursore ── */
.is-foto .scan-labels { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.scan-tag { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px; white-space: nowrap;
  font: 500 .6875rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lime);
  opacity: 0; transition: opacity .25s ease; }
.scan-tag.is-on { opacity: 1; }
.scan-tag__dot { width: 9px; height: 9px; flex: none; border: 1.5px solid var(--lime); box-shadow: 0 0 8px var(--lime-glow); }
.scan-tag__line { width: 0; height: 1px; background: var(--lime); transition: width .3s ease; }
.scan-tag.is-on .scan-tag__line { width: 28px; }
.scan-tag__t { padding: 5px 7px; background: rgba(5, 6, 6, .78); border: 1px solid rgba(198, 255, 0, .45); text-shadow: 0 0 8px rgba(198, 255, 0, .35); }
.scan-tag__h { margin-left: 6px; padding: 1px 4px; background: var(--lime); color: var(--dark); text-shadow: none; }
.scan-tag.is-left { flex-direction: row-reverse; }
/* invito a muovere il cursore: sparisce al primo movimento */
.scan-hint { position: absolute; z-index: 2; right: max(var(--pad-x), 20px); bottom: calc(var(--lb-page) + 18px); margin: 0;
  font: 500 var(--t-label)/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.scan-hint .br { color: var(--lime); }
.scan-hint .br::before { content: "[\00a0"; } .scan-hint .br::after { content: "\00a0]"; }
.monitor.is-live .scan-hint { opacity: .85; }
.monitor.is-live .scan-hint.is-gone { opacity: 0; }
.motion .monitor.is-live .scan-hint:not(.is-gone) { animation: hint-blink 1.6s steps(2) infinite; }
@keyframes hint-blink { 50% { opacity: .35; } }
@media (max-width: 959px), (orientation: portrait) { .scan-hint { right: auto; left: 16px; bottom: auto; top: calc(var(--lb-page) + 70px); } }

/* ── selettore LUT (B&W / Rec709 / False color) ── */
.lut { position: fixed; z-index: 46; right: max(var(--pad-x), 16px); bottom: calc(var(--lb-page) + 14px); display: flex; align-items: center; gap: 0;
  font: 500 .6875rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.lut__l { color: var(--lime); margin-right: 10px; }
.lut__l::before { content: "[\00a0"; } .lut__l::after { content: "\00a0]"; }
.lut button { margin: 0; padding: 7px 10px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink); cursor: pointer;
  background: rgba(5, 6, 6, .6); border: 1px solid rgba(236, 237, 238, .28); }
.lut button + button { border-left: 0; }
.lut button:hover, .lut button:focus-visible { color: var(--lime); outline: none; }
.lut button[aria-pressed="true"] { background: var(--lime); color: var(--dark); border-color: var(--lime); }
.is-foto .scan-hint { bottom: calc(var(--lb-page) + 56px); }
@media (max-width: 959px), (orientation: portrait) {
  .lut { bottom: auto; top: calc(var(--lb-page) + 40px); }
  .lut__l { display: none; }
  .is-foto .scan-hint { top: calc(var(--lb-page) + 80px); bottom: auto; }
}

/* ── transizione "ciak": stacco al nero con i dati della ripresa ── */
.slate { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; gap: 10px; text-align: center; pointer-events: none;
  font: 500 clamp(.75rem, .6rem + .5vw, 1.0625rem)/1.3 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
  opacity: 0; transition: opacity .12s steps(2); }
.slate.is-on { opacity: 1; }
.slate span:first-child { color: var(--lime); }
.foto-switch { flex-wrap: wrap; max-width: calc(100vw - 32px); row-gap: 6px; }

/* ── scherzo "Knock, knock, Neo": compare al centro dello schermo solo quando il visitatore resta fermo (idle.js).
   Piccolo come il sottotitolo del monitor e SOTTO le righe del tubo catodico (.screen, z 40), così le scanline attraversano i caratteri.
   La pagina si scurisce dietro la scritta; a ogni colpo alla porta il testo sobbalza (anche entrando senza audio). ── */
.terminal[data-mode="idle"] {
  position: fixed; inset: 0; z-index: 39; margin: 0; min-height: 0; max-width: none; padding: 24px;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .7) 0, rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, .3) 100%);
  font-size: clamp(.8125rem, .7rem + .45vw, 1.125rem); line-height: 1.35;
  text-shadow: 0 0 10px rgba(198, 255, 0, .45), 0 1px 2px rgba(0, 0, 0, .9);
  opacity: 0; transition: opacity .35s ease;
}
.terminal[data-mode="idle"].is-shown { opacity: 1; }
/* mentre c'è il messaggio il testo della pagina si fa da parte, così la scritta al centro si legge pulita */
.is-full .stage__copy, .is-full .scan-hint { transition: opacity .35s ease, translate .9s ease .2s; }
.is-full.is-idle .stage__copy, .is-full.is-on-air.is-idle .stage__copy, .is-full.is-idle .scan-hint { opacity: .1; }
.terminal[data-mode="idle"] .terminal__text { display: inline-block; }
.motion .terminal[data-mode="idle"].is-knock .terminal__text,
.motion .terminal[data-mode="idle"].is-knock .terminal__cursor { animation: knock-thump .22s ease-out 3; }
@keyframes knock-thump {
  0% { transform: none; }
  18% { transform: translate(-1px, 1px) scale(1.04); text-shadow: 0 0 16px rgba(198, 255, 0, .8), 0 1px 2px rgba(0, 0, 0, .9); }
  100% { transform: none; }
}


/* ── riposizionamento (ottobre 2026): teaser, il posizionamento non si rivela ancora.
   Titolo su quattro righe ("A new kind of" / "cinematic" / "entertainment" / "is coming."), ognuna sempre intera. */
.is-full .title { font-size: clamp(2rem, min(4vw, 6.4svh), 5rem); }
/* ogni riga del titolo resta intera: sugli schermi grandi può uscire dalla colonna verso destra (sopra la foto) */
.title .hl, .title .title__l { white-space: nowrap; }
/* sotto il titolo: a chi ci rivolgiamo, stile etichetta come "[Status] In post-production" */
.copy .audience { color: var(--ink); text-wrap: balance; }
.copy .eyebrow { text-wrap: balance; }   /* la riga Status, se va a capo sul telefono, si divide in due righe pari */
/* schermi bassi (portatili 1280×720, 1366×768, 1280×800): il titolo scende un poco e non tocca la barra REC */
@media (min-width: 960px) and (max-height: 880px) { .is-full .title { font-size: clamp(2rem, min(4vw, 6svh), 5rem); } }
.status-line .nw { white-space: nowrap; }   /* se va a capo: "A new chapter" / "is in the making" */
@media (max-width: 379px) { .copy .audience { letter-spacing: .1em; } }   /* sui telefoni stretti resta su una riga */
.copy .audience .br { color: var(--lime); }
@media (max-width: 959px), (orientation: portrait) {
  .is-full .title { font-size: clamp(1.4rem, .2rem + 5.4vw, 2.75rem); }
}
/* la descrizione porta la USP: sui telefoni compare appena c'è spazio (prima solo da 820 px di altezza) */
@media (max-width: 759px) and (min-height: 740px) { .is-full .lede { display: block; font-size: .875rem; line-height: 1.4; } }
/* portatili bassi (fino a 880 px di altezza utile): la descrizione resta, più compatta */
@media (min-width: 960px) and (max-height: 880px) {
  .is-full .lede { display: block; font-size: .875rem; line-height: 1.4; max-width: 54ch; }
  .is-full .stage__copy { gap: clamp(18px, 3.4svh, 28px); }
  .is-full .copy { gap: 10px; }
}

/* ── logo 2026 (ottobre 2026): il logo SEVEN è più alto del vecchio [7] SEVEN e vuole libera metà della sua altezza
   tutto intorno. La fascia in alto si allunga quel tanto che serve, così la riga REC non entra nello spazio del logo. ── */
.is-full { --lb-page: max(clamp(56px, 11svh, 120px), calc(var(--pad-y) + 68px)); }
.is-full .monitor { --lb: max(clamp(56px, 11svh, 120px), calc(var(--pad-y) + 68px)); }
@media (max-width: 959px), (orientation: portrait) {
  .is-full { --lb-page: max(clamp(52px, 9svh, 96px), calc(var(--pad-y) + 54px)); }
  .is-full .monitor { --lb: max(clamp(52px, 9svh, 96px), calc(var(--pad-y) + 54px)); }
}
/* computer: la riga REC (38 px) sta sotto la fascia; il testo si centra nello spazio che resta sotto di lei */
@media (min-width: 960px) and (orientation: landscape) { .is-full .stage { padding-top: 38px; } }