@font-face {
  font-family: "JZO Display";
  src: url("assets/fonts/Shrikhand-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;
  --cream: #f6e8ad;
  --cream-light: #fff5cc;
  --orange: #eb873b;
  --blue: #285c66;
  --green: #27652f;
  --base: var(--cream);
  --base-soft: var(--cream-light);
  --accent: var(--orange);
  --ink: var(--blue);
  --sprite-ink: var(--accent);
  --ease-organic: cubic-bezier(.22, .76, .33, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: transparent;
}

body {
  font-family: "Trebuchet MS", Arial, sans-serif;
}

.overlay {
  position: relative;
  isolation: isolate;
  width: 100vw;
  height: 100vh;
  min-width: 320px;
  min-height: 180px;
  overflow: hidden;
  color: var(--ink);
  background: var(--base);
  transition: background-color 900ms var(--ease-organic), color 700ms ease;
}

.backdrop,
.paper-wash,
.paper-grain {
  position: absolute;
  inset: 0;
}

.backdrop {
  z-index: -3;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 3% 92%, color-mix(in srgb, var(--accent) 56%, transparent) 0%, transparent 42%),
    radial-gradient(ellipse at 91% 15%, color-mix(in srgb, var(--accent) 34%, transparent) 0%, transparent 39%),
    radial-gradient(ellipse at 52% 54%, color-mix(in srgb, var(--base-soft) 90%, transparent) 0%, transparent 46%),
    radial-gradient(circle at 15% 8%, color-mix(in srgb, var(--cream-light) 86%, transparent) 0 11%, transparent 35%),
    linear-gradient(122deg, var(--base-soft) 0%, var(--base) 43%, color-mix(in srgb, var(--base) 66%, var(--accent)) 100%);
}

.paper-wash {
  opacity: .52;
  background:
    radial-gradient(ellipse at 17% 82%, color-mix(in srgb, var(--accent) 75%, transparent) 0, transparent 38%),
    radial-gradient(ellipse at 76% 10%, color-mix(in srgb, var(--accent) 48%, transparent) 0, transparent 34%),
    radial-gradient(ellipse at 62% 77%, color-mix(in srgb, var(--base-soft) 80%, transparent) 0, transparent 31%);
  filter: blur(8vw);
}

.sun-stain {
  position: absolute;
  border-radius: 50%;
  background: var(--accent);
  opacity: .09;
  filter: blur(1.8vw);
  transition: background 900ms ease;
}

.sun-stain--one {
  width: 34vw;
  height: 44vw;
  left: -13vw;
  bottom: -22vw;
}

.sun-stain--two {
  width: 28vw;
  height: 26vw;
  right: 10vw;
  top: -15vw;
}

.road-frames,
.road-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.road-frames {
  z-index: 4;
}

.road-frame {
  display: none;
  object-fit: cover;
}

.road-frame.is-current {
  display: block;
}

.paper-grain {
  z-index: 3;
  pointer-events: none;
  opacity: .31;
  mix-blend-mode: multiply;
  background-image:
    repeating-radial-gradient(circle at 18% 37%, rgba(67, 54, 30, .17) 0 .55px, transparent .8px 3.5px),
    repeating-linear-gradient(113deg, rgba(255, 255, 255, .15) 0 1px, transparent 1px 5px);
  background-size: 7px 8px, 17px 13px;
  filter: contrast(125%);
}

.stage,
.screen {
  position: absolute;
  inset: 0;
}

.stage {
  z-index: 2;
}

.screen {
  display: none;
}

.screen.is-active {
  display: block;
  animation: screen-in 650ms var(--ease-organic) both;
}

.filter-layer {
  position: absolute;
  z-index: 12;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 450ms ease;
}

.overlay[data-filter="none"] .filter-layer {
  opacity: 0;
}

.overlay[data-filter="warm"] .filter-layer {
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 226, 139, .32), transparent 42%),
    linear-gradient(132deg, rgba(244, 180, 72, .16), rgba(211, 91, 39, .28));
  mix-blend-mode: multiply;
  opacity: var(--filter-strength, .35);
}

.overlay[data-filter="vignette"] .filter-layer {
  background: radial-gradient(ellipse at center, transparent 42%, rgba(21, 52, 58, .82) 100%);
  mix-blend-mode: multiply;
  opacity: var(--filter-strength, .35);
}

.overlay[data-filter="glow"] .filter-layer {
  background: radial-gradient(circle at 49% 43%, rgba(255, 247, 195, .7), rgba(255, 221, 125, .2) 39%, transparent 72%);
  mix-blend-mode: screen;
  opacity: var(--filter-strength, .35);
}

