/*
 * Landing performance patch v3
 * Loaded after main.840530ac.css to override expensive rules.
 *
 * v3 broadens the patch to attribute selectors so it covers the
 * standalone /ai-razrab(-v2) page too — that page uses generic
 * Tailwind utility classes (blur-xl, hover:scale-110, etc.) directly
 * on elements rather than the named classes used by the SPA shell.
 */

/* ============================================================
 * 1. KILL ALL BLUR FILTERS — they're the #1 GPU cost
 *    blur-sm/md/lg/xl/2xl/3xl all map to filter: blur(...)
 *    backdrop-blur-* all map to backdrop-filter: blur(...)
 *    Both are very expensive when combined with hover/scroll.
 * ============================================================ */
[class*="blur-"]:not([class*="hover:blur-"]):not([class*="md:blur-"]):not(.keep-blur) {
  filter: none !important;
  -webkit-filter: none !important;
}

[class*="backdrop-blur"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Tariff cards on /ai-razrab use 8 INLINE filter:blur(35px) glow halos
   per card. Inline styles bypass [class*=...] selectors, so target the
   inline `style` attribute directly. */
[style*="filter:blur"],
[style*="filter: blur"] {
  filter: none !important;
  -webkit-filter: none !important;
}

/* Where blur was doing the visual work, restore opaque background */
.video-card,
.intro-section,
.subscription-form-container,
.back-button,
.chatkit-panel,
.agreement-content,
.oferta-content {
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.video-card {
  background: #0009 !important;
}

.intro-section {
  background: linear-gradient(180deg, #0a0a15 0%, #11112099 100%) !important;
}

/* ============================================================
 * 2. HARDWARE-ACCELERATE ALL HOVER-ANIMATED ELEMENTS
 *    Any element with hover: transforms gets promoted to its own
 *    GPU layer so the hover transition is composited, not painted.
 * ============================================================ */
[class*="hover:scale-"],
[class*="hover:rotate-"],
[class*="hover:-translate-"],
[class*="hover:translate-"],
[class*="group-hover:scale-"],
[class*="group-hover:rotate-"],
[class*="group-hover:-translate-"],
[class*="group-hover:translate-"],
.video-card,
.video-link,
.channel-link,
.return-button,
.back-button,
.submit-button,
.play-button,
.footer-link,
.group {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ============================================================
 * 3. NARROW `transition-all` AND SLOW `duration-500` TO REASONABLE
 *    `transition-all` recomputes everything on hover. We narrow it
 *    to the props that actually animate (transform/opacity/colors).
 *    `duration-500` (0.5s) feels sluggish on hover — bring to 0.25s.
 * ============================================================ */
.transition-all {
  transition-property:
    transform,
    opacity,
    background-color,
    border-color,
    color,
    box-shadow,
    filter !important;
}

.duration-500 {
  transition-duration: 0.25s !important;
}

.duration-700 {
  transition-duration: 0.3s !important;
}

/* ============================================================
 * 4. COURSE TILES (.group hover) — used on home page
 *    The build chains 4 transforms via CSS vars on hover; collapse
 *    to ONE compositor-friendly translate3d.
 * ============================================================ */
.group {
  --tw-translate-x: 0px;
  --tw-translate-y: 0px;
  --tw-rotate: 0deg;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.group:hover {
  transform: translate3d(0, -4px, 0) !important;
}

.group:hover .group-hover\:scale-110,
.group:hover .group-hover\:rotate-3,
.group:hover .group-hover\:-translate-y-4,
.group:hover .group-hover\:-translate-y-0\.5,
.group:hover .group-hover\:translate-x-1,
.group:hover .group-hover\:left-\[120\%\] {
  transform: none !important;
  transition: none !important;
}

/* ============================================================
 * 5. NAMED COMPONENT TRANSITIONS — narrow `transition: all`
 * ============================================================ */
.video-card {
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.25s ease !important;
}

.video-card:hover {
  transform: translate3d(0, -8px, 0) !important;
}

.return-button,
.back-button,
.submit-button,
.channel-link,
.play-button {
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
}

/* ============================================================
 * 6b. TARIFF CARDS — heavy decorative layers + multi-layer
 *     box-shadow that re-paints on every hover state change.
 * ============================================================ */
/* Tariff card containers: huge `border-[3px]` + 3-layer box-shadow
   in inline style + transition-all. Force a GPU layer and skip
   transitioning the expensive box-shadow itself. */
.rounded-\[2\.5rem\] {
  will-change: transform;
  transform: translateZ(0);
  isolation: isolate;
  contain: layout paint;
}

/* The decorative absolute-positioned halo divs inside tariff cards
   never need to repaint — their parent moves them when needed.
   Promote them to their own layer so they don't trigger the parent. */
.rounded-\[2\.5rem\] > .absolute.pointer-events-none {
  transform: translateZ(0) !important;
  will-change: auto;
}

/* ============================================================
 * 7. INFINITE ANIMATIONS — disable / slow down repaint loops
 * ============================================================ */
.stars,
[class*="star"]:not([class*="strict"]) {
  animation: none !important;
}

.videos-title {
  animation: none !important;
  text-shadow: 0 0 24px rgba(255, 255, 255, 0.18) !important;
}

.animate-pulse {
  animation-duration: 4s !important;
}

.animate-ping {
  animation-duration: 3s !important;
}

/* shine — ANIMATED gradient slide on buttons. Triggers paint constantly.
   Stop it; the gradient stays as a static highlight. */
.animate-shine {
  animation: none !important;
}

/* ============================================================
 * 7. CONTENT-VISIBILITY — skip paint for off-screen sections
 *    Big perf win on long landing pages.
 * ============================================================ */
section,
.video-card,
.group {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* ============================================================
 * 8. SMOOTH SCROLL & PREFERS-REDUCED-MOTION
 * ============================================================ */
html {
  scroll-behavior: smooth;
}

body {
  -webkit-overflow-scrolling: touch;
}

@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;
  }
}