/* Lighter visual effects for touch, narrow and reduced-motion devices.
   Keeps the pastel composition while avoiding continuous GPU-heavy work. */

@media (max-width: 700px), (pointer: coarse) {
  body {
    background-attachment: scroll;
  }

  /* Storefront ambient layers: keep the artwork, stop continuous repainting. */
  body::after,
  main::before,
  main::after,
  .hero::before,
  .hero::after,
  .hero > div:first-child::before,
  .hero-card::before,
  .coloring-hero::before {
    animation: none;
  }

  body::after,
  main::before,
  main::after,
  .coloring-hero::before {
    transform: none;
    will-change: auto;
  }

  body::after {
    filter: none;
    opacity: .58;
  }

  main::after {
    opacity: .42;
  }

  .hero::before,
  .hero::after,
  .coloring-hero::before {
    filter: blur(6px);
    opacity: .72;
  }

  /* Fixed translucent surfaces are expensive on many mobile GPUs. */
  body > header,
  .cw-mobile-popover,
  .store-header,
  .panel,
  .coloring-landing-body .craft-flow article,
  .coloring-landing-body .material-card,
  .coloring-landing-body .kit-grid article,
  .coloring-landing-body .scheme-step,
  .coloring-landing-body .coloring-product-card,
  .coloring-landing-body .faq-list details,
  .coloring-landing-body .binding-note {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body > header {
    filter: none;
    box-shadow: 0 1px 0 #ffffffdf, 0 8px 22px #50357a18;
  }

  body > header::before {
    filter: none;
    opacity: .42;
  }

  .hero-card {
    transform: none;
    box-shadow: 0 18px 48px #8b65ff2e;
  }

  .product {
    transform: none;
  }

  .product:hover {
    translate: 0 -3px;
  }

  /* Editorial landing pages are completely static on touch/mobile. */
  .editorial-mobile-static [data-reveal],
  .coloring-landing-body.editorial-mobile-static [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .coloring-landing-body .landing-store-return {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 8px 9px;
    font-size: 11px;
  }

  .coloring-landing-body .editorial-cart {
    min-width: 0;
    padding: 10px 11px;
    font-size: 12px;
  }

  /* Cart / checkout flow uses its own large fixed decorative layers. */
  .shell::before,
  .shell::after {
    animation: none;
  }

  .shell::before {
    position: absolute;
    opacity: .42;
  }

  .shell::after {
    display: none;
  }

  .store-header {
    box-shadow: 0 8px 22px #38235a12;
  }

  .panel {
    box-shadow: 0 12px 32px #38235a1a;
  }

  .product-dialog::backdrop,
  .availability-dialog::backdrop,
  .checkout-dialog::backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Safari handles this cheap background-position animation well enough to keep
   some of the storefront's character on touch devices. Editorial landing pages
   remain fully static on mobile. */
@media (prefers-reduced-motion: no-preference) and (max-width: 700px),
       (prefers-reduced-motion: no-preference) and (pointer: coarse) {
  html.cw-safari body:not(.coloring-landing-body) main::after {
    animation: cwSparkleDrift 24s linear infinite;
    will-change: background-position;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::after,
  main::before,
  main::after,
  .hero::before,
  .hero::after,
  .hero > div:first-child::before,
  .hero-card::before,
  .coloring-hero::before,
  .shell::before,
  .shell::after {
    animation: none;
  }

  main::before,
  main::after,
  .coloring-hero::before {
    transform: none;
    will-change: auto;
  }

  .hero-card,
  .product {
    transform: none;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}