/* ================================================================
   YaakoubPro — Mobile Performance Layer
   Goal: preserve the Claymorphism identity while removing continuous
   GPU-heavy compositing on touch devices / small screens.
   Loaded after clay.css and active only at <= 720px.
   ================================================================ */

@media (max-width:720px){
  :root{
    /* One/two-pass mobile shadows instead of the desktop 4-layer stacks. */
    --clay-deep:0 16px 36px rgba(72,58,94,.16);
    --clay-card:0 9px 22px rgba(72,58,94,.13);
    --clay-card-hover:0 10px 24px rgba(72,58,94,.15);
    --clay-button:0 8px 18px rgba(124,58,237,.22);
    --clay-button-hover:0 9px 20px rgba(124,58,237,.24);
    --clay-pressed:inset 0 2px 8px rgba(95,82,118,.16);
  }

  html[data-theme="dark"]{
    --clay-deep:0 16px 36px rgba(0,0,0,.30);
    --clay-card:0 9px 22px rgba(0,0,0,.24);
    --clay-card-hover:0 10px 24px rgba(0,0,0,.28);
    --clay-button:0 8px 18px rgba(0,0,0,.25);
    --clay-button-hover:0 9px 20px rgba(0,0,0,.28);
    --clay-pressed:inset 0 2px 8px rgba(0,0,0,.34);
  }

  /* The biggest mobile cost was three huge fixed + blurred animated layers. */
  body::before,
  body::after,
  main::before,
  .hero--integrated::before,
  .hero--integrated::after{
    display:none!important;
    content:none!important;
    animation:none!important;
    filter:none!important;
  }

  body{
    background:
      radial-gradient(circle at 8% 3%,rgba(124,58,237,.07),transparent 28rem),
      radial-gradient(circle at 96% 32%,rgba(14,165,233,.055),transparent 24rem),
      var(--bg);
    transition:none!important;
  }

  /* Avoid live backdrop sampling while the page scrolls. */
  .site-header,
  .site-header.scrolled,
  .site-header.menu-active,
  .mobile-panel,
  .mega-menu,
  .language-menu,
  .project-starter,
  .service-card,
  .benefit,
  .process-step,
  .faq-item,
  .content-card,
  .contact-card,
  .policy-card,
  .feature,
  .builder-option{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  .site-header,
  .site-header.scrolled,
  .site-header.menu-active{
    background:rgba(250,248,253,.97)!important;
    border-color:rgba(124,58,237,.10)!important;
    box-shadow:0 6px 18px rgba(58,47,76,.11)!important;
  }
  html[data-theme="dark"] .site-header,
  html[data-theme="dark"] .site-header.scrolled,
  html[data-theme="dark"] .site-header.menu-active{
    background:rgba(43,37,52,.98)!important;
    box-shadow:0 6px 18px rgba(0,0,0,.26)!important;
  }

  .mobile-panel{
    background:#FAF8FD!important;
    box-shadow:0 16px 38px rgba(58,47,76,.16)!important;
  }
  html[data-theme="dark"] .mobile-panel{
    background:#332D3D!important;
    box-shadow:0 16px 38px rgba(0,0,0,.32)!important;
  }

  /* Static text gradients = same visual language without continuous repaint. */
  .hero h1 em,
  .page-hero h1 em,
  .section-title em{
    animation:none!important;
    background-position:52% center!important;
  }

  /* Hero stays visually rich, but the image and overlay no longer animate. */
  .hero--integrated .hero-background img,
  .hero-picture .hero-frame,
  .page-visual img,
  .why-image img,
  .cta-image img{
    animation:none!important;
    transform:none!important;
    filter:none!important;
    will-change:auto!important;
  }

  /* Reveal blur/scale effects created frame drops during fast scrolling. */
  [data-animate],
  .reveal,
  body.motion-ready [data-animate],
  body.motion-ready [data-animate]:not(.in-view),
  body.motion-ready [data-animate].in-view,
  body.motion-ready .reveal,
  body.motion-ready .reveal.in-view{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
    transition:none!important;
  }

  .floating-note,
  .live-dot{
    animation:none!important;
  }

  /* Manual native carousels: no cloned cards and no infinite transform loop. */
  .benefit-grid,
  .process-grid,
  .loop-viewport.benefit-grid,
  .loop-viewport.process-grid{
    display:flex!important;
    gap:12px!important;
    width:calc(100% + 30px)!important;
    margin-inline:-15px!important;
    padding:4px 15px 18px!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    scroll-snap-type:x proximity;
    scroll-padding-inline:15px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    overscroll-behavior-inline:contain;
    touch-action:pan-x pan-y;
  }
  .benefit-grid::-webkit-scrollbar,
  .process-grid::-webkit-scrollbar{display:none}

  .benefit-grid>.benefit,
  .process-grid>.process-step,
  .loop-track>.benefit,
  .loop-track>.process-step{
    flex:0 0 min(79vw,305px)!important;
    min-width:0;
    min-height:158px;
    scroll-snap-align:start;
    box-shadow:var(--clay-card)!important;
  }

  .loop-track{
    display:contents!important;
    width:auto!important;
    animation:none!important;
    transform:none!important;
    will-change:auto!important;
  }

  /* Reduce the number of promoted/composited layers. */
  .btn,
  .hero-frame,
  .hero--integrated .hero-background img,
  .project-card,
  .service-card,
  .benefit,
  .process-step{
    will-change:auto!important;
  }

  /* Touch screens do not need desktop hover lifts. */
  .service-card:hover,
  .benefit:hover,
  .project-card:hover,
  .process-step:hover,
  .feature:hover,
  .builder-option:hover,
  .faq-item:hover,
  .project-starter:focus-within{
    transform:none!important;
  }

  .service-card,
  .benefit,
  .project-card,
  .process-step,
  .feature,
  .builder-option,
  .faq-item,
  .btn,
  .icon-btn{
    transition-duration:.12s!important;
  }

  /* Keep tactile feedback, but cheaper than the desktop squish stack. */
  .btn:active,
  .icon-btn:active,
  .service-choice:active{
    transform:scale(.97)!important;
    box-shadow:var(--clay-pressed)!important;
  }

  .btn-primary:hover,
  .btn-primary:focus-visible,
  .mobile-cta:hover,
  .mobile-cta:focus-visible{
    transform:none!important;
    box-shadow:var(--clay-button)!important;
  }

  /* Heavy decorative blur on CTA is not visible enough on phone to justify repaint cost. */
  .cta-content::after{
    filter:none!important;
    opacity:.55;
  }

  /* Prevent accidental horizontal layout work from oversized decorative content. */
  main,
  .section,
  .final-cta,
  .site-footer{
    max-width:100%;
  }
}

/* Coarse-pointer safeguard for phones with wider CSS viewports. */
@media (hover:none) and (pointer:coarse){
  .service-card:hover,
  .benefit:hover,
  .project-card:hover,
  .process-step:hover,
  .feature:hover,
  .builder-option:hover,
  .faq-item:hover,
  .icon-btn:hover{
    transform:none!important;
  }
}