/* =====================================================================
   OCEANCODE STUDIO — oceancode.css v1.1.0
   Nero / Bianco. Blu #0000FF solo come dettaglio. Blur + trasparenze.
   ===================================================================== */

/* ---------- Font ----------
   Brand font: Area Normal (da manuale). Deposita i file in assets/fonts/
   con questi nomi esatti; finché mancano, fallback pulito su Archivo. */
@font-face {
	font-family: 'Area Normal';
	src: url('../fonts/AreaNormal-Light.woff2') format('woff2'), url('../fonts/AreaNormal-Light.otf') format('opentype');
	font-weight: 300;
	font-display: swap;
}

@font-face {
	font-family: 'Area Normal';
	src: url('../fonts/AreaNormal-Regular.woff2') format('woff2'), url('../fonts/AreaNormal-Regular.otf') format('opentype');
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Area Normal';
	src: url('../fonts/AreaNormal-Medium.woff2') format('woff2'), url('../fonts/AreaNormal-Medium.otf') format('opentype');
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: 'Area Normal';
	src: url('../fonts/AreaNormal-Semibold.woff2') format('woff2'), url('../fonts/AreaNormal-Semibold.otf') format('opentype');
	font-weight: 600;
	font-display: swap;
}

@font-face {
	font-family: 'Area Normal';
	src: url('../fonts/AreaNormal-Bold.woff2') format('woff2'), url('../fonts/AreaNormal-Bold.otf') format('opentype');
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: 'Area Normal';
	src: url('../fonts/AreaNormal-Black.woff2') format('woff2'), url('../fonts/AreaNormal-Black.otf') format('opentype');
	font-weight: 900;
	font-display: swap;
}

@font-face {
	font-family: 'Area Normal';
	src: url('../fonts/AreaNormal-Extrablack.woff2') format('woff2'), url('../fonts/AreaNormal-Extrablack.otf') format('opentype');
	font-weight: 900;
	font-display: swap;
}

@font-face {
	font-family: 'Archivo';
	src: url('../fonts/Archivo-Variable.ttf') format('truetype');
	font-weight: 100 900;
	font-stretch: 62.5% 125%;
	font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
	--blk: #141414;
	--wht: #ffffff;
	--blu: #0000FF;
	--grn: #518A6A;
	--acc: var(--blu);
	--ink-dim: rgba(255, 255, 255, .55);
	--line: rgba(255, 255, 255, .14);
	--glass: rgba(255, 255, 255, .06);
	--ff: 'Area Normal', 'Archivo', -apple-system, 'Helvetica Neue', Arial, sans-serif;
	--pad: clamp(18px, 4vw, 56px);
	--header-h: 76px;
	--ease-snap: cubic-bezier(.7, 0, .2, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
}

.oc-theme--me { --acc: var(--grn); }

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

html:has(body.oc-mv-open) { scroll-snap-type: y proximity; }

body.oc-body {
	background: var(--blk);
	color: var(--wht);
	font-family: var(--ff);
	font-weight: 400;
	font-size: 18px;
	line-height: 29px;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

body.oc-lock { overflow: hidden; }

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--blu); color: var(--wht); }
.oc-theme--me ::selection { background: var(--grn); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--blk); }
::-webkit-scrollbar-thumb { background: #1c1c1c; border-radius: 99px; border: 2px solid var(--blk); }
::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }

:focus { outline: none; }
:focus-visible { outline: 1px solid rgba(255, 255, 255, .7); outline-offset: 4px; }

/* ---------- Utility type ---------- */
.oc-eyebrow {
	font-size: 12px;
	line-height: 1;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--acc);
	margin-bottom: 26px;
	font-weight: 600;
}

.oc-eyebrow--me { color: var(--grn); }

/* ---------- Grain ---------- */
.oc-grain {
	position: fixed;
	inset: -60px;
	z-index: 3500;
	pointer-events: none;
	opacity: .035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: oc-grain-shift 1.2s steps(3) infinite;
}

@keyframes oc-grain-shift {
	0% { transform: translate(0, 0); }
	33% { transform: translate(-22px, 14px); }
	66% { transform: translate(16px, -18px); }
	100% { transform: translate(0, 0); }
}

/* ---------- Cursor ---------- */
.oc-cursor {
	position: fixed;
	top: 0; left: 0;
	z-index: 4000;
	pointer-events: none;
	transform: translate(-100px, -100px);
	will-change: transform;
}

.oc-cursor__dot {
	display: block;
	width: 10px; height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: var(--wht);
	mix-blend-mode: difference;
	transition: transform .25s var(--ease-out);
}

.oc-cursor__label {
	position: absolute;
	top: 0; left: 0;
	transform: translate(-50%, -50%) scale(0);
	width: 86px; height: 86px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .38);
	border: 1px solid rgba(255, 255, 255, .55);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	color: var(--wht);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .2em;
	transition: transform .3s var(--ease-out);
}

.oc-cursor.is-play .oc-cursor__dot { transform: scale(0); }
.oc-cursor.is-play .oc-cursor__label { transform: translate(-50%, -50%) scale(1); }

@media (pointer: coarse) {
	.oc-cursor { display: none; }
}

/* ---------- Header ---------- */
.oc-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 900;
	height: var(--header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--pad);
	transition: transform .45s var(--ease-out), background .3s;
}

.oc-header.is-hidden { transform: translateY(-110%); }

.oc-header.is-scrolled {
	background: rgba(0, 0, 0, .42);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
}

.oc-header__logo {
	font-weight: 600;
	font-size: 18px;
	letter-spacing: .01em;
	line-height: 1;
	text-transform: uppercase;
	transition: opacity .25s;
}

.oc-header__logo:hover { opacity: .65; }

.oc-menu-toggle {
	position: relative;
	padding: 12px 22px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 99px;
	background: rgba(0, 0, 0, .2);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .2em;
	transition: border-color .25s, background .25s, color .25s;
	z-index: 1002;
}

.oc-menu-toggle:hover { background: var(--wht); border-color: var(--wht); color: var(--blk); }

.oc-menu-toggle__close { display: none; }
body.oc-menu-open .oc-menu-toggle__open { display: none; }
body.oc-menu-open .oc-menu-toggle__close { display: inline; }
body.oc-menu-open .oc-header { transform: none; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; z-index: 1001; }

/* ---------- Menu overlay ---------- */
.oc-menu {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(0, 0, 0, .55);
	-webkit-backdrop-filter: blur(32px) saturate(150%);
	backdrop-filter: blur(32px) saturate(150%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: calc(var(--header-h) + 10px) 0 90px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .45s var(--ease-out), visibility 0s linear .45s;
}

.oc-menu.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .45s var(--ease-out);
}

.oc-menu__nav { display: flex; flex-direction: column; }

.oc-menu__item {
	display: block;
	border-top: 1px solid var(--line);
	padding: clamp(7px, 1.1vh, 15px) var(--pad);
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(32px, 6vh, 78px);
	line-height: 1.08;
	color: var(--wht);
	transform: translateY(28px);
	opacity: 0;
	transition:
		transform .65s var(--ease-out),
		opacity .5s var(--ease-out),
		filter .35s var(--ease-out),
		color .3s,
		padding-left .4s var(--ease-out);
}

.oc-menu__item:last-child { border-bottom: 1px solid var(--line); }

.oc-menu.is-open .oc-menu__item { transform: none; opacity: 1; }
.oc-menu.is-open .oc-menu__item:nth-child(1) { transition-delay: .05s, .05s, 0s, 0s, 0s; }
.oc-menu.is-open .oc-menu__item:nth-child(2) { transition-delay: .1s, .1s, 0s, 0s, 0s; }
.oc-menu.is-open .oc-menu__item:nth-child(3) { transition-delay: .15s, .15s, 0s, 0s, 0s; }
.oc-menu.is-open .oc-menu__item:nth-child(4) { transition-delay: .2s, .2s, 0s, 0s, 0s; }
.oc-menu.is-open .oc-menu__item:nth-child(5) { transition-delay: .25s, .25s, 0s, 0s, 0s; }
.oc-menu.is-open .oc-menu__item:nth-child(6) { transition-delay: .3s, .3s, 0s, 0s, 0s; }
.oc-menu.is-open .oc-menu__item:nth-child(7) { transition-delay: .35s, .35s, 0s, 0s, 0s; }

/* Focus dolce: la voce in hover resta nitida, le altre sfumano */
.oc-menu.is-open .oc-menu__nav:hover .oc-menu__item { opacity: .28; filter: blur(3px); }
.oc-menu.is-open .oc-menu__nav .oc-menu__item:hover,
.oc-menu.is-open .oc-menu__nav .oc-menu__item:focus-visible {
	opacity: 1;
	filter: none;
	padding-left: calc(var(--pad) + 18px);
}

.oc-menu__item--me:hover,
.oc-menu__item--me:focus-visible { color: var(--grn); }

.oc-menu__foot {
	position: absolute;
	left: var(--pad); right: var(--pad); bottom: 28px;
	display: flex;
	gap: 26px;
	flex-wrap: wrap;
	font-size: 13px;
	letter-spacing: .08em;
	color: var(--ink-dim);
}

.oc-menu__foot a:hover { color: var(--wht); }

/* ---------- Intro — cover del manuale: Ford Blue, logo bloccato,
   tunnel blur smooth, ciak in vetro ---------- */
.oc-intro {
	position: fixed;
	inset: 0;
	z-index: 3000;
	background: var(--blu);
	overflow: hidden;
	transition: opacity .7s var(--ease-out);
}

.oc-intro.is-done { opacity: 0; pointer-events: none; }
.oc-intro.is-removed { display: none; }

/* Tunnel: anelli sfocati che emergono in profondità, lenti e continui */
.oc-intro__tunnel {
	position: absolute;
	inset: 0;
	pointer-events: none;
	transition: opacity .6s var(--ease-out);
}

.oc-intro.is-out .oc-intro__tunnel { opacity: 0; }

.oc-intro__tunnel span {
	position: absolute;
	left: 50%; top: 50%;
	width: 160vmax; height: 160vmax;
	margin: -80vmax 0 0 -80vmax;
	border-radius: 50%;
	background: radial-gradient(circle, transparent 40%, rgba(255, 255, 255, .14) 48%, transparent 58%);
	filter: blur(34px);
	opacity: 0;
	transform: scale(.12);
	animation: oc-tunnel 5.6s linear infinite;
}

.oc-intro__tunnel span:nth-child(2) { animation-delay: 1.4s; }
.oc-intro__tunnel span:nth-child(3) { animation-delay: 2.8s; }
.oc-intro__tunnel span:nth-child(4) { animation-delay: 4.2s; }

