.tokka-hero-tilt {
  --tokka-tilt-x: 0deg;
  --tokka-tilt-y: 0deg;
  --tokka-card-lift: 0px;
  --tokka-card-scale: 1;
  --tokka-glare-x: 50%;
  --tokka-glare-y: 50%;
  --tokka-glare-opacity: 0;
  --tokka-sheen-x: 0%;
  --tokka-sheen-y: 0%;
  isolation: isolate;
  transform: perspective(1100px) translate3d(0, var(--tokka-card-lift), 0)
    rotateX(var(--tokka-tilt-x)) rotateY(var(--tokka-tilt-y))
    scale3d(var(--tokka-card-scale), var(--tokka-card-scale), 1);
  transform-style: preserve-3d;
  transform-origin: center;
  transition:
    transform 680ms cubic-bezier(.16, 1, .3, 1),
    border-color 520ms ease,
    box-shadow 680ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}

.tokka-hero-tilt.is-tokka-hovered {
  --tokka-card-lift: -5px;
  --tokka-card-scale: 1.008;
  border-color: rgba(78, 142, 255, .62);
  box-shadow:
    0 38px 105px rgba(0, 0, 0, .62),
    0 0 0 1px rgba(67, 137, 255, .12),
    0 0 38px rgba(40, 117, 255, .18),
    inset 0 1px rgba(255, 255, 255, .07);
  transition:
    transform 105ms cubic-bezier(.2, .72, .2, 1),
    border-color 180ms ease,
    box-shadow 220ms ease;
}

.tokka-hero-tilt > .console-panel__bar,
.tokka-hero-tilt > .console-panel__body {
  position: relative;
  z-index: 2;
  transform: translateZ(18px);
  transform-style: preserve-3d;
}

.tokka-hero-tilt > .console-panel__bar {
  transform: translateZ(12px);
}

.tokka-shop-ratecard-tilt {
  --tokka-tilt-x: 0deg;
  --tokka-tilt-y: 0deg;
  --tokka-card-lift: 0px;
  --tokka-card-scale: 1;
  --tokka-glare-x: 50%;
  --tokka-glare-y: 50%;
  --tokka-glare-opacity: 0;
  --tokka-sheen-x: 0%;
  --tokka-sheen-y: 0%;
  isolation: isolate;
  transform-style: preserve-3d;
  transform-origin: center;
  transition:
    transform 680ms cubic-bezier(.16, 1, .3, 1),
    border-color 520ms ease,
    box-shadow 680ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}

.tokka-shop-ratecard-tilt[data-reveal-visible="true"] {
  transform: perspective(1100px) translate3d(0, var(--tokka-card-lift), 0)
    rotateX(var(--tokka-tilt-x)) rotateY(var(--tokka-tilt-y))
    scale3d(var(--tokka-card-scale), var(--tokka-card-scale), 1);
}

.tokka-shop-ratecard-tilt.is-tokka-hovered[data-reveal-visible="true"] {
  --tokka-card-lift: -5px;
  --tokka-card-scale: 1.008;
  border-color: rgba(78, 142, 255, .62);
  box-shadow:
    0 38px 105px rgba(0, 0, 0, .62),
    0 0 0 1px rgba(67, 137, 255, .12),
    0 0 38px rgba(40, 117, 255, .18),
    inset 0 1px rgba(255, 255, 255, .07);
  transition:
    transform 105ms cubic-bezier(.2, .72, .2, 1),
    border-color 180ms ease,
    box-shadow 220ms ease;
}

.tokka-shop-ratecard-tilt > img {
  position: relative;
  z-index: 1;
  transform: translateZ(16px);
  backface-visibility: hidden;
}

.tokka-shop-ratecard-tilt > .tokka-hero-card__glare,
.tokka-shop-ratecard-tilt > .tokka-hero-card__sheen {
  z-index: 3;
}

.tokka-shop-ratecard-tilt:hover::after {
  opacity: 0;
  animation: none;
}

.tokka-hero-card__glare,
.tokka-hero-card__sheen {
  position: absolute;
  z-index: 1;
  inset: -18%;
  pointer-events: none;
  opacity: var(--tokka-glare-opacity);
  transition:
    opacity 520ms ease,
    background-position 620ms cubic-bezier(.16, 1, .3, 1);
}

.tokka-hero-card__glare {
  background:
    radial-gradient(
      circle at var(--tokka-glare-x) var(--tokka-glare-y),
      rgba(210, 232, 255, .2) 0,
      rgba(86, 154, 255, .14) 15%,
      rgba(71, 101, 255, .075) 29%,
      transparent 51%
    );
  mix-blend-mode: screen;
}

