.footer-logo {
  cursor: pointer;
}

.easter-tire-scene {
  --rubber: #090a0b;
  --rubber-deep: #020303;
  --rubber-soft: #171b1f;
  --tread-high: #24292d;
  --tread-low: #060707;
  --sidewall: #22272c;
  --sidewall-line: #3f464d;
  --groove: #010202;
  --sidewall-soft: rgba(255, 255, 255, .16);
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--footer-ground-offset, 0px);
  z-index: 80;
  height: var(--tire-scene-height, clamp(320px, 42vh, 430px));
  pointer-events: none;
  overflow: hidden;
}

.easter-tire-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .28), transparent);
}

.physics-tire {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 0;
  background:
    radial-gradient(circle at 34% 25%, rgba(255, 255, 255, .16) 0 9%, transparent 30%),
    radial-gradient(circle, transparent 0 40%, var(--rubber-deep) 41% 43%, var(--sidewall) 44% 53%, transparent 54%),
    radial-gradient(circle, transparent 0 56%, var(--groove) 57% 59%, transparent 60%),
    radial-gradient(circle, transparent 0 66%, var(--groove) 67% 69%, transparent 70%),
    radial-gradient(circle, transparent 0 77%, var(--groove) 78% 80%, transparent 81%),
    repeating-conic-gradient(from -9deg, rgba(255, 255, 255, .13) 0 1.6deg, transparent 1.6deg 18deg),
    radial-gradient(circle, transparent 0 52%, var(--rubber-soft) 53% 68%, var(--rubber) 69% 100%);
  box-shadow:
    0 20px 30px rgba(0, 0, 0, .34),
    inset 0 0 0 5px var(--rubber-deep),
    inset 0 0 0 14px rgba(255, 255, 255, .07),
    inset 0 0 0 20px rgba(0, 0, 0, .3),
    inset 0 0 26px rgba(0, 0, 0, .75);
  -webkit-mask: radial-gradient(circle, transparent 0 41%, #000 42%);
  mask: radial-gradient(circle, transparent 0 41%, #000 42%);
  will-change: transform;
}

.physics-tire::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 6deg, transparent 0 23deg, rgba(255, 255, 255, .22) 23deg 26deg, transparent 26deg 38deg),
    repeating-conic-gradient(from -8deg, transparent 0 31deg, rgba(0, 0, 0, .52) 31deg 34deg, transparent 34deg 48deg);
  -webkit-mask: radial-gradient(circle, transparent 0 78%, #000 79% 92%, transparent 93%);
  mask: radial-gradient(circle, transparent 0 78%, #000 79% 92%, transparent 93%);
}

.physics-tire::after {
  content: "";
  position: absolute;
  inset: 13px;
  border: 2px solid var(--sidewall-line);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 7px rgba(0, 0, 0, .5),
    inset 0 0 0 13px rgba(255, 255, 255, .04),
    0 0 0 7px rgba(0, 0, 0, .24);
}

.tire-shadow {
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 128px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .2);
  filter: blur(5px);
  transform: translateX(0) scaleX(.9);
  will-change: transform, opacity;
}

:root[data-theme="dark"] .easter-tire-ground {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent);
}

:root[data-theme="dark"] .easter-tire-scene {
  --rubber: #121416;
  --rubber-deep: #050606;
  --rubber-soft: #22272b;
  --tread-high: #5d666d;
  --tread-low: #1a1d20;
  --sidewall: #343a40;
  --sidewall-line: #a2a9ae;
  --groove: #08090a;
  --sidewall-soft: rgba(255, 255, 255, .28);
}

:root[data-theme="dark"] .physics-tire {
  box-shadow:
    0 20px 30px rgba(0, 0, 0, .5),
    0 0 0 2px rgba(255, 255, 255, .3),
    inset 0 0 0 5px var(--rubber-deep),
    inset 0 0 0 14px rgba(255, 255, 255, .07),
    inset 0 0 0 20px rgba(0, 0, 0, .42),
    inset 0 0 26px rgba(0, 0, 0, .74);
}

:root[data-theme="dark"] .tire-shadow {
  background: rgba(255, 255, 255, .16);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .easter-tire-ground {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent);
  }

  :root:not([data-theme="light"]) .easter-tire-scene {
    --rubber: #121416;
    --rubber-deep: #050606;
    --rubber-soft: #22272b;
    --tread-high: #5d666d;
    --tread-low: #1a1d20;
    --sidewall: #343a40;
    --sidewall-line: #a2a9ae;
    --groove: #08090a;
    --sidewall-soft: rgba(255, 255, 255, .28);
  }

  :root:not([data-theme="light"]) .physics-tire {
    box-shadow:
      0 20px 30px rgba(0, 0, 0, .5),
      0 0 0 2px rgba(255, 255, 255, .3),
      inset 0 0 0 5px var(--rubber-deep),
      inset 0 0 0 14px rgba(255, 255, 255, .07),
      inset 0 0 0 20px rgba(0, 0, 0, .42),
      inset 0 0 26px rgba(0, 0, 0, .74);
  }

  :root:not([data-theme="light"]) .tire-shadow {
    background: rgba(255, 255, 255, .16);
  }
}