@keyframes oc-tunnel {
	0% { transform: scale(.12); opacity: 0; }
	18% { opacity: .75; }
	70% { opacity: .35; }
	100% { transform: scale(1.5); opacity: 0; }
}

/* Logo bloccato al centro — come la cover del manuale */
.oc-intro__logo {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	text-transform: uppercase;
	font-size: clamp(38px, 7.2vw, 118px);
	line-height: 1;
	letter-spacing: .01em;
	color: var(--wht);
	transition: opacity .4s var(--ease-out), filter .4s var(--ease-out);
	pointer-events: none;
}

.oc-intro.is-clap .oc-intro__logo,
.oc-intro.is-open .oc-intro__logo { opacity: 0; filter: blur(8px); }

.oc-clap {
	position: absolute;
	left: 0; right: 0;
	height: 50.3vh;
	background: rgba(16, 16, 16, .84);
	-webkit-backdrop-filter: blur(24px) saturate(130%);
	backdrop-filter: blur(24px) saturate(130%);
	z-index: 3;
	pointer-events: none;
}

.oc-clap--top { top: 0; transform: translateY(-102%); border-bottom: 1px solid rgba(255, 255, 255, .4); }
.oc-clap--bottom { bottom: 0; transform: translateY(102%); border-top: 1px solid rgba(255, 255, 255, .4); }

.oc-intro.is-clap .oc-clap--top,
.oc-intro.is-clap .oc-clap--bottom {
	transform: translateY(0);
	transition: transform .38s var(--ease-snap);
}

.oc-intro.is-open .oc-clap--top { transform: translateY(-102%); transition: transform .75s var(--ease-snap); }
.oc-intro.is-open .oc-clap--bottom { transform: translateY(102%); transition: transform .75s var(--ease-snap); }

.oc-flash {
	position: absolute;
	inset: 0;
	background: var(--wht);
	opacity: 0;
	z-index: 4;
	pointer-events: none;
	transition: opacity .14s ease-out;
}

.oc-intro.is-flash .oc-flash { opacity: .22; }

.oc-intro__skip {
	position: absolute;
	right: 26px; bottom: 26px;
	z-index: 5;
	padding: 10px 20px;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 99px;
	background: rgba(0, 0, 0, .12);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .22em;
	color: var(--wht);
	transition: all .25s;
}

.oc-intro__skip:hover { border-color: var(--wht); background: var(--wht); color: var(--blu); }

/* ---------- Home ---------- */
.oc-home {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
}

.oc-home__reel {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	animation: oc-breathe 26s ease-in-out infinite alternate;
}

@keyframes oc-breathe {
	from { transform: scale(1); }
	to { transform: scale(1.05); }
}

.oc-home__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,.04) 42%, rgba(0,0,0,.66) 100%);
}

.oc-home__brand {
	position: absolute;
	top: calc(var(--header-h) + 3vh);
	left: var(--pad);
	z-index: 2;
	font-weight: 600;
	text-transform: uppercase;
	line-height: .96;
	letter-spacing: .01em;
	font-size: clamp(26px, 7.2vw, 124px);
	color: var(--wht);
	opacity: 0;
	transform: translateY(28px);
	filter: blur(10px);
	transition: opacity 1s var(--ease-out) .1s, transform 1s var(--ease-out) .1s, filter 1s var(--ease-out) .1s;
}

body.oc-ready .oc-home__brand { opacity: 1; transform: none; filter: none; }

.oc-home__brand span { display: block; }

.oc-home__brand-main { white-space: nowrap; }

.oc-home__brand-sub {
	margin-top: 18px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .36em;
	color: rgba(255, 255, 255, .75);
}

.oc-home__cats {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
}

.oc-cat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: clamp(14px, 2.4vh, 26px) var(--pad);
	border-top: 1px solid rgba(255, 255, 255, .2);
	background: rgba(0, 0, 0, .1);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background .4s var(--ease-out), -webkit-backdrop-filter .4s, backdrop-filter .4s, opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
	opacity: 0;
	transform: translateY(22px);
	filter: blur(6px);
}

body.oc-ready .oc-cat { opacity: 1; transform: none; filter: none; }
body.oc-ready .oc-cat:nth-child(1) { transition-delay: .2s; }
body.oc-ready .oc-cat:nth-child(2) { transition-delay: .28s; }
body.oc-ready .oc-cat:nth-child(3) { transition-delay: .36s; }
body.oc-ready .oc-cat:nth-child(4) { transition-delay: .44s; }

.oc-cat:hover,
.oc-cat:focus-visible {
	background: rgba(255, 255, 255, .07);
	-webkit-backdrop-filter: blur(20px) saturate(150%);
	backdrop-filter: blur(20px) saturate(150%);
}

.oc-cat__label {
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(24px, 4vw, 52px);
	line-height: 1;
	transition: transform .45s var(--ease-out);
}

.oc-cat:hover .oc-cat__label { transform: translateX(16px); }

.oc-cat__right {
	display: flex;
	align-items: center;
	gap: 18px;
}

.oc-cat__go {
	font-size: clamp(20px, 2.4vw, 32px);
	line-height: 1;
	opacity: 0;
	transform: translateX(-10px);
	transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}

.oc-cat:hover .oc-cat__go { opacity: 1; transform: none; }

.oc-cat__count {
	font-size: clamp(13px, 1.4vw, 18px);
	font-weight: 600;
	color: var(--ink-dim);
	letter-spacing: .1em;
	transition: color .3s;
}

.oc-cat:hover .oc-cat__count { color: var(--wht); }

/* ---------- Pagehead + kinetic ---------- */
.oc-page { padding-top: var(--header-h); min-height: 100vh; }

.oc-pagehead {
	padding: clamp(28px, 6vh, 64px) 0 clamp(16px, 3vh, 34px);
	overflow: hidden;
}

.oc-kinetic {
	white-space: nowrap;
	overflow: hidden;
	font-weight: 900;
	text-transform: uppercase;
	font-size: clamp(64px, 12vw, 190px);
	line-height: .92;
	letter-spacing: -.015em;
}

.oc-kinetic__track { display: inline-block; white-space: nowrap; }

.oc-kinetic__track > span {
	display: inline-block;
	animation: oc-marq 40s linear infinite;
}

@keyframes oc-marq {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@keyframes oc-marq-rev {
	from { transform: translateX(-50%); }
	to { transform: translateX(0); }
}

.oc-pagehead__meta {
	padding: 14px var(--pad) 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .24em;
	color: var(--acc);
}

.oc-pagehead--doc { padding-left: var(--pad); padding-right: var(--pad); }
.oc-pagehead--doc h1 {
	font-weight: 900;
	text-transform: uppercase;
	font-size: clamp(40px, 7vw, 96px);
	line-height: .95;
}

/* ---------- Card base ---------- */
.oc-card { position: relative; cursor: none; }

@media (pointer: coarse) { .oc-card { cursor: pointer; } }

.oc-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #181818;
	overflow: hidden;
}

.oc-card__vid,
.oc-card__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .9s var(--ease-out), opacity .4s;
}

.oc-card:hover .oc-card__vid,
.oc-card:hover .oc-card__poster { transform: scale(1.03); }

.oc-card__poster { z-index: 2; }
.oc-card.is-playing .oc-card__poster { opacity: 0; }

.oc-card__ph {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	padding: 22px;
	background:
		linear-gradient(165deg, rgba(255,255,255,.05), rgba(0,0,0,0) 50%),
		#181818;
	border: 1px solid rgba(255, 255, 255, .06);
}

.oc-card__ph span {
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(18px, 2vw, 30px);
	line-height: 1;
	max-width: 90%;
}

.oc-card__ph em {
	margin-top: 10px;
	font-style: normal;
	font-size: 10px;
	letter-spacing: .24em;
	color: rgba(255, 255, 255, .5);
	font-weight: 700;
}

.oc-card__meta { padding: 16px 2px 0; }

.oc-card__title {
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(17px, 1.6vw, 24px);
	line-height: 1.05;
}

.oc-card__sub {
	margin-top: 5px;
	font-size: 13px;
	color: var(--ink-dim);
	letter-spacing: .04em;
	transition: color .3s;
}

.oc-card:hover .oc-card__sub { color: rgba(255, 255, 255, .85); }

.oc-roles {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.oc-roles li {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 5px 10px;
	border: 1px solid var(--line);
	border-radius: 99px;
	color: rgba(255, 255, 255, .72);
	background: rgba(0, 0, 0, .25);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.oc-card__tag {
	display: inline-block;
	margin-top: 10px;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .18em;
	color: var(--wht);
	border: 1px solid rgba(255, 255, 255, .4);
	background: rgba(255, 255, 255, .08);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	padding: 5px 10px;
	border-radius: 99px;
}

/* ---------- Music Videos — feed verticale fullscreen ---------- */
.oc-page-mv { padding-top: 0; }

.oc-page-mv .oc-pagehead { padding-top: calc(var(--header-h) + 14px); }

.oc-card--feed {
	height: 100vh;
	height: 100svh;
	min-height: 540px;
	scroll-snap-align: start;
	overflow: hidden;
}

.oc-card--feed .oc-card__media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	height: 100%;
	background: #101010;
}

.oc-card--feed .oc-card__vid,
.oc-card--feed .oc-card__poster {
	transform: scale(1.07);
	transition: transform 1.6s var(--ease-out), opacity .5s;
}

.oc-card--feed.is-in .oc-card__vid,
.oc-card--feed.is-in .oc-card__poster { transform: scale(1); }

.oc-card--feed .oc-card__ph { border: 0; }
.oc-card--feed .oc-card__ph span { display: none; }

.oc-feed__veil {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.05) 55%, rgba(0,0,0,.7) 100%);
	pointer-events: none;
}

.oc-feed__info {
	position: absolute;
	left: var(--pad); right: var(--pad);
	bottom: clamp(46px, 9vh, 100px);
	z-index: 4;
	pointer-events: none;
}

.oc-feed__idx {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .3em;
	color: var(--blu);
	margin-bottom: 16px;
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .8s var(--ease-out) .1s, transform .8s var(--ease-out) .1s;
}

.oc-feed__artist {
	display: block;
	font-size: clamp(12px, 1.4vw, 17px);
	font-weight: 600;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .78);
	margin-bottom: 10px;
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .8s var(--ease-out) .18s, transform .8s var(--ease-out) .18s;
}

.oc-feed__title {
	font-weight: 900;
	text-transform: uppercase;
	font-size: clamp(44px, 9.5vw, 168px);
	line-height: .88;
	letter-spacing: -.012em;
	color: var(--wht);
	max-width: 100%;
	opacity: 0;
	transform: translateY(26px);
	filter: blur(8px);
	transition: opacity .9s var(--ease-out) .26s, transform .9s var(--ease-out) .26s, filter .9s var(--ease-out) .26s;
}

