/**
 * home-mobile-perf.css
 *
 * Mobile-only performance optimisations for the homepage.
 * Every rule is wrapped in a max-width:799px media query so desktop
 * rendering is completely unaffected.
 *
 * Loaded via <link media="(max-width: 799px)"> in front-page.php.
 */

/* ─────────────────────────────────────────────────────────────────────────
   Disable the "shine" text animation on mobile
   ─────────────────────────────────────────────────────────────────────────
   .bold-text.animated-text runs an 8-second looping background-clip:text
   gradient shift ("shine" effect on "Tech Recruitment"). background-clip:text
   animations are non-composited — the browser must repaint on every frame,
   contributing to "Avoid non-composited animations" Lighthouse warnings and
   elevating Total Blocking Time.

   On mobile a static brand-blue colour is fully legible and maintains the
   same visual weight as the desktop gradient. */
@media screen and (max-width: 799px) {
    .bold-text.animated-text,
    a.bold-text.animated-text.load-fix {
        animation: none !important;
        background: none !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        -webkit-text-fill-color: unset !important;
        color: #0332c9 !important;
        transform: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Composit the bounce-arrow animation on mobile
   ─────────────────────────────────────────────────────────────────────────
   .bounce-arrow is display:block on mobile (display:none on desktop ≥768px).
   Its @keyframes bounce-arrow moves the element on the Y axis — promoting it
   to a compositor layer via will-change:transform lets the GPU handle the
   animation without touching the main thread. */
@media screen and (max-width: 799px) {
    .bounce-arrow {
        will-change: transform;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Pause decorative floating animations on mobile
   ─────────────────────────────────────────────────────────────────────────
   The hero landing section contains a layered illustration (.landing__img)
   with multiple child elements running infinite keyframe animations
   (message_Animation, java_Animation, react_Animation, etc.). On mobile the
   illustration is scaled down to 300 px wide and positioned at the bottom of
   the viewport — already visually de-emphasised. Pausing these 10+ looping
   animations eliminates their contribution to "Avoid non-composited
   animations" (currently 16 animated elements flagged) and frees main-thread
   paint work. */
@media screen and (max-width: 799px) {
    .message-item,
    .java-item,
    .c-item,
    .react-item,
    .zoom-item,
    .zoom-wrapper,
    .tie-top-item,
    .stars-item,
    .python-item,
    .aws-item,
    .tie-bottom-item {
        animation-play-state: paused !important;
        will-change: auto !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   content-visibility for the AJAX lazy-loaded content block
   ─────────────────────────────────────────────────────────────────────────
   #lazy-loaded-content is an empty div on first paint that is later filled
   via a Web Worker AJAX call (the lazyload mechanism). Applying
   content-visibility:auto tells the browser it can skip layout, paint and
   compositing for this area until the user scrolls near it — reducing
   main-thread work during the critical startup window.

   contain-intrinsic-size provides a stable layout placeholder so the scroll
   height estimate stays accurate and doesn't cause excessive CLS when content
   loads in. */
@media screen and (max-width: 799px) {
    #lazy-loaded-content {
        content-visibility: auto;
        contain-intrinsic-size: 0 3000px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Disable smooth-scroll on mobile
   ─────────────────────────────────────────────────────────────────────────
   html { scroll-behavior: smooth } is declared in style.css. On low-end
   mobile devices the browser has to run a composited scroll animation for
   every in-page anchor click, which can block the main thread and produce
   long tasks during the critical startup window. Instant scrolling is
   indistinguishable from smooth on a fast-swipe mobile UX. */
@media screen and (max-width: 799px) {
    html {
        scroll-behavior: auto !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Strip hover-only CSS transitions on mobile
   ─────────────────────────────────────────────────────────────────────────
   Touch screens have no "hover" state, so transition rules on :hover
   selectors never fire. However, the browser still needs to create
   compositor layers (will-change) and run style-recalculation for every
   element that has a transition property, regardless of whether the
   transition is ever triggered. Removing them on mobile reduces composite
   layer count and speeds up style recalc. */
@media screen and (max-width: 799px) {
    /* Button image colour-invert on hover */
    .button_full img,
    /* Team photo scale-up on hover */
    .experienced-team .photo,
    /* Goodfirms underline slide-in on hover */
    .goodfirms-widget-title a::after,
    /* E-book cover scale on hover */
    #download-e-book .main-container .left-panel,
    /* Media-logo grayscale lift on hover */
    .media-mentions .media-images-container .image,
    /* Media-quote SVG fade on hover */
    .media-mentions .media-quote-item a svg,
    /* Video card overlay fade on hover */
    .highlighted-video__hover::before,
    .highlighted-video__play_button,
    .highlighted-video__button::before {
        transition: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Disable about-us carousel slide transition on mobile
   ─────────────────────────────────────────────────────────────────────────
   .about-us-slider .carousel-item has transition:transform 1s ease-in-out.
   On mobile the carousel JS shuffles all 25 item positions on every tick,
   triggering 25 simultaneous transform transitions — a major source of
   compositor jank. Disabling transitions lets the JS repositioning happen
   in a single frame without animation overhead. The .carousel-inner already
   sets transition:none during drag and wheel-scroll; this extends that to
   all mobile interactions. */
@media screen and (max-width: 799px) {
    .about-us-slider .carousel-inner .carousel-item {
        transition: none !important;
    }
    .about-us-slider-carousel {
        transition: none !important;
    }
}