.tokka-hero-card__sheen {
  background: linear-gradient(
    118deg,
    transparent 31%,
    rgba(92, 161, 255, .025) 41%,
    rgba(216, 235, 255, .12) 49%,
    rgba(114, 102, 255, .065) 57%,
    transparent 69%
  );
  transform: translate3d(var(--tokka-sheen-x), var(--tokka-sheen-y), 0);
  transition:
    opacity 520ms ease,
    transform 620ms cubic-bezier(.16, 1, .3, 1);
  mix-blend-mode: screen;
}

.tokka-marquee {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-top: 1px solid rgba(73, 109, 180, .18);
  border-bottom: 1px solid rgba(73, 109, 180, .18);
  background:
    linear-gradient(90deg, rgba(3, 6, 13, .98), rgba(7, 13, 27, .84) 22%, rgba(7, 10, 24, .9) 78%, rgba(3, 6, 13, .98)),
    radial-gradient(circle at 50% 50%, rgba(59, 130, 246, .09), transparent 55%);
  padding: clamp(2rem, 4vw, 3.4rem) 0;
}

.tokka-marquee::before,
.tokka-marquee::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: min(12vw, 170px);
  pointer-events: none;
}

.tokka-marquee::before {
  left: 0;
  background: linear-gradient(90deg, #03060d 6%, transparent);
}

.tokka-marquee::after {
  right: 0;
  background: linear-gradient(270deg, #03060d 6%, transparent);
}

.tokka-marquee__viewport {
  overflow: hidden;
}

.tokka-marquee__track {
  display: flex;
  width: max-content;
  transform: translate3d(0, 0, 0);
  animation: tokka-marquee-right-to-left 34s linear infinite;
  will-change: transform;
}

.tokka-marquee__group {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(2.2rem, 4vw, 5rem);
  padding-right: clamp(2.2rem, 4vw, 5rem);
}

.tokka-marquee__item {
  flex: none;
  color: rgba(171, 183, 207, .3);
  font-family: var(--font-heading), Oswald, sans-serif;
  font-size: clamp(2.15rem, 4.2vw, 4.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .012em;
  text-transform: uppercase;
  transition:
    color 220ms ease,
    opacity 220ms ease,
    text-shadow 220ms ease,
    transform 220ms ease;
}

.tokka-marquee__item:hover {
  color: #58a0ff;
  opacity: 1;
  text-shadow:
    0 0 8px rgba(65, 146, 255, .9),
    0 0 24px rgba(67, 118, 255, .62),
    0 0 54px rgba(107, 81, 255, .35);
  transform: translateY(-1px);
}

.tokka-marquee__separator {
  flex: none;
  color: rgba(89, 147, 255, .62);
  font-family: var(--font-geist-mono), "Space Mono", monospace;
  font-size: clamp(.8rem, 1.2vw, 1.05rem);
  text-shadow: 0 0 15px rgba(70, 139, 255, .36);
}

@keyframes tokka-marquee-right-to-left {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 720px) {
  .tokka-hero-tilt.is-tokka-hovered,
  .tokka-shop-ratecard-tilt.is-tokka-hovered {
    --tokka-card-lift: -2px;
    --tokka-card-scale: 1.003;
  }

  .tokka-marquee {
    padding: 1.8rem 0;
  }

  .tokka-marquee__track {
    animation-duration: 27s;
  }

  .tokka-marquee__item {
    font-size: clamp(1.9rem, 9vw, 3rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tokka-hero-tilt,
  .tokka-hero-tilt.is-tokka-hovered,
  .tokka-shop-ratecard-tilt[data-reveal-visible="true"],
  .tokka-shop-ratecard-tilt.is-tokka-hovered[data-reveal-visible="true"] {
    --tokka-tilt-x: 0deg !important;
    --tokka-tilt-y: 0deg !important;
    --tokka-card-lift: 0px !important;
    --tokka-card-scale: 1 !important;
    transform: none;
    transition: border-color 180ms ease, box-shadow 180ms ease;
  }

  .tokka-hero-card__glare,
  .tokka-hero-card__sheen {
    display: none;
  }

  .tokka-marquee__viewport {
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .tokka-marquee__track {
    transform: none;
    animation: none;
  }

  .tokka-marquee__group[aria-hidden="true"] {
    display: none;
  }
}