.oc-card--feed .oc-roles {
	margin-top: 18px;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .8s var(--ease-out) .38s, transform .8s var(--ease-out) .38s;
}

.oc-card--feed.is-in .oc-feed__idx,
.oc-card--feed.is-in .oc-feed__artist,
.oc-card--feed.is-in .oc-feed__title,
.oc-card--feed.is-in .oc-roles {
	opacity: 1;
	transform: none;
	filter: none;
}

.oc-mv-hint {
	position: fixed;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	z-index: 20;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .3em;
	color: rgba(255, 255, 255, .5);
	pointer-events: none;
	mix-blend-mode: difference;
}

/* ---------- Commercials accordion ---------- */
.oc-acc {
	display: flex;
	height: calc(100vh - var(--header-h) - 190px);
	min-height: 480px;
	border-top: 1px solid var(--line);
}

.oc-card--acc {
	position: relative;
	flex: 1;
	min-width: 0;
	border-right: 1px solid var(--line);
	transition: flex .65s var(--ease-out);
	overflow: hidden;
}

.oc-card--acc:last-child { border-right: 0; }
.oc-card--acc:hover,
.oc-card--acc:focus-visible { flex: 3; }

.oc-card--acc .oc-card__media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	height: 100%;
}

.oc-card--acc .oc-card__vid,
.oc-card--acc .oc-card__poster { filter: grayscale(70%) brightness(.6); transition: filter .5s, transform .9s var(--ease-out); }
.oc-card--acc:hover .oc-card__vid,
.oc-card--acc:hover .oc-card__poster { filter: none; }

.oc-card--acc .oc-card__meta {
	position: absolute;
	left: 18px; bottom: 18px; right: 18px;
	z-index: 4;
	padding: 0;
}

.oc-card--acc .oc-card__title {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: clamp(18px, 1.9vw, 30px);
	max-height: 60vh;
	overflow: hidden;
	transition: all .4s var(--ease-out);
	white-space: nowrap;
}

.oc-card--acc:hover .oc-card__title {
	writing-mode: horizontal-tb;
	transform: none;
	white-space: normal;
}

.oc-card--acc .oc-card__sub,
.oc-card--acc .oc-roles,
.oc-card--acc .oc-card__tag { opacity: 0; transition: opacity .35s .15s; }

.oc-card--acc:hover .oc-card__sub,
.oc-card--acc:hover .oc-roles,
.oc-card--acc:hover .oc-card__tag { opacity: 1; }

.oc-card--acc .oc-card__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.75) 100%);
	z-index: 3;
}

@media (pointer: coarse), (max-width: 860px) {
	.oc-acc { flex-direction: column; height: auto; }
	.oc-card--acc { flex: 0 0 auto; height: 58vh; border-right: 0; border-bottom: 1px solid var(--line); }
	.oc-card--acc .oc-card__title { writing-mode: horizontal-tb; transform: none; white-space: normal; }
	.oc-card--acc .oc-card__sub, .oc-card--acc .oc-roles, .oc-card--acc .oc-card__tag { opacity: 1; }
	.oc-card--acc .oc-card__vid, .oc-card--acc .oc-card__poster { filter: none; }
}

/* ---------- Events: card dell'accordion ---------- */
.oc-card--event .oc-card__poster { filter: grayscale(70%) brightness(.6); transition: filter .5s, transform .9s var(--ease-out); }
.oc-card--event:hover .oc-card__poster { filter: none; }
.oc-card--event .oc-card__tag { opacity: 0; }
.oc-card--event:hover .oc-card__tag { opacity: 1; }

@media (pointer: coarse), (max-width: 860px) {
	.oc-card--event .oc-card__poster { filter: none; }
	.oc-card--event .oc-card__tag { opacity: 1; }
}

.oc-acc__empty {
	display: grid;
	place-items: center;
	min-height: 44vh;
	padding: 10vh var(--pad);
	text-align: center;
	color: var(--ink-dim);
	border-top: 1px solid var(--line);
}

/* ---------- Fashion & Luxury grid ---------- */
.oc-flgrid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: clamp(18px, 2.6vw, 44px);
	padding: 10px var(--pad) 90px;
}

.oc-flgrid .oc-card:nth-child(6n+1) { grid-column: span 7; }
.oc-flgrid .oc-card:nth-child(6n+2) { grid-column: span 5; margin-top: 9vh; }
.oc-flgrid .oc-card:nth-child(6n+3) { grid-column: span 5; }
.oc-flgrid .oc-card:nth-child(6n+4) { grid-column: span 7; margin-top: -6vh; }
.oc-flgrid .oc-card:nth-child(6n+5) { grid-column: span 6; }
.oc-flgrid .oc-card:nth-child(6n) { grid-column: span 6; margin-top: 7vh; }

.oc-flgrid .oc-card__media { filter: brightness(.94); transition: filter .5s; }
.oc-flgrid .oc-card:hover .oc-card__media { filter: brightness(1); }

.oc-flgrid .oc-card__title { display: inline-block; position: relative; padding-bottom: 6px; }
.oc-flgrid .oc-card__title::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	width: 100%; height: 1px;
	background: var(--wht);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .55s var(--ease-out);
}
.oc-flgrid .oc-card:hover .oc-card__title::after { transform: scaleX(1); }

@media (max-width: 860px) {
	.oc-flgrid .oc-card { grid-column: 1 / -1 !important; margin-top: 0 !important; }
}

/* ---------- Shooting — museo ---------- */
.oc-page-shooting { padding-bottom: 60px; }

.oc-shots {
	display: flex;
	flex-direction: column;
	gap: clamp(90px, 16vh, 190px);
	padding: 6vh var(--pad) 10vh;
}

.oc-gallery {
	display: flex;
	flex-direction: column;
	gap: clamp(50px, 9vh, 110px);
}

.oc-gallery__head {
	text-align: center;
	opacity: 0;
	transform: translateY(26px);
	filter: blur(8px);
	transition: opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out);
}

.oc-gallery__head.is-in { opacity: 1; transform: none; filter: none; }

.oc-gallery__title {
	font-weight: 900;
	text-transform: uppercase;
	font-size: clamp(26px, 4vw, 54px);
	line-height: .95;
}

.oc-gallery__count {
	display: inline-block;
	margin-top: 14px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .34em;
	color: var(--ink-dim);
}

.oc-shot {
	position: relative;
	cursor: none;
	margin: 0 auto;
	background: #181818;
	border: 1px solid rgba(255, 255, 255, .07);
	padding: clamp(12px, 1.6vw, 26px);
	box-shadow: 0 40px 120px rgba(0, 0, 0, .55);
	opacity: 0;
	transform: translateY(34px);
	filter: blur(8px);
	transition: opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out), border-color .4s;
}

.oc-shot.is-in { opacity: 1; transform: none; filter: none; }
.oc-shot:hover { border-color: rgba(255, 255, 255, .18); }

@media (pointer: coarse) { .oc-shot { cursor: zoom-in; } }

.oc-shot--landscape { width: min(100%, 1280px); }
.oc-shot--portrait .oc-shot__img { height: min(76vh, 840px); width: auto; }

.oc-shot__img {
	width: 100%;
	height: auto;
	transition: transform 1s var(--ease-out);
}

.oc-shot:hover .oc-shot__img { transform: scale(1.012); }

.oc-shot__cap {
	margin-top: clamp(12px, 1.6vw, 22px);
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	text-align: center;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .28em;
	color: var(--ink-dim);
}

.oc-shot__cap b {
	font-weight: 600;
	color: var(--blu);
	margin-left: 10px;
}

.oc-shots__empty {
	padding: 12vh 0;
	text-align: center;
	color: var(--ink-dim);
	letter-spacing: .04em;
}

/* Lightbox */
.oc-lightbox {
	position: fixed;
	inset: 0;
	z-index: 2500;
	background: rgba(0, 0, 0, .82);
	-webkit-backdrop-filter: blur(26px) saturate(130%);
	backdrop-filter: blur(26px) saturate(130%);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s var(--ease-out), visibility 0s linear .35s;
}

.oc-lightbox.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .35s var(--ease-out);
}

#oc-lightbox-img {
	max-width: 90vw;
	max-height: 82vh;
	object-fit: contain;
	box-shadow: 0 40px 140px rgba(0, 0, 0, .85);
}

.oc-lightbox__cap {
	position: absolute;
	left: var(--pad); bottom: 26px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .28em;
	color: rgba(255, 255, 255, .75);
}

.oc-lightbox__counter {
	position: absolute;
	right: var(--pad); bottom: 26px;
	font-size: 10px;
	letter-spacing: .28em;
	color: var(--ink-dim);
}

.oc-lightbox__prev { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); }
.oc-lightbox__next { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); }
.oc-lightbox__close { position: absolute; right: 22px; top: 22px; }

/* ---------- Pills ---------- */
.oc-pill {
	padding: 12px 22px;
	border: 1px solid rgba(255, 255, 255, .32);
	border-radius: 99px;
	background: rgba(0, 0, 0, .3);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	backdrop-filter: blur(18px) saturate(150%);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wht);
	transition: background .25s, border-color .25s, color .25s, transform .25s;
}

.oc-pill:hover { background: var(--wht); border-color: var(--wht); color: var(--blk); transform: translateY(-1px); }

.oc-pill--acc { background: var(--blu); border-color: var(--blu); }
.oc-pill--acc:hover { background: var(--wht); border-color: var(--wht); color: var(--blk); }

.oc-pill--me { background: var(--grn); border-color: var(--grn); }
.oc-pill--me:hover { background: var(--wht); border-color: var(--wht); color: var(--blk); }
.oc-pill--ghost { background: rgba(0, 0, 0, .3); }
.oc-pill--ghost:hover { background: var(--wht); border-color: var(--wht); color: var(--blk); }

/* ---------- Project overlay (single) ---------- */
.oc-project {
	position: fixed;
	inset: 0;
	z-index: 2200;
	background: var(--blk);
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s var(--ease-out), visibility 0s linear .4s;
}

.oc-project.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .4s var(--ease-out);
}

.oc-project__stage { position: absolute; inset: 0; }

#oc-project-video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: var(--blk);
}

.oc-project__iframe { position: absolute; inset: 0; display: none; }
.oc-project__iframe.is-active { display: block; }
.oc-project__iframe iframe { width: 100%; height: 100%; border: 0; }

.oc-pills {
	position: absolute;
	top: 22px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 6;
	flex-wrap: wrap;
	justify-content: center;
}

.oc-project__info {
	position: absolute;
	left: var(--pad); right: var(--pad); bottom: 26px;
	z-index: 5;
	pointer-events: none;
}

