/* The hero is the journey's first beat. Visible at once: no scroll-reveal delay. */

@keyframes hero-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* a lens: a soft vignette and a hairline of light on the top edge, over every scene */

.mk-sc {
  position: absolute; inset: 0; overflow: hidden; opacity: 0; transform: scale(1.04);
  transition: opacity .45s var(--mk-ease, cubic-bezier(.22, .61, .36, 1)), transform .9s var(--mk-ease, cubic-bezier(.22, .61, .36, 1));
}
.mk-sp[data-line="0"] .mk-sc[data-i="0"],
.mk-sp[data-line="1"] .mk-sc[data-i="1"],
.mk-sp[data-line="2"] .mk-sc[data-i="2"],
.mk-sp[data-line="3"] .mk-sc[data-i="3"] { opacity: 1; transform: none; transition-delay: .1s; }
.mk-sc [class^="mk-sc__"] { position: absolute; display: block; }

/* ---------- the advert itself: paper, the line, the dotted car, Check now and a QR code; no brand ---------- */
.mk-ad {
  position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto;
  column-gap: 4%; padding: 5.5% 5%; background: #fcfcf9; color: #0b0d10; overflow: hidden;
}
.mk-ad p { margin: 0; }
.mk-ad__h { grid-area: 1 / 1; align-self: center; font-size: 3.1cqi; font-weight: 500; line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }

