/* =====================================================================
   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; }
}

/* =====================================================================
   v1.13 — Ruota piu' grande, tag veri, credits leggibili, split vivo
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Il palco cresce, ma prende solo lo spazio che avanza
   A 1440x900 il palco si fermava a 468px: la card centrale restava
   piccola e le due laterali, che avanzano verso chi guarda, sembravano
   piu' grandi di lei.

   L'altezza fissa pero' non si puo' alzare e basta: la pagina e' alta
   quanto lo schermo e taglia quello che avanza, quindi su un portatile
   sparivano didascalia e piede. Adesso il palco e' elastico: si prende
   tutto lo spazio rimasto fino a un tetto, e quando lo spazio non c'e'
   si stringe da solo invece di spingere fuori il resto.
   --------------------------------------------------------------- */
.oc-page-car { height: 100svh; }

.oc-car.is-gl .oc-car__stage {
	flex: 1 1 auto;
	height: auto;
	min-height: 170px;
	max-height: min(44vw, 780px, 58svh);
}

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

@media (max-width: 640px) {
	.oc-car.is-gl .oc-car__stage { max-height: min(57vw, 300px, 40svh); }
}

@media (max-height: 520px) and (orientation: landscape) {
	.oc-car.is-gl .oc-car__stage { max-height: min(42svh, 42vw); }
}

/* Sui portatili ogni pixel tolto a didascalia e piede lo prende la ruota,
   senza rimpicciolire il titolo. */
@media (min-width: 901px) and (max-height: 960px) {
	.oc-car.is-gl .oc-car__cap { padding-top: 10px; }
	.oc-car.is-gl .oc-car__sub { margin-top: 7px; }
	.oc-car.is-gl .oc-car__foot { padding-top: 4px; }
}

/* ---------------------------------------------------------------
   2. Ruoli come etichette
   "Full Production", "Creative Studio", "Post Production" non sono una
   frase sotto al titolo: sono targhette. Piccolissime, con un filo di
   bordo, giusto per dire che lavoro e' stato fatto.
   --------------------------------------------------------------- */
.oc-car__sub {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 5px;
	margin-top: 11px;
	letter-spacing: normal;
}

.oc-car__tag,
.oc-scene__tags li {
	font-size: 7px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .2em;
	text-transform: uppercase;
	/* La spaziatura fra le lettere aggiunge aria in coda: il bordo destro
	   va stretto, se no la targhetta sembra storta. */
	padding: 4px 6px 4px 8px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 3px;
	color: rgba(255, 255, 255, .5);
}

.oc-scene__tags {
	gap: 5px;
	margin-top: 9px;
}

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

@media (max-width: 640px) {
	/* Su telefono 7px sparisce: sale quel tanto che basta a leggerlo. */
	.oc-car__tag,
	.oc-scene__tags li { font-size: 8px; letter-spacing: .16em; }
	.oc-car__sub { margin-top: 9px; }
}

/* ---------------------------------------------------------------
   3. Credits — Music Videos
   Erano etichette blu, corpo 14, e i nomi lunghi andavano a capo con la
   colonna che ballava. Adesso e' una griglia: etichette tutte incolonnate
   alla stessa misura, nomi su una riga sola, niente colore.
   --------------------------------------------------------------- */
.oc-credits {
	width: min(560px, 94vw);
	padding: 84px 34px 40px;
}

.oc-credits h3 {
	font-size: 22px;
	letter-spacing: .04em;
	margin-bottom: 22px;
}

.oc-credits li {
	display: grid;
	grid-template-columns: 124px 1fr;
	align-items: baseline;
	gap: 14px;
	padding: 9px 0;
	font-size: 12px;
	letter-spacing: .01em;
	color: rgba(255, 255, 255, .92);
}

.oc-credits li b {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	/* Via il blu: qui il colore lo mettono i video, non le didascalie. */
	color: rgba(255, 255, 255, .42);
}

