/*
 * Motion — calm and fast.
 * Only opacity and transform are animated (handled by the GPU, no layout work), nothing
 * above the fold animates on load, and everything is switched off for visitors who
 * prefer reduced motion. Plain CSS: no build step. Loaded after site.css.
 */
:root {
  --ease-out-soft: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out-soft: cubic-bezier(.45, 0, .2, 1);
}

@media (prefers-reduced-motion: no-preference) {

  /* 1. Page transitions: a soft cross-fade with a slight "camera settle".
        Cross-document View Transitions (Chrome/Edge 126+, Safari 18.2+). Other browsers
        navigate normally. The header keeps its place instead of fading. */
  @view-transition { navigation: auto; }

  ::view-transition-old(root) { animation: rt-page-out 200ms var(--ease-in-out-soft) both; }
  ::view-transition-new(root) { animation: rt-page-in 420ms var(--ease-out-soft) both; }

  body > header { view-transition-name: site-header; }
  ::view-transition-old(site-header),
  ::view-transition-new(site-header) { animation: none; mix-blend-mode: normal; }
  ::view-transition-old(site-header) { display: none; }

  @keyframes rt-page-out { to { opacity: 0; transform: scale(.994); } }
  @keyframes rt-page-in  { from { opacity: 0; transform: translateY(8px) scale(1.004); } }

  /* 2. Scroll reveal: added by site.js only to elements below the fold; removed again
        once the element has appeared, so hover effects keep their own transitions. */
  .rt-reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 700ms var(--ease-out-soft), transform 700ms var(--ease-out-soft);
    transition-delay: var(--rt-delay, 0ms);
  }
  .rt-reveal.rt-in { opacity: 1; transform: none; }
}

/* Printing always shows everything, whether or not it has scrolled into view. */
@media print {
  .rt-reveal { opacity: 1 !important; transform: none !important; }
}

/* 3. Hover — pointer devices only, so touch screens never get "stuck" hover states. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn { transition-property: color, background-color, border-color, box-shadow, translate, scale; transition-timing-function: var(--ease-out-soft); }
  .btn:hover { translate: 0 -1px; }
  .btn:active { translate: 0; scale: .985; transition-duration: 80ms; }

  .card-hover { transition-timing-function: var(--ease-out-soft); }

  /* Menu: a saffron underline that draws in from the left */
  .nav-link::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -2px;
    height: 2px;
    border-radius: 999px;
    background: var(--color-saffron-500);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 320ms var(--ease-out-soft);
  }
  .nav-link:hover::after,
  .nav-link[aria-current="page"]::after { transform: scaleX(1); }

  .prose-ayur a { transition: color 200ms ease, text-decoration-color 200ms ease; }
  .prose-ayur a:hover { text-decoration-color: var(--color-kumkum-600); }

  /* Treatments mega-menu: a saffron tick grows out of the column line and the name
     slides a touch to the right; the category icon tilts. */
  .mega-link { position: relative; transition: color 200ms ease, translate 260ms var(--ease-out-soft); }
  .mega-link::before {
    content: "";
    position: absolute;
    left: calc(-0.75rem - 3px);
    top: 50%;
    width: .5rem;
    height: 2px;
    margin-top: -1px;
    border-radius: 999px;
    background: var(--color-saffron-500);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 260ms var(--ease-out-soft);
  }
  .mega-link:hover, .mega-link:focus-visible { translate: 3px 0; }
  .mega-link:hover::before, .mega-link:focus-visible::before { transform: scaleX(1); }

  .mega-cat svg { transition: transform 320ms var(--ease-out-soft); }
  .mega-cat:hover svg, .mega-cat:focus-visible svg { transform: rotate(-10deg) scale(1.15); }
}