#oc-project-title {
	font-weight: 900;
	text-transform: uppercase;
	font-size: clamp(26px, 4.2vw, 62px);
	line-height: .95;
	text-shadow: 0 4px 30px rgba(0, 0, 0, .55);
}

#oc-project-sub {
	margin-top: 8px;
	font-size: 13px;
	letter-spacing: .1em;
	color: rgba(255, 255, 255, .8);
}

.oc-project__info .oc-roles { margin-top: 12px; }

/* Credits panel */
.oc-credits {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: min(480px, 92vw);
	z-index: 8;
	background: rgba(4, 4, 8, .5);
	-webkit-backdrop-filter: blur(30px) saturate(160%);
	backdrop-filter: blur(30px) saturate(160%);
	border-left: 1px solid rgba(255, 255, 255, .18);
	padding: 90px 40px 40px;
	transform: translateX(102%);
	transition: transform .6s var(--ease-out);
	overflow-y: auto;
}

.oc-credits.is-open { transform: none; }

.oc-credits h3 {
	font-weight: 700;
	font-size: 30px;
	letter-spacing: .02em;
	margin-bottom: 30px;
	text-transform: uppercase;
}

.oc-credits li {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	padding: 13px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	opacity: 0;
	transform: translateX(26px);
	transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
	transition-delay: calc(var(--i, 0) * 55ms);
	font-size: 14px;
}

.oc-credits.is-open li { opacity: 1; transform: none; }

.oc-credits li b {
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--blu);
	flex: 0 0 44%;
}

/* ---------- Campaign overlay ---------- */
.oc-campaign {
	position: fixed;
	inset: 0;
	z-index: 2200;
	background: var(--blk);
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s var(--ease-out), visibility 0s linear .4s;
	display: flex;
	flex-direction: column;
}

.oc-campaign.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .4s var(--ease-out);
}

.oc-campaign__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	padding: 22px var(--pad);
	border-bottom: 1px solid var(--line);
	background: rgba(0, 0, 0, .55);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	z-index: 3;
}

#oc-campaign-title {
	font-weight: 900;
	text-transform: uppercase;
	font-size: clamp(22px, 3.4vw, 46px);
	line-height: .95;
}

#oc-campaign-sub {
	margin-top: 6px;
	font-size: 12px;
	letter-spacing: .12em;
	color: var(--ink-dim);
}

.oc-campaign__headpills { display: flex; gap: 10px; flex: 0 0 auto; }

.oc-campaign__scroll { flex: 1; overflow-y: auto; }

.oc-campaign__hero { position: relative; }

#oc-campaign-hero,
#oc-campaign-heroimg {
	width: 100%;
	max-height: 82vh;
	object-fit: cover;
	background: #101010;
}

.oc-campaign__sound { position: absolute; right: 22px; bottom: 22px; }

.oc-campaign__grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: clamp(14px, 2vw, 30px);
	padding: clamp(24px, 4vh, 50px) var(--pad);
}

.oc-citem { position: relative; background: #181818; overflow: hidden; }
.oc-citem video,
.oc-citem img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

.oc-citem--16-9 { grid-column: span 8; aspect-ratio: 16 / 9; }
.oc-citem--9-16 { grid-column: span 4; aspect-ratio: 9 / 16; }
.oc-citem--4-5 { grid-column: span 4; aspect-ratio: 4 / 5; }
.oc-citem--1-1 { grid-column: span 4; aspect-ratio: 1 / 1; }

@media (max-width: 860px) {
	.oc-citem--16-9 { grid-column: 1 / -1; }
	.oc-citem--9-16, .oc-citem--4-5, .oc-citem--1-1 { grid-column: span 6; }
}

.oc-campaign__credits { padding: 0 var(--pad) 70px; max-width: 760px; }
.oc-campaign__credits h3 {
	font-weight: 700;
	font-size: 28px;
	margin-bottom: 22px;
	text-transform: uppercase;
}
.oc-campaign__credits li {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	font-size: 14px;
}
.oc-campaign__credits li b {
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--blu);
	flex: 0 0 44%;
}

/* ---------- About ---------- */
.oc-page-about { padding-bottom: 30px; }

.oc-about-statement {
	padding: clamp(60px, 12vh, 130px) var(--pad) clamp(50px, 9vh, 110px);
	max-width: 1280px;
}

.oc-about-statement h1 {
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(26px, 3.8vw, 54px);
	line-height: 1.08;
	letter-spacing: -.005em;
}

.oc-about-founder {
	padding: clamp(40px, 8vh, 90px) var(--pad);
	border-top: 1px solid var(--line);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px 70px;
	max-width: 1400px;
}

.oc-about-founder .oc-eyebrow { grid-column: 1 / -1; margin-bottom: 0; }

.oc-about-founder h2 {
	font-weight: 900;
	text-transform: uppercase;
	font-size: clamp(34px, 5vw, 72px);
	line-height: .95;
}

.oc-about-founder__role {
	margin-top: 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--ink-dim);
}

.oc-about-founder__bio p { color: rgba(255, 255, 255, .82); }

@media (max-width: 860px) {
	.oc-about-founder { grid-template-columns: 1fr; }
}

.oc-about-team {
	padding: clamp(40px, 8vh, 90px) var(--pad);
	border-top: 1px solid var(--line);
}

.oc-team__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 0;
	border-bottom: 1px solid var(--line);
	transition: padding-left .4s var(--ease-out);
}

.oc-team__row:hover { padding-left: 14px; }

.oc-team__name {
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(24px, 3.4vw, 46px);
	line-height: 1;
}

.oc-team__role {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ink-dim);
}

.oc-wall {
	padding: clamp(50px, 9vh, 100px) 0 clamp(40px, 7vh, 80px);
	border-top: 1px solid var(--line);
	overflow: hidden;
}

.oc-wall .oc-eyebrow { padding: 0 var(--pad); }

.oc-wall__marq {
	white-space: nowrap;
	overflow: hidden;
	font-weight: 900;
	text-transform: uppercase;
	font-size: clamp(42px, 7.4vw, 110px);
	line-height: 1.1;
}

.oc-wall__marq--rtl { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .45); }

.oc-wall__marq > span { display: inline-block; }

.oc-wall__marq--ltr > span { animation: oc-marq 60s linear infinite; }
.oc-wall__marq--rtl > span { animation: oc-marq-rev 55s linear infinite; }

/* ---------- Oceancode ME ---------- */
.oc-page-me { padding-top: 0; }

.oc-me-hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

.oc-me-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.oc-me-hero__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,.82) 100%);
}

.oc-me-hero__content {
	position: relative;
	z-index: 2;
	padding: 0 var(--pad) clamp(50px, 10vh, 110px);
	max-width: 1180px;
}

.oc-me-hero__content h1 {
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(26px, 4vw, 56px);
	line-height: 1.06;
}

.oc-me-links {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 40px;
}

/* ---------- Contact ---------- */
.oc-contact {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	padding: 3vh var(--pad) 100px;
}

.oc-contact__email {
	display: inline-block;
	font-weight: 700;
	font-size: clamp(24px, 3vw, 44px);
	line-height: 1.05;
	text-transform: lowercase;
	border-bottom: 1px solid rgba(255, 255, 255, .5);
	padding-bottom: 6px;
	transition: border-color .3s, opacity .3s;
	word-break: break-all;
}

.oc-contact__email:hover { border-color: var(--wht); opacity: .7; }

.oc-contact__addr {
	margin-top: 30px;
	color: var(--ink-dim);
	letter-spacing: .06em;
}

.oc-contact__ig {
	display: inline-block;
	margin-top: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	transition: opacity .25s;
}

.oc-contact__ig:hover { opacity: .6; }

.oc-form { display: flex; flex-direction: column; gap: 30px; }

.oc-form__field { display: flex; flex-direction: column; gap: 10px; }

.oc-form__field span {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .24em;
	color: var(--ink-dim);
}

.oc-form__field input,
.oc-form__field textarea {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--line);
	color: var(--wht);
	font: inherit;
	padding: 8px 0 12px;
	transition: border-color .25s;
	resize: vertical;
}

.oc-form__field input:focus,
.oc-form__field textarea:focus {
	outline: none;
	border-color: var(--wht);
}

.oc-form__send { align-self: flex-start; }

.oc-hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.oc-notice {
	padding: 14px 20px;
	border-radius: 8px;
	margin-bottom: 26px;
	font-size: 14px;
	letter-spacing: .03em;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, .05);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.oc-notice--err { border-color: rgba(255, 80, 80, .5); background: rgba(255, 40, 40, .08); }

@media (max-width: 860px) {
	.oc-contact { grid-template-columns: 1fr; gap: 50px; }
}

/* ---------- Doc pages ---------- */
.oc-doc {
	padding: 20px var(--pad) 100px;
	max-width: 860px;
	color: rgba(255, 255, 255, .84);
}

.oc-doc h2, .oc-doc h3 { margin: 34px 0 14px; font-weight: 700; text-transform: uppercase; }
.oc-doc p, .oc-doc ul, .oc-doc ol { margin-bottom: 16px; }
.oc-doc ul { list-style: disc; padding-left: 22px; }
.oc-doc a { color: var(--wht); text-decoration: underline; }

/* ---------- Footer ---------- */
.oc-footer {
	border-top: 1px solid var(--line);
	background: var(--blk);
	overflow: hidden;
}

.oc-footer__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	padding: clamp(40px, 7vh, 70px) var(--pad);
	font-size: 14px;
	line-height: 24px;
	color: rgba(255, 255, 255, .8);
}

.oc-footer__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .24em;
	color: var(--ink-dim);
	margin-bottom: 10px;
}

.oc-footer__col a { transition: opacity .2s; }
.oc-footer__col a:hover { opacity: .6; }

/* Marquee finale: banda blu, scritta bianca */
.oc-footer__marq {
	white-space: nowrap;
	overflow: hidden;
	background: var(--blu);
	color: var(--wht);
	padding: clamp(10px, 1.6vh, 18px) 0;
	font-weight: 900;
	text-transform: uppercase;
	font-size: clamp(36px, 6.4vw, 92px);
	line-height: 1;
}

.oc-footer__marq > span { display: inline-block; animation: oc-marq 70s linear infinite; }

@media (max-width: 860px) {
	.oc-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Riduzione movimento ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.oc-grain { animation: none; }
	.oc-kinetic__track > span,
	.oc-wall__marq > span,
	.oc-footer__marq > span,
	.oc-intro__tunnel span,
	.oc-home__reel { animation: none; }
	.oc-home__brand, .oc-cat,
	.oc-feed__idx, .oc-feed__artist, .oc-feed__title,
	.oc-card--feed .oc-roles,
	.oc-shot, .oc-gallery__head { opacity: 1 !important; transform: none !important; filter: none !important; }
	html { scroll-behavior: auto; }
}

