/* ==========================================================================
   The Brand Build Up: page transitions
   Three slabs (yellow, ink, cream) sweep from inline-start to inline-end,
   cover the old page, then sweep out to reveal the new one. ~520ms.
   Native: cross-document View Transitions (Chromium, Safari).
   Fallback (Firefox): JS overlay, same look (see transitions.js).
   Logical direction comes from --vt-d (1 = LTR, -1 = RTL).
   ========================================================================== */
:root{--vt-d:1;--vt-ease-in:cubic-bezier(.22,1,.36,1);--vt-ease-out:cubic-bezier(.65,0,.35,1)}
:root[dir="rtl"]{--vt-d:-1}

@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* Slab overlay (created by transitions.js, removed when the transition ends) */
.vt-slabs{position:fixed;inset:0;z-index:2147483000;pointer-events:none;overflow:hidden}
.vt-slab{position:absolute;inset-inline:0;height:34.2%}
.vt-slab:nth-child(1){top:0;background:#FFEE8C}
.vt-slab:nth-child(2){top:33.4%;background:#16181D}
.vt-slab:nth-child(3){top:66.6%;background:#FBF8EE}
@media (prefers-reduced-motion:reduce){.vt-slabs{display:none}}

/* ---- Native path: only while html.vt-slabs is set (pagereveal) ---------- */
.vt-slabs-on .vt-slab:nth-child(1){view-transition-name:vt-slab-1}
.vt-slabs-on .vt-slab:nth-child(2){view-transition-name:vt-slab-2}
.vt-slabs-on .vt-slab:nth-child(3){view-transition-name:vt-slab-3}

.vt-slabs-on::view-transition-group(root),
.vt-slabs-on::view-transition-group(vt-slab-1),
.vt-slabs-on::view-transition-group(vt-slab-2),
.vt-slabs-on::view-transition-group(vt-slab-3){animation-duration:520ms}

/* Old page holds until the slabs cover it (260ms), then the new page sits below them */
.vt-slabs-on::view-transition-old(root){animation:vt-old 520ms linear both;mix-blend-mode:normal}
.vt-slabs-on::view-transition-new(root){animation:vt-new 520ms linear both;mix-blend-mode:normal}
.vt-slabs-on::view-transition-old(vt-slab-1),
.vt-slabs-on::view-transition-old(vt-slab-2),
.vt-slabs-on::view-transition-old(vt-slab-3){display:none}
.vt-slabs-on::view-transition-new(vt-slab-1),
.vt-slabs-on::view-transition-new(vt-slab-2),
.vt-slabs-on::view-transition-new(vt-slab-3){animation:vt-slab 400ms linear both;mix-blend-mode:normal}
.vt-slabs-on::view-transition-new(vt-slab-2){animation-delay:60ms}
.vt-slabs-on::view-transition-new(vt-slab-3){animation-delay:120ms}

@keyframes vt-old{0%,49.9%{opacity:1}50%,100%{opacity:0}}
@keyframes vt-new{0%,49.9%{opacity:0}50%,100%{opacity:1}}
@keyframes vt-slab{
  0%{transform:translateX(calc(-100% * var(--vt-d)));animation-timing-function:var(--vt-ease-in)}
  30%,70%{transform:translateX(0);animation-timing-function:var(--vt-ease-out)}
  100%{transform:translateX(calc(100% * var(--vt-d)))}
}

/* ---- Fallback path: JS-driven overlay (html.vt-fb-*) ---------------------- */
.vt-fb .vt-slab{transform:translateX(calc(-100% * var(--vt-d)))}
.vt-fb-in .vt-slab{animation:vt-fb-in 220ms var(--vt-ease-in) both}
.vt-fb-in .vt-slab:nth-child(2){animation-delay:40ms}
.vt-fb-in .vt-slab:nth-child(3){animation-delay:80ms}
.vt-fb-cover .vt-slab{transform:translateX(0)}
.vt-fb-out .vt-slab{animation:vt-fb-out 240ms var(--vt-ease-out) both}
.vt-fb-out .vt-slab:nth-child(2){animation-delay:40ms}
.vt-fb-out .vt-slab:nth-child(3){animation-delay:80ms}
@keyframes vt-fb-in{from{transform:translateX(calc(-100% * var(--vt-d)))}to{transform:translateX(0)}}
@keyframes vt-fb-out{from{transform:translateX(0)}to{transform:translateX(calc(100% * var(--vt-d)))}}