/* ============================================================
   Performance + smoothness pass. Loaded last so it wins.
   No visual redesign — this only stops work the browser was
   doing every frame for elements that never needed it.
   ============================================================ */

/* 1. `will-change: transform` was set on EVERY .wave-char span. With the
      product names split per character that was ~500 permanently promoted
      compositor layers. The animation composites fine without the hint;
      the hint is what cost the memory and the jank. */
.wave-char { will-change: auto; }

/* 2. .fish-desc had an infinite float animation — 46 of them running forever
      inside the card grid while you scroll. Headings keep their motion. */
.fish-desc { animation: none !important; }

/* 3. Cards were promoted to their own GPU layer permanently, ~56 of them.
      Promote only while a card is actually being tilted (the JS toggles
      .tilt-active on pointerenter and removes it on leave). */
@media (hover: hover) and (pointer: fine) {
  .fish-card, .combo-card { will-change: auto; }
  .fish-card.tilt-active, .combo-card.tilt-active { will-change: transform; }
}

/* 4. Off-screen cards should not paint at all. contain-intrinsic-size keeps
      the scrollbar honest so the page does not jump while scrolling. */
.fish-card, .combo-card {
  content-visibility: auto;
  contain-intrinsic-size: 320px;
}

/* 5. Smoother momentum scrolling, and never let a decorative layer capture
      touches meant for the page. */
html { -webkit-text-size-adjust: 100%; }
#fishBgCanvas, .bubble-layer, .petal-layer, .hero-water-canvas,
.hero-character, .durga-illustration { pointer-events: none; }

/* 6. Bigger, reliable tap targets for the weight pills. They were 32px tall
      on phones, under the 44px comfortable minimum, which made "1 kg / 500g"
      feel unselectable. Padding only — the grid layout is unchanged. */
@media (max-width: 600px) {
  .weight-option {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cut-fish-toggle { min-height: 34px; align-items: center; }
}

/* 7. Honour the OS setting: kill every decorative loop outright. */
@media (prefers-reduced-motion: reduce) {
  .wave-char, .section-sub, .hero p, .fish-desc,
  .auth-sub, .footer-about p { animation: none !important; }
}

/* 8. style.css lifts a product card 6px on hover. Combined with the pointer
      tilt that moved small controls out from under the cursor between press
      and release, so clicks on the weight pills were being dropped. Keep the
      lift for the card, but stop it moving once the pointer is on a control. */
@media (hover: hover) and (pointer: fine) {
  .fish-card.in-view:hover:has(.weight-option:hover),
  .fish-card.in-view:hover:has(.cut-fish-toggle:hover),
  .fish-card.in-view:hover:has(.add-cart-btn:hover) {
    transform: none !important;
  }
}

/* 9. .btn-ghost-nav ("Log out") was missed by the 44px tap-target rule in
      mobile.css because that list only covers buttons and .btn-primary/
      .btn-secondary anchors. It sat at 34px on phones. */
.btn-ghost-nav {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}