/* Shared motion and theme-switch styles for both versions. Uses each version's own tokens. */

/* Theme switch: soft pill track with a sliding sun/moon knob */
.theme-switch {
  --ts-w: 104px; --ts-h: 42px; --ts-k: 34px;
  position: relative; flex: none; width: var(--ts-w); height: var(--ts-h); padding: 0; border: 0; cursor: pointer;
  border-radius: 999px; background: #e8edf3; color: #5f6f82;
  box-shadow: inset 2px 2px 5px rgba(3, 38, 79, .14), inset -2px -2px 5px rgba(255, 255, 255, .9);
  transition: background-color .35s, box-shadow .35s;
}
.ts-label {
  position: absolute; top: 50%; translate: 0 -50%; font: 700 .7rem/1 var(--body, var(--text, system-ui)); letter-spacing: .08em; text-transform: uppercase;
  transition: opacity .3s;
}
.ts-light { right: 13px; }
.ts-dark { left: 14px; opacity: 0; color: #aab8cb; }
.ts-knob {
  position: absolute; top: 4px; left: 4px; width: var(--ts-k); height: var(--ts-k); border-radius: 50%;
  display: grid; place-items: center; background: linear-gradient(145deg, #ffffff, #e9eef4); color: #f2a300;
  box-shadow: 0 3px 8px rgba(3, 38, 79, .22), inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), background .35s, color .35s;
}
.ts-knob svg { position: absolute; width: 19px; height: 19px; transition: opacity .3s, transform .45s cubic-bezier(.2, .8, .2, 1); }
.ts-knob .moon { opacity: 0; transform: rotate(-60deg) scale(.6); }
:root[data-theme="dark"] .theme-switch {
  background: #0d1a2a; box-shadow: inset 2px 2px 6px rgba(0, 0, 0, .55), inset -2px -2px 5px rgba(255, 255, 255, .05);
}
:root[data-theme="dark"] .ts-light { opacity: 0; }
:root[data-theme="dark"] .ts-dark { opacity: 1; }
:root[data-theme="dark"] .ts-knob {
  transform: translateX(calc(var(--ts-w) - var(--ts-k) - 8px));
  background: linear-gradient(145deg, #3a4b63, #26354a); color: #dbe6f5;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .12);
}
:root[data-theme="dark"] .ts-knob .sun { opacity: 0; transform: rotate(60deg) scale(.6); }
:root[data-theme="dark"] .ts-knob .moon { opacity: 1; transform: none; }
.theme-switch:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.theme-switch:active .ts-knob { scale: .94; }
@media (max-width: 420px) { .theme-switch { --ts-w: 88px; --ts-h: 40px; --ts-k: 32px; } .ts-label { font-size: .62rem; } .ts-light { right: 10px; } .ts-dark { left: 11px; } }

/* Theme change is animated by fx.js; keep the default cross-fade out of the way. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* Scroll progress bar (CSS scroll-driven, no JS) */
.progress { display: none; }
@supports (animation-timeline: scroll()) {
  .fx .progress {
    display: block; position: fixed; inset: 0 0 auto; height: 3px; z-index: 70; transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--green), #19d3a2); transform: scaleX(0);
    animation: progress linear both; animation-timeline: scroll(root);
  }
  @keyframes progress { to { transform: scaleX(1); } }
}

/* Scroll reveals */
.fx [data-fx] { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.fx [data-fx].in { opacity: 1; transform: none; }

/* Hero entrance */
.fx .hero-copy > *, .fx .hero-card .hero-copy > * { animation: rise .8s cubic-bezier(.2, .8, .2, 1) both; }
.fx .hero-copy > :nth-child(2) { animation-delay: .08s; }
.fx .hero-copy > :nth-child(3) { animation-delay: .16s; }
.fx .hero-copy > :nth-child(4) { animation-delay: .24s; }
.fx .hero-copy > :nth-child(5) { animation-delay: .32s; }
.fx .hero-art > * { animation: pop .9s cubic-bezier(.2, .9, .25, 1.15) both; animation-delay: calc(.25s + var(--d, 0s)); }
.fx .hero-art > :nth-child(2) { --d: .12s; }
.fx .hero-art > :nth-child(3) { --d: .24s; }
.fx .hero-art > :nth-child(4) { --d: .36s; }
.fx .hero-art > :nth-child(5) { --d: .48s; }
.fx .perks li { animation: rise .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.4s + var(--i, 0) * .08s); }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes pop { from { opacity: 0; scale: .85; } }

/* Gentle floating for hero badges and photos */
.fx .float-pill, .fx .vet-chip { animation: pop .9s cubic-bezier(.2, .9, .25, 1.15) both, bob 5s ease-in-out 1.2s infinite; }
.fx .pill-b { animation-delay: .5s, 2s; }
.fx .hero-art .shot img, .fx .arch img { animation: drift 9s ease-in-out infinite alternate; }
@keyframes bob { 50% { translate: 0 -8px; } }
@keyframes drift { to { transform: scale(1.06) translateY(-6px); } }

/* Product cards: staggered entrance whenever the grid re-renders */
.fx .grid .card, .fx .rail .card { animation: card-in .55s cubic-bezier(.2, .8, .2, 1) both; }
.fx .grid .card:nth-child(2) { animation-delay: .04s; } .fx .grid .card:nth-child(3) { animation-delay: .08s; }
.fx .grid .card:nth-child(4) { animation-delay: .12s; } .fx .grid .card:nth-child(5) { animation-delay: .16s; }
.fx .grid .card:nth-child(6) { animation-delay: .2s; }  .fx .grid .card:nth-child(7) { animation-delay: .24s; }
.fx .grid .card:nth-child(8) { animation-delay: .28s; } .fx .grid .card:nth-child(n+9) { animation-delay: .32s; }
@keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }

/* Hover lift for cards and pill buttons (pointer devices only) */
@media (hover: hover) {
  .fx .card { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
  .fx .card:hover { transform: translateY(-4px); }
  .fx .btn:hover, .fx .btn-arrow:hover, .fx .pill-link:hover { transform: translateY(-2px); }
  .fx .btn-arrow:hover span { transform: translateX(3px); }
  .fx .btn-arrow span { transition: transform .25s; }
}

/* Add-to-cart buttons get a springy press */
.fx .add:active, .fx .mini button:active { transform: scale(.85); }

/* Parallax on hero photos where scroll-driven animations exist */
@supports (animation-timeline: view()) {
  .fx .arch-dog { animation: pop .9s cubic-bezier(.2, .9, .25, 1.15) both, parallax-up linear both; animation-timeline: auto, view(); animation-range: normal, exit; }
  @keyframes parallax-up { to { translate: 0 -60px; } }
}

/* Brand marquee (Option B) */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 10px; width: max-content; }
.fx .marquee-track { animation: marquee 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - 5px)); } }

@media (prefers-reduced-motion: reduce) {
  .marquee { mask-image: none; -webkit-mask-image: none; }
  .marquee-track { flex-wrap: wrap; width: auto; }
  .marquee-track [aria-hidden="true"] { display: none; }
}