/* cs-bihar-ui · cross-page transitions
   - Modern: View Transitions API (Chrome/Edge/Safari 18+)
   - Fallback: body.is-leaving + html.is-entering classes driven by transition.js */

/* ───────── View Transitions API ───────── */
/* On supporting browsers, named shared elements (seal + accent label) morph
   between pages while the rest of the document cross-fades. */

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.42s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Old page: fade + slide subtle */
::view-transition-old(root) {
  animation-name: csbb-fade-out;
}
::view-transition-new(root) {
  animation-name: csbb-fade-in;
}

/* Shared brand mark — morphs in place */
::view-transition-old(brand-seal),
::view-transition-new(brand-seal) {
  animation-duration: 0.42s;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  mix-blend-mode: normal;
}

::view-transition-old(brand-mark),
::view-transition-new(brand-mark) {
  animation-duration: 0.42s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Disable view transitions if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(brand-seal),
  ::view-transition-new(brand-seal) {
    animation: none !important;
  }
}

/* ───────── Keyframes ───────── */

@keyframes csbb-fade-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.012); filter: blur(2px); }
}
@keyframes csbb-fade-in {
  from { opacity: 0; transform: scale(0.992); filter: blur(2px); }
  to   { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* ───────── Manual fallback ─────────
   Used on browsers without View Transitions. transition.js toggles classes. */

body {
  transition: opacity var(--dur-med, 220ms) var(--ease-soft, cubic-bezier(0.4,0,0.2,1)),
              transform var(--dur-med, 220ms) var(--ease-soft, cubic-bezier(0.4,0,0.2,1)),
              filter   var(--dur-med, 220ms) var(--ease-soft, cubic-bezier(0.4,0,0.2,1));
}

body.is-leaving {
  opacity: 0;
  transform: scale(1.012);
  filter: blur(2px);
  pointer-events: none;
}

html.is-entering body {
  animation: csbb-enter var(--dur-slow, 400ms) var(--ease-soft, cubic-bezier(0.4,0,0.2,1)) both;
}

@keyframes csbb-enter {
  0%   { opacity: 0; transform: translateY(6px); filter: blur(4px); }
  60%  { opacity: 1; transform: translateY(0);    filter: blur(0); }
  100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* Slight stagger for hero / first card on the destination page */
html.is-entering [data-enter] {
  animation: csbb-rise var(--dur-slow, 400ms) var(--ease-soft, cubic-bezier(0.4,0,0.2,1)) both;
  animation-delay: calc(var(--enter-delay, 0) * 1ms);
}
@keyframes csbb-rise {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  body, body.is-leaving, html.is-entering body, html.is-entering [data-enter] {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}