/* Tablet-only rendering of three core.css animations, moved to transform/opacity so they no longer repaint every frame.
   Touch-only device with both sides >= 600px: phones (portrait and landscape) and mouse/trackpad computers never match. */
@media (hover: none) and (pointer: coarse) and (min-width: 600px) and (min-height: 600px) and (max-width: 1400px) and (max-height: 1400px) {
  /* ch-grid-drift: the grid repeats every 78px, so sliding a copy by (78px, 78px) looks the same as shifting background-position. */
  .ch-grid {
    background: none;
    animation: none;
  }
  .ch-grid::before {
    content: "";
    position: absolute;
    inset: -78px 0 0 -78px;
    background-image:
      linear-gradient(rgba(200, 255, 0, 0.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(125, 211, 255, 0.06) 1px, transparent 1px);
    background-size: 78px 78px;
    animation: pvt-grid 46s linear infinite;
  }

  /* ch-scan: same path as top -18% -> 108% of #ch-city (which is the viewport). */
  .ch-scan {
    top: 0;
    animation-name: pvt-scan;
  }

  /* ch-float-glow: stable base shadow plus a stronger shadow that fades in and out.
     !important: the animation used to override every other box-shadow on these buttons, including the Tailwind
     block that the CDN injects after this file. */
  .btn-gold,
  .plan-buy-btn {
    box-shadow:
      0 8px 16px rgba(0, 0, 0, 0.24),
      0 0 10px rgba(200, 255, 0, 0.1) !important;
    animation: none;
  }
  .btn-gold::before,
  .plan-buy-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
      0 18px 28px rgba(0, 0, 0, 0.14),
      0 0 18px rgba(200, 255, 0, 0.11);
    opacity: 0;
    animation: pvt-glow 6s ease-in-out infinite;
  }
}

/* core.css stops the grid for reduced motion; the moved grid follows it. The glow keeps running there too. */
@media (hover: none) and (pointer: coarse) and (min-width: 600px) and (min-height: 600px) and (max-width: 1400px) and (max-height: 1400px) and (prefers-reduced-motion: reduce) {
  .ch-grid::before {
    animation: none;
  }
}

/* Explicit start frames: with an implicit "from", Chrome ran pvt-grid on the main thread (one style recalc per frame). */
@keyframes pvt-grid {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(78px, 78px, 0);
  }
}
@keyframes pvt-scan {
  0% {
    transform: translateY(-18vh);
    opacity: 0;
  }
  10% {
    opacity: 0.85;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(108vh);
    opacity: 0;
  }
}
@keyframes pvt-glow {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}