@font-face {
  font-family: "MCDT Speedee";
  src: url("fonts/speedee-black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

.mcd-teaser {
  --mcdt-bg: oklch(95% 0 0);
  --mcdt-red: oklch(55% 0.23 30);
  --mcdt-fg: oklch(0.129 0.042 264.695);
  --mcdt-date: #e60002;

  --mcdt-font: "MCDT Speedee", ui-sans-serif, system-ui, sans-serif;

  --mcdt-size-big: clamp(236px, -343.2px + 75.41667vw, 960px);
  --mcdt-size-se: 264px;
  --mcdt-size-blizi: clamp(124px, 12px + 14.58333vw, 264px);
  --mcdt-size-neco: var(--mcdt-size-blizi);
  --mcdt-size-hlad: clamp(70px, -85.2px + 20.20833vw, 264px);
  --mcdt-size-opravdu: clamp(84px, -60px + 18.75vw, 264px);
  --mcdt-size-date: clamp(82px, 16.4px + 8.54167vw, 164px);

  --mcdt-tracking: 0.005em;
  --mcdt-tracking-blizi: 0.055em;

  --mcdt-u: clamp(0.44444px, 0.0578704vw, 1px);
  --mcdt-length: 1200vh;
  --mcdt-travel: calc(var(--mcdt-length) - 100vh);
  --mcdt-garnish-clear-by: 0.57;

  position: relative;
  height: var(--mcdt-length);
  margin: 0;
  padding: 0;
  background-color: var(--mcdt-bg);
  font-family: var(--mcdt-font);
  overflow-x: clip;
  overflow-y: clip;
  isolation: isolate;
}

@supports not (color: oklch(0 0 0)) {
  .mcd-teaser {
    --mcdt-bg: #eeeeee;
    --mcdt-red: #d70000;
    --mcdt-fg: #020618;
  }
}

.mcd-teaser *,
.mcd-teaser *::before,
.mcd-teaser *::after {
  box-sizing: border-box;
}

.mcd-teaser__crumb {
  position: absolute;
  width: calc(var(--w) * var(--mcdt-u));
  height: calc(var(--h) * var(--mcdt-u));
  top: min(
    calc(var(--at) * var(--mcdt-travel)),
    calc(var(--mcdt-garnish-clear-by) * var(--mcdt-travel) - var(--h) * var(--mcdt-u))
  );
  pointer-events: none;
  user-select: none;
}

.mcd-teaser__crumb--img1 { --w: 537; --h: 602; }
.mcd-teaser__crumb--img2 { --w: 537; --h: 409; }
.mcd-teaser__crumb--img3 { --w: 846; --h: 372; }
.mcd-teaser__crumb--img4 { --w: 363; --h: 141; }
.mcd-teaser__crumb--img5 { --w: 284; --h: 433; }

.mcd-teaser__crumb--p1 { --at: 0.053; right: calc(  94 * var(--mcdt-u)); }
.mcd-teaser__crumb--p2 { --at: 0.125; left:  calc(  16 * var(--mcdt-u)); }
.mcd-teaser__crumb--p3 { --at: 0.178; left:  calc( 364 * var(--mcdt-u)); }
.mcd-teaser__crumb--p4 { --at: 0.282; right: calc( 135 * var(--mcdt-u)); }
.mcd-teaser__crumb--p5 { --at: 0.301; left:  calc( 207 * var(--mcdt-u)); }
.mcd-teaser__crumb--p6 { --at: 0.396; left:  calc( 229 * var(--mcdt-u)); }
.mcd-teaser__crumb--p7 { --at: 0.503; left:  calc( 361 * var(--mcdt-u)); }
.mcd-teaser__crumb--p8 { --at: 0.550; left:  calc(-131 * var(--mcdt-u)); }

.mcd-teaser__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.mcd-teaser__word {
  position: absolute;
  margin: 0;
  padding: 0 0.08em;
  text-align: center;
  white-space: nowrap;
  text-transform: uppercase;
  line-height: 1;
  font-weight: 900;
  letter-spacing: var(--mcdt-tracking);
  color: var(--mcdt-fg);
  will-change: transform, opacity;
  -webkit-font-smoothing: antialiased;
}

.mcd-teaser__word--hlad {
  inset-inline: 0;
  top: 50%;
  font-size: var(--mcdt-size-hlad);
  color: var(--mcdt-red);
  transform: translateY(-50%);
}

.mcd-teaser__word--seq,
.mcd-teaser__word--big {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.mcd-teaser__word--blizi {
  font-size: var(--mcdt-size-blizi);
  letter-spacing: var(--mcdt-tracking-blizi);
  padding-left: var(--mcdt-tracking-blizi);
}

.mcd-teaser__word--se {
  font-size: var(--mcdt-size-se);
}

.mcd-teaser__word--neco {
  font-size: var(--mcdt-size-neco);
}

.mcd-teaser__word--opravdu {
  font-size: var(--mcdt-size-opravdu);
}

.mcd-teaser__word--big {
  font-size: var(--mcdt-size-big);
}

.mcd-teaser__bun {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(100%);
  opacity: 0;
  will-change: transform, opacity;
}

.mcd-teaser__date {
  position: absolute;
  left: 50%;
  top: 35%;
  margin: 0;
  padding: 0 0.08em;
  text-align: center;
  white-space: nowrap;
  font-size: var(--mcdt-size-date);
  font-weight: 900;
  line-height: 1;
  letter-spacing: var(--mcdt-tracking);
  color: var(--mcdt-date);
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  will-change: transform, opacity;
  -webkit-font-smoothing: antialiased;
}

.mcd-teaser[data-mcd-static] {
  height: 100vh;
  height: 100dvh;
}

.mcd-teaser[data-mcd-static] .mcd-teaser__word,
.mcd-teaser[data-mcd-static] .mcd-teaser__bun,
.mcd-teaser[data-mcd-static] .mcd-teaser__date {
  will-change: auto;
}

.mcd-teaser[data-mcd-static] .mcd-teaser__crumb {
  display: none;
}