:root {
--bg: #000;
--text: #f5f5f5;
--accent: #ff3112;
--accent-soft: #ff6b00;
--yellow: #ffeb00;
--blue-cover: #1f97e5;
--line: rgba(255, 255, 255, 0.7);
--fire-height: clamp(260px, 46dvh, 560px);
--font-main: "Times New Roman", Times, serif;
}

* {
box-sizing: border-box;
}

html,
body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;
}

body {
background: var(--bg);
color: var(--text);
font-family: var(--font-main);
font-weight: 700;
letter-spacing: -0.006em;
overflow-x: hidden;
position: relative;
--speed-rush-overlay-opacity: 0;
--speed-rush-overlay-rotate: 0deg;
--speed-rush-overlay-depth: 0;
--speed-rush-overlay-stretch: 0;
--speed-rush-noise-duration: 220ms;
}

.page-noise {
position: fixed;
inset: 0;
pointer-events: none;
opacity: 0.075;
z-index: 1;
background-image: radial-gradient(circle, #fff 0.65px, transparent 0.65px);
background-size: 3px 3px;
transition: opacity 180ms ease;
}

body.speed-rush-active .page-noise {
opacity: calc(0.075 + var(--speed-rush-overlay-opacity) * 0.22);
animation: speedNoiseShift var(--speed-rush-noise-duration) steps(2, end) infinite;
}

.speed-rush-overlay {
position: fixed;
inset: -16vh -14vw;
pointer-events: none;
z-index: 34;
opacity: 0;
mix-blend-mode: screen;
background-image:
radial-gradient(circle at center, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.07) 26%, rgba(255, 255, 255, 0) 66%);
transform: translate3d(0, 0, 0) scale(1.02);
filter: blur(0);
transition: opacity 180ms ease;
overflow: hidden;
}

.speed-rush-overlay::before,
.speed-rush-overlay::after {
content: "";
position: absolute;
inset: -12%;
background-repeat: no-repeat;
background-position: center;
pointer-events: none;
opacity: 0;
-webkit-mask-image: radial-gradient(circle at center, transparent 0 10%, rgba(0, 0, 0, 0.72) 32%, #000 66%);
mask-image: radial-gradient(circle at center, transparent 0 10%, rgba(0, 0, 0, 0.72) 32%, #000 66%);
transform-origin: center;
}

.speed-rush-overlay::before {
background-image:
repeating-conic-gradient(
from 0deg at 50% 50%,
rgba(255, 255, 255, 0.58) 0deg 0.7deg,
rgba(255, 255, 255, 0) 0.7deg 9deg
);
filter: blur(0.8px);
}

.speed-rush-overlay::after {
background-image:
repeating-conic-gradient(
from 11deg at 50% 50%,
rgba(255, 255, 255, 0.44) 0deg 0.42deg,
rgba(255, 255, 255, 0) 0.42deg 7deg
);
filter: blur(1.4px);
}

body.speed-rush-active .speed-rush-overlay {
opacity: var(--speed-rush-overlay-opacity);
filter: blur(calc(var(--speed-rush-overlay-opacity) * 2.4px));
}

body.speed-rush-active .speed-rush-overlay::before,
body.speed-rush-active .speed-rush-overlay::after {
opacity: calc(0.06 + var(--speed-rush-overlay-opacity) * 0.9);
}

body.speed-rush-active .speed-rush-overlay::before {
animation: speedRushTunnel var(--speed-rush-noise-duration) linear infinite;
}

body.speed-rush-active .speed-rush-overlay::after {
animation: speedRushTunnelAlt var(--speed-rush-noise-duration) linear infinite;
}

#drift-trace-canvas {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
pointer-events: none;
z-index: 35;
}

.login-corner-link {
position: absolute;
top: clamp(4px, 0.9vw, 10px);
left: clamp(6px, 1vw, 12px);
display: inline-flex;
line-height: 1;
text-decoration: none;
z-index: 20;
transition: transform 110ms ease;
}

.login-corner-gif {
display: block;
width: clamp(78px, 8.6vw, 124px);
height: auto;
image-rendering: pixelated;
}

.login-corner-link:hover {
transform: translateY(-1px);
}

.login-corner-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: clamp(116px, 17vw, 178px);
min-height: clamp(28px, 4vw, 42px);
padding: 0.22rem 0.82rem;
background: #000;
color: #f6f6f6;
border: 2px solid #fff;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.24),
0 0 0 1px rgba(0, 0, 0, 0.92);
font-family: "Old English Text MT", "Times New Roman", Times, serif;
font-size: clamp(0.84rem, 1.6vw, 1.3rem);
font-weight: 700;
letter-spacing: 0.015em;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
text-transform: none;
white-space: nowrap;
}

.login-corner-btn::before {
content: "";
position: absolute;
inset: -4px;
border: 2px solid #fff;
pointer-events: none;
}

.warning-corner-stack {
position: absolute;
top: clamp(8px, 1.2vw, 14px);
right: clamp(8px, 1.2vw, 14px);
display: flex;
flex-direction: column;
align-items: flex-end;
gap: clamp(4px, 0.8vw, 8px);
z-index: 10;
pointer-events: none;
}

.warning-corner-gif {
width: clamp(46px, 6vw, 94px);
height: auto;
image-rendering: pixelated;
pointer-events: none;
position: relative;
z-index: 10;
}

.warning-corner-counter-gif {
width: clamp(42px, 5.6vw, 84px);
height: auto;
image-rendering: pixelated;
pointer-events: none;
}

.warning-corner-counter-btn {
position: relative;
z-index: 11;
padding: 0;
border: 0;
background: transparent;
line-height: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
pointer-events: auto;
transition: transform 110ms ease, filter 150ms ease;
outline: none;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
}

.warning-corner-counter-btn:hover {
transform: translateY(-1px) scale(1.04);
}

.warning-corner-counter-btn:active {
transform: scale(0.95);
}

.home {
position: relative;
z-index: 2;
--fold-bg-y-offset: clamp(-52px, -5.2vw, -18px);
--speed-rush-blur: 0px;
--speed-rush-scale: 1;
--speed-rush-shift-x: 0px;
--speed-rush-shift-y: 0px;
--speed-rush-sat-boost: 0;
--speed-rush-contrast-boost: 0;
filter:
blur(var(--speed-rush-blur))
saturate(calc(1.28 + var(--speed-rush-sat-boost)))
contrast(calc(1.14 + var(--speed-rush-contrast-boost)));
transform: translate3d(var(--speed-rush-shift-x), var(--speed-rush-shift-y), 0) scale(var(--speed-rush-scale));
transform-origin: center center;
will-change: filter, transform;
transition: filter 280ms ease-out, transform 280ms ease-out;
}

body.speed-rush-active .home {
transition: none;
}

.home::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: var(--fold-height, 100vh);
height: var(--fold-height, 100svh);
background-image: url("assets/media/hero/fold-before.png");
background-repeat: no-repeat;
background-position: center var(--fold-bg-y-offset);
background-size: cover;
opacity: 1;
pointer-events: none;
z-index: 0;
}

.home.fold-petrol-active::before {
background-image: url("assets/media/hero/fold-petrole.png");
}

.hero {
width: min(760px, 94vw);
margin: 0 auto;
position: relative;
text-align: center;
height: 100vh;
height: 100svh;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(72px, 11vw, 120px) 0 clamp(42px, 7vw, 66px);
}

.logo,
.manifesto,
.countdown-panel,
.cta-whatsapp-button {
position: relative;
z-index: 6;
}

