/* ==========================================================================
   Oculto Society — CSS degli effetti (plugin)
   Riguarda solo i livelli decorativi: accensione VHS, cursore, scia,
   finestra dell'anteprima. Gli stili delle sezioni stanno nel tema.
   ========================================================================== */

/* --- accensione VHS ----------------------------------------------------- */
#oculto-tv{position:fixed;inset:0;z-index:300;pointer-events:none}
#oculto-tv .oculto-black{position:absolute;inset:0;background:#000;opacity:1}
#oculto-tv .oculto-beam{
	position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;background:#fff;
	box-shadow:0 0 24px 6px rgba(255,255,255,.9), 0 0 80px 20px rgba(255,26,26,.55);
	transform:scaleX(0);opacity:0;
}
#oculto-tv .oculto-scan{position:absolute;inset:0;opacity:0;background:repeating-linear-gradient(0deg, rgba(255,255,255,.14) 0 1px, transparent 1px 3px)}
#oculto-tv .oculto-track{
	position:absolute;left:0;right:0;height:90px;top:-90px;opacity:0;
	background:linear-gradient(180deg, transparent, rgba(255,255,255,.10), rgba(255,26,26,.07), transparent);
}
#oculto-tv .oculto-noise{
	position:absolute;inset:0;opacity:0;mix-blend-mode:screen;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
}
#oculto-tv.is-on .oculto-beam{animation:ocBeamOn 520ms cubic-bezier(.2,.8,.3,1) forwards}
#oculto-tv.is-open .oculto-black{animation:ocCrtOpen 560ms cubic-bezier(.65,0,.35,1) forwards}
#oculto-tv.is-open .oculto-beam{animation:ocBeamOff 480ms ease-out forwards}
#oculto-tv.is-open .oculto-noise{animation:ocNoiseFade 1.4s ease-out forwards}
#oculto-tv.is-open .oculto-scan{animation:ocScanSettle 2.2s ease-out forwards}
#oculto-tv.is-open .oculto-track{animation:ocTrackRoll 1.5s cubic-bezier(.4,0,.6,1) 1 forwards}
@keyframes ocBeamOn{0%{transform:scaleX(0);opacity:0}35%{opacity:1}100%{transform:scaleX(1);opacity:1}}
@keyframes ocBeamOff{0%{transform:scaleX(1) scaleY(1);opacity:1}60%{transform:scaleX(1) scaleY(30);opacity:.45}100%{transform:scaleX(1) scaleY(220);opacity:0}}
@keyframes ocCrtOpen{0%{opacity:1}18%{opacity:.92}22%{opacity:.98}30%{opacity:.75}34%{opacity:.85}100%{opacity:0}}
@keyframes ocNoiseFade{0%{opacity:.5}25%{opacity:.28}30%{opacity:.38}45%{opacity:.16}60%{opacity:.22}100%{opacity:.05}}
@keyframes ocScanSettle{0%{opacity:.55}40%{opacity:.3}100%{opacity:.05}}
@keyframes ocTrackRoll{0%{top:-90px;opacity:.9}100%{top:110%;opacity:.25}}
#oculto-tv.is-done .oculto-black,
#oculto-tv.is-done .oculto-beam,
#oculto-tv.is-done .oculto-track{display:none}
#oculto-tv.is-done .oculto-noise{opacity:.035;animation:none}
#oculto-tv.is-done .oculto-scan{opacity:.04;animation:none}

/* --- sfarfallio all'apertura del menu ----------------------------------- */
.oculto-menu .oculto-menu-vhs{position:absolute;inset:0;pointer-events:none}
.oculto-menu .oculto-menu-vhs .oculto-scan{position:absolute;inset:0;opacity:.05;background:repeating-linear-gradient(0deg, rgba(255,255,255,.14) 0 1px, transparent 1px 3px)}
.oculto-menu .oculto-menu-vhs .oculto-noise{
	position:absolute;inset:0;opacity:.03;mix-blend-mode:screen;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
}
.oculto-menu .oculto-menu-vhs .oculto-track{
	position:absolute;left:0;right:0;height:70px;top:-70px;opacity:0;
	background:linear-gradient(180deg, transparent, rgba(255,255,255,.09), rgba(255,26,26,.06), transparent);
}
.oculto-menu.is-flick .oculto-menu-inner{animation:ocMenuFlick .5s steps(1) both}
.oculto-menu.is-flick .oculto-menu-vhs .oculto-noise{animation:ocMenuNoise .7s ease-out both}
.oculto-menu.is-flick .oculto-menu-vhs .oculto-track{animation:ocMenuTrack .8s cubic-bezier(.4,0,.6,1) both}
@keyframes ocMenuFlick{0%{opacity:0}8%{opacity:.9}12%{opacity:.35}20%{opacity:1}28%{opacity:.8}36%{opacity:1}100%{opacity:1}}
@keyframes ocMenuNoise{0%{opacity:.28}40%{opacity:.1}100%{opacity:.03}}
@keyframes ocMenuTrack{0%{top:-70px;opacity:.85}100%{top:110%;opacity:.15}}

