/* ═══════════════════════════════════════════════════════
   SEQUENZA IN APERTURA DELLA HOME (3 ott 2026)
   Al posto dello slider. Markup: inc/sequenza-home.php (sd_seq_render).
   Logica: assets/js/sequence.js. Prototipo di riferimento:
   Brand Management e Miglioramento/Hero-sequenza/prototipo.html
   ═══════════════════════════════════════════════════════ */

.sd-seq {
  --ease-gate: cubic-bezier(.65, 0, .15, 1);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  position: relative; width: 100%; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden;
  background: var(--bg); color: var(--ink);
}
.sd-seq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ─── Menù: trasparente sopra la sequenza, solido appena si scorre ─── */
body.sd-seq-on .sd-nav, body.sd-seq-on .sd-nav a, body.sd-seq-on .sd-nav-toggle span { transition: background .4s, box-shadow .4s, color .8s, opacity .8s; }
body.sd-seq-on .sd-nav:not(.scrolled):not(:has(.sd-nav-links.open)) { background: transparent; box-shadow: none; }
/* a foto aperta: logo piccolo nascosto (c'è il nome grande) e voci chiare o scure secondo la foto */
body.sd-seq-full .sd-nav:not(.scrolled):not(:has(.sd-nav-links.open)) .sd-nav-logo { opacity: 0; pointer-events: none; }
body.sd-seq-full .sd-nav:not(.scrolled):not(:has(.sd-nav-links.open)) .sd-nav-links a { color: rgba(246,246,245,.82); }
body.sd-seq-full .sd-nav:not(.scrolled):not(:has(.sd-nav-links.open)) .sd-nav-links a:hover,
body.sd-seq-full .sd-nav:not(.scrolled):not(:has(.sd-nav-links.open)) .sd-nav-links a.active { color: var(--white); }
body.sd-seq-full .sd-nav:not(.scrolled):not(:has(.sd-nav-links.open)) .sd-lang-btn { color: rgba(246,246,245,.7); }
body.sd-seq-full .sd-nav:not(.scrolled):not(:has(.sd-nav-links.open)) .sd-lang-btn.current-lang { color: var(--white); border-color: rgba(246,246,245,.5); }
body.sd-seq-full .sd-nav:not(.scrolled):not(:has(.sd-nav-links.open)) .sd-nav-cart { color: var(--white); }
body.sd-seq-full .sd-nav:not(.scrolled):not(:has(.sd-nav-links.open)) .sd-nav-toggle span { background: var(--white); }
body.sd-seq-full.sd-seq-light .sd-nav:not(.scrolled):not(:has(.sd-nav-links.open)) .sd-nav-links a { color: var(--ink-mid); }
body.sd-seq-full.sd-seq-light .sd-nav:not(.scrolled):not(:has(.sd-nav-links.open)) .sd-nav-links a:hover,
body.sd-seq-full.sd-seq-light .sd-nav:not(.scrolled):not(:has(.sd-nav-links.open)) .sd-nav-links a.active { color: var(--ink); }
body.sd-seq-full.sd-seq-light .sd-nav:not(.scrolled):not(:has(.sd-nav-links.open)) .sd-lang-btn { color: var(--ink-light); }
body.sd-seq-full.sd-seq-light .sd-nav:not(.scrolled):not(:has(.sd-nav-links.open)) .sd-lang-btn.current-lang { color: var(--copper); border-color: rgba(139,26,19,.35); }
body.sd-seq-full.sd-seq-light .sd-nav:not(.scrolled):not(:has(.sd-nav-links.open)) .sd-nav-cart { color: var(--ink-mid); }
body.sd-seq-full.sd-seq-light .sd-nav:not(.scrolled):not(:has(.sd-nav-links.open)) .sd-nav-toggle span { background: var(--ink); }

/* ─── La parete: primo fotogramma, testo d'autore e una stampa appesa ─── */
.sd-seq-wall { position: absolute; inset: 0; z-index: 3; display: grid; pointer-events: none;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 4.5vw;
  padding: calc(var(--nav-h) + 28px) var(--pad) 84px; align-items: end; }
.sd-seq-wall a { pointer-events: auto; }
.sd-seq-wt > * { transition: opacity .7s var(--ease-out), transform .9s var(--ease-out), color 1.4s var(--ease-gate), border-color 1.4s var(--ease-gate); }
.sd-seq-eyebrow { font-size: .75rem; letter-spacing: .284em; text-transform: uppercase; color: var(--copper); margin-bottom: 22px; }
.sd-seq-name { font-size: clamp(2.6rem, 5.4vw, 5rem); font-weight: 200; line-height: .92; letter-spacing: -.02em; margin-bottom: 30px; color: inherit; }
.sd-seq-name span { display: block; font-weight: 400; }
.sd-seq-claim { font-size: clamp(1.1rem, 1.7vw, 1.45rem); line-height: 1.35; letter-spacing: -.005em; max-width: 30ch; margin-bottom: 14px; }
.sd-seq-sub { font-size: .75rem; line-height: 1.7; color: var(--ink-mid); max-width: 44ch; margin-bottom: 34px; }
.sd-seq-cta { display: inline-block; border: 1px solid currentColor; color: inherit; font-size: .75rem; letter-spacing: .167em; text-transform: uppercase;
  text-decoration: none; padding: 13px 34px; transition: background .3s, color .3s; }
