body.has-cursor,
body.has-cursor a,
body.has-cursor button,
body.has-cursor .card,
body.has-cursor .gcard {
  cursor: none;
}

.apple-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50% 50% 50% 12px;
  background: radial-gradient(circle at 35% 30%, #c8e6b0, var(--accent) 62%, var(--accent-deep));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--dew) 40%, transparent), 0 6px 16px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 90;
  transform: translate3d(-40px, -40px, 0) rotate(-28deg);
  will-change: transform;
}

.apple-cursor.is-down {
  transform: translate3d(var(--cx, 0), var(--cy, 0), 0) rotate(-28deg) scale(0.72);
}

.apple-cursor::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 8px;
  width: 6px;
  height: 7px;
  background: var(--accent-deep);
  border-radius: 40% 80% 20% 60%;
  transform: rotate(28deg);
}

.logo.is-chomp .logo-mark {
  animation: chomp 0.42s var(--ease-out);
}

@keyframes chomp {
  0% { transform: scale(1) rotate(0); }
  35% { transform: scale(0.86) rotate(-12deg); }
  70% { transform: scale(1.08) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}

.poster,
.btn,
.card,
.gcard,
.zt-item,
.res,
.sbox {
  position: relative;
}

.poster::after,
.btn-play::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, color-mix(in srgb, var(--flesh) 28%, transparent) 48%, transparent 64%);
  transform: translateX(-120%);
  pointer-events: none;
  mix-blend-mode: screen;
}

.poster:hover::after,
.btn-play:hover::after {
  animation: shine 0.7s var(--ease-out);
}

@keyframes shine {
  to { transform: translateX(120%); }
}

.page > * {
  animation: rise 0.48s var(--ease-out) both;
}

.page > *:nth-child(1) { animation-delay: 0.02s; }
.page > *:nth-child(2) { animation-delay: 0.07s; }
.page > *:nth-child(3) { animation-delay: 0.12s; }
.page > *:nth-child(4) { animation-delay: 0.17s; }
.page > *:nth-child(5) { animation-delay: 0.22s; }
.page > *:nth-child(6) { animation-delay: 0.27s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.hero-track {
  transform-style: preserve-3d;
  will-change: transform;
}

.tag {
  transition: transform 0.22s var(--ease-out), box-shadow 0.22s ease;
}

.tag:hover {
  transform: translateY(-2px) scale(1.04);
}

.player.is-paused .center button {
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent);
  animation: pulse-ring 2.2s ease-out infinite;
}

@keyframes pulse-ring {
  70% { box-shadow: 0 0 0 16px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.seed-burst {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  z-index: 85;
  animation: seed 0.7s ease-out forwards;
}

@keyframes seed {
  to {
    opacity: 0;
    transform: translate(var(--sx), var(--sy)) scale(0.3);
  }
}

.sbox {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.sbox:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}

.drawer-links a.is-on svg {
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--dew) 55%, transparent));
}

@media (prefers-reduced-motion: reduce) {
  .page > *,
  .logo.is-chomp .logo-mark,
  .poster::after,
  .btn-play::after,
  .player .center button {
    animation: none !important;
  }

  .apple-cursor {
    display: none;
  }
}