#logo-title {
position: relative;
z-index: 2;
}

.logo {
margin: 0;
display: flex;
justify-content: center;
transform: translate(8px, -44px);
z-index: 2;
}

.logo-image {
width: clamp(190px, 38vw, 680px);
max-width: 94vw;
height: auto;
display: block;
object-fit: contain;
opacity: 1;
filter: none;
position: relative;
z-index: 2;
}

.logo.glitch .logo-image {
animation: logoJitter 140ms steps(2) 5;
}

.manifesto {
margin: 0.3rem 0 0;
width: min(1080px, 94vw);
margin-left: 50%;
transform: translate(-50%, -10px);
font-size: clamp(0.48rem, 1.35vw, 1.2rem);
line-height: 0.9;
font-style: italic;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.006em;
font-stretch: expanded;
text-align: center;
}

.manifesto p {
margin: 0.08rem auto;
max-width: min(92vw, 66ch);
white-space: normal;
text-wrap: balance;
transform: scaleX(1.06);
transform-origin: center;
}

.countdown-panel {
width: min(420px, 92vw);
margin: clamp(20px, 4vw, 32px) auto 0;
padding: 0.7rem 0.9rem 0.8rem;
border: none;
background: transparent;
}

.countdown-label {
margin: 0 0 0.4rem;
font-size: clamp(0.8rem, 1.8vw, 1.06rem);
font-family: var(--font-main);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.032em;
}

.countdown {
display: grid;
grid-template-columns: repeat(4, minmax(58px, 1fr));
gap: 8px;
}

.count-item {
text-align: center;
}

.value {
display: block;
font-size: clamp(0.9rem, 2.64vw, 1.68rem);
line-height: 1;
font-weight: 700;
font-family: var(--font-main);
}

.value.accent {
color: #fff;
}

.unit {
display: block;
margin-top: 0.18rem;
font-size: 0.62rem;
letter-spacing: 0.052em;
font-family: var(--font-main);
font-weight: 700;
}

.cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 220px;
height: 44px;
margin-top: 1.1rem;
padding: 0 1.3rem;
border-radius: 10px;
border: 1px solid #ff7c6e;
text-decoration: none;
background: linear-gradient(90deg, #ff3719, #ff1717);
color: #fff;
font-size: 1.1rem;
transition: transform 140ms ease;
}

.cta:hover {
transform: translateY(-2px);
}

.cta-whatsapp-button {
display: block;
width: min(420px, 60vw);
margin-top: -1.2rem;
margin-left: auto;
margin-right: auto;
text-decoration: none;
line-height: 0;
transition: transform 140ms ease;
cursor: pointer;
}

.cta-whatsapp-button:hover {
transform: translateY(-2px);
}

.whatsapp-popup-toggle {
position: fixed;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}

.cta-whatsapp-picture,
.cta-whatsapp-picture img {
display: block;
width: 100%;
height: auto;
}

.cta-whatsapp-picture img {
image-rendering: pixelated;
}

.whatsapp-popup-overlay {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 14px;
background: rgba(0, 0, 0, 0.74);
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 120;
transition: opacity 160ms ease, visibility 160ms ease;
}

.whatsapp-popup-overlay.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}

.whatsapp-popup-overlay:target {
opacity: 1;
visibility: visible;
pointer-events: auto;
}

.whatsapp-popup-toggle:checked ~ .whatsapp-popup-overlay {
opacity: 1;
visibility: visible;
pointer-events: auto;
}

.whatsapp-popup-backdrop {
position: absolute;
inset: 0;
cursor: pointer;
}

.whatsapp-popup {
position: relative;
width: min(94vw, 430px);
height: auto;
max-height: calc(100vh - 32px);
background: #000;
border: 2px solid rgba(255, 255, 255, 0.95);
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
gap: clamp(12px, 2vw, 22px);
padding: 24px 16px;
z-index: 1;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.68);
overflow: auto;
}

.whatsapp-popup-close {
position: absolute;
top: 10px;
right: 10px;
width: 32px;
height: 32px;
border: 0;
padding: 0;
background: transparent;
color: rgba(255, 255, 255, 0.92);
font-size: 1.5rem;
font-family: var(--font-main);
line-height: 1;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}

.whatsapp-popup-text {
margin: 0;
max-width: 31ch;
font-size: clamp(0.92rem, 1.72vw, 1.22rem);
line-height: 1.24;
font-weight: 700;
letter-spacing: 0;
font-family: "Arial Narrow", Arial, "Helvetica Neue", sans-serif;
text-transform: uppercase;
}

.whatsapp-popup-break-desktop {
display: none;
}

@media (min-width: 861px) {
.whatsapp-popup-break-desktop {
display: block;
}
}

.whatsapp-popup-join {
display: inline-block;
line-height: 0;
text-decoration: none;
transition: transform 140ms ease;
margin-top: -0.28rem;
}

.whatsapp-popup-join:hover,
.whatsapp-popup-join:focus-visible {
transform: translateY(-1px);
}

.whatsapp-popup-join-image {
display: block;
width: min(240px, 70vw);
height: auto;
image-rendering: pixelated;
}

.whatsapp-popup-note {
margin: 0;
max-width: 35ch;
font-size: clamp(0.68rem, 1.24vw, 0.82rem);
line-height: 1.26;
font-family: "Arial Narrow", Arial, "Helvetica Neue", sans-serif;
font-style: italic;
font-weight: 400;
letter-spacing: 0.01em;
text-transform: uppercase;
}

.whatsapp-popup-adhesion-link {
border: 0;
padding: 0;
margin: 0 0 0 0.22rem;
background: transparent;
color: #ff1f1f;
font: inherit;
font-style: inherit;
font-weight: 400;
text-transform: inherit;
line-height: inherit;
cursor: pointer;
text-decoration: none;
text-shadow: 0 0 1px rgba(255, 0, 0, 0.55), 0 0 7px rgba(255, 0, 0, 0.3);
}

.whatsapp-popup-adhesion-link:hover,
.whatsapp-popup-adhesion-link:focus-visible {
color: #ff3b3b;
text-decoration: none;
}

.subscription-popup-overlay {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(0, 0, 0, 0.82);
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 124;
transition: opacity 160ms ease, visibility 160ms ease;
}

.subscription-popup-overlay.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}

.subscription-popup-panel {
position: relative;
width: min(94vw, 470px);
max-height: calc(100vh - 32px);
overflow: auto;
background: #000;
border: 5px solid #fff;
border-radius: 0;
padding: 18px;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.72);
--subscription-title-size: clamp(2rem, 6vw, 2.5rem);
--subscription-body-size: 1rem;
}

.subscription-popup-close {
position: absolute;
top: 8px;
right: 10px;
border: 0;
background: transparent;
color: #fff;
font-family: "Arial Narrow", Arial, sans-serif;
font-size: var(--subscription-body-size);
line-height: 1;
cursor: pointer;
}

#form-container {
width: 100%;
text-align: center;
margin: 0 auto;
font-family: "Arial Narrow", Arial, sans-serif;
font-size: var(--subscription-body-size);
color: #fff;
}

.subscription-title {
color: #fff;
font-size: var(--subscription-title-size);
font-weight: 700;
margin: 2px 0 0;
line-height: 1;
font-family: var(--font-main);
}

.subscription-manifesto {
margin: 14px 0 16px;
color: #fff;
font-size: inherit;
font-weight: 400;
font-family: "Arial Narrow", Arial, sans-serif;
line-height: 1.2;
text-transform: none;
letter-spacing: 0.02em;
text-align: justify;
text-justify: inter-word;
hyphens: auto;
}

