/* =====================================================================
   v1.11 — Nero profondo + ruota 3D
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Nero profondo
   Il fondo va a #000. Su nero pieno la grana e l'alone si vedono il
   doppio: vanno abbassati, se no il fondo si sporca invece di
   restare nero.
   --------------------------------------------------------------- */
:root {
	--blk: #000000;
	--surface: #0a0a0a;
	--surface-2: #121212;
}

.oc-grain { opacity: .02; }

.oc-card__media,
.oc-citem,
.oc-shot { background: var(--surface); }

.oc-card__ph {
	background:
		linear-gradient(165deg, rgba(255, 255, 255, .045), rgba(0, 0, 0, 0) 50%),
		var(--surface);
}

.oc-card--feed .oc-card__media,
.oc-card--car .oc-card__media { background: #000; }

.oc-card--car .oc-card__media::after { background: #000; opacity: .5; }

.oc-card--car .oc-card__ph--load {
	background:
		radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .06), rgba(0, 0, 0, 0) 62%),
		var(--surface);
}

::-webkit-scrollbar-thumb { background: #171717; }
::-webkit-scrollbar-thumb:hover { background: #2e2e2e; }

.oc-car__glow { filter: blur(130px) saturate(150%) brightness(.42); }

:root[data-oc-theme="light"] .oc-home,
:root[data-oc-theme="light"] .oc-page-mv,
:root[data-oc-theme="light"] .oc-acc { background: #000; }

/* Il tema chiaro non cambia: il nero profondo vale solo al buio. */
:root[data-oc-theme="light"] {
	--blk: #f4f2ef;
	--surface: #e7e4df;
	--surface-2: #ddd9d3;
}

:root[data-oc-theme="light"] .oc-card__media,
:root[data-oc-theme="light"] .oc-citem,
:root[data-oc-theme="light"] .oc-shot { background: var(--surface); }

:root[data-oc-theme="light"] .oc-car__glow { filter: blur(130px) saturate(130%) brightness(1.5); }

/* ---------------------------------------------------------------
   2. Ruota 3D — Commercial & Fashion
   Le card diventano lembi veri di cilindro disegnati in WebGL: qui
   resta solo la tela e la misura del palco. Le card del DOM restano
   dove sono (servono come dati, video e bersaglio del click) ma non
   si vedono piu'.
   Il palco e' piu' alto della card: quell'aria sopra e sotto e' cio'
   che fa vedere l'inarcamento delle laterali. Senza, si taglia.
   --------------------------------------------------------------- */
.oc-car__gl {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
}

.oc-car.is-gl .oc-car__stage {
	flex: 0 1 auto;
	min-height: 0;
	max-height: none;
	height: min(40vw, 720px, 52svh);
	perspective: none;
	/* Lo scroll verticale sopra il palco comanda la ruota, non la pagina. */
	touch-action: none;
	cursor: grab;
}

.oc-car.is-gl.is-dragging .oc-car__stage { cursor: grabbing; }

.oc-car.is-gl .oc-car__track { opacity: 0; pointer-events: none; }

.oc-car.is-gl .oc-car__cap {
	min-height: clamp(88px, 10.5vh, 132px);
	padding-top: clamp(10px, 2vh, 20px);
}

@media (max-width: 900px) {
	.oc-car.is-gl .oc-car__stage { height: min(52vw, 470px, 58svh); }
}

@media (max-width: 640px) {
	/* Piu' stretto: se il palco cresce, la card riempie tutto e le due
	   vicine spariscono dai lati. */
	.oc-car.is-gl .oc-car__stage { height: min(57vw, 300px, 40svh); }
	.oc-car.is-gl .oc-car__cap { min-height: auto; }

	/* Quattro filtri su un telefono andavano a capo dentro la pillola:
	   in fila e si scorre, invece di impilarsi. */
	.oc-car__filters {
		flex-wrap: nowrap;
		justify-content: flex-start;
		width: auto;
		max-width: none;
		margin-left: var(--pad);
		margin-right: var(--pad);
	}

	.oc-car__filter { min-height: var(--tap); padding: 8px 16px; font-size: 11px; }
}

/* Sul telefono in piedi c'e' aria in avanzo: la divido sopra e sotto, se no
   il blocco resta schiacciato in basso dalla testata. */
@media (max-width: 640px) and (min-height: 760px) {
	.oc-page-car { padding-bottom: var(--header-h); }
}

/* Sui portatili l'altezza e' poca: titolo e didascalia si stringono e il
   suggerimento sparisce, se no la didascalia esce dallo schermo. */
@media (max-height: 820px) {
	.oc-car.is-gl .oc-car__kinetic { font-size: clamp(22px, 3.6vw, 48px); }
	.oc-car.is-gl .oc-car__title { font-size: clamp(22px, 2.8vw, 38px); }
	.oc-car.is-gl .oc-car__hint { display: none; }
	.oc-car.is-gl .oc-car__foot { padding-top: 0; }
}

@media (max-height: 520px) and (orientation: landscape) {
	.oc-car.is-gl .oc-car__stage { height: min(42svh, 42vw); }
	.oc-car.is-gl .oc-car__cap { min-height: auto; padding-top: 8px; }
	.oc-car.is-gl .oc-car__sub { display: none; }
	.oc-car__kinetic { display: none; }
}

/* =====================================================================
   v1.12 — Tema chiaro leggibile, player asciutto, tipografia mobile
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Tema chiaro: i testi che sparivano
   Erano bianchi scritti a mano nel foglio, senza una controparte per
   il chiaro: su fondo #f4f2ef restavano invisibili. Qui hanno tutti
   la loro versione scura. Restano bianchi solo quelli che stanno
   davvero sopra a un video o a una foto.
   --------------------------------------------------------------- */
:root[data-oc-theme="light"] {
	/* .58 dava 4.4:1 sul fondo chiaro, sotto la soglia di leggibilita'
	   per i corpi piccoli. .72 porta a 6.2:1. */
	--ink-dim: rgba(18, 18, 18, .72);
}

:root[data-oc-theme="light"] .oc-about-founder__bio p,
:root[data-oc-theme="light"] .oc-doc,
:root[data-oc-theme="light"] .oc-car__h1,
:root[data-oc-theme="light"] .oc-car__client,
:root[data-oc-theme="light"] .oc-car__hint,
:root[data-oc-theme="light"] .oc-card__ph em,
:root[data-oc-theme="light"] .oc-scene__ph span,
:root[data-oc-theme="light"] .oc-scene__tags li,
:root[data-oc-theme="light"] .oc-scene__dir span { color: var(--ink-dim); }

:root[data-oc-theme="light"] .oc-car__filter:hover,
:root[data-oc-theme="light"] .oc-card:hover .oc-card__sub,
:root[data-oc-theme="light"] .oc-scene__title,
:root[data-oc-theme="light"] .oc-scene__dir b,
:root[data-oc-theme="light"] .oc-player__back,
:root[data-oc-theme="light"] .oc-tbtn { color: var(--wht); }

:root[data-oc-theme="light"] .oc-scene__prog > i { background: var(--wht); }
:root[data-oc-theme="light"] .oc-scene__prog::before { background: rgba(18, 18, 18, .2); }
:root[data-oc-theme="light"] .oc-tbtn:hover { background: rgba(18, 18, 18, .08); }

/* Il muro dei nomi e' solo contorno: il contorno era bianco. */
:root[data-oc-theme="light"] .oc-wall__marq--rtl { -webkit-text-stroke-color: rgba(18, 18, 18, .55); }

/* La riga legale era al 42% di nero: troppo poco per 9px. */
:root[data-oc-theme="light"] .oc-footer__legal { color: rgba(18, 18, 18, .66); }

/* Frecce del carosello: pastiglia scura con testo bianco su fondo chiaro. */
:root[data-oc-theme="light"] .oc-car__arrow {
	background: rgba(255, 255, 255, .6);
	border-color: rgba(18, 18, 18, .2);
	color: var(--wht);
}

:root[data-oc-theme="light"] .oc-car__arrow:hover {
	background: var(--wht);
	border-color: var(--wht);
	color: var(--blk);
}

/* ---------------------------------------------------------------
   2. Player: via la riga del regista, tag ridotti a un sussurro
   La pastiglia col bordo era quello che li faceva sembrare grandi,
   non il corpo del carattere: tolto il bordo restano due parole
   spaziate sotto al titolo.
   --------------------------------------------------------------- */
.oc-scene__dir { display: none; }

.oc-scene__tags {
	gap: 0 12px;
	margin-top: 8px;
}

.oc-scene__tags li {
	padding: 0;
	border: 0;
	border-radius: 0;
	font-size: 7px;
	font-weight: 700;
	letter-spacing: .22em;
	color: rgba(255, 255, 255, .5);
}

:root[data-oc-theme="light"] .oc-scene__tags li { color: var(--ink-dim); }

/* ---------------------------------------------------------------
   3. Tipografia su telefono
   Sotto i 10px su uno schermo piccolo non si legge: le didascalie,
   il piede e le etichette salgono a 11, con piu' aria fra le lettere.
   Titoli e corpo restano come sono.
   --------------------------------------------------------------- */
@media (max-width: 640px) {
	.oc-footer__nav,
	.oc-footer__ig,
	.oc-footer__legal { font-size: 11px; letter-spacing: .12em; }

	.oc-footer__nav { gap: 10px 12px; }
	.oc-footer__core { gap: 16px; }

	.oc-shot__cap { font-size: 11px; letter-spacing: .16em; }
	.oc-gallery__title { font-size: clamp(24px, 7vw, 40px); }

	.oc-ev__meta { font-size: 10px; letter-spacing: .18em; }

	.oc-car__client { font-size: 10px; letter-spacing: .2em; }
	.oc-car__sub { font-size: 10px; letter-spacing: .16em; }

	.oc-roles li,
	.oc-card__tag { font-size: 9px; letter-spacing: .14em; padding: 4px 8px; }

	.oc-form__field span,
	.oc-contact__clock { font-size: 11px; letter-spacing: .18em; }

	.oc-contact__addr { font-size: 15px; }
	.oc-contact__lead { font-size: 17px; line-height: 1.4; }

	.oc-split__sub { font-size: 10px; letter-spacing: .22em; }

	.oc-scene__title { font-size: 20px; }
	.oc-player__back { font-size: 11px; letter-spacing: .14em; }
}