@media (min-width: 641px) {
	/* Con 124px di etichetta restano ~360px: il credit piu' lungo ci sta. */
	.oc-credits li span { white-space: nowrap; }
}

/* Nel tema chiaro il pannello restava vetro scuro sopra una pagina chiara:
   diventava grigio slavato con sopra testo bianco. Qui si ribalta. */
:root[data-oc-theme="light"] .oc-credits {
	background: rgba(246, 244, 241, .86);
	border-left-color: rgba(18, 18, 18, .14);
}

:root[data-oc-theme="light"] .oc-credits h3,
:root[data-oc-theme="light"] .oc-credits li { color: rgba(18, 18, 18, .92); }
:root[data-oc-theme="light"] .oc-credits li { border-bottom-color: rgba(18, 18, 18, .12); }
:root[data-oc-theme="light"] .oc-credits li b { color: rgba(18, 18, 18, .5); }
:root[data-oc-theme="light"] .oc-credits__close { color: rgba(18, 18, 18, .75); }

@media (max-width: 640px) {
	/* Su telefono la colonna dell'etichetta lascerebbe troppo poco al nome e
	   i credit lunghi andrebbero a capo lo stesso: meglio l'etichetta sopra,
	   cosi' il nome ha tutta la riga e resta una riga sola. */
	.oc-credits { width: min(440px, 94vw); padding: 74px 20px 32px; }
	.oc-credits h3 { font-size: 19px; margin-bottom: 16px; }

	.oc-credits li {
		grid-template-columns: 1fr;
		gap: 3px;
		padding: 9px 0;
		font-size: 11px;
	}

	.oc-credits li b { font-size: 8px; }
}

/* ---------------------------------------------------------------
   4. Music Videos — la scelta e' gia' in movimento
   Prima si vedevano due foto ferme e il video compariva solo sotto al
   mouse. Adesso girano entrambe da subito: passando sopra una, l'altra
   si spegne. Il video appare solo quando ha davvero un fotogramma,
   quindi non c'e' mai un buco nero.
   --------------------------------------------------------------- */
.oc-split__half.is-ready .oc-split__media video { opacity: .34; }
.oc-split__half.is-ready .oc-split__media img { opacity: 0; }

.oc-split__half.is-hot.is-ready .oc-split__media video {
	opacity: .6;
	filter: none;
	transform: scale(1);
}

.oc-split.is-hover .oc-split__half:not(.is-hot) .oc-split__media video,
.oc-split.is-hover .oc-split__half:not(.is-hot) .oc-split__media img { opacity: .1; }

/* =====================================================================
   v1.14 — Commercial & Fashion a feed, scroll one-page, player, banda blu
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Commercial & Fashion diventa un feed
   Via la ruota: le card sono schermate intere, come Music Videos.
   La pagina torna a scorrere (la ruota la teneva bloccata all'altezza
   dello schermo) e i filtri si staccano dalla testata, se no dopo la
   prima schermata non si raggiungono piu'.
   --------------------------------------------------------------- */
.oc-page-car {
	height: auto;
	min-height: 100svh;
	overflow: visible;
	padding-top: 0;
}

.oc-car.is-feed {
	display: block;
	flex: none;
	padding: 0;
}

.oc-car.is-feed .oc-car__head {
	padding-top: calc(var(--header-h) + 14px);
	padding-bottom: 0;
	/* Il tema da' z-index 1 a tutti i figli di .oc-car: il feed viene dopo
	   e coprirebbe i filtri, che sono dentro alla testata. */
	position: relative;
	z-index: 40;
}

