/* Micro-interactions */
.mx-host { overflow: hidden; }
.mx-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 65%); transform: scale(0); animation: mxr .65s cubic-bezier(.2, .7, .2, 1) forwards; mix-blend-mode: soft-light; }
@keyframes mxr { to { transform: scale(1); opacity: 0; } }
.mx-pull { transition: transform .25s cubic-bezier(.2, .8, .2, 1), background .3s ease, color .3s ease, gap .4s ease, border-color .3s ease; }

.mx-dot, .mx-ring { position: fixed; left: 0; top: 0; z-index: 10001; pointer-events: none; opacity: 0; transition: opacity .3s ease; will-change: transform; }
html.has-cursor .mx-dot, html.has-cursor .mx-ring { opacity: 1; }
.mx-dot::before { content: ''; display: block; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; mix-blend-mode: difference; transition: transform .25s ease, opacity .25s ease; }
.mx-dot[data-k="link"]::before, .mx-dot[data-k="label"]::before { transform: scale(0); }
.mx-dot[data-k="text"]::before { transform: scale(.3, 3.6); border-radius: 2px; }
.mx-ring::before { content: ''; display: block; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .85); mix-blend-mode: difference;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), background .3s ease, border-color .3s ease; }
.mx-ring[data-k="link"]::before { transform: scale(1.5); background: rgba(255, 255, 255, .9); }
.mx-ring[data-k="label"]::before { transform: scale(2.5); background: #e11d34; border-color: #e11d34; mix-blend-mode: normal; }
.mx-ring[data-k="text"]::before { transform: scale(.2); }
.mx-ring.is-down::before { transform: scale(.8); }
.mx-ring[data-k="link"].is-down::before { transform: scale(1.2); }
.mx-ring span { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font-family: var(--mono, monospace); font-size: .62rem; letter-spacing: .12em; color: #fff; opacity: 0; transition: opacity .25s ease; white-space: nowrap; }
.mx-ring[data-k="label"] span { opacity: 1; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .mx-dot, .mx-ring { display: none; } }

/* ── unfold: hinged at the top edge, swinging down out from under the previous card ── */
.uf { opacity: 0; }
.uf.uf-in { animation: ufold 1.05s cubic-bezier(.2, .85, .2, 1) var(--uf-d, 0ms) backwards; opacity: 1; }
@keyframes ufold {
  0%   { opacity: 0; transform-origin: 50% 0; transform: perspective(1400px) translateY(-34%) rotateX(-82deg); filter: brightness(.7); }
  55%  { opacity: 1; filter: brightness(.95); }
  100% { opacity: 1; transform-origin: 50% 0; transform: perspective(1400px) translateY(0) rotateX(0); filter: none; }
}

/* ── scroll progress ── */
.sp-progress { position: fixed; left: 0; top: 0; z-index: 9990; width: 100%; height: 2px; transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; background: linear-gradient(90deg, #ff5b6b, #e11d34 55%, #8f0c1a); }
html.is-rtl .sp-progress { transform-origin: 100% 50%; }

/* ── page transition veil ── */
.pgx { position: fixed; inset: 0; z-index: 10000; pointer-events: none; background: #050404; opacity: 1; display: grid; place-items: center; animation: pgxout .01s 3.2s forwards; }
.pgx::after { content: ''; width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .14); border-top-color: #fff; animation: pgxspin .8s linear infinite; }
html.is-ready .pgx { opacity: 0; transition: opacity .55s ease .05s; animation: none; }
html.is-leaving .pgx { opacity: 1; transition: opacity .34s ease; pointer-events: auto; animation: none; }
@keyframes pgxspin { to { transform: rotate(360deg); } }
@keyframes pgxout { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .pgx { display: none; } .uf { opacity: 1; } }