/*
 * Post-bundle overrides for the deployed portfolio.
 * Loaded LAST in index.html so these rules win over the hashed Vite bundle
 * without hand-editing the minified output. Keep this file tiny and scoped.
 * The durable fixes belong in the SPA source; these are deploy-repo overrides.
 */

/* ------------------------------------------------------------------ *
 * 1. Hero "fake-code" device: stop it expanding vertically.
 *    The code panel (.min-h-[280px]) types out 14 lines progressively, so it
 *    grows from ~366px to ~426-442px while typing and shifts the layout.
 *    Reserve the full final height up front (measured max ~442px across
 *    phone/tablet/desktop) so the box is stable and text just fills into it.
 * ------------------------------------------------------------------ */
.device-screen .min-h-\[280px\] {
  min-height: 450px !important;
  overflow: hidden !important;
}

/* Keep the device card itself static (no hover lift/shadow growth). */
.device-screen > * {
  transform: none !important;
  transition-property: opacity, color, background-color, border-color !important;
}
.device-screen > *:hover {
  transform: none !important;
  box-shadow: var(--tw-shadow, 0 25px 50px -12px rgb(0 0 0 / 0.25)) !important;
}

/* ------------------------------------------------------------------ *
 * 2. Mobile flicker (constant / while scrolling).
 *    Two repaint sources on phones/tablets:
 *      a) the hero's decorative background layer (#hero .-z-10) runs infinite
 *         Framer animations behind blur-[100px] blobs -> constant repaint;
 *      b) backdrop-filter surfaces (nav, cards) repaint while scrolling.
 *    Freeze the decorative layer and drop blur below the desktop breakpoint.
 *    !important beats Framer's per-frame inline transforms; elements keep
 *    their semi-opaque background tint, so dropping blur stays legible.
 * ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  #hero .-z-10,
  #hero .-z-10 * {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }

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

/* Respect reduced-motion everywhere: freeze the decorative hero layer. */
@media (prefers-reduced-motion: reduce) {
  #hero .-z-10,
  #hero .-z-10 * {
    animation: none !important;
    transform: none !important;
  }
}