/* =====================================================================
   CAROSELLO — Commercial & Fashion / Events
   Card grande al centro, vicine che sbordano ai lati, curvatura leggera.
   ===================================================================== */

.oc-car__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.oc-page-car {
	padding-top: var(--header-h);
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.oc-car {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 0;
	padding-bottom: clamp(10px, 2vh, 22px);
}

/* ---------- Testa: titolo + filtri ---------- */
.oc-car__head {
	flex: 0 0 auto;
	text-align: center;
	padding: clamp(6px, 1.4vh, 16px) var(--pad) clamp(6px, 1.2vh, 14px);
}

.oc-car__h1 {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
}

.oc-car__filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: clamp(14px, 2.4vw, 34px);
	margin-top: clamp(6px, 1.2vh, 13px);
}

.oc-car__filter {
	position: relative;
	font-size: clamp(12px, 1.15vw, 15px);
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .38);
	padding: 4px 0;
	transition: color .3s var(--ease-out);
	cursor: pointer;
}

.oc-car__filter::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--acc);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .4s var(--ease-out);
}

.oc-car__filter:hover { color: rgba(255, 255, 255, .8); }
.oc-car__filter.is-active { color: var(--wht); }
.oc-car__filter.is-active::after { transform: scaleX(1); }

/* ---------- Stage ---------- */
.oc-car__stage {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	/* L'altezza dello stage decide la dimensione della card: cosi' il 16:9 e' sempre esatto.
	   52vw come sul riferimento: le card vicine devono occupare i lati. */
	contain: layout paint;
	max-height: 400px;
	max-height: min(calc(52vw * 9 / 16), 430px);
	perspective: 1150px;
	perspective-origin: 50% 50%;
	overflow: hidden;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}

.oc-car__track {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
}

/* Sul cilindro le card vicine restano leggibili: niente scurita' eccessiva. */
.oc-car__stage { perspective-origin: 50% 50%; }

.oc-car:not(.is-ready) .oc-car__track { opacity: 0; }
.oc-car__track { transition: opacity .5s var(--ease-out); }

/* Ogni card e' un livello a tutto stage, centrato: il JS lo trasla. */
.oc-card--car {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	will-change: transform, opacity;
}

.oc-card--car .oc-card__media {
	/* Altezza piena dello stage: la larghezza segue il 16:9. */
	height: 100%;
	width: auto;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	pointer-events: auto;
	background: #101010;
	clip-path: url(#oc-car-curve);
	/* Niente box-shadow ne' filter: su un livello 3D in movimento costano
	   un ridisegno per frame. La profondita' la da' il velo qui sotto. */
	contain: paint;
}

/* Velo che scurisce le card laterali: e' solo opacita', quindi composita
   sulla GPU e non fa scattare lo scorrimento. */
.oc-card--car .oc-card__media::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	background: #0b0b0b;
	opacity: .46;
	transition: opacity .45s var(--ease-out);
}

.oc-card--car.is-active .oc-card__media::after { opacity: 0; }

/* Targa col titolo mentre il video carica: mai un riquadro nero. */
.oc-card--car .oc-card__ph--load {
	z-index: 1;
	align-items: center;
	justify-content: center;
	padding: 8%;
	text-align: center;
	background:
		radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .07), rgba(0, 0, 0, 0) 62%),
		#171717;
	transition: opacity .6s var(--ease-out);
}

.oc-card--car .oc-card__ph--load span {
	max-width: 100%;
	font-size: clamp(14px, 1.5vw, 22px);
	font-weight: 700;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .5);
}

.oc-card--car .oc-card__ph--load::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, rgba(255,255,255,0), var(--acc), rgba(255,255,255,0));
	animation: oc-car-load 1.6s var(--ease-out) infinite;
}

@keyframes oc-car-load {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

.oc-card--car.is-loaded .oc-card__ph--load { opacity: 0; }
.oc-card--car.is-loaded .oc-card__ph--load::after { animation: none; opacity: 0; }
.oc-card--car.is-failed .oc-card__ph--load { opacity: 1; }
.oc-card--car.is-failed .oc-card__ph--load::after { display: none; }

.oc-card--car .oc-card__vid { z-index: 2; }

.oc-card--car .oc-card__vid,
.oc-card--car .oc-card__poster { transition: opacity .5s; transform: none; }
.oc-card--car:hover .oc-card__vid,
.oc-card--car:hover .oc-card__poster { transform: none; }

.oc-card--car .oc-card__ph { border: 0; }

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

/* Il velo continua a dissolversi anche in movimento: e' solo opacita',
   costa nulla e rende il passaggio fra una card e l'altra continuo. */
.oc-car.is-moving .oc-card--car .oc-card__ph--load { transition: none; }

/* ---------- Frecce ---------- */
.oc-car__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 300;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	font-size: 16px;
	border: 1px solid var(--line);
	border-radius: 99px;
	color: rgba(255, 255, 255, .8);
	background: rgba(0, 0, 0, .35);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: background .3s, color .3s, border-color .3s;
}

.oc-car__arrow:hover {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .45);
	color: var(--wht);
}

.oc-car__arrow--prev { left: clamp(10px, 2vw, 26px); }
.oc-car__arrow--next { right: clamp(10px, 2vw, 26px); }

/* ---------- Didascalia ---------- */
.oc-car__cap {
	flex: 0 0 auto;
	text-align: center;
	/* Altezza stabile: la card non deve cambiare misura a ogni progetto. */
	min-height: clamp(104px, 13vh, 158px);
	padding: clamp(12px, 2.4vh, 24px) var(--pad) 0;
	transition: opacity .22s var(--ease-out), transform .22s var(--ease-out);
}

.oc-car__cap.is-swap { opacity: 0; transform: translateY(8px); }

.oc-car__client {
	min-height: 1.25em;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

.oc-car__title {
	margin-top: 6px;
	font-size: clamp(26px, 3.7vw, 54px);
	font-weight: 900;
	line-height: .98;
	letter-spacing: -.01em;
	text-transform: uppercase;
}

.oc-car__sub {
	margin-top: 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ink-dim);
}

/* ---------- Piede ---------- */
.oc-car__foot {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: clamp(10px, 1.8vh, 18px) var(--pad) 0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
}

.oc-car__counter { color: var(--acc); }
.oc-car__hint { color: rgba(255, 255, 255, .32); }

.oc-car__empty {
	flex: 1;
	display: grid;
	place-items: center;
	padding: 12vh var(--pad);
	text-align: center;
	color: var(--ink-dim);
}

.oc-car.is-empty .oc-car__stage,
.oc-car.is-empty .oc-car__foot { opacity: .25; pointer-events: none; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
	.oc-car__stage { max-height: calc(62vw * 9 / 16); }
	.oc-car__arrow { width: 38px; height: 38px; font-size: 14px; }
	.oc-car__filters { gap: 14px; }
	.oc-car__hint { display: none; }
	.oc-car__foot { justify-content: center; }
}

@media (max-width: 640px) {
	/* Su telefono si scorre con lo swipe: le frecce coprirebbero la card. */
	.oc-car__stage { max-height: calc(68vw * 9 / 16); perspective: 720px; }
	.oc-car__arrow { display: none; }
	.oc-car__filters { gap: 12px; }
	.oc-car__filter { font-size: 11px; letter-spacing: .06em; }
}

@media (prefers-reduced-motion: reduce) {
	.oc-car__cap,
	.oc-card--car .oc-card__media { transition: none; }
}

/* =====================================================================
   v1.5 — DETTAGLI
   Monocromia, tema chiaro/scuro, sfondo dinamico, Music split, Events.
   Scritto mobile first: le media query salgono, non scendono.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Colore: niente accento. Il colore lo mettono i video e le foto.
   --------------------------------------------------------------- */
:root {
	--acc: rgba(255, 255, 255, .92);
	--surface: #171717;
	--surface-2: #1f1f1f;
	--tap: 44px;
}

.oc-pill--acc { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); }
.oc-pagehead__meta { color: var(--ink-dim); }
::selection { background: var(--wht); color: var(--blk); }

/* ---------------------------------------------------------------
   2. Tema chiaro
   --------------------------------------------------------------- */
:root[data-oc-theme="light"] {
	--blk: #f4f2ef;
	--wht: #121212;
	--acc: rgba(18, 18, 18, .92);
	--ink-dim: rgba(18, 18, 18, .58);
	--line: rgba(18, 18, 18, .16);
	--glass: rgba(18, 18, 18, .05);
	--surface: #e7e4df;
	--surface-2: #ddd9d3;
	color-scheme: light;
}

:root[data-oc-theme="light"] .oc-grain { opacity: .022; mix-blend-mode: multiply; }
:root[data-oc-theme="light"] .oc-header.is-scrolled { background: rgba(244, 242, 239, .72); }
:root[data-oc-theme="light"] .oc-menu { background: rgba(244, 242, 239, .72); }
:root[data-oc-theme="light"] .oc-menu-toggle,
:root[data-oc-theme="light"] .oc-pill,
:root[data-oc-theme="light"] .oc-theme-toggle {
	border-color: rgba(18, 18, 18, .28);
	background: rgba(255, 255, 255, .5);
	color: var(--wht);
}
:root[data-oc-theme="light"] .oc-menu-toggle:hover,
:root[data-oc-theme="light"] .oc-pill:hover,
:root[data-oc-theme="light"] .oc-theme-toggle:hover { background: var(--wht); color: var(--blk); border-color: var(--wht); }
:root[data-oc-theme="light"] .oc-roles li { border-color: rgba(18,18,18,.2); background: rgba(255,255,255,.55); color: rgba(18,18,18,.72); }
:root[data-oc-theme="light"] .oc-card__ph,
:root[data-oc-theme="light"] .oc-card__media,
:root[data-oc-theme="light"] .oc-citem { background: var(--surface); }
:root[data-oc-theme="light"] .oc-card__ph--load { background: radial-gradient(120% 120% at 50% 0%, rgba(0,0,0,.05), rgba(0,0,0,0) 62%), var(--surface); }
:root[data-oc-theme="light"] .oc-card__ph--load span { color: rgba(18,18,18,.5); }
:root[data-oc-theme="light"] .oc-card--car .oc-card__media::after { background: #f4f2ef; opacity: .5; }
:root[data-oc-theme="light"] .oc-footer__grid { color: rgba(18, 18, 18, .78); }
:root[data-oc-theme="light"] .oc-project,
:root[data-oc-theme="light"] .oc-campaign,
:root[data-oc-theme="light"] .oc-lightbox { background: var(--blk); }
:root[data-oc-theme="light"] #oc-project-video { background: var(--blk); }
:root[data-oc-theme="light"] .oc-home__veil { background: linear-gradient(180deg, rgba(244,242,239,.35) 0%, rgba(244,242,239,.02) 42%, rgba(244,242,239,.72) 100%); }
:root[data-oc-theme="light"] .oc-cat { border-top-color: rgba(18,18,18,.18); background: rgba(255,255,255,.16); }
:root[data-oc-theme="light"] .oc-cat:hover { background: rgba(255,255,255,.55); }
:root[data-oc-theme="light"] ::-webkit-scrollbar-track { background: var(--blk); }
:root[data-oc-theme="light"] ::-webkit-scrollbar-thumb { background: #cfcac3; border-color: var(--blk); }

/* ---------------------------------------------------------------
   3. Interruttore tema
   --------------------------------------------------------------- */
.oc-header__right { display: flex; align-items: center; gap: 10px; }

.oc-theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--tap);
	padding: 10px 16px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 99px;
	background: rgba(0, 0, 0, .2);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .18em;
	transition: border-color .25s, background .25s, color .25s;
}