.overlay[data-view="lower-third"] .filter-layer,
.overlay[data-view="transition"] .filter-layer {
  display: none;
}

.overlay[data-view="background"] .scene-transition {
  display: none;
}

.overlay[data-view="background"] .sprite.is-visible {
  opacity: .72;
}

.overlay[data-view="background"] .sprite.is-active {
  opacity: 1;
}

.title-card__eyebrow {
  position: absolute;
  top: 14%;
  left: 29%;
  margin: 0;
  color: var(--ink);
  font-size: clamp(18px, 1.7vw, 33px);
  font-weight: 900;
  letter-spacing: .025em;
}

.title-card__title {
  position: absolute;
  top: 23%;
  left: 10.5%;
  display: flex;
  margin: 0;
  flex-direction: column;
  color: var(--ink);
  font-family: "JZO Display", Georgia, serif;
  font-size: clamp(104px, 11vw, 212px);
  font-weight: 900;
  line-height: .76;
  letter-spacing: -.055em;
}

.title-card__logo {
  position: absolute;
  left: 50%;
  bottom: 3.5%;
  width: clamp(230px, 18vw, 346px);
  height: auto;
  object-fit: contain;
  transform: translateX(-50%);
}

.eyebrow {
  position: absolute;
  margin: 0;
  font-size: clamp(13px, 1.35vw, 26px);
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.display-title {
  position: absolute;
  margin: 0;
  font-family: "JZO Display", Georgia, serif;
  font-size: clamp(68px, 9.8vw, 188px);
  font-weight: 900;
  line-height: .74;
  letter-spacing: -.055em;
  color: var(--ink);
  white-space: pre-line;
  text-wrap: balance;
  filter: drop-shadow(0 2px 0 color-mix(in srgb, var(--base) 65%, transparent));
}

.display-title--wide {
  line-height: .84;
  font-size: clamp(76px, 10.8vw, 208px);
}

.countdown-card {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: min(90vw, 1720px);
  place-items: center;
  padding: 0;
  text-align: center;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -55%) rotate(-.5deg);
}

.support-copy {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .11em;
}

.countdown-clock {
  display: block;
  margin: 0;
  color: var(--cream-light);
  font-family: "JZO Display", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-size: clamp(170px, 22vw, 420px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: .9;
  letter-spacing: -.07em;
  paint-order: stroke fill;
  text-shadow: none;
  -webkit-text-stroke: calc(clamp(1.75px, .16vw, 3.25px) + 10px) var(--blue);
}

.brand-logo {
  position: absolute;
  left: 8%;
  bottom: 6.5%;
  width: clamp(150px, 13vw, 250px);
  height: auto;
  object-fit: contain;
  transform: rotate(2deg);
}

.screen--countdown .brand-logo {
  left: 50%;
  bottom: 4.5%;
  width: clamp(210px, 16vw, 310px);
  transform: translateX(-50%) rotate(1deg);
}

.screen--pause .eyebrow,
.screen--started .eyebrow,
.screen--outro .eyebrow {
  top: 17%;
  left: 12%;
}

.screen--pause .display-title,
.screen--started .display-title,
.screen--outro .display-title {
  top: 27%;
  left: 11.2%;
  max-width: 77vw;
}

.screen--started .display-title {
  max-width: 82vw;
  font-size: clamp(76px, 11.4vw, 219px);
}

.screen--outro .display-title {
  top: 34%;
}

.screen--pause .support-copy,
.screen--started .support-copy,
.screen--outro .support-copy {
  position: absolute;
  left: 12%;
  bottom: 20%;
  max-width: 50vw;
  font-size: clamp(16px, 1.7vw, 33px);
  font-weight: 700;
}

.screen--pause .brand-logo,
.screen--started .brand-logo,
.screen--outro .brand-logo {
  left: auto;
  right: 8%;
}

.screen--lower-third {
  background: transparent;
}

.overlay[data-view="lower-third"] .backdrop,
.overlay[data-view="lower-third"] .sprite-grid {
  display: none;
}

.overlay[data-view="lower-third"] {
  background: transparent;
}

.lower-third {
  --lower-title-size: 47px;
  --lower-subtitle-size: 20px;
  position: absolute;
  left: 4.5%;
  bottom: 5.5%;
  width: min(52vw, 1000px);
  min-width: 540px;
  aspect-ratio: 1835 / 522;
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-118%, 0, 0) rotate(-1deg);
  transition: transform 720ms var(--ease-organic), opacity 420ms ease;
  will-change: transform, opacity;
}

.lower-third.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.lower-third__frames,
.lower-third__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lower-third__frame {
  object-fit: contain;
  display: none;
}