.subscription-manifesto strong {
font-weight: 700;
}

#price-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 20px;
}

.subscription-random-label {
display: inline;
font-size: 0.94em;
font-weight: 400;
letter-spacing: 0.01em;
}

.subscription-random-hint {
color: #ff0000;
font-weight: 700;
}

.subscription-price-row {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}

#subscription-shuffle {
padding: 0;
border: 0;
background: transparent;
font-size: clamp(2.1rem, 10vw, 3.3rem);
line-height: 1;
cursor: pointer;
color: #ff0000;
font-family: "Arial Narrow", Arial, sans-serif;
transition: transform 150ms ease;
transform: scale(1);
transform-origin: 50% 50%;
}

#subscription-shuffle.is-animating {
transform: scale(1.16);
}

#subscription-price {
display: inline-flex;
align-items: flex-end;
font-size: clamp(1.55rem, 6.9vw, 2.4rem);
line-height: 0.95;
font-weight: 700;
color: #fff;
white-space: nowrap;
}

#subscription-price::after {
content: "/trimestre";
font-size: clamp(0.82rem, 2.7vw, 1.06rem);
font-weight: 400;
margin-left: 5px;
padding-bottom: 3px;
}

#message-container {
width: 100%;
margin: 10px 0 20px;
}

#message-container label {
display: block;
margin-bottom: 10px;
color: #fff;
font-size: inherit;
font-weight: 400;
}

#subscription-user-message {
width: min(250px, 80%);
height: 30px;
min-height: 30px;
padding: 5px 10px;
border: 2px solid #fff;
border-radius: 0;
background: #000;
color: #fff;
font-size: inherit;
text-align: center;
display: block;
margin: 0 auto;
overflow: hidden;
resize: none;
font-family: "Arial Narrow", Arial, sans-serif;
}

#subscription-user-message::placeholder {
color: rgba(255, 255, 255, 0.9);
}

#subscription-join-button {
display: block;
width: min(240px, 74%);
height: auto;
border: 0;
padding: 0;
margin: 0 auto;
background: transparent;
cursor: pointer;
line-height: 0;
transition: transform 140ms ease;
}

#subscription-join-button:hover {
transform: translateY(-1px);
}

#subscription-join-button img {
display: block;
width: 100%;
height: auto;
image-rendering: pixelated;
}

.info-text {
font-size: inherit;
line-height: 1.25;
color: #dddddd;
text-align: center;
margin: 8px 0 2px;
font-family: "Arial Narrow", Arial, sans-serif;
font-weight: 400;
}

.cars-burst-layer {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
pointer-events: none;
overflow: visible;
z-index: 5;
}

.fold-controls {
position: absolute;
left: 50%;
right: auto;
transform: translate(-50%, 6px);
bottom: clamp(64px, 8.2vw, 96px);
display: flex;
flex-direction: column;
gap: 0;
z-index: 20;
align-items: center;
}

.fold-petrol-btn,
.fold-cars-btn {
position: relative;
height: 30px;
padding: 0 12px;
border: 1px solid rgba(255, 190, 130, 0.45);
border-radius: 5px;
background: linear-gradient(180deg, #5b220e 0%, #2d1208 100%);
color: #ffd8ae;
font-size: clamp(0.62rem, 1.2vw, 0.78rem);
font-family: var(--font-main);
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
cursor: pointer;
transition: transform 140ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.fold-petrol-gif-btn {
width: clamp(99px, 11.7vw, 138px);
height: 33px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: visible;
--petrol-shift-x: 4px;
--petrol-shift-y: 53px;
--petrol-gas-lift: 4px;
--petrol-idle-rotation: -5deg;
--petrol-active-rotation: 90deg;
--petrol-symbol-offset-x: -7px;
--petrol-symbol-offset-y: 17px;
}

.petrol-gas-gif {
display: block;
width: 100%;
height: auto;
image-rendering: pixelated;
filter:
drop-shadow(1px 0 0 rgba(0, 0, 0, 0.5))
drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.5))
drop-shadow(0 1px 0 rgba(0, 0, 0, 0.5))
drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.5))
drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.5))
drop-shadow(-1px 1px 0 rgba(0, 0, 0, 0.5))
drop-shadow(1px -1px 0 rgba(0, 0, 0, 0.5))
drop-shadow(-1px -1px 0 rgba(0, 0, 0, 0.5))
drop-shadow(0 5px 10px rgba(0, 0, 0, 0.58));
transform: translate(var(--petrol-shift-x), calc(var(--petrol-shift-y) + var(--petrol-gas-lift))) rotate(var(--petrol-idle-rotation));
transform-origin: center;
transition: transform 220ms ease, opacity 140ms ease;
}

.fold-petrol-gif-btn:not(.is-active):not(.active):hover .petrol-gas-gif,
.fold-petrol-gif-btn:not(.is-active):not(.active):focus-visible .petrol-gas-gif {
animation: gasVibrate 110ms steps(2) infinite;
}

.fold-petrol-gif-btn:not(.is-active):not(.active):hover .petrol-warning-symbol-gif,
.fold-petrol-gif-btn:not(.is-active):not(.active):focus-visible .petrol-warning-symbol-gif {
animation: gasSymbolVibrate 110ms steps(2) infinite;
}

.fold-petrol-gif-btn.is-active .petrol-gas-gif,
.fold-petrol-gif-btn.active .petrol-gas-gif {
animation: none;
transform: translate(var(--petrol-shift-x), calc(var(--petrol-shift-y) + var(--petrol-gas-lift)))
rotate(var(--petrol-active-rotation));
}

.fold-petrol-gif-btn.is-active .petrol-warning-symbol-gif,
.fold-petrol-gif-btn.active .petrol-warning-symbol-gif {
animation: none;
transform: translate(
calc(-50% + var(--petrol-shift-x) + var(--petrol-symbol-offset-x)),
calc(-50% + var(--petrol-shift-y) + var(--petrol-symbol-offset-y))
) rotate(var(--petrol-active-rotation));
}

.petrol-warning-symbol-gif {
position: absolute;
top: 50%;
left: 50%;
transform: translate(
calc(-50% + var(--petrol-shift-x) + var(--petrol-symbol-offset-x)),
calc(-50% + var(--petrol-shift-y) + var(--petrol-symbol-offset-y))
) rotate(var(--petrol-idle-rotation));
width: clamp(20px, 2.2vw, 30px);
height: auto;
image-rendering: pixelated;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
pointer-events: none;
transition: transform 220ms ease, opacity 140ms ease;
}

.fold-petrol-gif-btn.is-petrol-visual-hidden .petrol-gas-gif,
.fold-petrol-gif-btn.is-petrol-visual-hidden .petrol-warning-symbol-gif {
opacity: 0;
}

.petrol-status-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