.oc-theme-toggle:hover { background: var(--wht); border-color: var(--wht); color: var(--blk); }
.oc-theme-toggle__dot {
	width: 11px; height: 11px; border-radius: 50%;
	border: 1px solid currentColor;
	background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}
.oc-theme-toggle__label { display: none; }

@media (min-width: 760px) { .oc-theme-toggle__label { display: inline; } }

/* ---------------------------------------------------------------
   4. Home: il logo dell'header cede il passo alla hero
   --------------------------------------------------------------- */
.oc-home-logo-off .oc-header__logo {
	opacity: 0;
	transform: translateY(-8px);
	pointer-events: none;
}

.oc-header__logo {
	transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}

/* La riga CREATIVE SERVICES diventa il centro finche' il logo non c'e'. */
.oc-home-logo-off .oc-home__brand-sub {
	color: var(--wht);
	letter-spacing: .42em;
	opacity: 1;
}

.oc-home__brand-sub { transition: letter-spacing .8s var(--ease-out), color .6s, opacity .6s; }

/* ---------------------------------------------------------------
   5. Carosello: sfondo dinamico + categorie
   --------------------------------------------------------------- */
.oc-car__glow {
	position: absolute;
	inset: -22%;
	z-index: 0;
	background-position: center;
	background-size: cover;
	filter: blur(130px) saturate(150%) brightness(.55);
	opacity: 0;
	transform: scale(1.3);
	transition: opacity 1.2s var(--ease-out), background-image 0s;
	pointer-events: none;
}

/* Vignettatura: l'alone resta un accenno, non invade la pagina. */
.oc-car__glow::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(58% 52% at 50% 50%, rgba(0, 0, 0, .1) 0%, var(--blk) 76%);
}

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

.oc-car { position: relative; }
.oc-car > *:not(.oc-car__glow) { position: relative; z-index: 1; }

.oc-car__filters {
	gap: 4px;
	padding: 4px;
	border: 1px solid var(--line);
	border-radius: 99px;
	background: rgba(0, 0, 0, .22);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	width: max-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	overflow-x: auto;
	scrollbar-width: none;
}

.oc-car__filters::-webkit-scrollbar { display: none; }
:root[data-oc-theme="light"] .oc-car__filters { background: rgba(255, 255, 255, .5); }

.oc-car__filter {
	flex: 0 0 auto;
	min-height: 36px;
	padding: 8px 15px;
	border-radius: 99px;
	font-size: 10px;
	letter-spacing: .14em;
	color: var(--ink-dim);
	transition: color .3s var(--ease-out), background .3s var(--ease-out);
}

.oc-car__filter::after { display: none; }
.oc-car__filter:hover { color: var(--wht); background: var(--glass); }
.oc-car__filter.is-active { color: var(--blk); background: var(--wht); }
:root[data-oc-theme="light"] .oc-car__filter.is-active { color: var(--blk); background: var(--wht); }

.oc-car__h1 { font-size: 10px; letter-spacing: .34em; }
.oc-car__hint { font-size: 9px; }
.oc-car__foot { justify-content: center; }

/* ---------------------------------------------------------------
   6. Video aperto: la UI non copre mai l'immagine
   --------------------------------------------------------------- */
.oc-project__stage {
	inset: calc(var(--tap) + 34px) var(--pad) calc(var(--tap) + 62px);
}

#oc-project-video { background: transparent; }

.oc-project__info { bottom: 14px; }
.oc-project__info h2 { font-size: clamp(20px, 3.4vw, 40px); }

.oc-pills { top: 14px; gap: 8px; }
.oc-pill { min-height: var(--tap); padding: 11px 16px; font-size: 10px; letter-spacing: .14em; }

/* Anche l'hero del case-study non taglia piu' */
#oc-campaign-hero,
#oc-campaign-heroimg { object-fit: contain; max-height: 74vh; background: transparent; }

@media (min-width: 900px) {
	.oc-project__stage { inset: calc(var(--tap) + 40px) var(--pad) calc(var(--tap) + 78px); }
	.oc-pills { top: 20px; }
	.oc-project__info { bottom: 20px; }
}

/* ---------------------------------------------------------------
   7. Tag piccolissimi, niente numeri
   --------------------------------------------------------------- */
.oc-roles li {
	font-size: 8px;
	letter-spacing: .16em;
	padding: 3px 7px;
	border-radius: 3px;
}

.oc-card__tag { font-size: 8px; letter-spacing: .16em; padding: 3px 7px; border-radius: 3px; }
.oc-feed__idx { display: none; }

/* ---------------------------------------------------------------
   8. Music Videos: schermata di scelta
   --------------------------------------------------------------- */
.oc-split {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
	padding-top: var(--header-h);
	transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}

.oc-split.is-out { opacity: 0; transform: scale(1.04); pointer-events: none; }

.oc-split__half {
	position: relative;
	container-type: inline-size;
	flex: 1 1 50%;
	min-height: 42svh;
	display: grid;
	place-items: center;
	overflow: hidden;
	border-top: 1px solid var(--line);
	color: var(--wht);
	text-align: center;
	transition: flex .8s var(--ease-out);
}

.oc-split__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.oc-split__media img,
.oc-split__media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .3;
	filter: grayscale(100%);
	transform: scale(1.06);
	transition: opacity .8s var(--ease-out), filter .8s var(--ease-out), transform 1.4s var(--ease-out);
}

.oc-split__media video { opacity: 0; }
/* La foto sparisce solo quando il video ha davvero un fotogramma: mai un buco nero. */
.oc-split__half.is-hot.is-ready .oc-split__media img { opacity: 0; }
.oc-split__half.is-hot.is-ready .oc-split__media video { opacity: .55; filter: none; transform: scale(1); }
.oc-split__half.is-hot .oc-split__media img { filter: none; transform: scale(1); opacity: .5; }
@media (pointer: coarse) {
	.oc-split__half.is-ready .oc-split__media video { opacity: .42; filter: none; transform: scale(1); }
	.oc-split__half.is-ready .oc-split__media img { opacity: 0; }
}

.oc-split__inner { position: relative; z-index: 2; padding: var(--pad); max-width: 100%; }

/* La meta' non scelta si ritira. */
.oc-split.is-hover .oc-split__half:not(.is-hot) .oc-split__label { opacity: .42; }

.oc-split__label {
	display: block;
	font-weight: 900;
	text-transform: uppercase;
	line-height: .92;
	letter-spacing: -.02em;
	/* Misura sulla meta', non sulla finestra: WORLDWIDE non sborda mai. */
	font-size: clamp(30px, 9vw, 84px);
	font-size: clamp(30px, 13cqw, 112px);
	transition: transform .7s var(--ease-out), letter-spacing .7s var(--ease-out), opacity .6s var(--ease-out);
}

.oc-split__sub {
	display: block;
	margin-top: 12px;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--ink-dim);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}

.oc-split__half.is-hot .oc-split__label { transform: translateY(-4px); letter-spacing: 0; }
.oc-split__half.is-hot .oc-split__sub { opacity: 1; transform: none; }

@media (pointer: coarse) {
	/* Senza mouse non c'e' hover: mostriamo sempre tutto. */
	.oc-split__sub { opacity: 1; transform: none; }
	.oc-split__media img { opacity: .38; filter: none; transform: scale(1); }
}

@media (min-width: 900px) {
	.oc-split { flex-direction: row; }
	.oc-split__half { border-top: 0; border-left: 1px solid var(--line); }
	.oc-split__half:first-child { border-left: 0; }
	.oc-split.is-hover .oc-split__half { flex: 1 1 40%; }
	.oc-split.is-hover .oc-split__half.is-hot { flex: 1 1 60%; }
}

/* display:flex batte l'attributo hidden: senza questo la schermata di scelta
   resta a occupare spazio sopra al feed. */
.oc-split[hidden],
.oc-mvpane[hidden] { display: none !important; }

.oc-mvpane { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.oc-mvpane.is-in { opacity: 1; transform: none; }


/* Il feed resta identico a prima: nessun padding in cima. */
.oc-page-mv { padding-top: 0; }
.oc-mv-open .oc-split { display: none; }
.oc-feed__title { font-size: clamp(26px, 6.4vw, 74px) !important; }
.oc-feed__artist { font-size: 10px; letter-spacing: .24em; }

.oc-mvpane .oc-pagehead { position: relative; }

.oc-mvpane__back {
	/* In flusso, sotto al titolo: sopra finirebbe sotto all'header fisso. */
	margin: 6px 0 0;
	padding: 0 var(--pad);
	min-height: var(--tap);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .22em;
	color: var(--ink-dim);
	transition: color .3s;
}

.oc-mvpane__back:hover { color: var(--wht); }

/* ---------------------------------------------------------------
   9. Events: titolo grande, mosaico che si apre
   --------------------------------------------------------------- */
.oc-page-events { padding-top: var(--header-h); }

.oc-evhead { padding: clamp(26px, 7vh, 70px) var(--pad) clamp(14px, 3vh, 26px); }

.oc-evhead__title {
	font-weight: 900;
	text-transform: uppercase;
	font-size: clamp(52px, 17vw, 210px);
	line-height: .86;
	letter-spacing: -.03em;
}

.oc-evlist { border-top: 1px solid var(--line); }

.oc-ev { position: relative; border-bottom: 1px solid var(--line); }

.oc-ev__bar {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 6px 18px;
	width: 100%;
	padding: clamp(18px, 3.4vh, 38px) var(--pad);
	text-align: left;
	transition: padding-left .5s var(--ease-out), color .35s;
}

.oc-ev__name {
	grid-column: 1;
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(24px, 6.4vw, 72px);
	line-height: .96;
	letter-spacing: -.015em;
	transition: opacity .35s;
}

.oc-ev__meta {
	grid-column: 1;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--ink-dim);
}

