:root{--negru:rgb(10,16,16);--negru-rgb:10, 16, 16;--miez:rgb(255,244,226);--miez-rgb:255, 244, 226;--sodiu:rgb(255,178,92);--sodiu-rgb:255, 178, 92;--rosu:rgb(242,98,42);--rosu-rgb:242, 98, 42;--raport:22745 / 22714;--punct-x:87.347%;--punct-y:65.22%;--pista-ecrane:2.6;--logo-w:80%;--logo-w-mare:40%}
:root {
--text: rgba(255, 255, 255, .92); --gri: #8A8F98;
--hl-g: 16px;
--ecran: 100vh;
color-scheme: dark;
}
@supports (height: 100svh) { :root { --ecran: 100svh; } }
.lat { font-stretch: 125%; font-weight: 600; letter-spacing: -0.01em; }
.pista { position: relative; height: calc(var(--ecran) * var(--pista-ecrane)); }
.static .pista { height: var(--ecran); }
.scena { position: sticky; top: 0; height: var(--ecran); overflow: hidden; touch-action: pan-y pinch-zoom; background: var(--negru);
user-select: none; -webkit-user-select: none; }
.inel { position: absolute; --l: min(100vw - 12px, var(--ecran) - 308px); width: var(--l); aspect-ratio: var(--raport);
left: calc(50% - var(--l) / 2); top: calc(64px + (var(--ecran) - 308px - var(--l)) / 2); }
.inel picture, .inel img { display: block; width: 100%; height: auto; }
.inel .plin-incarcare { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; }
.scena.gl > .inel:first-child { visibility: hidden; }
.scena canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.scena canvas.gata { opacity: 1; }
.punct { position: absolute; left: var(--punct-x); top: var(--punct-y); width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
background: var(--miez); box-shadow: 0 0 0 2px rgba(var(--miez-rgb), .16), 0 0 10px 3px rgba(var(--sodiu-rgb), .42); pointer-events: none;
will-change: transform; }
.traseu { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .12s ease; overflow: visible; }
.traseu.vizibil { opacity: 1; }
.traseu path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.traseu .halou { stroke: rgba(var(--rosu-rgb), .26); stroke-width: 7; }
.traseu .fir { stroke: var(--rosu); stroke-width: 2.2; }
.eticheta { position: absolute; z-index: 6; left: 0; top: 0; padding: 3px 8px; border-radius: 3px; background: rgba(var(--negru-rgb), .78);
font-size: 15px; font-weight: 600; font-stretch: 100%; color: var(--miez); white-space: nowrap; pointer-events: none;
opacity: 0; visibility: hidden; transition: opacity .12s ease, visibility 0s .12s;
text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.eticheta:not([href]) { text-decoration: none; }
.eticheta::after { content: ''; position: absolute; inset: -10px -8px; }
.eticheta.vizibil { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .12s ease; }
.pista-foto { position: absolute; left: 0; width: 100%; --h: min(var(--ecran), var(--foto-hmax)); height: var(--h); top: calc((var(--ecran) - var(--h)) / 2);
object-fit: cover; opacity: 0; pointer-events: none;
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 86%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 86%, transparent 100%); }
.static .pista-foto { display: none; }
.scena .jos { position: absolute; z-index: 5; left: max(var(--hl-g), env(safe-area-inset-left)); right: max(var(--hl-g), env(safe-area-inset-right)); bottom: 68px; pointer-events: none; }
.titlu-mare { margin: 0; font-size: min(28px, 7.3vw); line-height: 40px; white-space: nowrap; }
.logo-final { position: absolute; z-index: 4; left: 50%; top: 50%; width: var(--logo-w); height: auto; max-width: none;
transform: translate(-50%, -50%); opacity: 0; pointer-events: none; --l: 50%; --r: 50%;
-webkit-mask-image: linear-gradient(to right, transparent calc(var(--l) - 4%), #000 var(--l), #000 var(--r), transparent calc(var(--r) + 4%));
mask-image: linear-gradient(to right, transparent calc(var(--l) - 4%), #000 var(--l), #000 var(--r), transparent calc(var(--r) + 4%)); }
.static .logo-final { display: none; }
.final-static { display: none; }
.static .final-static { display: block; }
.final-static .logo-static { width: var(--logo-w); height: auto; margin: 12vh auto; }
.final-static img { width: 100%; height: auto;
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 78%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 78%, transparent 100%); }.atribuire { margin: 0; padding: 32px max(var(--hl-g), env(safe-area-inset-left)) calc(32px + env(safe-area-inset-bottom)); font-size: 13px; color: var(--gri); }
.atribuire a { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) {
:root { --hl-g: 40px; }
.inel { --l: calc(var(--ecran) - 210px); left: calc(57% - var(--l) / 2); top: 48px; }
.scena .jos { bottom: 44px; }
.titlu-mare { font-size: min(88px, 6.1vw); line-height: 1; }
.pista-foto { top: 0; height: 100%;
-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 84%, transparent 100%); }
.final-static picture, .final-static img { max-width: 1920px; margin: 0 auto; }
.logo-final, .final-static .logo-static { width: var(--logo-w-mare); }
}
@media (orientation: landscape) and (max-height: 520px) {
.inel { --l: calc(var(--ecran) - 24px); left: auto; right: max(var(--hl-g), env(safe-area-inset-right)); top: 12px; }
.scena .jos { right: auto; width: 44%; bottom: 20px; }
.titlu-mare { font-size: min(28px, 3.3vw); line-height: 1.15; white-space: normal; }
}