.fold-cars-btn {
border-color: rgba(161, 187, 230, 0.55);
background: linear-gradient(180deg, #1a2638 0%, #101926 100%);
color: #d8e8ff;
}

.fold-petrol-btn:hover,
.fold-cars-btn:hover {
transform: translateY(-1px);
}

.fold-petrol-btn.is-active,
.fold-petrol-btn.active {
filter: drop-shadow(0 0 12px rgba(255, 114, 32, 0.72));
}

.fold-petrol-gif-btn.is-active,
.fold-petrol-gif-btn.active {
transform: translateY(-1px) scale(1.02);
}

.fold-cars-btn.is-off {
border-color: rgba(122, 135, 156, 0.56);
background: linear-gradient(180deg, #222831 0%, #171c22 100%);
color: #b8c0cb;
box-shadow: none;
}

.cars-toggle-site-bottom {
width: min(1240px, 96vw);
margin: 0 auto clamp(22px, 4.5vw, 46px);
display: flex;
justify-content: center;
}

.burst-car {
position: absolute;
left: 50%;
top: 50%;
width: 64px;
height: auto;
opacity: 0;
transform: translate(-50%, -50%) rotate(var(--burst-rot-start, 0deg)) scale(var(--burst-scale-start, 1));
transform-origin: center;
image-rendering: pixelated;
will-change: transform, opacity;
}

.burst-car.is-flying {
animation-name: carBurstFly;
animation-duration: 2200ms;
animation-timing-function: cubic-bezier(0.12, 0.68, 0.22, 0.98);
animation-fill-mode: forwards;
}

.fire-line {
width: 100vw;
height: 100vh;
height: 100svh;
display: block;
background: transparent;
image-rendering: pixelated;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
z-index: 4;
}

.journal {
background-color: rgb(255, 233, 0);
background-image: url("assets/media/hero/underfold.png");
background-repeat: no-repeat;
background-position: center top;
background-size: 100% auto;
color: #111;
position: relative;
margin-top: 0;
padding: clamp(42px, 6.8vw, 80px) 0 clamp(68px, 10vw, 118px);
}

.journal::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -8px;
height: 8px;
background-image: url("assets/media/hero/underfold.png");
background-repeat: no-repeat;
background-position: center top;
background-size: 100% auto;
pointer-events: none;
}

.journal-inner {
width: min(1080px, 94vw);
margin: 0 auto;
text-align: center;
}

.journal-fire-line {
display: block;
width: min(760px, 96vw);
height: auto;
margin: 0 auto clamp(5px, 1vw, 10px);
image-rendering: pixelated;
}

.journal-title {
margin: clamp(4px, 0.8vw, 8px) 0 0;
font-size: clamp(2rem, 4.6vw, 3.2rem);
letter-spacing: -0.03em;
font-family: "Arial Narrow", Arial, sans-serif;
font-style: normal;
font-weight: 400;
text-transform: none;
color: #000;
background: transparent;
}

.journal-tagline {
margin: 0 auto 0;
width: fit-content;
max-width: none;
line-height: 1.08;
font-size: clamp(0.72rem, 1.75vw, 1.28rem);
font-weight: 400;
text-transform: none;
white-space: normal;
font-family: "Arial Narrow", Arial, sans-serif;
color: #000;
}

.journal-title strong,
.journal-tagline strong {
font-weight: 700;
}

.covers {
margin: clamp(32px, 5vw, 56px) auto 0;
display: grid;
grid-template-columns: repeat(4, minmax(145px, 1fr));
gap: clamp(24px, 3.4vw, 44px);
max-width: 1160px;
perspective: 1400px;
}

.cover {
aspect-ratio: 1 / 1;
position: relative;
display: block;
text-decoration: none;
container-type: inline-size;
--cover-depth: 4px;
--cover-depth: clamp(3px, calc(100cqw * 26 / 1395), 7px);
--cover-half-depth: calc(var(--cover-depth) / 2);
--cover-seam-overlap: 0.8px;
--cover-side-thickness: calc(var(--cover-depth) + var(--cover-seam-overlap));
--cover-side-left: url("assets/journal/tranche/tranche gauche.png");
--cover-side-other: url("assets/journal/tranche/tranche reste.png");
overflow: visible;
box-shadow: none;
transition: transform 180ms ease, box-shadow 180ms ease;
transform: rotate(var(--tilt, 0deg));
transform-style: preserve-3d;
}

.cover-inner {
position: relative;
width: 100%;
height: 100%;
display: block;
transform-style: preserve-3d;
animation: coverTwirl var(--twirl-duration, 10s) linear infinite;
animation-delay: var(--twirl-delay, 0s);
will-change: transform;
}

.cover-inner::before,
.cover-inner::after {
content: "";
position: absolute;
top: 0;
height: 100%;
width: var(--cover-side-thickness);
pointer-events: none;
background: #fff;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}

.cover-inner::before {
left: 0;
transform: translateX(calc(var(--cover-side-thickness) * -0.5)) rotateY(-90deg);
transform-origin: center center;
background: var(--cover-side-left) center / 100% 100% no-repeat;
image-rendering: crisp-edges;
filter: saturate(0.92) contrast(1.02);
}

.cover-inner::after {
right: 0;
transform: translateX(calc(var(--cover-side-thickness) * 0.5)) rotateY(90deg);
transform-origin: center center;
background: var(--cover-side-other) center / 100% 100% no-repeat;
}

.cover-front::before,
.cover-front::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: var(--cover-side-thickness);
pointer-events: none;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
background: var(--cover-side-other) left center / auto 100% repeat-x;
}

.cover-front::before {
top: 0;
transform-origin: center center;
transform: translateY(calc(var(--cover-side-thickness) * -0.5)) rotateX(90deg);
}

.cover-front::after {
bottom: 0;
transform-origin: center center;
transform: translateY(calc(var(--cover-side-thickness) * 0.5)) rotateX(-90deg);
}

.cover-face {
position: absolute;
inset: 0;
overflow: hidden;
border: 0;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
box-sizing: border-box;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}

.cover-front {
transform: translateZ(var(--cover-half-depth));
overflow: visible;
transform-style: preserve-3d;
}

.cover-back {
transform: rotateY(180deg) translateZ(var(--cover-half-depth));
background: #060606;
}

.cover-back-art {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
filter: saturate(0.95) contrast(1.06);
}

.cover-pj1 {
--tilt: -1.2deg;
--twirl-duration: 9.8s;
--twirl-duration-hover: 6.9s;
--twirl-delay: -1.4s;
}

.cover-pj2 {
--tilt: 1deg;
--twirl-duration: 9s;
--twirl-duration-hover: 6.3s;
--twirl-delay: -3.1s;
}

.cover-pj3 {
--tilt: -0.8deg;
--twirl-duration: 10.5s;
--twirl-duration-hover: 7.4s;
--twirl-delay: -5.3s;
}

.cover-pj4 {
--tilt: 1.35deg;
--twirl-duration: 9.3s;
--twirl-duration-hover: 6.8s;
--twirl-delay: -2.2s;
cursor: default;
isolation: isolate;
}

.cover-pj4 .cover-front,
.cover-pj4 .cover-back {
overflow: hidden;
}

.cover-pj4 .cover-art,
.cover-pj4 .cover-plastic,
.cover-pj4 .cover-back-art {
image-rendering: pixelated;
image-rendering: crisp-edges;
transform: scale(1.025);
filter:
blur(clamp(2px, 0.36vw, 4px))
saturate(0.68)
contrast(1.01)
brightness(0.86);
}

.cover-3d:hover,
.cover-3d:focus-visible {
transform: rotate(calc(var(--tilt, 0deg) + 0.35deg)) translateY(-1px);
}

a.cover,
a.cover .cover-inner,
a.cover .cover-face {
cursor: pointer;
}

.cover-art {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}

.cover-plastic {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
opacity: 0.72;
mix-blend-mode: screen;
}

.cover-code {
position: absolute;
left: 9px;
bottom: 9px;
margin: 0;
padding: 0.12rem 0.4rem;
font-size: clamp(0.9rem, 1.3vw, 1.14rem);
color: #fff;
background: rgba(0, 0, 0, 0.62);
border: 1px solid rgba(255, 255, 255, 0.6);
z-index: 8;
}

.cover-pj4-overlay {
position: absolute;
inset: 0;
padding: clamp(10px, 1vw, 14px);
display: flex;
align-items: center;
justify-content: center;
z-index: 12;
opacity: 0;
transition: opacity 140ms ease;
pointer-events: none;
transform: translateZ(160px);
transform-style: flat;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}

.cover-pj4-cta {
width: min(88%, 210px);
min-height: clamp(86px, 15vw, 122px);
padding: clamp(12px, 1.2vw, 16px);
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.88);
background: rgba(0, 0, 0, 0.9);
color: #fff;
font-family: "Arial Narrow", Arial, "Helvetica Neue", sans-serif;
font-size: clamp(0.66rem, 0.92vw, 0.84rem);
line-height: 1.18;
letter-spacing: 0.04em;
text-transform: uppercase;
box-shadow:
0 10px 24px rgba(0, 0, 0, 0.44),
inset 0 0 0 1px rgba(255, 255, 255, 0.14);
cursor: pointer;
opacity: 0;
transform: translateY(8px) scale(0.97);
transition: opacity 140ms ease, transform 140ms ease, background 140ms ease, border-color 140ms ease;
pointer-events: none;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}

