/* motion.css — shared "feel" layer for every S2S page (Sep 2026 UI upgrade).
   Pairs with motion.js. Rules of this file:
   - Nothing here can hide content on its own. The only hidden pre-animate state
     (.s2s-pre) is ADDED BY motion.js, so if the script never runs, nothing is hidden.
   - Everything respects prefers-reduced-motion: reduce (see the block at the bottom).
   - Uses the individual `scale` / `translate` properties, never `transform`, so it
     composes with whatever transforms the pages already use instead of replacing them.
   - Low-specificity :where() for anything a page might already style, so page rules win. */

/* ---------- 1. page-to-page transitions (cross-document View Transitions) ----------
   Browsers without support ignore the at-rule and navigate exactly as before. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: s2s-vt-out .16s ease-in both; }
::view-transition-new(root) { animation: s2s-vt-in .24s cubic-bezier(.2,.8,.2,1) both; }
@keyframes s2s-vt-out { to { opacity: 0; translate: 0 -8px; } }
@keyframes s2s-vt-in  { from { opacity: 0; translate: 0 14px; } }
/* the fixed "‹ S2S home" pill stays put while the page underneath changes */
.home { view-transition-name: s2s-home; }
::view-transition-group(s2s-home) { animation-duration: .2s; }

/* ---------- 2. shimmer skeletons ---------- */
.sk {
  display: block;
  border-radius: 7px;
  background: #1a2718 linear-gradient(90deg, #1a2718 0%, #1a2718 30%, #26391f 50%, #1a2718 70%, #1a2718 100%);
  background-size: 300% 100%;
  animation: s2s-shimmer 1.4s linear 14;   /* ~20 s, then it rests as a still block */
}
@keyframes s2s-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.sk-line  { height: 11px; margin: 9px 0; }
.sk-title { height: 16px; width: 42%; margin: 2px 0 12px; }
.sk-img   { height: 0; padding-bottom: 62%; border-radius: 16px; }
.sk-chip  { display: inline-block; vertical-align: top; height: 26px; width: 76px; border-radius: 9px; margin: 0 6px 6px 0; }
.sk-pic   { display: inline-block; vertical-align: top; width: 104px; height: 104px; border-radius: 12px; margin: 0 8px 10px 0; }
.sk-tile  { height: 78px; border-radius: 16px; }
.sk-card  { display: block; border: 1px solid #2a3a26; border-radius: 16px; background: #152014; padding: 14px 15px; margin: 0 0 12px; }
.sk-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin: 0 0 10px; }
@media (max-width: 360px) { .sk-grid4 { grid-template-columns: repeat(2, 1fr); } }
.sk-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 3. animate-in (states are toggled by motion.js only) ---------- */
html .s2s-pre { opacity: 0; translate: 0 16px; }
html .s2s-run { transition: opacity .5s cubic-bezier(.2,.8,.2,1), translate .5s cubic-bezier(.2,.8,.2,1); }
html .s2s-grow-x { transform-origin: left center; scale: 0 1; }
html .s2s-grow-y { transform-origin: center bottom; scale: 1 0; }
html .s2s-grow-run { transition: scale .7s cubic-bezier(.2,.8,.2,1); }

/* ---------- 4. touch feel ---------- */
:where(button, a.btn, .tile, a.chip, a.cta, a.go, .home, [role="button"], summary, a.card) {
  -webkit-tap-highlight-color: transparent;
  transition: scale .14s ease, filter .14s ease;
}
:where(button, a.btn, .tile, a.chip, a.cta, a.go, .home, [role="button"], summary, a.card):active:not(:disabled):not([aria-disabled="true"]) {
  scale: .97;
  filter: brightness(1.14);
}
/* a big full-width tile shrinking 3% moves a lot of pixels; keep those subtler */
:where(.tile, summary, a.card):active { scale: .985; }

/* pull-to-refresh indicator (built by motion.js on home, log and journey) */
html.s2s-ptr, html.s2s-ptr body { overscroll-behavior-y: contain; }
#s2sPtr {
  position: fixed; top: 0; left: 50%; z-index: 9999;
  width: 42px; height: 42px; margin-left: -21px; border-radius: 50%;
  background: #152014; border: 1px solid #2a3a26; box-shadow: 0 4px 16px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  translate: 0 -56px; opacity: 0; pointer-events: none;
  color: #8ee34a; font-size: 20px; line-height: 1;
}
#s2sPtr.s2s-back { transition: translate .22s ease, opacity .22s ease; }
#s2sPtr i { display: block; font-style: normal; }
#s2sPtr.s2s-ready { border-color: #5ea731; }
#s2sPtr.s2s-spin i { animation: s2s-spin .8s linear infinite; }
@keyframes s2s-spin { to { rotate: 360deg; } }

/* ---------- reduced motion: no movement anywhere ---------- */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .sk { animation: none; }
  html .s2s-pre { opacity: 1; translate: none; }
  html .s2s-grow-x, html .s2s-grow-y { scale: none; }
  html .s2s-run, html .s2s-grow-run { transition: none; }
  :where(button, a.btn, .tile, a.chip, a.cta, a.go, .home, [role="button"], summary, a.card) { transition: none; }
  :where(button, a.btn, .tile, a.chip, a.cta, a.go, .home, [role="button"], summary, a.card):active { scale: none; }
  #s2sPtr, #s2sPtr.s2s-back { transition: none; }
  #s2sPtr.s2s-spin i { animation: none; }
}