/* =========================================================
   OFFICINA DIGITALE - MOBILE BACKGROUND PREMIUM V14
   Obiettivo:
   - sfondo mobile simile al desktop
   - scroll stabile
   - menu mobile solido
   - niente fixed / blur pesanti / transform animati
========================================================= */

@media (max-width: 900px) {

  html {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-behavior: auto !important;
    -webkit-text-size-adjust: 100% !important;
    background: #050816 !important;
  }

  body {
    position: relative !important;
    isolation: isolate !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
    overscroll-behavior-x: none !important;
    scroll-behavior: auto !important;

    background:
      radial-gradient(circle at 8% 3%, rgba(110, 231, 255, .26), transparent 22rem),
      radial-gradient(circle at 92% 4%, rgba(167, 139, 250, .25), transparent 24rem),
      radial-gradient(circle at 48% 28%, rgba(255, 184, 107, .10), transparent 28rem),
      linear-gradient(180deg, #030612 0%, #071026 38%, #050816 72%, #030612 100%) !important;
  }

  /* Spegne lo sfondo originale pesante */
  .scp-bg,
  .scp-bg *,
  .scp-bg__noise,
  .scp-bg__grid,
  .scp-bg__aurora,
  .scp-bg__beam,
  .scp-scroll-progress {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
    pointer-events: none !important;
  }

  /*
    Sfondo premium mobile:
    - absolute, non fixed
    - no blur
    - no transform
    - solo opacity lenta
  */
  body::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 320vh !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: .88 !important;
    filter: none !important;
    transform: none !important;
    mix-blend-mode: normal !important;
    background:
      radial-gradient(circle at 12% 5%, rgba(110, 231, 255, .38), transparent 20rem),
      radial-gradient(circle at 88% 8%, rgba(167, 139, 250, .36), transparent 22rem),
      radial-gradient(circle at 48% 22%, rgba(96, 165, 250, .18), transparent 24rem),
      radial-gradient(circle at 18% 58%, rgba(34, 211, 238, .15), transparent 22rem),
      radial-gradient(circle at 88% 66%, rgba(240, 171, 252, .13), transparent 24rem),
      radial-gradient(circle at 52% 86%, rgba(255, 184, 107, .12), transparent 27rem) !important;
    animation: od-mobile-premium-pulse 15s ease-in-out infinite alternate !important;
    will-change: opacity !important;
  }

  /*
    Griglia desktop-like statica:
    dà profondità senza far scattare lo scroll.
  */
  body::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 320vh !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: .22 !important;
    filter: none !important;
    transform: none !important;
    mix-blend-mode: screen !important;
    background-image:
      linear-gradient(rgba(110,231,255,.14) 1px, transparent 1px),
      linear-gradient(90deg, rgba(167,139,250,.12) 1px, transparent 1px),
      linear-gradient(118deg, transparent 0 43%, rgba(110,231,255,.18) 50%, transparent 57%),
      linear-gradient(62deg, transparent 0 51%, rgba(167,139,250,.16) 56%, transparent 63%) !important;
    background-size:
      52px 52px,
      52px 52px,
      240px 240px,
      280px 280px !important;
    mask-image: linear-gradient(to bottom, black 0%, black 72%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 72%, transparent 100%) !important;
    animation: none !important;
  }

  @keyframes od-mobile-premium-pulse {
    0%   { opacity: .74; }
    45%  { opacity: .94; }
    100% { opacity: .82; }
  }

  /* Contenuti sopra lo sfondo */
  .site-header,
  .scp-header,
  main,
  footer,
  .scp-footer,
  section,
  article {
    position: relative !important;
    z-index: 1 !important;
  }

  /* Menu mobile: fondo pieno, leggibile, non trasparente */
  .scp-header {
    z-index: 9998 !important;
    isolation: isolate !important;
  }

  .scp-header__inner {
    position: relative !important;
    z-index: 9999 !important;
  }

  .scp-menu-btn {
    position: relative !important;
    z-index: 10001 !important;
    background: rgba(8, 13, 33, .96) !important;
    border: 1px solid rgba(110,231,255,.26) !important;
    box-shadow: 0 0 26px rgba(110,231,255,.14) !important;
  }

  .scp-mobile-menu {
    z-index: 10000 !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(110,231,255,.20), transparent 18rem),
      radial-gradient(circle at 88% 18%, rgba(167,139,250,.18), transparent 18rem),
      linear-gradient(180deg, rgba(5,8,22,.99), rgba(3,6,20,.985)) !important;
    border: 1px solid rgba(110,231,255,.22) !important;
    box-shadow:
      0 26px 90px rgba(0,0,0,.78),
      0 0 42px rgba(110,231,255,.14),
      inset 0 1px rgba(255,255,255,.12) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .scp-header.is-menu-open .scp-mobile-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }

  .scp-mobile-menu__block a {
    background: rgba(255,255,255,.085) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: rgba(247,248,255,.86) !important;
  }

  .scp-mobile-menu__cta {
    color: #031219 !important;
    background: linear-gradient(135deg, #6ee7ff, #a78bfa) !important;
    box-shadow: 0 0 32px rgba(110,231,255,.22) !important;
  }

  /* Header stabile */
  .site-header,
  .scp-header {
    top: auto !important;
    transform: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Spegne decorazioni originali pesanti */
  .editable-home-hero__bg[data-astro-cid-viiwz7uv],
  .editable-home-hero__grid[data-astro-cid-viiwz7uv],
  .editable-home-hero__orb[data-astro-cid-viiwz7uv],
  .editable-home-hero__orb--a[data-astro-cid-viiwz7uv],
  .editable-home-hero__orb--b[data-astro-cid-viiwz7uv],
  .editable-machine[data-astro-cid-viiwz7uv]::before,
  .editable-machine__ring[data-astro-cid-viiwz7uv],
  .editable-machine__ring[data-astro-cid-viiwz7uv]::before,
  .editable-machine__ring[data-astro-cid-viiwz7uv]::after,
  .editable-machine__line[data-astro-cid-viiwz7uv],
  .hero-section::before,
  .page-hero::before,
  .contact-hero::before,
  .premium-hero::before,
  .premium-hero::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }

  /* Reveal visibili, zero blur/translate */
  .reveal,
  .reveal-delay-1,
  .reveal-delay-2,
  .reveal-delay-3,
  [class*="reveal"],
  .fx-reveal,
  .fx-card,
  .fx-card.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }

  /* Card stabili */
  .hero-card,
  .service-card,
  .price-card,
  .audience-card,
  .case-card,
  .mini-panel,
  .contact-mini-card,
  .lead-form,
  .cta-panel,
  .stat-card,
  .pricing-card,
  .case-study-card,
  .sector-module-card,
  .app-module-card,
  .web-package-card,
  .booking-flow-card,
  .final-side-panel,
  .final-cta-panel {
    transform: none !important;
    transform-style: flat !important;
    backface-visibility: visible !important;
    perspective: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .hero-title span,
  .page-title span,
  .contact-title span,
  .section-title span,
  .premium-title span,
  .final-title span,
  .final-section-title span,
  .editable-home-hero__title[data-astro-cid-viiwz7uv] span[data-astro-cid-viiwz7uv] {
    animation: none !important;
    background-size: 100% 100% !important;
  }

  img,
  picture,
  svg,
  video,
  canvas,
  iframe {
    max-width: 100% !important;
    height: auto;
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  @media (prefers-reduced-motion: reduce) {
    body::before {
      animation: none !important;
      opacity: .82 !important;
    }
  }
}