.cover-pj4-cta:hover,
.cover-pj4-cta:focus-visible {
background: rgba(10, 10, 10, 0.98);
border-color: #fff;
outline: none;
}

.cover-pj4:hover .cover-pj4-overlay,
.cover-pj4:focus-within .cover-pj4-overlay,
.cover-pj4.is-mobile-open .cover-pj4-overlay {
opacity: 1;
}

.cover-pj4:hover .cover-pj4-cta,
.cover-pj4:focus-within .cover-pj4-cta,
.cover-pj4.is-mobile-open .cover-pj4-cta {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
.cover-inner {
animation: none;
transform: rotateX(0deg) rotateY(0deg);
}

.speed-rush-overlay {
display: none;
}

body.speed-rush-active .page-noise {
animation: none;
}
}

@keyframes speedNoiseShift {
0% {
transform: translate3d(0, 0, 0);
}
25% {
transform: translate3d(-0.22px, 0.22px, 0);
}
50% {
transform: translate3d(0.3px, -0.2px, 0);
}
75% {
transform: translate3d(-0.25px, 0.16px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}

@keyframes speedRushTunnel {
0% {
transform:
rotate(var(--speed-rush-overlay-rotate))
scale(calc(0.9 + var(--speed-rush-overlay-depth) * 0.18))
scaleX(calc(1 + var(--speed-rush-overlay-stretch) * 0.08));
}
100% {
transform:
rotate(calc(var(--speed-rush-overlay-rotate) + 22deg))
scale(calc(1.34 + var(--speed-rush-overlay-depth) * 0.56))
scaleX(calc(1.2 + var(--speed-rush-overlay-stretch) * 0.28));
}
}

@keyframes speedRushTunnelAlt {
0% {
transform:
rotate(calc(var(--speed-rush-overlay-rotate) * -0.6))
scale(calc(0.86 + var(--speed-rush-overlay-depth) * 0.14))
scaleY(calc(1 + var(--speed-rush-overlay-stretch) * 0.06));
}
100% {
transform:
rotate(calc(var(--speed-rush-overlay-rotate) - 30deg))
scale(calc(1.42 + var(--speed-rush-overlay-depth) * 0.46))
scaleY(calc(1.28 + var(--speed-rush-overlay-stretch) * 0.26));
}
}

@keyframes coverTwirl {
0% {
transform: rotateX(-12deg) rotateY(0deg) rotateZ(0deg) scale(1);
}
25% {
transform: rotateX(9deg) rotateY(90deg) rotateZ(1.4deg) scale(1.015);
}
50% {
transform: rotateX(13deg) rotateY(180deg) rotateZ(0deg) scale(1.025);
}
75% {
transform: rotateX(-9deg) rotateY(270deg) rotateZ(-1.2deg) scale(1.015);
}
100% {
transform: rotateX(-12deg) rotateY(360deg) rotateZ(0deg) scale(1);
}
}

.cover-new-badge {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: clamp(74px, 12vw, 128px);
height: auto;
z-index: 3;
filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
animation: spinNew 3s linear infinite;
pointer-events: none;
}

.cover-free-badge {
position: absolute;
top: 7px;
right: 7px;
width: clamp(54px, 8vw, 98px);
height: auto;
z-index: 6;
image-rendering: pixelated;
pointer-events: none;
}

.mini-jam {
width: 100vw;
margin: 0 calc(50% - 50vw) clamp(10px, 2vw, 22px);
padding-top: 0;
}

.mini-jam-toolbar {
display: flex;
align-items: center;
justify-content: center;
padding: 6px clamp(8px, 1.1vw, 14px) 0;
position: relative;
z-index: 45;
}

.mini-jam-drift-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 3px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
line-height: 0;
}

.mini-jam-drift-btn:hover {
transform: translateY(-1px);
}

.mini-jam-drift-btn[disabled] {
opacity: 0.58;
cursor: default;
transform: none;
}

.mini-jam-drift-btn.is-hidden {
display: none;
}

.mini-jam-drift-icon {
display: block;
width: auto;
height: 42px;
image-rendering: pixelated;
}

.mini-jam-drift-word {
height: 42px;
}

.mini-jam-drift-arrow {
height: 12px;
}

.mini-jam-drift-arrow-right {
transform: scaleX(-1);
}

.mini-jam-stage {
position: relative;
overflow: hidden;
}

.mini-jam-road-signs {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 6;
}

.mini-jam-road-sign {
position: absolute;
width: clamp(18px, 2.2vw, 30px);
height: auto;
image-rendering: pixelated;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.mini-jam-road-sign-l1 {
left: clamp(2px, 0.5vw, 8px);
top: 25%;
transform: translateY(-50%);
}

.mini-jam-road-sign-l2 {
left: clamp(2px, 0.5vw, 8px);
top: 75%;
transform: translateY(-50%);
}

.mini-jam-road-sign-r1 {
right: clamp(2px, 0.5vw, 8px);
top: 25%;
transform: translateY(-50%) scaleX(-1);
}

.mini-jam-road-sign-r2 {
right: clamp(2px, 0.5vw, 8px);
top: 75%;
transform: translateY(-50%) scaleX(-1);
}

.mini-jam-roads {
display: grid;
gap: 0;
position: relative;
z-index: 2;
}

.mini-jam-lane {
position: relative;
height: clamp(46px, 7vh, 64px);
overflow: hidden;
background: #000;
border-left: 0;
border-right: 0;
}

.mini-jam-lane::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 1px;
background:
repeating-linear-gradient(
90deg,
transparent 0px,
transparent 7px,
rgba(255, 255, 255, 0.84) 7px,
rgba(255, 255, 255, 0.84) 11px,
transparent 11px,
transparent 17px
);
pointer-events: none;
z-index: 2;
}

.mini-jam-lane::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.82)) top left / 100% 1px no-repeat,
linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.82)) bottom left / 100% 1px no-repeat;
pointer-events: none;
z-index: 1;
}

.mini-jam-car {
position: absolute;
left: 0;
top: 50%;
width: 48px;
height: 27px;
object-fit: fill;
user-select: none;
pointer-events: auto;
cursor: pointer;
z-index: 5;
image-rendering: auto;
transform: translate3d(0, -50%, 0);
}

.mini-jam-drift-layer {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 8;
}

.mini-jam-drift-layer.is-page-drift {
position: fixed;
inset: 0;
z-index: 42;
}