.oc-ev__sign {
	grid-column: 2;
	grid-row: 1 / span 2;
	position: relative;
	width: 18px;
	height: 18px;
	opacity: .5;
	transition: opacity .35s, transform .6s var(--ease-out);
}

.oc-ev__sign::before,
.oc-ev__sign::after {
	content: '';
	position: absolute;
	inset: 50% 0 auto;
	height: 1px;
	background: currentColor;
}

.oc-ev__sign::after { transform: rotate(90deg); transition: transform .6s var(--ease-out); }
.oc-ev.is-open .oc-ev__sign { opacity: 1; transform: rotate(180deg); }
.oc-ev.is-open .oc-ev__sign::after { transform: rotate(0deg); }

.oc-ev__peek { display: none; }

.oc-ev__body {
	overflow: hidden;
	height: 0;
	transition: height .76s var(--ease-out);
}

.oc-ev__mosaic {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	padding: 4px var(--pad) clamp(24px, 5vh, 54px);
}

.oc-ev__shot {
	position: relative;
	overflow: hidden;
	background: var(--surface);
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}

.oc-ev__shot.is-in { opacity: 1; transform: none; }

/* Ogni scatto tiene il proprio formato: niente ritagli forzati. */
.oc-ev__shot img { width: 100%; height: auto; display: block; }

.oc-ev__shot--hero { grid-column: 1 / -1; }
.oc-ev__shot--16-9 { grid-column: 1 / -1; }
.oc-ev__shot--9-16 { grid-column: span 1; }
.oc-ev__shot--4-5 { grid-column: span 1; }
.oc-ev__shot--1-1 { grid-column: span 1; }

@media (min-width: 760px) {
	.oc-ev__mosaic { grid-template-columns: repeat(12, 1fr); gap: clamp(10px, 1.4vw, 20px); }
	.oc-ev__shot--hero { grid-column: span 12; }
	.oc-ev__shot--16-9 { grid-column: span 8; }
	.oc-ev__shot--9-16 { grid-column: span 4; }
	.oc-ev__shot--4-5 { grid-column: span 4; }
	.oc-ev__shot--1-1 { grid-column: span 4; }
	.oc-ev__shot--16-9:nth-of-type(3n) { grid-column: span 12; }
}

@media (pointer: fine) {
	.oc-ev__bar:hover { padding-left: calc(var(--pad) + 16px); }
	.oc-ev:hover .oc-ev__sign { opacity: 1; }

	.oc-ev__peek {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		width: clamp(180px, 18vw, 280px);
		aspect-ratio: 4 / 3;
		pointer-events: none;
		will-change: transform;
		opacity: 0;
		transform: translate(0, 0);
		transition: opacity .4s var(--ease-out);
		overflow: hidden;
	}

	.oc-ev__peek img { width: 100%; height: 100%; object-fit: cover; }
	.oc-ev:hover .oc-ev__peek { opacity: .5; }
	.oc-ev.is-open .oc-ev__peek { opacity: 0 !important; }
	.oc-ev:hover .oc-ev__name { opacity: .55; }
	.oc-ev.is-open .oc-ev__name { opacity: 1; }
}

/* ---------------------------------------------------------------
   10. Mobile first: aree di tocco e respiro
   --------------------------------------------------------------- */
.oc-menu-toggle { min-height: var(--tap); }
.oc-car__arrow { width: var(--tap); height: var(--tap); }

@media (max-width: 640px) {
	.oc-header__right { gap: 6px; }
	.oc-menu-toggle { padding: 11px 16px; font-size: 10px; }
	.oc-theme-toggle { padding: 11px 13px; }
	.oc-car__filters { justify-content: flex-start; }
	.oc-project__stage { inset: calc(var(--tap) + 30px) 10px calc(var(--tap) + 58px); }
	.oc-pills { top: 10px; left: 10px; right: 10px; transform: none; }
	.oc-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   v1.6 — Rifiniture: footer, contact, temi, titoli, zero numerazione
   ===================================================================== */

/* ---------- Interruttore tema: solo icona ---------- */
.oc-theme-toggle { padding: 0; width: var(--tap); height: var(--tap); justify-content: center; }
.oc-theme-toggle__label { display: none !important; }
.oc-theme-toggle__dot { width: 13px; height: 13px; }
@media (min-width: 760px) { .oc-theme-toggle__label { display: none !important; } }

/* ---------- Niente numerazione, in nessuna pagina ---------- */
.oc-gallery__count,
.oc-shot__cap b,
.oc-lightbox__counter,
.oc-car__counter,
.oc-cat__count,
.oc-pagehead__meta { display: none !important; }

/* ---------- Titolo del carosello: kinetic come le altre pagine ---------- */
.oc-car__kinetic {
	font-size: clamp(26px, 5.4vw, 82px);
	margin-bottom: clamp(6px, 1.2vh, 14px);
	opacity: .92;
}

.oc-car__head { padding-top: 0; }
.oc-car { padding-top: clamp(6px, 1.2vh, 14px); }

/* ---------- Footer ---------- */
.oc-footer { border-top: 0; }

.oc-footer__core {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: clamp(30px, 5vh, 54px) var(--pad) clamp(26px, 4vh, 44px);
	text-align: center;
}

.oc-footer__mail {
	font-size: clamp(15px, 2.2vw, 22px);
	font-weight: 600;
	letter-spacing: .01em;
	position: relative;
}

.oc-footer__mail::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: -4px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .5s var(--ease-out);
}

.oc-footer__mail:hover::after { transform: scaleX(1); transform-origin: left; }

.oc-footer__ig {
	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__ig svg {
	width: 16px; height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
}

.oc-footer__ig .oc-ig-dot { fill: currentColor; stroke: none; }
.oc-footer__ig:hover { color: var(--wht); }

.oc-footer__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-dim);
}

.oc-footer__nav a { transition: color .25s; }
.oc-footer__nav a:hover { color: var(--wht); }
.oc-footer__nav span { opacity: .4; }

.oc-footer__legal {
	font-size: 9px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .34);
}

:root[data-oc-theme="light"] .oc-footer__legal { color: rgba(18, 18, 18, .42); }

/* ---------- Contact ---------- */
.oc-contact__lead {
	font-size: clamp(17px, 2.2vw, 26px);
	line-height: 1.35;
	margin-bottom: clamp(16px, 3vh, 30px);
	max-width: 22ch;
}

.oc-contact__email {
	position: relative;
	display: inline-block;
	overflow: hidden;
}

.oc-contact__email::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .55s var(--ease-out);
}

.oc-contact__email:hover::after { transform: scaleX(1); transform-origin: left; }

.oc-contact__addr { display: flex; align-items: center; gap: 9px; }

.oc-contact__pin {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: currentColor;
	animation: oc-ping 2.4s ease-out infinite;
}

@keyframes oc-ping {
	0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
	70% { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); opacity: .55; }
	100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); opacity: 1; }
}

.oc-contact__clock {
	margin-top: 14px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .26em;
	color: var(--ink-dim);
	font-variant-numeric: tabular-nums;
}

.oc-form__field input,
.oc-form__field textarea { transition: border-color .3s, background .3s; }
.oc-form__field:focus-within span { opacity: 1; letter-spacing: .3em; }
.oc-form__field span { transition: opacity .3s, letter-spacing .45s var(--ease-out); }

/* ---------- Tema chiaro: recupero di cio' che si perdeva ---------- */
:root[data-oc-theme="light"] .oc-kinetic,
:root[data-oc-theme="light"] .oc-evhead__title,
:root[data-oc-theme="light"] .oc-menu__item,
:root[data-oc-theme="light"] .oc-split__label,
:root[data-oc-theme="light"] .oc-ev__name,
:root[data-oc-theme="light"] .oc-card__title,
:root[data-oc-theme="light"] .oc-feed__title,
:root[data-oc-theme="light"] .oc-car__title { color: var(--wht); }

