/* Performance tuning for low-end devices — no visual redesign, only cheaper effects. */

/* Singing-course palette: expressive berry, warm gold and reassuring petrol. */
:root {
  --voice-berry: oklch(0.34 0.105 347);
  --voice-coral: oklch(0.64 0.19 17);
  --voice-gold: oklch(0.82 0.15 82);
  --voice-petrol: oklch(0.49 0.085 184);
  --voice-blush: oklch(0.97 0.018 5);
  --voice-ink: oklch(0.22 0.035 340);
  --color-brand-red: var(--voice-berry);
  --color-brand-gold: var(--voice-gold);
  --color-brand-gold-dark: var(--voice-coral);
  --color-brand-dark: var(--voice-ink);
  --color-brand-green: var(--voice-petrol);
  --color-brand-navy: var(--voice-berry);
  --color-brand-teal: var(--voice-petrol);
  --color-brand-teal-dark: var(--voice-berry);
  --color-brand-teal-light: var(--voice-blush);
}

.bg-brand-gold {
  box-shadow: 0 12px 28px color-mix(in oklab, var(--voice-coral) 25%, transparent);
}

.bg-brand-red .bg-brand-gold {
  box-shadow: 0 12px 30px color-mix(in oklab, var(--voice-ink) 32%, transparent);
}

/* Marquee carousels: promote to their own compositor layer so the infinite
   translate animation never repaints the rest of the page. */
.animate-scroll-x {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout paint;
}

/* Images decode/paint cheaper and never trigger layout shifts. */
img {
  content-visibility: auto;
}

/* Cheap CTA emphasis: opacity-only pulse (composited) instead of the default
   one that can force repaints on weak GPUs. */
.animate-pulse {
  animation: perf-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  will-change: opacity;
}

@keyframes perf-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.75;
  }
}

/* Hover scale is pointless (and janky) on touch devices. */
@media (hover: none) {
  .hover\:scale-105:hover,
  .hover\:scale-110:hover {
    transform: none;
  }
}

/* Very small / low-power screens: drop the looping attention animations. */
@media (max-width: 640px) {
  .animate-pulse {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Hide the Lovable "Edit with Lovable" badge injected on published pages. */
#lovable-badge,
#lovable-badge-cta,
#lovable-badge-close,
#lovable-badge-divider,
#lovable-badge-text {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (min-width:1024px){.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}}