/* ==========================================================================
   TelaStampiamo — Pagine servizio (scaffold condiviso) + Stampa Digitale
   Estende pages.css (già caricato). Dark editorial, più caratteristica delle altre.
   Beat firma pinnato (ink knockout) + bento materiali. Mobile-first.
   ========================================================================== */

/* La pagina servizio va full-bleed (il beat e l'ambient sono a tutto schermo):
   tolgo i vincoli di .ts-page e li riapplico per-sezione. */
.ts-page--sd,
.ts-page--3d,
.ts-page--web {
	position: relative;
	z-index: 1;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Sfondo ambientale (shader ink-dust), dietro tutto */
.ts-sd-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; }

/* Wrapper interno condiviso delle sezioni testuali */
.ts-sd-hero,
.ts-sd-section {
	max-width: var(--ts-maxw);
	margin-inline: auto;
	padding-inline: var(--ts-gutter);
}
.ts-sd-section { padding-block: var(--ts-space-section); }

/* 1 · Hero */
.ts-sd-hero { padding-top: calc(var(--ts-header-h) + var(--ts-space-2xl)); padding-bottom: var(--ts-space-xl); max-width: 56rem; }

/* 2 · Beat firma pinnato (full-bleed) */
.ts-sd-beat {
	position: relative;
	min-height: 100svh;
	overflow: hidden;
	display: grid;
}
.ts-sd-beat-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: none; }
/* Beat 3D attivo: il canvas è una CORNICE fissa a tutto schermo DIETRO al contenuto
   (come sfondo). z-index:-1 nel contesto di #ts-sd → sotto le sezioni (che lo coprono e
   restano leggibili), sopra l'ambient ink-dust. Trasparente tranne i biglietti ai bordi.
   Opacità guidata da JS (fade-in/out). pointer-events none. */
.ts-sd-anim .ts-sd-beat-canvas {
	display: block; position: fixed; inset: 0; width: 100vw; height: 100vh;
	z-index: -1; pointer-events: none; opacity: 0;
}
.ts-sd-beat-ui {
	position: relative; z-index: 1;
	align-self: stretch; justify-self: stretch;
	display: grid; align-content: space-between; justify-items: center;
	padding: calc(var(--ts-header-h) + var(--ts-space-lg)) var(--ts-gutter) var(--ts-space-xl);
	text-align: center;
}
.ts-sd-beat-intro {
	margin: var(--ts-space-xs) 0 0;
	font-family: var(--ts-font-mono); font-size: var(--ts-text-sm);
	letter-spacing: 0.04em; color: var(--ts-text-dim);
}
/* Parole applicazione: fallback (no anim) → grande lista centrata; con anim → le disegna il canvas */
.ts-sd-beat-words {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 0.1rem; justify-items: center;
	font-family: var(--ts-font-display); text-transform: uppercase;
	font-size: var(--ts-text-2xl); line-height: 1.02; letter-spacing: 0.02em;
}
.ts-sd-beat-words li:nth-child(odd) { color: var(--ts-white); }
.ts-sd-beat-words li:nth-child(even) { color: var(--ts-red); }
.ts-sd-anim .ts-sd-beat-words { visibility: hidden; }
.ts-sd-anim .ts-sd-beat-intro { display: none; } /* "Un file entra…" rimossa dal beat 3D */

/* Maschera leggera sul titolo "I Materiali": alone scuro che lo stacca dai biglietti-fondale. */
.ts-sd-anim .ts-sd-materials .ts-section-label,
.ts-sd-anim .ts-sd-materials .ts-sd-h2,
.ts-sd-anim .ts-sd-materials .ts-sd-intro {
	text-shadow: 0 2px 20px rgba(13, 13, 13, 0.95), 0 0 8px rgba(13, 13, 13, 0.9);
}

/* 3 · Bento materiali */
.ts-sd-h2 {
	font-family: var(--ts-font-display); text-transform: uppercase;
	font-size: var(--ts-text-2xl); line-height: 0.96; letter-spacing: 0.01em; margin: 0;
}
.ts-sd-h2 span { color: var(--ts-red); }
.ts-sd-intro { margin: var(--ts-space-sm) 0 var(--ts-space-xl); color: var(--ts-text-dim); font-size: var(--ts-text-lg); max-width: 46ch; }