:root[data-oc-theme="light"] .oc-home__brand,
:root[data-oc-theme="light"] .oc-home__brand-sub,
:root[data-oc-theme="light"] .oc-cat,
:root[data-oc-theme="light"] .oc-cat__label { color: #f4f2ef; }

:root[data-oc-theme="light"] .oc-card--feed .oc-feed__info,
:root[data-oc-theme="light"] .oc-card--acc .oc-card__meta { color: #f4f2ef; }

:root[data-oc-theme="light"] .oc-card--feed .oc-roles li,
:root[data-oc-theme="light"] .oc-card--acc .oc-roles li {
	border-color: rgba(255,255,255,.3);
	background: rgba(0,0,0,.32);
	color: rgba(255,255,255,.85);
}

:root[data-oc-theme="light"] .oc-split__half { color: var(--wht); }
:root[data-oc-theme="light"] .oc-split__media img,
:root[data-oc-theme="light"] .oc-split__media video { opacity: .22; }
:root[data-oc-theme="light"] .oc-ev__shot { background: var(--surface); }
:root[data-oc-theme="light"] .oc-footer__marq { color: #fff; }
:root[data-oc-theme="light"] .oc-mv-hint { color: var(--ink-dim); }
:root[data-oc-theme="light"] .oc-cursor__dot { background: var(--wht); }
:root[data-oc-theme="light"] .oc-intro { background: var(--blk); }

/* Le sezioni con media a tutto schermo restano scure anche in light:
   le foto e i video hanno bisogno del fondo nero. */
:root[data-oc-theme="light"] .oc-home,
:root[data-oc-theme="light"] .oc-page-mv,
:root[data-oc-theme="light"] .oc-acc { background: #101010; }

/* =====================================================================
   v1.8 — Mobile hardening
   ===================================================================== */

/* Niente flash grigio al tap su iOS/Android */
* { -webkit-tap-highlight-color: transparent; }

/* Il cursore finto non serve dove si tocca */
@media (pointer: coarse) {
	.oc-cursor { display: none; }
	.oc-shot,
	.oc-card,
	.oc-ev__bar { cursor: pointer; }
	.oc-shot { box-shadow: 0 18px 44px rgba(0, 0, 0, .45); }
}

/* Il menu deve poter scorrere sugli schermi bassi */
.oc-menu {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

@media (max-height: 720px) {
	.oc-menu { justify-content: flex-start; }
	.oc-menu__item { font-size: clamp(26px, 5.2vh, 54px); }
}

/* Il carosello non deve innescare il pull-to-refresh */
.oc-car__stage { overscroll-behavior: contain; }

/* L'indizio SCROLL sparisce quando si apre un overlay */
.oc-lock .oc-mv-hint { opacity: 0; }
.oc-mv-hint { transition: opacity .3s; }

@media (max-width: 640px) {
	/* --- Video aperto: comandi in una barra in basso, mai sopra al video --- */
	.oc-pills {
		top: auto;
		bottom: auto;
		left: auto;
		right: auto;
		transform: none;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 6px;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
		overflow-x: auto;
		scrollbar-width: none;
		background: linear-gradient(0deg, var(--blk) 55%, rgba(0, 0, 0, 0));
	}

	.oc-pills::-webkit-scrollbar { display: none; }
	.oc-pills .oc-pill { flex: 0 0 auto; padding: 10px 13px; font-size: 9px; letter-spacing: .1em; }

	/* Impilati in colonna: video, testo, comandi. Cosi' non si sovrappongono mai,
	   qualunque sia la lunghezza del titolo. */
	.oc-project { display: flex; flex-direction: column; }

	.oc-project__stage {
		position: relative;
		inset: auto;
		order: 1;
		flex: 1 1 auto;
		min-height: 0;
		margin: 12px 8px 0;
	}

	.oc-project__info {
		position: relative;
		inset: auto;
		order: 2;
		flex: 0 0 auto;
		padding: 12px 12px 0;
	}

	.oc-project__info h2 { font-size: 19px; line-height: 1.1; }
	.oc-project__info p { font-size: 11px; }
	.oc-project__info .oc-roles { margin-top: 8px; }

	.oc-pills { position: relative; order: 3; flex: 0 0 auto; }

	/* Il menu entra senza scorrere anche su schermi piccoli */
	.oc-menu__item { font-size: clamp(24px, 4.6vh, 46px); }

	/* --- Case study: testata su due righe --- */
	.oc-campaign__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 14px var(--pad);
	}

	.oc-campaign__head h2 { font-size: 20px; line-height: 1.1; }
	.oc-campaign__headpills { display: flex; gap: 8px; }
	#oc-campaign-hero, #oc-campaign-heroimg { max-height: 52vh; }

	/* --- Lightbox foto --- */
	#oc-lightbox-img { max-width: 94vw; max-height: 68vh; }
	.oc-lightbox__prev, .oc-lightbox__next { width: var(--tap); height: var(--tap); padding: 0; display: grid; place-items: center; }
	.oc-lightbox__close { padding: 10px 14px; font-size: 9px; }

	/* --- Header piu' compatto sotto i 380px --- */
	.oc-header { padding: 0 14px; }
	.oc-header__logo { font-size: 15px; letter-spacing: 0; }

	/* --- Photography --- */
	.oc-shots { gap: clamp(54px, 10vh, 90px); padding: 4vh var(--pad) 8vh; }
	.oc-shot { padding: 8px; }
	.oc-shot--portrait .oc-shot__img { height: auto; width: 100%; }
	.oc-gallery { gap: clamp(30px, 5vh, 60px); }

	/* --- Events --- */
	.oc-evhead { padding: 20px var(--pad) 10px; }
	.oc-ev__bar { padding: 16px var(--pad); }
	.oc-ev__mosaic { gap: 6px; padding: 2px var(--pad) 26px; }

	/* --- Contact --- */
	.oc-contact { padding: 2vh var(--pad) 70px; }
	.oc-form { gap: 22px; }
}

@media (max-width: 380px) {
	.oc-header__logo { font-size: 13px; }
	.oc-menu-toggle { padding: 10px 12px; font-size: 9px; letter-spacing: .12em; }
}

/* Video non riproducibile: la cover non deve mai sparire. */
.oc-card.is-failed .oc-card__poster { opacity: 1 !important; }
.oc-card.is-failed .oc-card__vid { display: none; }

/* =====================================================================
   v1.9 — Menu mobile, banda blu, split
   ===================================================================== */

/* La banda blu non deve piu' scorrere all'infinito sotto le sezioni:
   su telefono resta ferma e compatta, e sul feed Music Videos sparisce. */
@media (max-width: 900px) {
	.oc-footer__marq { font-size: clamp(22px, 7vw, 40px); padding: 10px 0; }
	.oc-footer__marq > span { animation-duration: 120s; }
}

@media (max-width: 640px) {
	.oc-footer__marq > span { animation: none; transform: none; }
	.oc-footer__marq { text-align: center; }
}

.oc-page--mv .oc-footer__marq { display: none; }
.oc-page--mv .oc-footer { border-top: 1px solid var(--line); }

/* ---------- Menu hamburger su telefono ---------- */
@media (max-width: 860px) {
	.oc-menu {
		justify-content: flex-start;
		padding: calc(var(--header-h) + 6px) 0 0;
	}

	/* Le voci scorrono, il piede resta in fondo nel flusso: mai sovrapposti. */
	.oc-menu__nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

	.oc-menu__item {
		font-size: clamp(19px, 5.6vw, 30px);
		line-height: 1.15;
		letter-spacing: .01em;
		padding: 13px var(--pad);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.oc-menu__foot {
		position: static;
		flex: 0 0 auto;
		gap: 6px 18px;
		padding: 16px var(--pad) calc(20px + env(safe-area-inset-bottom));
		border-top: 1px solid var(--line);
		font-size: 11px;
		background: rgba(0, 0, 0, .25);
	}
}

:root[data-oc-theme="light"] .oc-menu__foot { background: rgba(255, 255, 255, .3); }

/* ---------- Split: su telefono il video di fondo e' gia' in moto ---------- */
@media (pointer: coarse) {
	.oc-split__media video { opacity: .42; }
	.oc-split__half:not(.is-ready) .oc-split__media video { opacity: 0; }
}

/* =====================================================================
   v1.10 — Player a schermo intero
   BACK, video, titolo, regista, tag, barra comandi, progetto successivo.
   ===================================================================== */

.oc-player {
	position: fixed;
	inset: 0;
	z-index: 2200;
	background: var(--blk);
	opacity: 0;
	visibility: hidden;
	transition: opacity .45s var(--ease-out), visibility 0s linear .45s;
}

.oc-player.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .45s var(--ease-out);
}

.oc-player__back {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 30;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--tap);
	padding: 18px var(--pad);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wht);
	transition: opacity .25s;
}

.oc-player__back span { font-size: 17px; line-height: 0; }
.oc-player__back:hover { opacity: .6; }

.oc-player__scroll {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	overflow-x: hidden;
	scroll-snap-type: y mandatory;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

/* ---------- Scena = un progetto ---------- */
.oc-scene {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	padding: calc(var(--tap) + 26px) 0 0;
}

.oc-scene__stage {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	background: #000;
}

.oc-scene__stage video,
.oc-scene__embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border: 0;
	background: #000;
}

.oc-scene__embed { position: absolute; inset: 0; }

.oc-scene__ph {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 8%;
	text-align: center;
	background: var(--surface);
}

.oc-scene__ph span {
	font-size: clamp(16px, 2vw, 26px);
	font-weight: 700;
	color: rgba(255, 255, 255, .45);
}

/* ---------- Blocco testo + comandi ---------- */
.oc-scene__meta {
	flex: 0 0 auto;
	padding: clamp(14px, 2.4vh, 26px) var(--pad) 0;
}

.oc-scene__title {
	font-size: clamp(20px, 3.2vw, 42px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -.01em;
	text-transform: uppercase;
}

.oc-scene__dir {
	margin-top: 6px;
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.oc-scene__dir span {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .22em;
	color: var(--ink-dim);
}

.oc-scene__dir b {
	font-size: clamp(15px, 1.9vw, 24px);
	font-weight: 800;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .78);
}

:root[data-oc-theme="light"] .oc-scene__dir b { color: rgba(255, 255, 255, .78); }

/* Tag: piccolissimi, come chiesto */
.oc-scene__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 10px;
}

.oc-scene__tags li {
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	padding: 3px 7px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 3px;
	color: rgba(255, 255, 255, .6);
}

/* ---------- Barra comandi ---------- */
.oc-scene__transport {
	display: flex;
	align-items: center;
	gap: clamp(8px, 1.4vw, 16px);
	margin-top: clamp(10px, 1.8vh, 18px);
}

.oc-tbtn {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 4px;
	color: var(--wht);
	transition: opacity .2s, background .2s;
	opacity: .82;
}

.oc-tbtn:hover { opacity: 1; background: rgba(255, 255, 255, .1); }
.oc-tbtn svg { width: 19px; height: 19px; fill: currentColor; }

.oc-tbtn--txt {
	width: auto;
	padding: 0 12px;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .18em;
}

/* Play / pause e volume: mostra l'icona giusta */
.oc-tbtn .ic-pause,
.oc-scene.is-playing .oc-tbtn .ic-play { display: none; }
.oc-scene.is-playing .oc-tbtn .ic-pause { display: block; }

.oc-tbtn .ic-mute { display: none; }
.oc-scene.is-muted .oc-tbtn .ic-vol { display: none; }
.oc-scene.is-muted .oc-tbtn .ic-mute { display: block; }

.oc-scene__prog {
	flex: 1 1 auto;
	height: 22px;
	display: flex;
	align-items: center;
	cursor: pointer;
	min-width: 60px;
}

.oc-scene__prog::before {
	content: '';
	position: absolute;
	left: 0; right: 0;
	height: 2px;
	background: rgba(255, 255, 255, .22);
}

.oc-scene__prog {
	position: relative;
}

.oc-scene__prog > i {
	position: relative;
	display: block;
	height: 2px;
	width: 0;
	background: var(--wht);
	transition: width .15s linear;
}

.oc-scene__time {
	flex: 0 0 auto;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--ink-dim);
	font-variant-numeric: tabular-nums;
	min-width: 84px;
	text-align: right;
}

/* ---------- Scroll to view more ---------- */
.oc-scene__more {
	flex: 0 0 auto;
	width: 100%;
	padding: clamp(12px, 2.2vh, 22px) var(--pad) clamp(16px, 2.6vh, 28px);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--ink-dim);
	text-align: center;
	transition: color .25s;
}

.oc-scene__more:hover { color: var(--wht); }

/* ---------- Credits ---------- */
.oc-credits__close {
	position: absolute;
	top: 14px; right: 16px;
	width: var(--tap); height: var(--tap);
	font-size: 24px;
	line-height: 1;
	color: var(--wht);
	opacity: .7;
}

.oc-credits__close:hover { opacity: 1; }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
	.oc-player__back { padding: 12px 14px; font-size: 11px; }
	.oc-scene { padding-top: calc(var(--tap) + 12px); }
	.oc-scene__meta { padding: 12px 14px 0; }
	.oc-scene__title { font-size: 19px; }
	.oc-scene__dir b { font-size: 15px; }
	.oc-scene__transport { gap: 6px; margin-top: 12px; }
	.oc-tbtn { width: 32px; height: 32px; }
	.oc-tbtn--txt { padding: 0 9px; font-size: 8px; }
	.oc-scene__time { min-width: 0; font-size: 8px; }
	.oc-scene__more { padding: 12px 14px 18px; font-size: 8px; }
}