.sd-seq-cta:hover { background: var(--ink); color: var(--white); }
.sd-seq-print { align-self: stretch; display: flex; flex-direction: column; min-height: 0; }
.sd-seq-slot { width: 100%; flex: 1; min-height: 0; }
.sd-seq-plabel { margin-top: 14px; font-size: .75rem; letter-spacing: .02em; line-height: 1.5; color: var(--ink-mid); transition: opacity .6s var(--ease-out); }
.sd-seq-plabel b { font-weight: 400; color: var(--ink); }

/* Il nome non sparisce: dalla parete va nell'angolo in alto a sinistra, della stessa grandezza (transform calcolato in JS) */
.sd-seq-name { transform-origin: 0 0; transition: transform 1.5s var(--ease-gate), color 1.4s var(--ease-gate), text-shadow 1.4s, opacity .7s var(--ease-out) !important; will-change: transform; }
.sd-seq-name a { display: inline-block; text-decoration: none; color: inherit; transition: opacity .3s; }
.sd-seq-name a:hover { opacity: .78; color: inherit; }

/* Stato parete / titolo / pieno */
.sd-seq.is-full .sd-seq-wt > *:not(.sd-seq-name), .sd-seq.is-full .sd-seq-plabel, .sd-seq.is-title .sd-seq-plabel { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.sd-seq.is-title .sd-seq-wt, .sd-seq.is-title .sd-seq-cta { color: var(--white); }
.sd-seq.is-title .sd-seq-eyebrow { color: #E0A39C; }
.sd-seq.is-title .sd-seq-sub { color: rgba(246,246,245,.82); }
.sd-seq.is-title .sd-seq-cta { border-color: rgba(246,246,245,.8); }
.sd-seq.is-title .sd-seq-name, .sd-seq.is-title .sd-seq-claim { text-shadow: 0 1px 18px rgba(14,14,15,.3); }
.sd-seq.is-title .sd-seq-cta:hover { background: var(--white); color: var(--ink); }
.sd-seq.is-full .sd-seq-wt .sd-seq-name { color: var(--white); text-shadow: 0 1px 14px rgba(14,14,15,.38); }
.sd-seq.is-full.tone-light .sd-seq-wt .sd-seq-name { color: var(--ink); text-shadow: none; }
.sd-seq.is-full .sd-seq-wt > *:nth-child(3) { transition-delay: .04s; }
.sd-seq.is-intro .sd-seq-wt > *:not(.sd-seq-name), .sd-seq.is-intro .sd-seq-plabel { opacity: 0; transform: translateY(14px); }
.sd-seq.is-intro .sd-seq-name { opacity: 0; }
.sd-seq.is-intro .sd-seq-stage { opacity: 0; }

/* Il palcoscenico: parte dalla stampa e si apre a tutto schermo */
.sd-seq-stage { position: absolute; z-index: 2; overflow: hidden; background: var(--bg-dark);
  transition: top 1.5s var(--ease-gate), left 1.5s var(--ease-gate), width 1.5s var(--ease-gate), height 1.5s var(--ease-gate), opacity 1s var(--ease-out); }
.sd-seq-stage.no-anim { transition: none; }
.sd-seq-layers { position: absolute; inset: 0; z-index: 1; isolation: isolate; }
.sd-seq-layer { position: absolute; inset: 0; visibility: hidden; }
/* Solo il fotogramma in scena (e quello che sta entrando) si disegna: gli altri non occupano memoria grafica
   e non possono mai trasparire sotto la stampa mentre il palcoscenico si ridimensiona (visto sul telefono, 3 ott 2026) */
.sd-seq-layer.is-on { visibility: visible; }
.sd-seq-layer img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.sd-seq-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease-out);
  background:
    linear-gradient(to top, rgba(14,14,15,.72) 0%, rgba(14,14,15,.28) 34%, rgba(14,14,15,0) 58%),
    radial-gradient(ellipse 50% 40% at 0 0, rgba(14,14,15,.42), rgba(14,14,15,0) 100%),
    linear-gradient(to bottom, rgba(14,14,15,.3) 0%, rgba(14,14,15,0) 22%),
    linear-gradient(to right, rgba(14,14,15,.28) 0%, rgba(14,14,15,0) 50%); }