.ts-sd-bento {
	display: grid; grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: minmax(150px, 1fr); grid-auto-flow: row dense; gap: 1px;
	background: var(--ts-gray-2); /* le gap di 1px diventano hairline tra le celle */
	border: 1px solid var(--ts-gray-2);
}
.ts-sd-cell {
	position: relative; overflow: hidden;
	grid-column: span 2; /* default 2x1 */
	display: flex; flex-direction: column; gap: var(--ts-space-2xs);
	padding: clamp(1.1rem, 0.8rem + 1.5vw, 2rem);
	background: var(--ts-black);
	transition: background var(--ts-dur-normal) var(--ts-ease-out-expo);
}
.ts-sd-cell--flag { grid-column: span 2; grid-row: span 2; }
/* sweep rosso + crop tick d'angolo in hover (celle informative, no link) */
.ts-sd-cell::before {
	content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 2px;
	background: var(--ts-red); transform: scaleY(0); transform-origin: top;
	transition: transform var(--ts-dur-normal) var(--ts-ease-out-expo);
}
.ts-sd-cell::after {
	content: ''; position: absolute; top: 10px; right: 10px; width: 12px; height: 12px;
	border-top: 1.5px solid var(--ts-red); border-right: 1.5px solid var(--ts-red);
	opacity: 0; transition: opacity var(--ts-dur-normal);
}
@media (hover: hover) {
	.ts-sd-cell:hover { background: var(--ts-gray); }
	.ts-sd-cell:hover::before { transform: scaleY(1); }
	.ts-sd-cell:hover::after { opacity: 0.9; }
	.ts-sd-cell:hover .ts-sd-cell-idx,
	.ts-sd-cell:hover .ts-sd-cell-ico .ts-ic { color: var(--ts-red); }
}
.ts-sd-cell-head { display: flex; align-items: center; justify-content: space-between; }
.ts-sd-cell-idx { font-family: var(--ts-font-mono); font-size: var(--ts-text-xs); color: var(--ts-text-dim); transition: color var(--ts-dur-fast); }
.ts-sd-cell-ico { position: absolute; top: clamp(1.1rem, 0.8rem + 1.5vw, 2rem); right: clamp(1.1rem, 0.8rem + 1.5vw, 2rem); }
.ts-sd-cell-ico .ts-ic { width: 26px; height: 26px; color: var(--ts-white); transition: color var(--ts-dur-fast); }
.ts-sd-cell-name {
	margin: auto 0 0; /* spinge nome+desc+varianti in basso, indice resta in alto */
	font-family: var(--ts-font-display); font-weight: 400; text-transform: uppercase;
	font-size: var(--ts-text-xl); line-height: 1; letter-spacing: 0.02em;
}
.ts-sd-cell--flag .ts-sd-cell-name { font-size: var(--ts-text-2xl); }
.ts-sd-cell-desc { margin: 0; color: var(--ts-text-dim); font-size: var(--ts-text-sm); max-width: 34ch; }
.ts-sd-variants { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.ts-sd-variants li {
	font-family: var(--ts-font-mono); font-size: var(--ts-text-xs); color: var(--ts-white);
	border: 1px solid var(--ts-gray-2); border-radius: var(--ts-radius); padding: 0.18rem 0.5rem;
}

/* 4 · Perché noi */
.ts-sd-why-list { list-style: none; margin: var(--ts-space-lg) 0 0; padding: 0; display: grid; gap: var(--ts-space-lg); grid-template-columns: repeat(3, 1fr); }
.ts-sd-why-item { border-top: 2px solid var(--ts-red); padding-top: var(--ts-space-md); }
.ts-sd-why-num { font-family: var(--ts-font-mono); font-size: var(--ts-text-xs); color: var(--ts-text-dim); }
.ts-sd-why-name { margin: var(--ts-space-2xs) 0 var(--ts-space-2xs); font-family: var(--ts-font-display); text-transform: uppercase; font-size: var(--ts-text-lg); letter-spacing: 0.02em; }
.ts-sd-why-desc { margin: 0; color: var(--ts-text-dim); font-size: var(--ts-text-base); }

/* 5 · CTA */
.ts-sd-cta { text-align: center; padding-bottom: var(--ts-space-2xl); }
.ts-sd-cta-line { font-family: var(--ts-font-display); text-transform: uppercase; font-size: var(--ts-text-xl); letter-spacing: 0.02em; margin: 0 0 var(--ts-space-sm); }

/* --- Responsive --- */
@media (max-width: 820px) {
	.ts-sd-bento { grid-template-columns: 1fr; }
	.ts-sd-cell, .ts-sd-cell--flag { grid-column: 1 / -1; grid-row: auto; }
	.ts-sd-cell--flag { min-height: 220px; }
	.ts-sd-why-list { grid-template-columns: 1fr; gap: var(--ts-space-md); }
	.ts-sd-beat-words { font-size: var(--ts-text-xl); }
}

@media (prefers-reduced-motion: reduce) {
	.ts-sd-bg, .ts-sd-beat-canvas { display: none !important; }
}

/* ==========================================================================
   Pagina servizio — Stampa 3D
   Riusa lo scaffold .ts-sd-* (hero/section/bento/why/cta) e .ts-sd-bg.
   Specifico qui: il beat firma è WebGL 3D (logo GLB che si assembla), non Canvas2D ink.
   ========================================================================== */

/* Beat firma 3D (full-bleed, pinnato dal JS): il logo 3D si riassembla scrollando. */
.ts-3d-beat {
	position: relative;
	min-height: 100svh;
	overflow: hidden;
	display: grid;
}
.ts-3d-beat-canvas {
	position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: none;
}
.ts-3d-anim .ts-3d-beat-canvas { display: block; }

/* Fallback statico (no anim / no WebGL): wordmark al centro. */
.ts-3d-beat-fallback {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: min(56vw, 28rem); height: auto; z-index: 0; opacity: 0.92;
}
.ts-3d-anim .ts-3d-beat-fallback { display: none; }

/* UI sopra il canvas: label in alto, intro in basso → centro libero per il logo 3D. */
.ts-3d-beat-ui {
	position: relative; z-index: 1;
	align-self: stretch; justify-self: stretch;
	display: grid; align-content: space-between; justify-items: center;
	padding: calc(var(--ts-header-h) + var(--ts-space-lg)) var(--ts-gutter) var(--ts-space-xl);
	text-align: center;
	pointer-events: none;
}
.ts-3d-beat-intro {
	margin: var(--ts-space-xs) 0 0;
	font-family: var(--ts-font-mono); font-size: var(--ts-text-sm);
	letter-spacing: 0.04em; color: var(--ts-text-dim);
}

@media (prefers-reduced-motion: reduce) {
	.ts-3d-beat-canvas { display: none !important; }
}

/* ==========================================================================
   Pagina servizio — Servizi Web
   Riusa interamente lo scaffold .ts-sd-* (hero/beat/bento/why/cta) e .ts-sd-bg.
   La firma è il beat codice (.ts-sd-beat + .ts-sd-beat-canvas, Canvas2D): la
   pioggia di codice neon disegna il proprio sfondo opaco, niente CSS dedicato.
   Le parole statiche (.ts-sd-beat-words) restano come fallback senza anim.
   ========================================================================== */

/* Con anim attiva il keyword neon è disegnato al centro dal canvas: tolgo del tutto
   le parole-fallback (display:none, non solo visibility) così lo space-between della
   UI lascia label in alto e intro in basso → centro libero per il keyword. */
.ts-page--web.ts-sd-anim .ts-sd-beat-words { display: none; }

/* La pioggia di codice è il FONDALE dell'intera pagina: vive su #ts-web-bg (fixed, a
   tutto schermo). z-index:0 (livello canvas) la tiene SOPRA il fondo nero di html/body
   ma SOTTO header (100), contenuto (10) e footer (10) — tutti trasparenti dove serve.
   Così parte da sopra l'header e continua, dietro al testo, fino a fondo pagina.
   z-index:0 = stesso livello di .ts-sd-bg (fondale < pagina 1 < footer 10 < header 100). */
#ts-web-bg { z-index: 0; }

/* Niente più canvas-beat dedicato: la pioggia non sta nel beat ma sul fondale.
   (Evita anche un canvas fisso "fantasma" dentro lo stacking-context della pagina.) */
.ts-page--web .ts-sd-beat-canvas { display: none !important; }

/* Leggibilità del testo sopra la pioggia: scrim morbido (stessa logica dei materiali).
   Le celle bento sono già opache, quindi non serve scrim al loro interno. */
.ts-page--web .ts-eyebrow,
.ts-page--web .ts-page-title,
.ts-page--web .ts-page-lead,
.ts-page--web .ts-section-label,
.ts-page--web .ts-sd-h2,
.ts-page--web .ts-sd-intro,
.ts-page--web .ts-sd-why-num,
.ts-page--web .ts-sd-why-name,
.ts-page--web .ts-sd-why-desc,
.ts-page--web .ts-sd-cta-line {
	text-shadow: 0 1px 14px rgba(5, 8, 5, 0.92), 0 0 6px rgba(5, 8, 5, 0.85);
}