.mini-jam-drift-car {
top: 0;
left: 0;
transform-origin: 50% 50%;
z-index: 9;
}

.mini-jam-explosion {
position: absolute;
left: 0;
top: 50%;
width: 48px;
height: auto;
pointer-events: none;
z-index: 10;
image-rendering: auto;
transform: translate3d(-50%, -50%, 0);
}

.cta-adhesion-button {
display: block;
width: min(280px, 58vw);
margin: clamp(24px, 4vw, 38px) auto 0;
line-height: 0;
text-decoration: none;
transition: transform 140ms ease;
}

.cta-adhesion-button:hover {
transform: translateY(-2px);
}

.cta-adhesion-button img {
display: block;
width: 100%;
height: auto;
image-rendering: pixelated;
}

.cta-adhesion-button-drifts {
margin: clamp(16px, 2.5vw, 30px) auto clamp(12px, 2.2vw, 24px);
}

.drifts-manifesto {
margin: clamp(54px, 9vw, 90px) auto 0;
width: min(1080px, 94vw);
font-size: clamp(0.48rem, 1.35vw, 1.2rem);
line-height: 0.9;
font-style: italic;
font-weight: 400;
font-family: "Times New Roman", Times, serif;
text-transform: uppercase;
letter-spacing: 0.006em;
text-align: center;
transform: scaleX(1.06);
transform-origin: center;
}

.adhesion-arrow-small {
display: block;
width: clamp(34px, 4.4vw, 56px);
height: auto;
margin: -4px auto 10px;
pointer-events: none;
}

.journal-note {
margin: 0.32rem auto clamp(14px, 2.6vw, 30px);
width: min(1240px, 96vw);
text-align: left;
font-size: 0.78rem;
font-style: normal;
font-family: "Arial Narrow", Arial, "Helvetica Neue", sans-serif;
letter-spacing: 0.07em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.74);
}

.drift-table-line {
display: block;
width: min(220px, 38vw);
height: auto;
margin: 0 auto clamp(8px, 1.5vw, 14px);
image-rendering: pixelated;
}



.drifts {
background: #000;
color: #fff;
padding: 0 0 clamp(80px, 10vw, 140px);
font-family: "Arial Narrow", Arial, "Helvetica Neue", sans-serif;
font-weight: 400;
}

.drifts-layout {
width: 100%;
margin: 0 auto;
}

.drift-ledger {
width: min(1240px, 96vw);
margin: 0 auto;
border: 1px solid rgba(255, 255, 255, 0.58);
background: rgba(0, 0, 0, 0.78);
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42);
overflow-x: auto;
overflow-y: hidden;
--drift-col-id: 15ch;
--drift-col-title-min: 220px;
--drift-col-date: 9.5ch;
--drift-col-zone: 8.5ch;
--drift-col-sign: 6ch;
}

.drift-table-head,
.drift-row {
display: grid;
grid-template-columns:
  var(--drift-col-id)
  minmax(var(--drift-col-title-min), 1fr)
  var(--drift-col-date)
  var(--drift-col-zone)
  var(--drift-col-sign);
align-items: stretch;
min-width: 620px;
}

.drift-table-head {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.drift-list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}

.ads-banners-section {
width: 100vw;
margin: 0 calc(50% - 50vw);
padding-top: 0;
border-top: 0;
background: #fff;
}

.ads-banners-grid {
display: flex;
flex-direction: column;
gap: 0;
background: #fff;
}

.ads-banners-row,
.ads-banners-row.is-four,
.ads-banners-row.is-five {
display: grid;
gap: 0;
align-items: stretch;
}

.ads-banners-row.is-four {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ads-banners-row.is-three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ads-banners-row.is-five {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ads-banner-item {
	padding: 0;
	display: flex;
	align-items: stretch;
	justify-content: stretch;
	width: 100%;
	overflow: hidden;
	border: none;
	background: transparent;
	line-height: 0;
	height: clamp(24px, 2.7vw, 36px);
}

.ads-banner-gif {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: none;
	image-rendering: pixelated;
	background: transparent;
}

.drift-row {
cursor: default;
transition: background 160ms ease;
font-weight: 400;
font-family: "Arial Narrow", Arial, "Helvetica Neue", sans-serif;
text-transform: uppercase;
background: rgba(0, 0, 0, 0.42);
border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}

.drift-row .col,
.drift-row .col * {
cursor: default;
}

.drift-row:last-child {
border-bottom: 0;
}

.drift-row:hover,
.drift-row:focus-within,
.drift-row.is-active {
background: rgba(255, 255, 255, 0.1);
}

.col {
display: flex;
align-items: center;
justify-content: flex-start;
font-size: clamp(0.88rem, 1.08vw, 1rem);
line-height: 1.16;
font-weight: 400;
letter-spacing: 0.015em;
text-align: left;
text-transform: uppercase;
padding: 0.5rem 0.64rem;
border-right: 1px solid rgba(255, 255, 255, 0.23);
background: transparent;
min-height: 2.56rem;
font-family: inherit;
white-space: nowrap;
}

.drift-table-head .col {
font-family: "Arial Narrow", Arial, "Helvetica Neue", sans-serif;
font-size: clamp(0.74rem, 0.9vw, 0.84rem);
font-weight: 700;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.82);
min-height: 2.12rem;
}

.drift-row .col:last-child,
.drift-table-head .col:last-child {
border-right: 0;
}

.drift-row .col + .col::before {
content: none;
}

.col-title {
text-transform: uppercase;
white-space: normal;
line-height: 1.12;
}

.col-date {
text-transform: uppercase;
}

.col-location {
text-transform: uppercase;
text-align: left;
font-family: "Arial Narrow", Arial, "Helvetica Neue", sans-serif;
letter-spacing: 0.02em;
}

.col-symbol {
text-align: center;
color: rgba(255, 255, 255, 0.9);
font-size: 0.98rem;
justify-content: center;
letter-spacing: 0.05em;
}

.new-badge {
height: 28px;
width: auto;
object-fit: contain;
display: block;
}

.drift-number {
display: inline-block;
}

.col-drift-id {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 0.32rem;
text-align: left;
text-transform: uppercase;
white-space: nowrap;
font-family: "Arial Narrow", Arial, "Helvetica Neue", sans-serif;
letter-spacing: 0.02em;
font-weight: 700;
}

.new-badge-inline {
height: 15px;
width: auto;
object-fit: contain;
display: block;
transform: translateY(-1px);
}

.next-separator {
margin: 0 0.34rem;
color: rgba(255, 255, 255, 0.78);
}

.participer-link {
margin-left: 0.36rem;
color: #ff2b2b;
text-decoration: underline;
text-underline-offset: 2px;
font-size: 0.86em;
letter-spacing: 0.035em;
font-weight: 700;
text-transform: uppercase;
}

.participer-link:hover,
.participer-link:focus-visible {
color: #ff4f4f;
}

.drift-hover-preview {
position: fixed;
left: 0;
top: 0;
width: 260px;
height: 180px;
z-index: 130;
pointer-events: none;
opacity: 0;
transform: translate3d(-9999px, -9999px, 0);
transition: opacity 120ms ease;
}

.drift-hover-preview.is-visible {
opacity: 1;
}

.drift-hover-preview img,
.drift-hover-preview video {
width: 100%;
height: 100%;
object-fit: contain;
border: 1px solid rgba(255, 255, 255, 0.4);
background: #111;
box-shadow: 0 18px 30px rgba(0, 0, 0, 0.5);
}

.drift-hover-preview video {
display: none;
}

.drift-hover-preview.is-video img {
display: none;
}

.drift-hover-preview.is-video video {
display: block;
}

.home-footer {
text-align: center;
width: min(1000px, 94vw);
margin: 0 auto;
padding: clamp(28px, 5vw, 42px) 0 clamp(28px, 8vw, 52px);
position: relative;
z-index: 2;
}

.home-footer::before {
content: "";
position: absolute;
left: 50%;
top: 0;
width: 100vw;
height: 100%;
transform: translateX(-50%);
background: #000;
z-index: -1;
}

.footer-autoradio {
display: block;
width: clamp(72px, 9vw, 120px);
height: auto;
margin: 0;
image-rendering: pixelated;
}

.home-footer p {
margin: 0;
font-size: clamp(0.65rem, 1.2vw, 0.9rem);
}

.footer-email,
.footer-address {
display: block;
}

.footer-address {
margin-top: 0.78rem;
}

.footer-bottom {
margin-top: clamp(18px, 5vw, 34px);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 14px;
}

.about-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 0;
height: auto;
padding: 0;
border: none;
background: transparent;
text-decoration: none;
}

