.wax-logo {
  position: relative;
  isolation: isolate;
  user-select: none;
  touch-action: pan-y;
  -webkit-user-drag: none;
}

.wax-logo img {
  pointer-events: none;
  transition: filter 0.28s ease, transform 0.28s ease;
}

.wax-logo::after {
  position: absolute;
  inset: 2px -6px;
  z-index: 3;
  background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, 0.04) 38%, rgba(248, 231, 28, 0.3) 49%, rgba(255, 255, 255, 0.16) 54%, transparent 68%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateX(-90%);
}

.wax-logo.is-polishing::after {
  animation: waxLogoPolish 0.48s ease-out;
}

.wax-logo.is-polishing[data-wax-direction="left"]::after {
  animation-name: waxLogoPolishReverse;
}

.wax-logo[data-wax-pass="1"] img { filter: brightness(1.035); }
.wax-logo[data-wax-pass="2"] img { filter: brightness(1.075) saturate(1.05); }
.wax-logo[data-wax-pass="3"] img { filter: brightness(1.12) saturate(1.1); }
.wax-logo.is-sealed img { filter: brightness(1.18) saturate(1.14); }

.wax-seal-mark {
  position: absolute;
  top: 7px;
  right: -9px;
  z-index: 4;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid #f8e71c;
  border-radius: 50%;
  color: #111;
  background: linear-gradient(145deg, #fff45c 0%, #f8e71c 56%, #c6b800 100%);
  box-shadow: 0 0 0 3px rgba(248, 231, 28, 0.13), 0 4px 12px rgba(0, 0, 0, 0.32);
  opacity: 0;
  pointer-events: none;
  transform: scale(1.7) rotate(-12deg);
}

.wax-seal-mark svg {
  width: 16px;
  height: 16px;
  overflow: visible;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.8;
}

.wax-logo.is-sealed .wax-seal-mark {
  animation: waxSealStamp 0.72s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.keysmith-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.keysmith-trigger {
  position: relative;
  display: grid;
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  padding: 0;
  place-items: center;
  overflow: visible;
  border: 1px solid rgba(var(--key-rgb), 0.25);
  border-radius: 8px;
  color: rgba(var(--key-rgb), 0.82);
  background: rgba(var(--key-rgb), 0.055);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.keysmith-trigger > i {
  position: relative;
  z-index: 2;
  font-size: 19px;
  transition: color 0.22s ease, filter 0.22s ease, transform 0.22s ease;
}

.keysmith-ring {
  position: absolute;
  inset: 2px;
  width: 35px;
  height: 35px;
  pointer-events: none;
  transform: rotate(-90deg);
}

.keysmith-ring circle {
  fill: none;
  stroke: #f8e71c;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  stroke-linecap: round;
  stroke-width: 2;
}

.keysmith-trigger.is-holding .keysmith-ring circle {
  animation: keysmithCharge 2.2s linear forwards;
}

.keysmith-trigger.is-forged > i {
  color: #fff5a0;
  filter: drop-shadow(0 0 8px rgba(248, 231, 28, 0.75));
  animation: keysmithHammered 1.16s cubic-bezier(0.16, 1, 0.3, 1);
}

.keysmith-sparks,
.keysmith-sparks::before,
.keysmith-sparks::after {
  position: absolute;
  z-index: 3;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff6a1;
  content: "";
  opacity: 0;
  pointer-events: none;
}

.keysmith-sparks { top: 7px; right: 7px; }
.keysmith-sparks::before { top: 15px; right: -2px; }
.keysmith-sparks::after { top: 22px; right: 17px; }
.keysmith-trigger.is-forged .keysmith-sparks { animation: keysmithSparkA 0.75s 0.08s ease-out; }
.keysmith-trigger.is-forged .keysmith-sparks::before { animation: keysmithSparkB 0.75s 0.36s ease-out; }
.keysmith-trigger.is-forged .keysmith-sparks::after { animation: keysmithSparkA 0.75s 0.66s ease-out; }

.license-surface.is-keysmith-forge {
  animation: keysmithCardForge 1.35s ease-out;
}

.hx-cart-empty {
  position: relative;
  width: 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button.hx-cart-empty {
  font: inherit;
}

.hx-cart-empty-art {
  position: relative;
  display: grid;
  width: 62px;
  height: 55px;
  place-items: center;
}

.hx-cart-empty-art > i {
  position: relative;
  z-index: 2;
  transition: transform 0.2s ease;
}

.hx-cart-empty[data-heist-stage="1"] .hx-cart-empty-art > i,
.hx-cart-empty[data-heist-stage="2"] .hx-cart-empty-art > i {
  animation: emptyHeistNudge 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.hx-cart-empty[data-heist-stage="2"] .hx-cart-empty-art > i {
  animation-name: emptyHeistLook;
}

.hx-cart-empty.is-escaping .hx-cart-empty-art {
  animation: emptyHeistEscape 1.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.hx-cart-empty .hx-cart-receipt {
  position: absolute;
  top: 24px;
  left: 50%;
  z-index: 1;
  min-width: 43px;
  padding: 4px 6px;
  border: 1px solid rgba(248, 231, 28, 0.38);
  border-radius: 2px;
  color: #f8e71c;
  background: #111;
  font-family: monospace;
  font-size: 9px;
  font-weight: 800;
  opacity: 0;
  transform: translate(-50%, 0) rotate(4deg);
}

.hx-cart-empty.is-escaping .hx-cart-receipt {
  animation: emptyHeistReceipt 0.72s 0.72s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.swiper-announcements {
  isolation: isolate;
}

.dashboard-rewind-overlay {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: grid;
  place-content: center;
  border: 1px solid rgba(248, 231, 28, 0.45);
  color: #f8e71c;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 5px),
    rgba(7, 7, 7, 0.9);
  opacity: 0;
  pointer-events: none;
  text-align: center;
}

.dashboard-rewind-overlay span {
  font-family: monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
}

.dashboard-rewind-overlay strong {
  margin-top: 7px;
  color: #fff;
  font-size: clamp(25px, 4vw, 48px);
  font-weight: 900;
  letter-spacing: -0.05em;
}

.swiper-announcements.is-rewinding .dashboard-rewind-overlay {
  animation: dashboardRewindOverlay 1.48s steps(8, end);
}

.swiper-announcements.is-rewinding .swiper-slide img {
  animation: dashboardRewindFrame 1.3s steps(7, end);
}

@keyframes waxLogoPolish {
  0% { opacity: 0; transform: translateX(-90%); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateX(90%); }
}

@keyframes waxLogoPolishReverse {
  0% { opacity: 0; transform: translateX(90%); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-90%); }
}

@keyframes waxSealStamp {
  0% { opacity: 0; transform: scale(1.7) rotate(-12deg); }
  48% { opacity: 1; transform: scale(0.86) rotate(3deg); }
  72% { transform: scale(1.06) rotate(-1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes keysmithCharge { to { stroke-dashoffset: 0; } }

@keyframes keysmithHammered {
  0%, 100% { transform: translate(0) rotate(0); }
  14% { transform: translate(-2px, 1px) rotate(-5deg) scale(1.08); }
  30% { transform: translate(2px, -1px) rotate(4deg); }
  46% { transform: translate(-2px, 1px) rotate(-4deg) scale(1.1); }
  62% { transform: translate(2px, 0) rotate(3deg); }
  78% { transform: translate(-1px, 0) rotate(-2deg) scale(1.06); }
}

@keyframes keysmithSparkA {
  0% { opacity: 0; transform: translate(0) scale(0.5); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translate(13px, -12px) scale(1.2); }
}

@keyframes keysmithSparkB {
  0% { opacity: 0; transform: translate(0) scale(0.5); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translate(-13px, 9px) scale(1.15); }
}

@keyframes keysmithCardForge {
  0%, 100% { border-color: rgba(var(--key-rgb), 0.2); }
  28% { border-color: rgba(248, 231, 28, 0.68); }
  58% { border-color: rgba(255, 118, 30, 0.52); }
}

@keyframes emptyHeistNudge {
  30% { transform: translateX(-5px) rotate(-5deg); }
  64% { transform: translateX(4px) rotate(4deg); }
}

@keyframes emptyHeistLook {
  28% { transform: translateX(5px) rotate(8deg); }
  58% { transform: translateX(-2px) rotate(-4deg); }
}

@keyframes emptyHeistEscape {
  0%, 100% { transform: translateX(0) rotate(0); }
  24% { transform: translateX(-18px) rotate(-8deg); }
  52% { transform: translateX(130px) rotate(13deg); opacity: 0; }
  70% { transform: translateX(-80px) rotate(-7deg); opacity: 0; }
  86% { opacity: 1; }
}

@keyframes emptyHeistReceipt {
  0% { opacity: 0; transform: translate(-50%, -5px) rotate(4deg); }
  100% { opacity: 1; transform: translate(-50%, 25px) rotate(-3deg); }
}

@keyframes dashboardRewindOverlay {
  0%, 100% { opacity: 0; transform: translateX(0); }
  12%, 76% { opacity: 0.94; }
  24% { transform: translateX(-5px); }
  38% { transform: translateX(4px); }
  54% { transform: translateX(-2px); }
}

@keyframes dashboardRewindFrame {
  0%, 100% { filter: none; transform: translateX(0); }
  18% { filter: grayscale(1) contrast(1.35); transform: translateX(-7px); }
  42% { filter: sepia(0.8) contrast(1.25); transform: translateX(6px); }
  68% { filter: grayscale(1) brightness(0.65); transform: translateX(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .wax-logo,
  .wax-logo::after,
  .wax-seal-mark,
  .keysmith-trigger,
  .keysmith-trigger > i,
  .keysmith-ring circle,
  .keysmith-sparks,
  .keysmith-sparks::before,
  .keysmith-sparks::after,
  .license-surface,
  .hx-cart-empty-art,
  .hx-cart-empty-art > i,
  .hx-cart-receipt,
  .dashboard-rewind-overlay,
  .swiper-announcements .swiper-slide img {
    animation: none !important;
    transition: none !important;
  }

  .wax-logo.is-sealed .wax-seal-mark {
    opacity: 1;
    transform: scale(1) rotate(0);
  }

  .hx-cart-empty.is-escaping .hx-cart-receipt {
    opacity: 1;
    transform: translate(-50%, 25px);
  }

  .swiper-announcements.is-rewinding .dashboard-rewind-overlay {
    opacity: 0.94;
  }
}