.oc-car.is-feed .oc-car__filters {
	position: fixed;
	top: calc(var(--header-h) + 10px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 40;
	max-width: calc(100vw - 20px);
}

/* La prima card parte subito sotto al titolo, come nel feed dei video. */
.oc-car.is-feed .oc-mvfeed { position: relative; }

/* Su telefono la pillola dei filtri e' piu' larga dello schermo: quattro
   voci in fila non ci stanno. Va ancorata ai due bordi, non centrata su
   una larghezza che non esiste, e dentro si scorre di lato. */
@media (max-width: 640px) {
	.oc-car.is-feed .oc-car__filters {
		left: 10px;
		right: 10px;
		transform: none;
		width: auto;
		max-width: none;
		margin: 0;
		justify-content: flex-start;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.oc-car.is-feed .oc-car__filters::-webkit-scrollbar { display: none; }

	/* Con meno aria dentro ai tasti le quattro voci ci stanno tutte anche
	   su uno schermo da 360, e non serve nemmeno scorrere. */
	.oc-car.is-feed .oc-car__filter {
		flex: 0 0 auto;
		padding: 8px 11px;
		font-size: 10px;
		letter-spacing: .04em;
	}
}

/* ---------------------------------------------------------------
   2. Uno scroll, un video
   Il feed si fermava dove capitava: l'aggancio era "proximity", che
   e' un consiglio, non una regola. Qui diventa obbligatorio e con
   scroll-snap-stop nessuna schermata si puo' saltare: un colpo di
   pollice sposta di un progetto, mai di due.
   --------------------------------------------------------------- */
html:has(body.oc-mv-open),
html:has(body.oc-feed-page) {
	scroll-snap-type: y mandatory;
	/* Niente scroll-behavior: smooth qui. Sommato all'aggancio obbligatorio
	   litiga col dito: l'animazione riparte a ogni tocco e tornare indietro
	   diventa impossibile. L'aggancio si anima gia' da solo. */
	scroll-behavior: auto;
}

/* La testata col titolo e' il primo punto d'aggancio: risalendo si atterra
   li', invece di restare incastrati sulla prima card. */
.oc-car.is-feed .oc-car__head { scroll-snap-align: start; }

.oc-card--feed {
	/* 540px fissi impedivano l'aggancio sugli schermi bassi. */
	min-height: 0;
	height: 100svh;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* Stesso patto dentro al player. */
.oc-player__scroll { scroll-snap-type: y mandatory; }

.oc-scene {
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* Sul telefono la barra fissa e la didascalia devono stare dentro all'area
   sicura: sotto c'e' la riga dell'iPhone, sopra la tacca. */
@media (max-width: 640px) {
	.oc-car.is-feed .oc-car__filters {
		top: calc(var(--header-h) + 8px + env(safe-area-inset-top, 0px));
	}

	.oc-feed__info {
		bottom: calc(clamp(34px, 7vh, 76px) + env(safe-area-inset-bottom, 0px));
	}
}

/* L'aggancio obbligatorio su uno schermo basso e sdraiato incastra: li'
   torna un consiglio, cosi' si scorre comunque. */
@media (max-height: 480px) {
	html:has(body.oc-mv-open),
	html:has(body.oc-feed-page) { scroll-snap-type: y proximity; }
	.oc-card--feed { scroll-snap-stop: normal; min-height: 420px; }
}

/* ---------------------------------------------------------------
   3. Player: schermo intero in alto a destra
   Nella barra in basso stava attaccato a CREDITS e sul telefono si
   premevano insieme. Qui e' da solo, sopra al video, con tutta l'area
   di tocco che gli serve. Sta sotto al pannello credits: quando si
   apre, sparisce dietro.
   --------------------------------------------------------------- */
.oc-player__fs {
	position: absolute;
	top: 8px;
	right: 10px;
	z-index: 7;
	width: var(--tap);
	height: var(--tap);
	display: grid;
	place-items: center;
	border-radius: 6px;
	color: var(--wht);
	opacity: .82;
	transition: opacity .2s, background .2s;
}

.oc-player__fs svg { width: 20px; height: 20px; }
.oc-player__fs:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
:root[data-oc-theme="light"] .oc-player__fs:hover { background: rgba(18, 18, 18, .1); }

@media (max-width: 640px) {
	.oc-player__fs { top: 4px; right: 6px; }
}

/* ---------------------------------------------------------------
   4. La banda blu torna a scorrere anche sul telefono
   --------------------------------------------------------------- */
@media (max-width: 640px) {
	.oc-footer__marq { text-align: left; }
	.oc-footer__marq > span {
		animation: oc-marq 45s linear infinite;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.oc-footer__marq > span { animation: none; }
}

/* =====================================================================
   v1.14.2 — Pillola dei filtri, respiro nelle didascalie, tag minuscoli
   ===================================================================== */

/* ---------------------------------------------------------------
   1. La barra dei filtri
   ALL diventava un cerchio: tre lettere in un tasto alto 44px con i
   bordi tondi fanno esattamente un cerchio. La cura non e' stringere
   ancora il tasto ma abbassarlo: se la larghezza supera l'altezza
   torna una pastiglia. Cosi' la barra e' anche meno ingombrante
   sopra al video.
   --------------------------------------------------------------- */
.oc-car.is-feed .oc-car__filters {
	gap: 3px;
	padding: 3px;
}

.oc-car.is-feed .oc-car__filter {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 0;
	height: 30px;
	padding: 0 14px;
	border-radius: 99px;
	font-size: 9px;
	letter-spacing: .1em;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.oc-car.is-feed .oc-car__filter {
		height: 28px;
		padding: 0 12px;
		font-size: 9px;
		letter-spacing: .08em;
	}
}

/* ---------------------------------------------------------------
   2. Didascalia del feed: aria fra le righe
   Artista, titolo e tag stavano appiccicati, e il titolo con
   interlinea .88 su due righe si chiudeva su se stesso.
   --------------------------------------------------------------- */
.oc-card--feed .oc-feed__artist {
	margin-bottom: 13px;
	letter-spacing: .28em;
}

.oc-card--feed .oc-feed__title {
	line-height: 1.02;
	letter-spacing: -.005em;
}

.oc-card--feed .oc-roles {
	margin-top: 16px;
	gap: 5px;
}

@media (max-width: 640px) {
	.oc-card--feed .oc-feed__artist { margin-bottom: 11px; font-size: 10px; letter-spacing: .24em; }
	.oc-card--feed .oc-feed__title { line-height: 1.06; }
	.oc-card--feed .oc-roles { margin-top: 13px; }
}

/* ---------------------------------------------------------------
   3. Tag: stessa misura di quelli del player
   Erano gli unici rimasti grandi: 8px con molta aria dentro e il
   fondo sfocato li facevano sembrare pastiglie, non etichette.
   --------------------------------------------------------------- */
.oc-card--feed .oc-roles li,
.oc-roles li {
	font-size: 7px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .16em;
	padding: 3px 5px 3px 7px;
	border-radius: 3px;
	/* Senza fondo pieno smettono di sembrare pastiglie e tornano etichette:
	   e' il riempimento che li faceva pesare, non il corpo del carattere. */
	background: transparent;
	border-color: rgba(255, 255, 255, .16);
	color: rgba(255, 255, 255, .58);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

:root[data-oc-theme="light"] .oc-card--feed .oc-roles li { border-color: rgba(255, 255, 255, .22); }

/* =====================================================================
   v1.14.3 — Risalire dal feed, e l'header che smette di lampeggiare
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Sopra alla prima card non c'era niente a cui agganciarsi
   Con l'aggancio obbligatorio il browser deve sempre atterrare su un
   punto: se sopra alla prima schermata non ce n'e' uno, risalendo ti
   riporta giu' sulla card da cui eri partito. Ecco perche' "torna
   sotto". Testata e piede diventano punti d'aggancio: adesso si sale
   e si scende fino in fondo.
   --------------------------------------------------------------- */
.oc-mvpane .oc-pagehead,
.oc-car.is-feed .oc-car__head { scroll-snap-align: start; }

body.oc-mv-open .oc-footer,
body.oc-feed-page .oc-footer { scroll-snap-align: start; }

/* ---------------------------------------------------------------
   2. L'header non si nasconde piu' dentro al feed
   Ogni aggancio spara una raffica di eventi di scroll, e il tema li
   somma per decidere se nascondere la testata: risultato, lampeggia.
   Su una pagina fatta di schermate intere la testata serve sempre,
   quindi qui resta ferma dov'e'.
   --------------------------------------------------------------- */
body.oc-mv-open .oc-header.is-hidden,
body.oc-feed-page .oc-header.is-hidden { transform: none; }

/* ---------------------------------------------------------------
   3. La barra dei filtri: squadrata e centrata
   Le pastiglie facevano a pugni con le etichette dei ruoli, che sono
   rettangoli col bordo sottile. Qui i filtri prendono la stessa forma
   e la stessa misura: un blocco centrato di targhette, non una barra
   da app. Attivo = pieno bianco, gli altri solo contorno.
   --------------------------------------------------------------- */
.oc-car.is-feed .oc-car__filters {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	width: max-content;
	max-width: calc(100vw - 20px);
	margin: 0;
	justify-content: center;
	gap: 4px;
	padding: 4px;
	border-radius: 4px;
	background: rgba(0, 0, 0, .34);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, .14);
	overflow-x: auto;
	scrollbar-width: none;
}

.oc-car.is-feed .oc-car__filter {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 0;
	height: 26px;
	padding: 0 10px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 3px;
	background: transparent;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .16em;
	color: rgba(255, 255, 255, .58);
	white-space: nowrap;
}

.oc-car.is-feed .oc-car__filter:hover {
	color: rgba(255, 255, 255, .9);
	background: rgba(255, 255, 255, .08);
}

.oc-car.is-feed .oc-car__filter.is-active,
:root[data-oc-theme="light"] .oc-car.is-feed .oc-car__filter.is-active {
	background: var(--wht);
	border-color: var(--wht);
	color: var(--blk);
}

@media (max-width: 640px) {
	.oc-car.is-feed .oc-car__filter {
		height: 25px;
		padding: 0 9px;
		font-size: 8px;
		letter-spacing: .14em;
	}
}

/* ---------------------------------------------------------------
   4. Oceancode ME: il titolo resta bianco anche in chiaro
   Sta sopra al video della hero, con un velo nero al 55%. Nel tema
   chiaro diventava rgb(18,18,18): testo scuro su fondo scuro, non si
   leggeva piu'. Qui sopra il colore lo decide il video, non il tema.
   --------------------------------------------------------------- */
:root[data-oc-theme="light"] .oc-me-hero h1,
:root[data-oc-theme="light"] .oc-me-hero__content h1,
:root[data-oc-theme="light"] .oc-me-hero__content p:not(.oc-eyebrow--me) { color: #fff; }

/* ---------------------------------------------------------------
   5. Via SKIP dall'intro
   --------------------------------------------------------------- */
.oc-intro__skip { display: none !important; }

/* =====================================================================
   v1.15 — I filtri smettono di essere una barra
   ===================================================================== */

/* Una pillola con dentro quattro riquadri e' un pannello di controllo:
   sopra a un video a schermo intero pesa e distrae. Qui i filtri tornano
   quello che sono davvero — quattro parole. Niente fondo, niente bordi,
   niente sfocatura: solo testo minuscolo e spaziato, con l'attivo in
   bianco pieno e una riga sottile sotto. Il resto sta al 40%, presente
   ma zitto. L'ombra morbida serve solo a staccarli da un fotogramma
   chiaro, non si vede.
   L'area di tocco resta alta 38px anche se il testo e' di 9: e' padding
   trasparente, non ingombro visivo. */
.oc-car.is-feed .oc-car__filters {
	position: fixed;
	top: calc(var(--header-h) + 12px);
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	width: max-content;
	max-width: calc(100vw - 24px);
	margin: 0;
	padding: 0;
	gap: clamp(15px, 3.4vw, 32px);
	justify-content: center;
	align-items: center;
	background: none;
	border: 0;
	border-radius: 0;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	overflow: visible;
	z-index: 41;
}

.oc-car.is-feed .oc-car__filter {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	height: auto;
	min-height: 0;
	padding: 12px 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(255, 255, 255, .4);
	text-shadow: 0 1px 18px rgba(0, 0, 0, .65);
	transition: color .35s var(--ease-out);
}

/* Il tema aveva gia' questa riga sotto, spenta dalla versione a pillole:
   qui torna, ed e' l'unico segno che indica dove sei. */
.oc-car.is-feed .oc-car__filter::after {
	display: block;
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 7px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .45s var(--ease-out);
}

.oc-car.is-feed .oc-car__filter:hover { color: rgba(255, 255, 255, .78); background: none; }

.oc-car.is-feed .oc-car__filter.is-active,
:root[data-oc-theme="light"] .oc-car.is-feed .oc-car__filter.is-active {
	color: #fff;
	background: none;
	border-color: transparent;
}

.oc-car.is-feed .oc-car__filter.is-active::after { transform: scaleX(1); }

/* Sopra al video il colore lo decide il video, non il tema. */
:root[data-oc-theme="light"] .oc-car.is-feed .oc-car__filter { color: rgba(255, 255, 255, .4); }
:root[data-oc-theme="light"] .oc-car.is-feed .oc-car__filter:hover { color: rgba(255, 255, 255, .78); }

@media (max-width: 640px) {
	.oc-car.is-feed .oc-car__filters {
		top: calc(var(--header-h) + 6px + env(safe-area-inset-top, 0px));
		gap: 15px;
	}

	.oc-car.is-feed .oc-car__filter {
		font-size: 8px;
		letter-spacing: .18em;
		padding: 11px 0;
	}
}

/* =====================================================================
   v1.15.1 — Piede: firma allineata al resto, mail accanto a Instagram
   ===================================================================== */

/* "Designed by WECOMM.AGENCY" non aveva nessuna regola: usciva col corpo
   del testo normale, in tondo, mentre la riga sopra e' maiuscoletto
   spaziato da 9px. Ora sono la stessa cosa. */
.oc-footer__by {
	font-size: 9px;
	font-weight: 400;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .34);
}

.oc-footer__by a { color: inherit; transition: color .25s; }
.oc-footer__by a:hover { color: var(--wht); }
:root[data-oc-theme="light"] .oc-footer__by { color: rgba(18, 18, 18, .66); }

/* Mail e Instagram erano incolonnate una sotto l'altra. Il piede diventa
   una griglia: quelle due dividono la prima riga, tutto il resto occupa
   la larghezza intera sotto. */
.oc-footer__core {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: center;
	align-items: center;
	column-gap: clamp(14px, 2.6vw, 30px);
	row-gap: 14px;
}

.oc-footer__mail { grid-column: 1; grid-row: 1; justify-self: end; }
.oc-footer__ig { grid-column: 2; grid-row: 1; justify-self: start; }

.oc-footer__nav,
.oc-footer__legal,
.oc-footer__by { grid-column: 1 / -1; }

/* Sotto i 380px le due voci non ci stanno affiancate: tornano in colonna. */
@media (max-width: 380px) {
	.oc-footer__core { grid-template-columns: 1fr; }
	.oc-footer__mail,
	.oc-footer__ig { grid-column: 1; grid-row: auto; justify-self: center; }
}

@media (max-width: 640px) {
	.oc-footer__by { font-size: 11px; letter-spacing: .12em; }
}

/* =====================================================================
   v1.15.2 — Tema chiaro: dove il fondo resta nero, resta bianco il testo
   ===================================================================== */

/* Il tema chiaro ribalta tutto: --wht diventa #121212 e i testi vanno
   scuri. Ma alcune superfici il fondo non lo cambiano — home, i due feed,
   il player, la hero di Oceancode ME restano nere, perche' sono fatte di
   video a tutto schermo e un fondo chiaro intorno a un video sarebbe
   sbagliato. Li' il testo diventava scuro su nero e spariva.
   La cura non e' colorare una regola alla volta: basta ridichiarare le
   variabili dentro a quelle superfici, e tutto cio' che sta dentro torna
   da solo alla tavolozza scura. */
:root[data-oc-theme="light"] .oc-home,
:root[data-oc-theme="light"] .oc-page-mv,
:root[data-oc-theme="light"] .oc-page-car,
:root[data-oc-theme="light"] .oc-acc,
:root[data-oc-theme="light"] .oc-player,
:root[data-oc-theme="light"] .oc-me-hero {
	--blk: #000000;
	--wht: #ffffff;
	--ink-dim: rgba(255, 255, 255, .55);
	--line: rgba(255, 255, 255, .14);
	--surface: #0a0a0a;
	--surface-2: #121212;
	color: #fff;
}

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

/* Le poche regole che nel chiaro avevo scritto col colore a mano e che
   cadono dentro a queste superfici: tornano chiare anche loro. */
:root[data-oc-theme="light"] .oc-player .oc-scene__title,
:root[data-oc-theme="light"] .oc-player .oc-player__back,
:root[data-oc-theme="light"] .oc-player .oc-tbtn,
:root[data-oc-theme="light"] .oc-page-car .oc-car__title { color: #fff; }

:root[data-oc-theme="light"] .oc-player .oc-scene__tags li,
:root[data-oc-theme="light"] .oc-page-car .oc-car__tag,
:root[data-oc-theme="light"] .oc-card--feed .oc-roles li {
	color: rgba(255, 255, 255, .58);
	border-color: rgba(255, 255, 255, .16);
}

:root[data-oc-theme="light"] .oc-player .oc-scene__prog::before { background: rgba(255, 255, 255, .22); }
:root[data-oc-theme="light"] .oc-player .oc-tbtn:hover { background: rgba(255, 255, 255, .1); }

/* Il pannello credits sta dentro al player: resta vetro scuro. */
:root[data-oc-theme="light"] .oc-player .oc-credits {
	background: rgba(4, 4, 8, .5);
	border-left-color: rgba(255, 255, 255, .18);
}

:root[data-oc-theme="light"] .oc-player .oc-credits h3,
:root[data-oc-theme="light"] .oc-player .oc-credits li { color: rgba(255, 255, 255, .92); }
:root[data-oc-theme="light"] .oc-player .oc-credits li { border-bottom-color: rgba(255, 255, 255, .1); }
:root[data-oc-theme="light"] .oc-player .oc-credits li b { color: rgba(255, 255, 255, .42); }
:root[data-oc-theme="light"] .oc-player .oc-credits__close { color: rgba(255, 255, 255, .75); }

/* =====================================================================
   v1.15.3 — La mail scritta come Instagram, con la sua icona
   ===================================================================== */

/* Era un link grande da 15-22px in tondo, accanto a una voce da 10px
   maiuscola e spaziata: sembravano due cose di due siti diversi. Adesso
   e' la stessa identica riga, con la busta al posto della macchina
   fotografica. L'icona e' una maschera riempita con currentColor, cosi'
   segue il colore del testo e del tema senza doverla ridisegnare. */
.oc-footer__mail {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--tap);
	padding: 0 4px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ink-dim);
	transition: color .3s;
}

.oc-footer__mail::before {
	content: '';
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--oc-envelope) center / contain no-repeat;
	mask: var(--oc-envelope) center / contain no-repeat;
}

:root {
	--oc-envelope: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.75' y='5' width='18.5' height='14' rx='2.5'/%3E%3Cpath d='M3.5 7.7 12 13.2l8.5-5.5'/%3E%3C/svg%3E");
}

/* La sottolineatura era il segno del link grande: qui basta schiarire,
   come fa Instagram. */
.oc-footer__mail::after { display: none; }
.oc-footer__mail:hover { color: var(--wht); }

@media (max-width: 640px) {
	.oc-footer__mail,
	.oc-footer__ig { font-size: 11px; letter-spacing: .16em; }
}