.about-btn img {
width: clamp(78px, 12vw, 128px);
height: auto;
display: block;
}

.page-japan-link {
display: block;
line-height: 0;
text-decoration: none;
transition: transform 120ms ease;
}

.page-japan-link-left:hover {
transform: translateX(-2px);
}

.page-japan-link-right:hover {
transform: translateX(2px);
}

.page-japan-link-left {
margin-top: -10px;
}

.page-japan-link img {
display: block;
width: clamp(74px, 10vw, 120px);
height: auto;
image-rendering: pixelated;
}

.autoradio-strip {
width: 100vw;
margin: 0 calc(50% - 50vw);
padding: clamp(3px, 0.7vw, 6px) 0;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(10px, 2vw, 24px);
}

@media (max-width: 1080px) {
.drift-ledger {
--drift-col-id: 14ch;
--drift-col-title-min: 210px;
--drift-col-date: 9ch;
--drift-col-zone: 8ch;
--drift-col-sign: 5.5ch;
}

.col {
padding: 0.44rem 0.52rem;
min-height: 2.28rem;
font-size: clamp(0.82rem, 1.04vw, 0.94rem);
}

.drift-table-head .col {
min-height: 1.98rem;
font-size: clamp(0.67rem, 0.8vw, 0.76rem);
}

.new-badge {
height: 24px;
}

.ads-banners-grid {
gap: 0;
}

.ads-banners-row,
.ads-banners-row.is-four,
.ads-banners-row.is-five {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ads-banners-row.is-three {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ads-banner-item {
height: clamp(22px, 3.7vw, 32px);
}
}

@media (max-width: 860px) {
.covers {
grid-template-columns: repeat(2, minmax(120px, 1fr));
}

.mini-jam {
margin-bottom: clamp(10px, 2.4vw, 18px);
}

.mini-jam-toolbar {
padding-inline: clamp(6px, 1vw, 10px);
}

.drift-table-line {
margin-bottom: clamp(8px, 1.8vw, 12px);
}

.mini-jam-lane {
height: clamp(42px, 7vh, 58px);
}

.journal {
padding: clamp(34px, 6vw, 58px) 0 clamp(54px, 8.2vw, 90px);
}

.journal-fire-line {
width: min(640px, 92vw);
}

.journal-title {
font-size: clamp(1.72rem, 4.6vw, 2.5rem);
}

.journal-tagline {
font-size: clamp(0.62rem, 1.8vw, 1.02rem);
}

.hero {
padding-top: 64px;
}

.cta-whatsapp-button {
width: min(340px, 58vw);
margin-top: -0.95rem;
}

.cars-burst-layer {
inset: 0;
width: 100%;
height: 100%;
}

.fold-controls {
left: 50%;
right: auto;
transform: translate(-50%, 5px);
bottom: clamp(58px, 12vw, 88px);
gap: 5px;
align-items: center;
}

.fold-petrol-btn,
.fold-cars-btn {
height: 28px;
padding: 0 10px;
}

.fold-petrol-gif-btn {
width: clamp(93px, 15vw, 123px);
height: 33px;
padding: 0;
--petrol-shift-x: 4px;
--petrol-shift-y: 52px;
--petrol-idle-rotation: -4deg;
}

.petrol-gas-gif {
transform: translate(var(--petrol-shift-x), calc(var(--petrol-shift-y) + var(--petrol-gas-lift))) rotate(var(--petrol-idle-rotation));
}

.petrol-warning-symbol-gif {
width: clamp(18px, 3.8vw, 28px);
}

.ads-banners-grid {
gap: 0;
}

.ads-banners-row,
.ads-banners-row.is-four,
.ads-banners-row.is-five {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ads-banner-item {
height: clamp(20px, 5.5vw, 30px);
}
}

@media (max-width: 640px) {
.home {
--fold-bg-y-offset: clamp(-104px, -19vw, -60px);
}

.login-corner-link {
top: clamp(2px, 0.8vw, 8px);
left: clamp(3px, 1.8vw, 10px);
}

.login-corner-gif {
width: clamp(88px, 28vw, 136px);
}

.hero {
padding-top: 12px;
}

.logo {
transform: translate(8px, -68px);
}

.logo-image {
width: clamp(260px, 80vw, 430px);
}

.journal {
padding: clamp(24px, 8.5vw, 40px) 0 clamp(38px, 12vw, 64px);
}

.mini-jam {
margin-bottom: clamp(8px, 3vw, 16px);
}

.mini-jam-toolbar {
padding: 5px 6px 0;
}

.drift-table-line {
width: min(180px, 54vw);
}

.footer-autoradio {
width: clamp(62px, 22vw, 96px);
}

.autoradio-strip {
gap: clamp(8px, 3vw, 14px);
}

.page-japan-link img {
width: clamp(62px, 24vw, 88px);
}

.page-japan-link-left {
margin-top: -6px;
}

.mini-jam-drift-btn {
gap: 1px;
}

.mini-jam-drift-icon {
height: 34px;
}

.mini-jam-drift-arrow {
height: 9px;
}

.mini-jam-road-sign {
width: clamp(14px, 5vw, 22px);
}

.mini-jam-lane {
height: clamp(36px, 11vw, 48px);
}

.mini-jam-car {
width: 44px;
height: 25px;
}

.journal-fire-line {
width: min(520px, 92vw);
margin: 0 auto clamp(4px, 1vw, 8px);
}

.journal-title {
font-size: clamp(1.34rem, 7vw, 1.92rem);
letter-spacing: -0.02em;
}

.journal-tagline {
font-size: clamp(0.52rem, 2.4vw, 0.78rem);
line-height: 1.05;
}

.covers {
grid-template-columns: 1fr;
max-width: 236px;
gap: clamp(12px, 4vw, 18px);
margin: clamp(22px, 6vw, 34px) auto 0;
}

.cover-new-badge {
width: clamp(64px, 22vw, 110px);
}

.manifesto {
transform: translate(-50%, -58px);
font-size: clamp(0.82rem, 3.9vw, 1.36rem);
line-height: 1;
letter-spacing: 0.01em;
}

.countdown-panel {
margin-top: clamp(10px, 2.8vw, 16px);
transform: translateY(-14px);
}

.cta {
min-width: 200px;
font-size: 0.95rem;
}

.cars-burst-layer {
inset: 0;
width: 100%;
height: 100%;
}

.cta-whatsapp-button {
width: min(500px, 100vw);
margin-top: -1.25rem;
position: relative;
left: -12px;
transform: translateY(-26px);
}

.cta-whatsapp-button:hover {
transform: translateY(-28px);
}

.fold-controls {
left: 50%;
right: auto;
transform: translate(-50%, -2px);
bottom: clamp(92px, 29vw, 144px);
gap: 4px;
align-items: center;
}

.fold-petrol-btn,
.fold-cars-btn {
height: 26px;
padding: 0 9px;
font-size: 0.64rem;
}

.fold-petrol-gif-btn {
width: clamp(84px, 25.5vw, 111px);
height: 30px;
padding: 0;
--petrol-shift-x: 4px;
--petrol-shift-y: 2px;
--petrol-idle-rotation: -3deg;
}

.petrol-gas-gif {
transform: translate(var(--petrol-shift-x), calc(var(--petrol-shift-y) + var(--petrol-gas-lift))) rotate(var(--petrol-idle-rotation));
}

.petrol-warning-symbol-gif {
width: clamp(16px, 6.2vw, 24px);
}

.drift-ledger {
width: 100vw;
margin: 0 calc(50% - 50vw);
border-left: 0;
border-right: 0;
--drift-col-id: 11ch;
--drift-col-title-min: 138px;
--drift-col-date: 7ch;
--drift-col-zone: 6.2ch;
--drift-col-sign: 3.8ch;
}

.drift-table-head,
.drift-row {
min-width: 360px;
}

.col {
font-size: clamp(0.6rem, 2.4vw, 0.78rem);
padding: 0.3rem 0.28rem;
min-height: 1.82rem;
letter-spacing: 0.006em;
}

.drift-table-head .col {
min-height: 1.55rem;
font-size: clamp(0.5rem, 1.8vw, 0.64rem);
letter-spacing: 0.04em;
}

.drift-row .col + .col::before {
content: none;
}

.col-symbol {
font-size: 0.86rem;
}

.new-badge-inline {
height: 11px;
transform: translateY(-1px);
}

.ads-banners-grid {
gap: 0;
}

.ads-banners-row,
.ads-banners-row.is-four,
.ads-banners-row.is-five {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.ads-banner-item {
	padding: 0;
	height: auto;
}

.ads-banner-gif {
	height: auto;
}

.whatsapp-popup {
padding: 20px 12px;
}

.whatsapp-popup-close {
top: 6px;
right: 8px;
}

.subscription-popup-panel {
padding: 14px 12px;
--subscription-title-size: clamp(1.68rem, 8vw, 2.15rem);
--subscription-body-size: 0.9rem;
}
}

@media (max-width: 860px) and (hover: none) and (pointer: coarse) {
.whatsapp-popup-overlay,
.subscription-popup-overlay {
padding: 18px 10px;
}

.whatsapp-popup {
width: min(95vw, 560px);
min-height: calc(100svh - 56px);
max-height: calc(100svh - 56px);
padding: 30px 18px 20px;
gap: clamp(14px, 3.4vw, 20px);
}

.whatsapp-popup-close {
top: 10px;
right: 10px;
width: 44px;
height: 44px;
font-size: 2.2rem;
line-height: 1;
}

.whatsapp-popup-text {
max-width: 34ch;
font-size: clamp(1.05rem, 4vw, 1.34rem);
line-height: 1.3;
}

.whatsapp-popup-note {
max-width: 37ch;
font-size: clamp(0.84rem, 3.1vw, 1rem);
line-height: 1.35;
}

.whatsapp-popup-join-image {
width: min(290px, 82vw);
}

.subscription-popup-panel {
width: min(95vw, 620px);
min-height: calc(100svh - 56px);
max-height: calc(100svh - 56px);
padding: 22px 16px 18px;
display: flex;
align-items: center;
--subscription-title-size: clamp(2rem, 8.4vw, 2.9rem);
--subscription-body-size: clamp(1.06rem, 3.6vw, 1.22rem);
}

.subscription-popup-close {
top: 10px;
right: 12px;
width: 44px;
height: 44px;
font-size: 2.2rem;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}

.subscription-manifesto {
line-height: 1.28;
}

#form-container {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
}

#subscription-user-message {
width: min(320px, 90%);
}

.info-text {
line-height: 1.34;
}
}

@keyframes carBurstFly {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotate(var(--burst-rot-start, 0deg)) scale(var(--burst-scale-start, 1));
}
10% {
opacity: 1;
}
78% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate(calc(-50% + var(--burst-dx, 0px)), calc(-50% + var(--burst-dy, 0px)))
rotate(var(--burst-rot-end, 0deg)) scale(var(--burst-scale-end, 0.8));
}
}

