/* Mobile-first performance layer. Desktop visuals stay unchanged. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  html, body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* High-frequency overlay noise is expensive on mobile GPUs. */
  .film-grain { display: none !important; }

  /* Keep one mist layer instead of stacking two full-screen blurred layers. */
  .mist.second,
  .silver-mist.second { display: none !important; }

  .mist,
  .silver-mist,
  .floor-mist,
  .fog,
  .transition-fog,
  .pensieve-mist,
  .memory-mist {
    filter: blur(10px) !important;
    will-change: transform, opacity;
  }

  /* Reduce large continuously composited glow surfaces. */
  .golden-glow,
  .patronus-glow,
  .diary-glow,
  .trophy-glow,
  .map-warmth,
  .blank-glow,
  .book-light,
  .door-light,
  .liquid-glow,
  .pensieve-glow {
    filter: blur(12px) !important;
  }

  /* Full-screen background-position particle animation forces repaints.
     A static field still keeps the magical look while removing that cost. */
  .particles {
    animation: none !important;
    opacity: .4 !important;
  }

  /* Pensieve memory pages: animate transforms, not element height. */
  .strand {
    height: 34% !important;
    filter: none !important;
    will-change: transform, opacity;
  }
  .strand.s1 { --strand-angle: -42deg; animation: strandPulseMobile 8s ease-in-out infinite !important; }
  .strand.s2 { --strand-angle: -22deg; animation: strandPulseMobile 8.5s ease-in-out infinite .5s !important; }
  .strand.s3 { --strand-angle: 0deg; animation: strandPulseMobile 8s ease-in-out infinite 1s !important; }
  .strand.s4 { --strand-angle: 22deg; animation: strandPulseMobile 8.5s ease-in-out infinite 1.5s !important; }
  .strand.s5 { --strand-angle: 42deg; animation: strandPulseMobile 8s ease-in-out infinite 2s !important; }

  @keyframes strandPulseMobile {
    0%, 100% {
      transform: translate(-50%, -50%) rotate(var(--strand-angle)) scaleY(.72);
      opacity: .30;
    }
    50% {
      transform: translate(-50%, -50%) rotate(var(--strand-angle)) scaleY(1.28);
      opacity: .88;
    }
  }

  /* Background duplicate of memory video is decorative; keep only main video on mobile. */
  .memory-video-bg { display: none !important; }

  /* Final character typing: remove per-letter blur on mobile. */
  .writing-char {
    filter: none !important;
    animation: charWriteMobile .38s ease forwards !important;
    will-change: transform, opacity;
  }
  @keyframes charWriteMobile {
    from { opacity: 0; transform: translateY(7px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Critical final word: compositor-only reveal, no blur dependency. */
  .always {
    filter: none !important;
    transform: scale(.92) !important;
    transition: opacity .9s ease, transform .9s ease !important;
  }
  .always.show {
    opacity: 1 !important;
    filter: none !important;
    transform: scale(1) !important;
  }

  /* Limit unnecessary off-screen repaint cost. */
  .scene,
  .content,
  .memory-frame,
  .figure,
  .patronus-wrap {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
}