/* numerazione automatica delle voci di menu: 01, 02, 03… */
.oculto-menu .wp-block-navigation__container{counter-reset:ocm}
.oculto-menu .wp-block-navigation-item{counter-increment:ocm}
.oculto-menu .wp-block-navigation-item__content::before{
	content:counter(ocm, decimal-leading-zero);
	font-family:var(--oc-mono, monospace);font-size:.7rem;font-weight:700;letter-spacing:.2em;
	color:var(--oc-rosso, #FF1A1A);vertical-align:super;margin-right:14px;
}

/* --- scia + cursore -----------------------------------------------------
   ORDINE DEI LIVELLI (z-index): il cursore deve stare sopra a tutto, menu
   compreso. Se sta sotto, il menu lo copre — e siccome il puntatore di
   sistema è nascosto (cursor:none) resti senza puntatore del tutto.
   scia 400 · menu 220 · barra in alto 230 · accensione VHS 500 · cursore 600
   -------------------------------------------------------------------------- */
#oculto-trail{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:400}
#oculto-tv{z-index:500}
#oculto-cursor{display:none}
@media (hover:hover) and (pointer:fine){
	body.oculto-cursor-on,
	body.oculto-cursor-on a,
	body.oculto-cursor-on button{cursor:none}
	#oculto-cursor{
		display:block;position:fixed;left:0;top:0;z-index:600;pointer-events:none;
		width:34px;height:34px;margin:-17px 0 0 -17px;
	}
	#oculto-cursor .oculto-ring{
		position:absolute;inset:0;border:1px solid #fff;border-radius:50%;
		mix-blend-mode:difference;transition:transform .25s ease,opacity .25s ease;
	}
	#oculto-cursor .oculto-dia{
		position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
		background:var(--oc-rosso, #FF1A1A);box-shadow:0 0 10px rgba(255,26,26,.9);
		transform:rotate(45deg) scale(1);transition:transform .25s ease;
	}
	#oculto-cursor.is-hot .oculto-ring{transform:scale(1.9);opacity:.9}
	#oculto-cursor.is-hot .oculto-dia{transform:rotate(225deg) scale(1.6)}
	#oculto-cursor.is-hidden{opacity:0}
}
@media (hover:none),(pointer:coarse){#oculto-trail{display:none}}

/* --- finestra dell'anteprima ------------------------------------------- */
.oculto-reveal{
	position:fixed;left:0;top:0;z-index:150;pointer-events:none;
	width:300px;height:400px;border-radius:16px;overflow:hidden;
	opacity:0;transform:translate(-9999px,-9999px);
	transition:opacity .35s cubic-bezier(.4,0,.2,1);
	box-shadow:0 30px 70px rgba(0,0,0,.6);
}
.oculto-reveal.is-show{opacity:1}
.oculto-reveal .oculto-reel{position:absolute;inset:0;transition:transform .55s cubic-bezier(.22,1,.36,1);will-change:transform}
.oculto-reveal .oculto-slot{position:absolute;left:0;width:100%;height:100%;overflow:hidden}
.oculto-reveal .oculto-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease}
.oculto-reveal .oculto-slot img.is-on{opacity:1}
.oculto-reveal .oculto-tag{
	position:absolute;left:12px;bottom:11px;z-index:2;
	font-family:var(--oc-mono, monospace);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
	background:#000;color:#fff;padding:5px 9px;
}
@media (hover:none),(pointer:coarse){.oculto-reveal{display:none !important}}

/* --- cornice neon: deve combaciare con la foto --------------------------
   La cornice viene inserita dal JavaScript dentro la scheda del resident.
   WordPress le applicherebbe il margine automatico fra blocchi (24px),
   spostandola in basso rispetto alla foto: qui lo azzeriamo. */
.oculto-res-card .oculto-neon,
.oculto-res-card .oculto-veil,
.oculto-res-card .oculto-who{
	margin:0 !important;
}
/* la scheda deve essere alta esattamente quanto la foto */
.oculto-res-card{line-height:0}
.oculto-res-card .oculto-shot{margin:0;display:block;line-height:0}
.oculto-res-card .oculto-who{line-height:1.2}

/* --- link sottolineato che si riempie ----------------------------------- */
.oculto-u-link{
	font-family:var(--oc-mono, monospace);font-weight:700;font-size:.72rem;
	letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
	padding-bottom:5px;box-shadow:inset 0 -2px 0 0 var(--oc-rosso, #FF1A1A);
	transition:box-shadow .2s ease,color .2s ease;
}
.oculto-u-link:hover{box-shadow:inset 0 -2.6em 0 0 var(--oc-rosso-pieno, #E00E0E);color:#fff}

/* --- accessibilità: chi riduce il movimento non vede animazioni ---------- */
@media(prefers-reduced-motion:reduce){
	#oculto-tv .oculto-black,
	#oculto-tv .oculto-beam,
	#oculto-tv .oculto-track{display:none}
	#oculto-tv .oculto-noise{opacity:.035}
	#oculto-tv .oculto-scan{opacity:.04}
	#oculto-trail,#oculto-cursor{display:none !important}
	body.oculto-cursor-on,
	body.oculto-cursor-on a,
	body.oculto-cursor-on button{cursor:auto}
	.oculto-menu .oculto-menu-vhs .oculto-track{display:none}
	.oculto-menu.is-flick .oculto-menu-inner,
	.oculto-menu.is-flick .oculto-menu-vhs .oculto-noise,
	.oculto-menu.is-flick .oculto-menu-vhs .oculto-track{animation:none}
}