.lower-third__frame.is-current { display: block; }

.lower-third__logo {
  position: absolute;
  z-index: 1;
  left: 2.5%;
  top: 50%;
  width: 21%;
  height: 86%;
  object-fit: contain;
  transform: translateY(-50%) rotate(-2deg);
}

.lower-third__copy {
  position: absolute;
  z-index: 1;
  left: 25%;
  right: 8%;
  top: 50%;
  display: flex;
  min-width: 0;
  flex-direction: column;
  transform: translateY(-50%) rotate(-.6deg);
}

.lower-third__copy strong {
  overflow: hidden;
  font-family: "JZO Display", Georgia, serif;
  font-size: var(--lower-title-size);
  line-height: 1;
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lower-third__copy small {
  overflow: hidden;
  margin-top: .42em;
  font-size: var(--lower-subtitle-size);
  font-weight: 700;
  letter-spacing: .055em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sprite-grid {
  position: absolute;
  z-index: 1;
  inset: 3.5%;
  pointer-events: none;
}

.sprite {
  --delay: 0ms;
  position: absolute;
  left: var(--sprite-left, 50%);
  top: var(--sprite-top, 50%);
  display: grid;
  width: clamp(70px, 8.2vw, 158px);
  aspect-ratio: 1;
  place-items: center;
  opacity: 0;
  transform: translate(var(--jitter-x, 0px), calc(var(--jitter-y, 0px) + 4px)) rotate(var(--tilt, 0deg)) scale(.97);
  transition:
    opacity 2s var(--ease-organic),
    transform 2.2s var(--ease-organic);
}

.sprite__art {
  width: 70%;
  height: 70%;
  background: var(--sprite-ink);
  -webkit-mask: var(--image) center / contain no-repeat;
  mask: var(--image) center / contain no-repeat;
}

.sprite.is-visible {
  opacity: .62;
  transform: translate(var(--jitter-x, 0px), var(--jitter-y, 0px)) rotate(var(--tilt, 0deg)) scale(1);
  animation: sprite-breathe 10.5s ease-in-out var(--delay) infinite;
}

.sprite.is-active {
  z-index: 2;
  opacity: .96;
  transform: translate(var(--jitter-x, 0px), calc(var(--jitter-y, 0px) - 2px)) rotate(var(--tilt, 0deg)) scale(1.08);
}

.scene-transition {
  position: absolute;
  z-index: 20;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.scene-transition__sweep,
.scene-transition__road {
  position: absolute;
  inset: -22%;
  clip-path: circle(0 at 0 100%);
}

.scene-transition__sweep {
  background: var(--accent);
}

.scene-transition__road {
  inset: -13%;
  background:
    repeating-linear-gradient(120deg, transparent 0 64px, color-mix(in srgb, var(--base) 30%, transparent) 65px 72px),
    var(--base);
}

.scene-transition.is-playing .scene-transition__sweep {
  animation: scene-wipe 1.55s cubic-bezier(.63, 0, .27, 1) both;
}

.scene-transition.is-playing .scene-transition__road {
  animation: scene-wipe 1.55s cubic-bezier(.63, 0, .27, 1) 90ms both;
}

.scene-transition__stamp {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(210px, 23vw, 440px);
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-4deg) scale(.72);
}

.scene-transition.is-playing .scene-transition__stamp {
  animation: stamp-pop 1.55s var(--ease-organic) both;
}

.overlay[data-view="transition"] .backdrop,
.overlay[data-view="transition"] .sprite-grid {
  opacity: 0;
}

.overlay[data-view="transition"] {
  background: transparent;
}

.overlay.is-last-ten .countdown-clock {
  animation: final-pulse 1s ease-in-out infinite;
}

@keyframes screen-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sprite-breathe {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -2px; }
}

@keyframes scene-wipe {
  0% { clip-path: circle(0 at 0 100%); }
  46%, 58% { clip-path: circle(150% at 0 100%); }
  59% { clip-path: circle(150% at 100% 0); }
  100% { clip-path: circle(0 at 100% 0); }
}

@keyframes stamp-pop {
  0%, 34%, 72%, 100% { opacity: 0; }
  45%, 63% { opacity: 1; transform: translate(-50%, -50%) rotate(2deg) scale(1); }
}

@keyframes final-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .screen.is-active {
    animation: none;
  }

  .scene-transition.is-playing .scene-transition__sweep,
  .scene-transition.is-playing .scene-transition__road {
    animation: none;
    clip-path: inset(0);
  }

  .scene-transition.is-playing .scene-transition__stamp {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}