.sd-seq.is-full .sd-seq-shade { opacity: 1; }
.sd-seq-shade-t { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease-gate);
  background: linear-gradient(to right, rgba(14,14,15,.62) 0%, rgba(14,14,15,.34) 32%, rgba(14,14,15,0) 58%),
              linear-gradient(to top, rgba(14,14,15,.45) 0%, rgba(14,14,15,0) 40%); }
.sd-seq.is-title .sd-seq-shade-t { opacity: 1; }

/* Ritaglio e zoom scelti per formato (campi della scheda del progetto): la foto intera, dimensionata e spostata
   dal CSS con le unità del container. Il soggetto resta al centro, qualunque sia la forma dello schermo.
   Vale per le foto a tutto schermo; sul telefono anche per quelle verticali. Senza queste unità resta cover + object-position. */
.sd-seq-layer { container-type: size; --efx: var(--fx, .5); --efy: var(--fy, .5); --ez: var(--z, 1); }
@media (max-width: 768px) { .sd-seq-layer { --efx: var(--fxm, .5); --efy: var(--fym, .5); --ez: var(--zm, 1); } }
@supports (width: 1cqw) {
  .sd-seq-layer[data-kind="cover"] img {
    inset: auto; object-fit: fill; --w: calc(max(100cqw, 100cqh * var(--ar)) * var(--ez)); --h: calc(var(--w) / var(--ar));
    width: var(--w); height: var(--h);
    left: clamp(calc(100cqw - var(--w)), calc(50cqw - var(--efx) * var(--w)), 0px);
    top: clamp(calc(100cqh - var(--h)), calc(50cqh - var(--efy) * var(--h)), 0px);
  }
}

