*/
:is(.asr-site, .asr-scope, .asr-trial) .asr-edgeline--h::before,
:is(.asr-site, .asr-scope, .asr-trial) .asr-edgeline--h::after {
top: var(--asr-edge-y, 0px);
bottom: auto;
left: 0;
right: 0;
width: auto;
height: 3px;
}
:is(.asr-site, .asr-scope, .asr-trial) .asr-edgeline--h::before {
background:
radial-gradient(circle at 1.5px 1.5px, var(--asr-reflector-color) 1.5px, transparent 1.6px) 48px 0 / var(--asr-reflector-step) 3px repeat-x,
linear-gradient(var(--asr-edge-color), var(--asr-edge-color)) 0 0.5px / 100% 2px no-repeat;
}
:is(.asr-site, .asr-scope, .asr-trial) .asr-edgeline--h::after {
background: radial-gradient(circle at 1.5px 1.5px, var(--asr-reflector-lit) 1.5px, transparent 1.6px) 48px 0 / var(--asr-reflector-step) 3px repeat-x;
transform-origin: 0 50%;
transform: scaleX(1);
}
/* 3.3 Strada in prospettiva puramente CSS: poster della scena 3D quando mancano WebGL, JS o movimento
(e fondo per l'hero compatto se non c'è l'illustrazione I6). Piano 3D vero (perspective), nessuna immagine.
Punto di fuga a --asr-vp-x / --asr-vp-y (default 68% / 38%, come la scena 3D; 50% / 24% sotto i 768 px). */
:is(.asr-site, .asr-scope, .asr-trial) .asr-roadscape {
--asr-vp-x: 68%;
--asr-vp-y: 38%;
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
perspective: 420px;
perspective-origin: var(--asr-vp-x) var(--asr-vp-y);
background:
/* lampione lontano: alone */
radial-gradient(10% 16% at calc(var(--asr-vp-x) + 9%) calc(var(--asr-vp-y) - 12%), rgb(255 255 255 / 0.10), transparent 70%),
/* orizzonte */
linear-gradient(180deg, transparent calc(var(--asr-vp-y) - 3%), rgb(var(--asr-amb-line) / 0.14) var(--asr-vp-y), transparent calc(var(--asr-vp-y) + 4%)),
/* cielo petrolio */
radial-gradient(70% 60% at 82% 0%, rgb(var(--asr-amb-petrol) / 0.5), transparent 70%),
/* terreno sotto l'orizzonte, cielo sopra */
linear-gradient(180deg, #052935 0%, #141618 var(--asr-vp-y), #0B0D0F var(--asr-vp-y), #08090A 100%);
}
:is(.asr-site, .asr-scope, .asr-trial) .asr-roadscape__road {
position: absolute;
left: calc(var(--asr-vp-x) - 22%);
width: 44%;
bottom: -2%;
height: 260%;
transform-origin: 50% 100%;
transform: rotateX(84deg);
background:
/* linee di bordo continue */
linear-gradient(90deg, transparent 2%, rgb(255 255 255 / 0.32) 2% 3%, transparent 3% 97%, rgb(255 255 255 / 0.32) 97% 98%, transparent 98%),
/* pozza di luce del lampione sull'asfalto */
radial-gradient(40% 8% at 70% 70%, rgb(255 255 255 / 0.06), transparent 70%),
linear-gradient(90deg, transparent 0 1%, #111416 1% 99%, transparent 99%);
-webkit-mask-image: linear-gradient(to top, #000 35%, transparent 92%);
mask-image: linear-gradient(to top, #000 35%, transparent 92%);
}
/* mezzeria tratteggiata (4.5 / 7.5, come la segnaletica extraurbana): scorre con M2 (asr-motion.css) */
:is(.asr-site, .asr-scope, .asr-trial) .asr-roadscape__lane {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 1.2%;
margin-left: -0.6%;
overflow: hidden;
}
:is(.asr-site, .asr-scope, .asr-trial) .asr-roadscape__lane::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -120px;
bottom: 0;
background: repeating-linear-gradient(180deg, rgb(255 255 255 / 0.5) 0 45px, transparent 45px 120px);
}
/* ------------------------------------------------------------------ */
/* 4. Scena 3D dell'hero: contenitore, poster, scrim (§5) */
/* ------------------------------------------------------------------ */
/*
![]()
oppure
…
— primo figlio dell'hero (.asr-amb--hero, isolation: isolate). Il canvas lo aggiunge il JS; il poster resta sotto.
Ordine di caricamento: asr-ambient.css e asr-motion.css DOPO asr-site.css / asr-trial.css / asr-app.css
(dipendenze WordPress): a parità di specificità vincono le classi ambient. */
:is(.asr-site, .asr-scope, .asr-trial) .asr-scene {
position: absolute;
inset: 0;
z-index: -1; /* sotto il contenuto; la grana (::after) e la scrim v2 restano sopra */
overflow: hidden;
pointer-events: none;
background: var(--asr-hero-bg, #141618);
}
:is(.asr-site, .asr-scope, .asr-trial) .asr-scene__poster,
:is(.asr-site, .asr-scope, .asr-trial) .asr-scene__canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
:is(.asr-site, .asr-scope, .asr-trial) .asr-scene__poster > img,
:is(.asr-site, .asr-scope, .asr-trial) .asr-scene__poster > picture > img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 70% 40%;
}
@media (max-width: 767.98px) {
:is(.asr-site, .asr-scope, .asr-trial) .asr-scene__poster > img,
:is(.asr-site, .asr-scope, .asr-trial) .asr-scene__poster > picture > img { object-position: 50% 20%; }
:is(.asr-site, .asr-scope, .asr-trial) .asr-scene .asr-roadscape { --asr-vp-x: 50%; --asr-vp-y: 24%; }
}
:is(.asr-site, .asr-scope, .asr-trial) .asr-scene__canvas {
opacity: 0;
z-index: 1;
}
:is(.asr-site, .asr-scope, .asr-trial) .asr-scene.is-scene-ready .asr-scene__canvas { opacity: 1; }
:is(.asr-site, .asr-scope, .asr-trial) .asr-scene.is-scene-ready.is-poster-gone .asr-scene__poster { visibility: hidden; }
:is(.asr-site, .asr-scope, .asr-trial) .asr-scene__scrim {
position: absolute;
inset: 0;
z-index: 2;
/* scrim obbligatoria (§5.2), poi la trama diagonale v2 (tessera 4×4) */
background: var(--asr-pattern-diagonal, none) 0 0 / 4px 4px repeat, var(--asr-scene-scrim);
}
@media (min-width: 1024px) {
:is(.asr-site, .asr-scope, .asr-trial) .asr-scene__scrim { background: var(--asr-pattern-diagonal, none) 0 0 / 4px 4px repeat, var(--asr-scene-scrim-lg); }
}
/* ------------------------------------------------------------------ */
/* 5. Preferenze di sistema */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-transparency: reduce) {
.asr-site, .asr-scope, .asr-trial { --asr-amb-noise-opacity: 0; --asr-amb-beam: none; }
}
@media (forced-colors: active) {
.asr-site, .asr-scope, .asr-trial { --asr-amb-noise-opacity: 0; }
:is(.asr-site, .asr-scope, .asr-trial) :is([class*="asr-amb--"], [class*="asr-ambient--"], .asr-amb-card, .asr-ambient-card),
:is(.asr-site, .asr-scope, .asr-trial):is([class*="asr-amb--"], [class*="asr-ambient--"]) { background: Canvas !important; forced-color-adjust: auto; }
:is(.asr-site, .asr-scope, .asr-trial) :is(.asr-amb, .asr-ambient)::after,
:is(.asr-site, .asr-scope, .asr-trial):is(.asr-amb, .asr-ambient)::after,
:is(.asr-site, .asr-scope, .asr-trial) .asr-roadscape,
:is(.asr-site, .asr-scope, .asr-trial) .asr-scene { display: none; }
:is(.asr-site, .asr-scope, .asr-trial) .asr-lane-divider { background: none; border-top: 1px dashed CanvasText; height: 0; }
:is(.asr-site, .asr-scope, .asr-trial) .asr-edgeline::before { background: CanvasText; width: 1px; }
:is(.asr-site, .asr-scope, .asr-trial) .asr-edgeline::after { display: none; }
}
@media print {
:is(.asr-site, .asr-scope, .asr-trial) :is([class*="asr-amb--"], [class*="asr-ambient--"]) { background: none !important; }
:is(.asr-site, .asr-scope, .asr-trial) :is(.asr-amb, .asr-ambient)::after,
:is(.asr-site, .asr-scope, .asr-trial) .asr-scene,
:is(.asr-site, .asr-scope, .asr-trial) .asr-roadscape { display: none !important; }
}