/* ---------- 2. Radio: the spot on a car's dashboard radio, driving at night ---------- */
.mk-sc--radio { background: linear-gradient(#04060a 0, #08101d 36%, #13203a 52%, #0a0f18 60%, #07090d); }
/* the road ahead through the windscreen, a soft sheen on wet tarmac */
.mk-sc--radio .mk-sc__road {
  left: 0; right: 0; top: calc(50% - 1.6cqi); height: 8cqi;
  clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
  background: linear-gradient(rgb(150 170 210 / .14), rgb(150 170 210 / .03));
}
/* out-of-focus lights: street lamps, tail lights ahead, an oncoming car */
.mk-sc--radio .mk-sc__bokeh {
  left: 0; right: 0; top: calc(50% - 20cqi); height: 22cqi;
  background:
    radial-gradient(circle at 18% 22%, rgb(255 184 96 / .5) 0 1.1cqi, rgb(255 184 96 / .14) 1.5cqi, transparent 2.2cqi),
    radial-gradient(circle at 33% 40%, rgb(255 184 96 / .38) 0 .8cqi, rgb(255 184 96 / .1) 1.1cqi, transparent 1.6cqi),
    radial-gradient(circle at 41% 55%, rgb(255 184 96 / .3) 0 .5cqi, transparent 1cqi),
    radial-gradient(circle at 82% 18%, rgb(255 184 96 / .45) 0 1.4cqi, rgb(255 184 96 / .12) 1.9cqi, transparent 2.6cqi),
    radial-gradient(circle at 67% 42%, rgb(255 184 96 / .34) 0 .8cqi, transparent 1.4cqi),
    radial-gradient(circle at 58% 56%, rgb(255 184 96 / .28) 0 .5cqi, transparent .9cqi),
    radial-gradient(circle at 46.4% 86%, rgb(255 60 60 / .75) 0 .45cqi, rgb(255 60 60 / .2) .8cqi, transparent 1.2cqi),
    radial-gradient(circle at 51.6% 86%, rgb(255 60 60 / .75) 0 .45cqi, rgb(255 60 60 / .2) .8cqi, transparent 1.2cqi),
    radial-gradient(circle at 60% 80%, rgb(230 238 255 / .55) 0 .5cqi, rgb(230 238 255 / .14) .9cqi, transparent 1.4cqi),
    radial-gradient(circle at 26% 78%, rgb(255 60 60 / .4) 0 .35cqi, transparent .8cqi),
    radial-gradient(circle at 28% 78%, rgb(255 60 60 / .4) 0 .35cqi, transparent .8cqi);
}
/* the radio's own light, ghosted in the windscreen above the dash */
.mk-sc--radio .mk-sc__ghost {
  left: 32cqi; width: 36cqi; top: calc(50% - 5.6cqi); height: 6cqi; border-radius: 1cqi; opacity: .5;
  background:
    linear-gradient(90deg, rgb(252 252 249 / .14) 0 22%, transparent 22%),
    linear-gradient(rgb(150 180 255 / 0), rgb(150 180 255 / .12));
  -webkit-mask: linear-gradient(transparent, #000);
  mask: linear-gradient(transparent, #000);
}
/* the cabin: roof lining, A-pillars, the mirror (catching headlights behind) */
.mk-sc--radio .mk-sc__roof {
  left: -10cqi; right: -10cqi; top: -10cqi; height: calc(50% - 7.6cqi);
  border-radius: 0 0 50% 50% / 0 0 5cqi 5cqi; background: linear-gradient(#030405, #0c0e12);
  box-shadow: 0 .15cqi 0 rgb(255 255 255 / .05);
}
.mk-sc--radio .mk-sc__pillar {
  left: 0; width: 15cqi; top: 0; bottom: calc(50% - 2cqi);
  clip-path: polygon(0 0, 100% 0, 18% 100%, 0 100%); background: linear-gradient(100deg, #0b0d11, #050608);
}
.mk-sc--radio .mk-sc__pillar--r { left: auto; right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 82% 100%); background: linear-gradient(260deg, #0b0d11, #050608); }
.mk-sc--radio .mk-sc__mirror {
  left: 41cqi; width: 18cqi; top: calc(50% - 19.2cqi); height: 4.4cqi; border-radius: 1.4cqi 1.4cqi 1.8cqi 1.8cqi;
  background:
    radial-gradient(circle at 34% 55%, rgb(235 242 255 / .6) 0 .35cqi, rgb(235 242 255 / .12) .8cqi, transparent 1.3cqi),
    radial-gradient(circle at 46% 55%, rgb(235 242 255 / .6) 0 .35cqi, rgb(235 242 255 / .12) .8cqi, transparent 1.3cqi),
    linear-gradient(#1a2233, #0b1019);
  box-shadow: 0 0 0 .4cqi #0a0b0e, 0 .5cqi 1cqi rgb(0 0 0 / .6);
}
.mk-sc--radio .mk-sc__mirror::before {
  content: ""; position: absolute; left: 50%; top: -4cqi; width: 1.2cqi; height: 3.7cqi; margin-left: -.6cqi; background: #08090b;
}
/* the dashboard: a soft top edge catching passing street lights */
.mk-sc--radio .mk-sc__dash {
  left: -12cqi; right: -12cqi; top: calc(50% + .2cqi); bottom: 0; overflow: hidden;
  border-radius: 50% 50% 0 0 / 3.6cqi 3.6cqi 0 0;
  background: linear-gradient(#1d222b 0, #11141a 1.4cqi, #0a0c10 7cqi, #060709);
  box-shadow: inset 0 .2cqi 0 rgb(255 255 255 / .08);
}
.mk-sc--radio .mk-sc__pass {
  left: -24cqi; top: 0; width: 22cqi; height: 9cqi;
  background: radial-gradient(closest-side, rgb(255 196 128 / .22), transparent);
  animation: mk-sc-pass 3.6s cubic-bezier(.45, .05, .55, .95) infinite;
}
/* the driver's side: the instrument glow and the steering wheel's rim */
.mk-sc--radio .mk-sc__cluster {
  left: 80cqi; width: 22cqi; top: calc(50% + 1cqi); height: 10cqi;
  background: radial-gradient(closest-side, rgb(110 160 255 / .2), transparent);
}
.mk-sc--radio .mk-sc__wheel {
  left: 79cqi; width: 40cqi; top: calc(50% + 5.4cqi); aspect-ratio: 1; border-radius: 50%;
  border: 2.6cqi solid #0d0f13; border-top-color: #1b1f27;
  box-shadow: inset 0 .2cqi 0 rgb(255 255 255 / .06), 0 -.1cqi 0 rgb(255 255 255 / .07);
}
/* the head unit: a volume and a tuning knob either side of the display */
.mk-sc--radio .mk-sc__unit {
  left: 24cqi; width: 52cqi; top: calc(50% + 3.1cqi); height: 16.4cqi; border-radius: 1.8cqi;
  background: linear-gradient(#232832, #12151b 30%, #0d0f13);
  box-shadow: inset 0 .18cqi 0 rgb(255 255 255 / .1), 0 1.2cqi 2.4cqi -.6cqi rgb(0 0 0 / .8), 0 0 0 1px rgb(0 0 0 / .5);
}
.mk-sc--radio .mk-sc__knob {
  left: 1.9cqi; top: 5.4cqi; width: 5.2cqi; height: 5.2cqi; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, #3b414c, #1a1d23 60%, #121418),
    repeating-conic-gradient(rgb(255 255 255 / .06) 0 4deg, transparent 4deg 10deg);
  box-shadow: 0 0 0 .35cqi #0a0b0e, 0 0 0 .5cqi rgb(143 180 255 / .22), 0 .6cqi 1cqi rgb(0 0 0 / .7);
}
.mk-sc--radio .mk-sc__knob::after {
  content: ""; position: absolute; left: 50%; top: .5cqi; width: .3cqi; height: 1.2cqi; margin-left: -.15cqi; border-radius: 99px;
  background: #8fb4ff; transform-origin: 50% 2.1cqi; transform: rotate(-38deg);
}
.mk-sc--radio .mk-sc__knob--r { left: auto; right: 1.9cqi; }
.mk-sc--radio .mk-sc__knob--r::after { transform: rotate(52deg); }
.mk-sc--radio .mk-sc__screen {
  left: 9.4cqi; right: 9.4cqi; top: 1.5cqi; bottom: 1.5cqi; border-radius: .7cqi; overflow: hidden;
  background: linear-gradient(#0d1524, #070b13);
  box-shadow: 0 0 0 .2cqi #05070a, 0 0 3cqi rgb(80 130 255 / .18);
}
.mk-sc--radio .mk-sc__screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgb(255 255 255 / .07), transparent 38%);
}
/* now playing: the art (paper, the car), Ad 0:30 with live levels, the spoken line as a caption */
.mk-sc--radio .mk-ad {
  inset: 0 0 2.6cqi; padding: 1.5cqi 1.9cqi 0 1.5cqi; background: none; color: #fcfcf9;
  grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 1.6cqi;
}

.mk-sc--radio .mk-ad__meta {
  grid-area: 1 / 2; display: flex; align-items: center; justify-content: space-between; gap: 1cqi;
  font-family: var(--mono, "Geist Mono", ui-monospace, monospace); font-size: .95cqi; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: #8fb4ff;
}
.mk-sc--radio .mk-ad__lvl { display: flex; align-items: flex-end; gap: .28cqi; height: 1.5cqi; }
.mk-sc--radio .mk-ad__lvl i {
  display: block; width: .3cqi; height: 100%; border-radius: 99px; background: #8fb4ff; transform-origin: 50% 100%;
  transform: scaleY(var(--a, .5)); animation: mk-sc-lvl var(--d, .9s) ease-in-out infinite alternate;
}
.mk-sc--radio .mk-ad__lvl i:nth-child(1) { --a: .35; --b: .8; --d: .7s; }
.mk-sc--radio .mk-ad__lvl i:nth-child(2) { --a: .7; --b: .3; --d: .9s; }
.mk-sc--radio .mk-ad__lvl i:nth-child(3) { --a: .5; --b: 1; --d: .62s; }
.mk-sc--radio .mk-ad__lvl i:nth-child(4) { --a: .9; --b: .45; --d: .8s; }
.mk-sc--radio .mk-ad__lvl i:nth-child(5) { --a: .4; --b: .95; --d: .55s; }
.mk-sc--radio .mk-ad__lvl i:nth-child(6) { --a: .75; --b: .35; --d: 1s; }
.mk-sc--radio .mk-ad__lvl i:nth-child(7) { --a: .55; --b: .9; --d: .68s; }
.mk-sc--radio .mk-ad__lvl i:nth-child(8) { --a: 1; --b: .5; --d: .84s; }
.mk-sc--radio .mk-ad__lvl i:nth-child(9) { --a: .45; --b: .85; --d: .6s; }
.mk-sc--radio .mk-ad__lvl i:nth-child(10) { --a: .65; --b: .25; --d: .95s; }
.mk-sc--radio .mk-ad__lvl i:nth-child(11) { --a: .3; --b: .75; --d: .74s; }
.mk-sc--radio .mk-ad__lvl i:nth-child(12) { --a: .6; --b: .95; --d: .58s; }
.mk-sc--radio .mk-ad__lvl i:nth-child(13) { --a: .8; --b: .4; --d: .88s; }
.mk-sc--radio .mk-ad__lvl i:nth-child(14) { --a: .4; --b: .7; --d: .66s; }
.mk-sc--radio .mk-ad__h { grid-area: 2 / 2; font-size: 2.15cqi; line-height: 1.12; color: #fcfcf9; }

/* the tuning scale along the display's foot, with its needle */
.mk-sc--radio .mk-sc__tune {
  left: 1.5cqi; right: 1.9cqi; bottom: .75cqi; height: 1.1cqi;
  background:
    linear-gradient(#0062fe 0 0) 63% 0 / .22cqi 100% no-repeat,
    repeating-linear-gradient(90deg, rgb(143 180 255 / .45) 0 1px, transparent 1px 1.6cqi) 0 100% / 100% 70% no-repeat,
    repeating-linear-gradient(90deg, rgb(143 180 255 / .22) 0 1px, transparent 1px .4cqi) 0 100% / 100% 35% no-repeat;
}
.mk-sc--radio .mk-sc__tune::after {
  content: ""; position: absolute; left: 63%; top: -.2cqi; width: .9cqi; height: .9cqi; margin-left: -.34cqi; border-radius: 50%;
  background: radial-gradient(circle, rgb(0 98 254 / .7), transparent 70%);
}

/* ---------- ambient motion (transform and opacity only) ---------- */

@keyframes mk-sc-lvl { from { transform: scaleY(var(--a, .5)); } to { transform: scaleY(var(--b, 1)); } }
@keyframes mk-sc-pass { 0% { transform: translateX(0); } 70%, 100% { transform: translateX(160cqi); } }
@media (prefers-reduced-motion: reduce) {
  .mk-sc, .mk-sc * , .mk-sc *::before, .mk-sc *::after { animation: none !important; }
  .mk-sc { transform: none; transition: opacity .3s; }
  .mk-sc--radio .mk-sc__pass { opacity: 0; }
}

/* the fourth dot under the face, for the fourth format */
.mk-sp[data-line="3"] .mk-sp__dots i:nth-child(4) { background: #0062fe; }

.mk-sp[data-line="0"] .mk-sc[data-i="0"] *, .mk-sp[data-line="1"] .mk-sc[data-i="1"] *,
.mk-sp[data-line="2"] .mk-sc[data-i="2"] *, .mk-sp[data-line="3"] .mk-sc[data-i="3"] * { animation-play-state: running !important; }

.mk-sp[data-line="0"] .mk-sp__dots i:nth-child(1),
.mk-sp[data-line="1"] .mk-sp__dots i:nth-child(2),
.mk-sp[data-line="2"] .mk-sp__dots i:nth-child(3),
.mk-sp[data-line="3"] .mk-sp__dots i:nth-child(4) { background: #0062fe; }

/* ---------- ?t=…&shot=1: screenshot mode (see lib/core.js) ---------- */

html.jshot *, html.jshot *::before, html.jshot *::after { transition: none !important; animation-duration: 0s !important; }