/* ============ Round 15: feels like an app (31 Oct 2026, the owner: "make all the pages feel more native, like the 'how much do I need' sheet", and a hover on the
   product cards "so the user knows the card is clickable") ============
   What a native app does that a web page often does not, and what this file adds (only transform and opacity animate; hover only for a mouse; reduced
   motion turns every movement off):
   1  a product card answers the pointer: the product rises a little in its tile, a soft light comes up behind it, the name is underlined; a finger
      pressing the card sinks the tile a little
   2  touch: no grey flash on tap, no double-tap zoom wait, no text selection on buttons and tabs; tabs, chips and rows give way under the finger
   3  pages glide into each other instead of flashing white (cross-document view transitions): the header stays put, the new page rises in, and a
      product's photo travels from its card into the product page and back (native.js names the photo that was tapped)
   Next pages load while the pointer rests on a link (speculation rules, Layout::scripts), so the glide is not a wait. */

/* ---- 1. product card ---------------------------------------------------------------------------------------------------------------------------------- */
.pcd-tile::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; opacity: 0;
  background: radial-gradient(85% 65% at 50% 32%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 72%);
}
@media (hover: hover) and (pointer: fine) {
  .pcd-media img:not(.fi-bd) { transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
  .pcd-tile::after { transition: opacity .35s ease; }
  .pcd:hover .pcd-media img:not(.fi-bd) { transform: translateY(-5px) scale(1.035); }
  .pcd:hover .pcd-media.is-whole img:not(.fi-bd) { transform: translateX(-50%) translateY(-5px) scale(1.035); }
  .pcd:hover .pcd-tile::after { opacity: 1; }
  .pcd:hover .pcd-name a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
  /* pointing at the Order button is about the button, not the card */
  .pcd:has(.pcd-order:hover) .pcd-media img:not(.fi-bd) { transform: none; }
  .pcd:has(.pcd-order:hover) .pcd-media.is-whole img:not(.fi-bd) { transform: translateX(-50%); }
  .pcd:has(.pcd-order:hover) .pcd-tile::after { opacity: 0; }
  .pcd:has(.pcd-order:hover) .pcd-name a { text-decoration: none; }
}
/* a finger on the card (the name's link covers the card; the Order button is not part of it) */
.pcd-tile { transition: transform .18s cubic-bezier(.2, .8, .2, 1); }
.pcd:has(.pcd-name a:active) .pcd-tile { transform: scale(.975); }

/* ---- 2. touch ---------------------------------------------------------------------------------------------------------------------------------------- */
html { -webkit-tap-highlight-color: transparent; }
a, button, label, summary, [role="button"], input[type="checkbox"], input[type="radio"] { touch-action: manipulation; }
button, .btn, summary, .shop-cat, .shop-chip, .ssb-season-pill, .chip, .c-topic, .pdp-variant-opt, .nav-dd-trigger, .sf-tab, .cm-seg-btn { -webkit-user-select: none; user-select: none; }
/* rows and tiles that are links give way under the finger (opacity, like the phone menu's rows); buttons already sink (.btn:active) */
@media (hover: none) {
  :is(.ri, .sp-card, .ph-card, .rng-card, .shop-cat, .shop-chip, .ssb-season-pill, .sf-tab, .c-topic, .ct-channel, .faq-jump a, .breadcrumbs a):active { opacity: .6; }
  :is(.ri, .sp-card, .ph-card, .rng-card, .shop-cat, .shop-chip, .ssb-season-pill, .sf-tab, .c-topic, .ct-channel, .faq-jump a, .breadcrumbs a) { transition: opacity .2s ease; }
  :is(.ri, .sp-card, .ph-card, .rng-card, .shop-cat, .shop-chip, .ssb-season-pill, .sf-tab, .c-topic, .ct-channel, .faq-jump a, .breadcrumbs a):active { transition-duration: 0s; }
}

/* ---- 3. pages glide into each other ------------------------------------------------------------------------------------------------------------------ */
@view-transition { navigation: auto; }
nav.nav { view-transition-name: fi-nav; }
.promo { view-transition-name: fi-promo; }
::view-transition-old(root) { animation: fi-vt-out .16s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: fi-vt-in .3s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes fi-vt-out { to { opacity: 0; } }
@keyframes fi-vt-in { from { opacity: 0; transform: translateY(12px); } }
/* the product's photo: the main picture of a product page, and the card's picture that was tapped (native.js) */
.pdp-gallery-main > img:not(.fi-bd) { view-transition-name: fi-product; }
::view-transition-group(fi-product) { animation-duration: .38s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(fi-product), ::view-transition-new(fi-product) { height: 100%; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .pcd-tile, .pcd-media img:not(.fi-bd), .pcd-tile::after { transition: none !important; }
  .pcd:has(.pcd-name a:active) .pcd-tile { transform: none; }
}