@keyframes logoJitter {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(-1px, 1px);
}
50% {
transform: translate(1px, -1px);
}
100% {
transform: translate(0, 0);
}
}

@keyframes gasVibrate {
0% {
transform: translate(calc(var(--petrol-shift-x) + 0px), calc(var(--petrol-shift-y) + var(--petrol-gas-lift) + 0px))
rotate(var(--petrol-idle-rotation));
}
25% {
transform: translate(calc(var(--petrol-shift-x) - 1px), calc(var(--petrol-shift-y) + var(--petrol-gas-lift) - 1px))
rotate(calc(var(--petrol-idle-rotation) + 1deg));
}
50% {
transform: translate(calc(var(--petrol-shift-x) + 1px), calc(var(--petrol-shift-y) + var(--petrol-gas-lift) + 1px))
rotate(calc(var(--petrol-idle-rotation) - 1deg));
}
75% {
transform: translate(calc(var(--petrol-shift-x) - 1px), calc(var(--petrol-shift-y) + var(--petrol-gas-lift) - 1px))
rotate(calc(var(--petrol-idle-rotation) + 0.5deg));
}
100% {
transform: translate(calc(var(--petrol-shift-x) + 0px), calc(var(--petrol-shift-y) + var(--petrol-gas-lift) + 0px))
rotate(var(--petrol-idle-rotation));
}
}

@keyframes gasSymbolVibrate {
0% {
transform: translate(
calc(-50% + var(--petrol-shift-x) + var(--petrol-symbol-offset-x) + 0px),
calc(-50% + var(--petrol-shift-y) + var(--petrol-symbol-offset-y) + 0px)
) rotate(var(--petrol-idle-rotation));
}
25% {
transform: translate(
calc(-50% + var(--petrol-shift-x) + var(--petrol-symbol-offset-x) - 1px),
calc(-50% + var(--petrol-shift-y) + var(--petrol-symbol-offset-y) - 1px)
) rotate(calc(var(--petrol-idle-rotation) + 1deg));
}
50% {
transform: translate(
calc(-50% + var(--petrol-shift-x) + var(--petrol-symbol-offset-x) + 1px),
calc(-50% + var(--petrol-shift-y) + var(--petrol-symbol-offset-y) + 1px)
) rotate(calc(var(--petrol-idle-rotation) - 1deg));
}
75% {
transform: translate(
calc(-50% + var(--petrol-shift-x) + var(--petrol-symbol-offset-x) - 1px),
calc(-50% + var(--petrol-shift-y) + var(--petrol-symbol-offset-y) - 1px)
) rotate(calc(var(--petrol-idle-rotation) + 0.5deg));
}
100% {
transform: translate(
calc(-50% + var(--petrol-shift-x) + var(--petrol-symbol-offset-x) + 0px),
calc(-50% + var(--petrol-shift-y) + var(--petrol-symbol-offset-y) + 0px)
) rotate(var(--petrol-idle-rotation));
}
}

@keyframes spinNew {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}