'La bola negra': una reivindicación de las identidades perdidas

Código Desktop :root { --ball-size: 266px; --ball-right: calc(((var(--ball-size) * -1) - 20px)); --line-size: 100px; --mask-position: calc(-100% + var(--ball-size)); } @media (max-width: 1025px) { :root { --ball-size: 150px; } } @media (max-width: 699px) { :root { --ball-size: 100px; --line-size: 80px; --mask-position: -100%; } } @media (max-width: 370px) { :root { --line-size: 68px; } } /* Fuentes */ @font-face { font-family: 'PPLL Sans Extrabold'; src: url('https://static.vocstatic.com/recursos/especiales/2026/09/la-bola-negra/pseb.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } /* Estilos generales */ @supports (animation-timeline: view()) { .v-a--d-s-1 { height: 300vh; view-timeline-name: --pista-scroll; } .v-a--d-s-1 .v-a-img-c { position: sticky; top: 50px; height: calc(100dvh - 50px); } @media (min-width: 699px) { .v-a--d-s-1 .v-a-img-c { top: 58px; height: calc(100dvh - 58px); } } @media (max-width: 1025px) { body:has(.v-h-a) .v-a--d-s-1 .v-a-img-c { height: calc(100dvh - 58px - 48px); top: calc(48px + 58px); transition: height .3s, top .3s; } } @media (max-width: 699px) { body:has(.v-h-a) .v-a--d-s-1 .v-a-img-c { height: calc(100dvh - 50px - 48px); top: calc(48px + 50px); } } @media (max-width: 1025px) { body:has(.v-h-a ~ .v-h.is-fixed) .v-a--d-s-1 .v-a-img-c { height: calc(100dvh - 58px); top: 58px; } } @media (max-width: 699px) { body:has(.v-h-a ~ .v-h.is-fixed) .v-a--d-s-1 .v-a-img-c { height: calc(100dvh - 50px); top: 50px; } } } .v-a--d-s-1 .v-a-img-c:after { display: none; } .v-a--d-s-1 .v-a-inf-c { display: none; } .v-a--d-s-1 .v-a-t, .v-a--d-s-1 .v-a-s-t { color: #202020; text-align: center; } .v-a--d-s-1 .v-a-t { text-transform: uppercase; -webkit-mask-image: linear-gradient(to right, black 50%, transparent 50%); mask-image: linear-gradient(to right, black 50%, transparent 50%); -webkit-mask-size: 200% 100%; mask-size: 200% 100%; } @supports (animation-timeline: view()) { .v-a--d-s-1 .v-a-t { animation: d-4 linear both; animation-timeline: --pista-scroll; animation-range: contain 8% contain 95%; } @media (min-width: 1025px) { .v-a--d-s-1 .v-a-t { animation-range: contain; } } } @media (max-width: 699px) { .v-a--d-s-1 .v-a-t { font-size: 32px; } } @media (min-width: 1025px) { .v-a--d-s-1 .v-a-t { font-size: 86px; } } .v-a--d-s-1 .v-a-t span { display: block; font-size: 19px; line-height: 120%; margin-top: 4px; } @media (max-width: 370px) { .v-a--d-s-1 .v-a-t span { font-size: 16px; } } @media (min-width: 699px) { .v-a--d-s-1 .v-a-t span { max-width: 460px; width: 100%; margin-left: auto; margin-right: auto; font-size: 24px; } } @media (min-width: 1025px) { .v-a--d-s-1 .v-a-t span { font-size: 43px; max-width: 720px; } } .v-a--d-s-1 .v-a-s-t { max-width: 680px; width: 100%; margin-left: auto; margi