/* Motion for every tab. Everything here sits behind the site's Motion switch (body[data-motion=on]) and the system "reduce motion"
   setting, so it is simply absent for people who turn animation off. ambient.js marks blocks and cards with data-reveal; the
   hidden starting state below only applies once reveal() is actually watching them, so nothing is ever left invisible. */
@media (prefers-reduced-motion: no-preference) {
  /* ---- entrances ---- */
  body[data-motion=on] .page-panel:not(#panel-finance)[data-reveal-ready] [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(20px) scale(.985); }
  body[data-motion=on] .page-panel:not(#panel-finance) [data-reveal].is-in { animation: ui-rise .7s var(--ui-ease) backwards; animation-delay: calc(var(--d, 0) * 65ms); }
  body[data-motion=on] .page-panel:not([hidden]) :is(.explore-heading, .hero, .home-hero, .bc-hero) h1 { animation: ui-title .9s var(--ui-ease) backwards; }
  body[data-motion=on] .page-panel:not([hidden]) :is(.explore-heading, .hero, .home-hero, .bc-hero) :is(.eyebrow, p) { animation: ui-fade .9s var(--ui-ease) .15s backwards; }

  /* ---- things that respond to a pointer ---- */
  body[data-motion=on] #workspace .page-panel :is(.advanced-card, .catalog-card, .review-card, .news-card, .note-library-card, .resale-card, .item-row, .home-feature, .scent-compare-card, .market-stat > div) {
    transition: transform .4s var(--ui-ease), box-shadow .4s var(--ui-ease), border-color .25s;
  }
  body[data-motion=on] #workspace .page-panel :is(.catalog-card, .review-card, .news-card, .note-library-card, .resale-card, .item-row, .home-feature, .market-stat > div):hover {
    transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent-color, #5b6bb5) 40%, var(--line)); box-shadow: 0 24px 40px -28px var(--shadow-float, rgb(20 20 40 / .35));
  }
  body[data-motion=on] :is(.primary, .secondary, .compare-btn) { transition: transform .3s var(--ui-ease), box-shadow .3s var(--ui-ease), background-color .2s, border-color .2s, color .2s; }
  body[data-motion=on] :is(.primary, .secondary, .compare-btn):hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 22px -14px var(--shadow-float, rgb(20 20 40 / .4)); }
  body[data-motion=on] :is(.primary, .secondary, .compare-btn):active:not(:disabled) { transform: translateY(0) scale(.97); box-shadow: none; transition-duration: .1s; }
  body[data-motion=on] .catalog-card img, body[data-motion=on] .note-library-card img, body[data-motion=on] .review-card img { transition: transform .6s var(--ui-ease); }
  body[data-motion=on] .catalog-card:hover img, body[data-motion=on] .note-library-card:hover img, body[data-motion=on] .review-card:hover img { transform: scale(1.04); }
  body[data-motion=on] .grouped-navigation > [data-tab], body[data-motion=on] .grouped-navigation > .nav-group > summary { transition: background-color .3s var(--ui-ease), color .3s, transform .3s var(--ui-ease); }
  body[data-motion=on] .grouped-navigation > [data-tab]:hover, body[data-motion=on] .grouped-navigation > .nav-group > summary:hover { transform: translateY(-1px); }

  /* ---- a quiet, endless drift on hero art, kept to a few pixels ---- */
  body[data-motion=on] .page-panel:not([hidden]) :is(.home-bottle-collage, .hero > .total-panel, .explore-heading > aside) { animation: ui-pop .9s var(--ui-ease) .2s backwards, ui-drift 9s ease-in-out 1.2s infinite alternate; }

  /* ---- reading progress, where the browser can tie an animation to scrolling ---- */
  @supports (animation-timeline: scroll()) {
    html::after { content: ""; position: fixed; z-index: 120; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--accent-color, #5b6bb5), color-mix(in srgb, var(--accent-color, #5b6bb5) 40%, #e9a4c1)); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; animation: ui-progress linear both; animation-timeline: scroll(root); }
  }
}
@keyframes ui-rise { from { opacity: 0; transform: translateY(20px) scale(.985); } }
@keyframes ui-title { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }
@keyframes ui-fade { from { opacity: 0; transform: translateY(8px); } }
@keyframes ui-pop { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes ui-drift { to { transform: translateY(-6px); } }
@keyframes ui-progress { to { transform: scaleX(1); } }
[data-reveal-static].is-in { animation: none !important; }