/* An Dien motion layer v1 — page transitions, scroll reveal, click feedback.
   Everything here is progressive: without JS or on older browsers the site renders as before. */

/* 1. Cross-page transition (Chrome/Edge 126+, Safari 18.2+) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root) { animation: ad-page-out .22s ease both; }
::view-transition-new(root) { animation: ad-page-in .38s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ad-page-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes ad-page-in { from { opacity: 0; transform: translateY(14px); } }
/* keep the header still while the page underneath changes */
.site-header { view-transition-name: ad-header; }
::view-transition-group(ad-header) { animation: none; z-index: 10; }
::view-transition-old(ad-header), ::view-transition-new(ad-header) { animation: none; }
/* the old fade-in would run twice during a view transition */
html.ad-vt .page.active { animation: none; }

/* 2. Product image travels from a card to the product page */
::view-transition-group(ad-product) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2,.75,.15,1); z-index: 5; }
::view-transition-old(ad-product), ::view-transition-new(ad-product) { height: 100%; object-fit: contain; }

/* 3. Scroll reveal (classes are added by motion-v1.js) */
.ad-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--ad-delay, 0ms); }
.ad-reveal.ad-in { opacity: 1; transform: none; }

[data-ad-count] { font-variant-numeric: tabular-nums; }

/* 5. Gallery image cross-fade */
.detail-main.ad-swap { animation: ad-swap .38s ease both; }
@keyframes ad-swap { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: none; } }

/* 6. Click and hover feedback */
.button, .nav-quote, .gallery-arrow, .thumb { transition: transform .16s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; }
.button:active, .nav-quote:active, .gallery-arrow:active { transform: translateY(1px) scale(.97); }
.thumb:active { transform: scale(.94); }
@media (hover: hover) {
  .button:hover, .nav-quote:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(24, 58, 36, .18); }
  .button:active, .nav-quote:active { transform: translateY(1px) scale(.97); box-shadow: none; }
  .product-card, .find-card, .other-card, .prod-index > a, .order-step, .enquiry-card {
    transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .2s ease;
  }
  .product-card:hover, .find-card:hover, .other-card:hover, .prod-index > a:hover, .order-step:hover, .enquiry-card:hover {
    transform: translateY(-5px); box-shadow: 0 18px 38px rgba(24, 58, 36, .12);
  }
}

/* 7. Header reacts to scrolling + reading progress */
.site-header { transition: box-shadow .3s ease, background-color .3s ease; }
.site-logo img { transition: transform .3s ease; transform-origin: left center; }
html.ad-scrolled .site-header { background: #1d4430; box-shadow: 0 10px 30px rgba(15, 40, 25, .28); }
html.ad-scrolled .site-logo img { transform: scale(.9); }
.ad-progress { position: absolute; left: 0; bottom: -1px; height: 3px; width: 100%; background: var(--lime, #c8f25c); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* 8. Slow zoom on the hero photographs (image is visible from the first frame) */
@media (prefers-reduced-motion: no-preference) {
  .home-hero--photo .home-food, .catalog-hero--photo .catalog-visual > picture > img { animation: ad-ken 14s ease-out both; transform-origin: 50% 60%; }
}
@keyframes ad-ken { from { transform: scale(1); } to { transform: scale(1.045); } }

@media (prefers-reduced-motion: reduce) {
  .ad-reveal { opacity: 1; transform: none; }
  .ad-progress { display: none; }
}