/* Foto in «stampa»: chiare e orizzontali su fondo chiaro (top), verticali a destra su fondo piatto (port) */
.sd-seq-layer[data-kind="top"], .sd-seq-layer[data-kind="port"] { background: var(--lb, #fff); }
.sd-seq-layer[data-kind="top"] img, .sd-seq-layer[data-kind="port"] img { object-fit: contain; inset: 7% 5% 7% 44%; width: 51%; height: 86%; }
.sd-seq.tone-light .sd-seq-shade { opacity: 0 !important; }
@media (min-width: 769px) {
  .sd-seq.has-print .sd-seq-shade { opacity: 0 !important; }
  .sd-seq-layer[data-feather] img { -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent); mask-composite: intersect; }
}

/* Didascalie: il progetto e il suo mondo, poi la sua frase tra virgolette, poi l'invito a leggere */
.sd-seq-caps { position: absolute; z-index: 3; left: var(--pad); right: var(--pad); bottom: 92px; pointer-events: none; }
.sd-seq-cap { position: absolute; left: 0; bottom: 0; max-width: 760px; color: var(--white); transition: color .9s; visibility: hidden; }
.sd-seq-cap.on, .sd-seq-cap.off { visibility: visible; }
.sd-seq-cap:not(.on):not(.off) { transition: color .9s, visibility 0s .6s; }
.sd-seq-cap .head { display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateY(8px);
  transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
.sd-seq-cap .title { font-size: clamp(.95rem, 1.2vw, 1.1rem); font-weight: 400; letter-spacing: .16em; text-transform: uppercase; }
.sd-seq-cap .meta { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; opacity: .78; }
.sd-seq-cap .sep { opacity: .55; margin: 0 .55em; }
.sd-seq-cap .phrase { margin-top: 24px; quotes: none;
  font-size: clamp(1.3rem, 2.1vw, 1.95rem); font-weight: 300; line-height: 1.22; letter-spacing: -.01em;
  text-shadow: 0 1px 18px rgba(14,14,15,.3); }
.sd-seq-cap .phrase .ln { display: block; opacity: 0; transform: translateY(14px); filter: blur(5px);
  transition: opacity 1.3s var(--ease-out), transform 1.5s var(--ease-out), filter 1.3s var(--ease-out); }
.sd-seq-cap .qo { margin-left: -.52em; }
.sd-seq-cap .more { margin-top: 22px; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; opacity: 0; transition: opacity 1s var(--ease-out); }
.sd-seq-cap .more a { pointer-events: auto; text-decoration: none; color: inherit; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.sd-seq-cap .more a:hover { color: inherit; opacity: .75; }
.sd-seq-cap.on .head { opacity: 1; transform: none; }
.sd-seq-cap.on .ln { opacity: 1; transform: none; filter: none; }
.sd-seq-cap.on .ln:nth-child(1) { transition-delay: .45s; }
.sd-seq-cap.on .ln:nth-child(2) { transition-delay: .6s; }
.sd-seq-cap.on .ln:nth-child(3) { transition-delay: .75s; }
.sd-seq-cap.on .more { opacity: .9; transition-delay: 1.5s; }
.sd-seq-cap.off .head, .sd-seq-cap.off .ln, .sd-seq-cap.off .more { opacity: 0; transform: none; filter: none; transition: opacity .5s ease; transition-delay: 0s; }
.sd-seq-cap.long .phrase { font-size: clamp(1.15rem, 1.8vw, 1.7rem); }
.sd-seq-cap.narrow { max-width: min(760px, 40vw); }
.sd-seq.tone-light .sd-seq-cap { color: var(--ink); }
.sd-seq.tone-light .sd-seq-cap .phrase { text-shadow: none; }
.sd-seq.tone-light .sd-seq-hud { color: var(--ink-mid); }

/* Contatore, segmenti, frecce, pausa */
.sd-seq-hud { position: absolute; z-index: 4; left: var(--pad); right: var(--pad); bottom: 36px; display: flex; align-items: center; gap: 18px;
  font-size: .75rem; letter-spacing: .2em; color: var(--white); transition: color .8s; }
.sd-seq.is-wall .sd-seq-hud { color: var(--ink-mid); }
.sd-seq-hud button { background: none; border: 0; color: inherit; font: inherit; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; padding: 10px 4px; }
.sd-seq-hud .count { font-variant-numeric: tabular-nums; min-width: 5.5em; white-space: nowrap; }
.sd-seq-hud .segs { display: flex; gap: 5px; }
.sd-seq-hud .seg { position: relative; display: block; width: 26px; height: 1px; padding: 8px 0; }
.sd-seq-hud .seg::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; opacity: .3; }
.sd-seq-hud .seg i { position: absolute; left: 0; top: 50%; height: 1px; width: 0; background: currentColor; }
.sd-seq-hud .arrows { display: flex; gap: 4px; }
.sd-seq-hud .arrows button { padding: 10px 8px; }
.sd-seq-hud .pause { margin-left: auto; }
.sd-seq-hud button:focus-visible, .sd-seq-cap a:focus-visible, .sd-seq-name a:focus-visible, .sd-seq-cta:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* ─── Telefono ─── */
@media (max-width: 768px) {
  .sd-seq-wall { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); row-gap: 20px; padding: 84px var(--pad) 72px; align-items: start; }
  .sd-seq-shade-t { background: linear-gradient(to bottom, rgba(14,14,15,.66) 0%, rgba(14,14,15,.3) 30%, rgba(14,14,15,0) 50%),
                               linear-gradient(to top, rgba(14,14,15,.4) 0%, rgba(14,14,15,0) 30%); }
  .sd-seq-eyebrow { margin-bottom: 14px; }
  .sd-seq-name { font-size: 2.6rem; margin-bottom: 16px; }
  .sd-seq-claim { font-size: 1.12rem; margin-bottom: 0; }
  .sd-seq-sub, .sd-seq-cta { display: none; }
  .sd-seq-print { justify-content: flex-end; }
  .sd-seq-plabel { margin-top: 10px; }
  .sd-seq-caps { bottom: 82px; left: calc(var(--pad) + 6px); right: var(--pad); }
  .sd-seq-cap .title { font-size: .9rem; }
  .sd-seq-cap .meta { font-size: .66rem; letter-spacing: .16em; }
  .sd-seq-cap .phrase, .sd-seq-cap.long .phrase { font-size: 1.16rem; margin-top: 16px; }
  .sd-seq-cap .more { margin-top: 16px; }
  .sd-seq-cap.narrow { max-width: none; }
  .sd-seq-layer[data-kind="port"] img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
  @supports (width: 1cqw) {
    .sd-seq-layer[data-kind="port"] img {
      inset: auto; object-fit: fill; --w: calc(max(100cqw, 100cqh * var(--ar)) * var(--ez)); --h: calc(var(--w) / var(--ar));
      width: var(--w); height: var(--h);
      left: clamp(calc(100cqw - var(--w)), calc(50cqw - var(--efx) * var(--w)), 0px);
      top: clamp(calc(100cqh - var(--h)), calc(50cqh - var(--efy) * var(--h)), 0px);
    }
  }
  .sd-seq-layer[data-kind="top"] img { inset: 6% 6% 42% 6%; width: 88%; height: 52%; object-fit: contain; }
  .sd-seq-hud { bottom: 22px; gap: 12px; }
  .sd-seq-hud .segs { gap: 3px; }
  .sd-seq-hud .seg { width: 13px; }
  .sd-seq-hud .count { min-width: 0; letter-spacing: .12em; }
}

@media (prefers-reduced-motion: reduce) {
  .sd-seq-stage, .sd-seq-wt > *, .sd-seq-name, .sd-seq-cap .ln, .sd-seq-cap .head, .sd-seq-cap .more, .sd-seq-shade { transition-duration: .01s !important; transition-delay: 0s !important; }
}