/* ==========================================================================
   WorldOfMercek – motion layer
   1. First-visit intro ("focus", ~1.6 s, once per session, click/key skips)
   2. Page transition: the intro's last beat only – the iris (~0.5 s)
   3. Per-page ambient scenes (canvas, drawn by motion.js)
   Everything is off with prefers-reduced-motion.
   ========================================================================== */

/* ---- 0. no-flash cover (set by the inline head script before first paint) ---- */
html.fx-cover body::after { content: ""; position: fixed; inset: 0; z-index: 210; background: #0B0B0D; pointer-events: none; animation: fxCoverSafety 0s 2.6s forwards; }
html.fx-cover.fx-cover-nav body::after { background: var(--bg); }
@keyframes fxCoverSafety { to { opacity: 0; visibility: hidden; } }

/* ---- 1. intro ---- */
.fx-focus { position: fixed; inset: 0; z-index: 220; background: #0B0B0D; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
    clip-path: circle(150% at 50% 50%); animation: fxIris .55s cubic-bezier(.7,0,.25,1) 1.15s forwards; cursor: pointer; }
.fx-focus-stage { position: relative; width: min(260px, 62vw); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.fx-focus-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx-focus-rings circle { fill: none; stroke: #F5F5F2; transform-box: fill-box; transform-origin: center; }
.fx-focus-rings .r0 { stroke-width: 3; opacity: .22; animation: fxRing 1s cubic-bezier(.2,.7,.2,1) both; }
.fx-focus-rings .r1 { stroke-width: 2.5; opacity: .32; animation: fxRing 1s cubic-bezier(.2,.7,.2,1) .08s both; }
.fx-focus-rings .r2 { stroke-width: 2; opacity: .45; animation: fxRing 1s cubic-bezier(.2,.7,.2,1) .16s both; }
.fx-focus-dot { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #FF8A00; box-shadow: 0 0 30px 6px rgba(255,138,0,.45); animation: fxDot .5s cubic-bezier(.2,.7,.2,1) .55s both; }
.fx-focus-logo { position: relative; width: 78%; height: auto; animation: fxLogo .6s cubic-bezier(.2,.7,.2,1) .7s both; }
.fx-focus-word { font: 600 12px/1 var(--f-mono); letter-spacing: .42em; margin-right: -.42em; color: #F5F5F2; animation: fxWord .6s cubic-bezier(.2,.7,.2,1) .8s both; }
.fx-focus-word span { color: #FF8A00; }
.fx-focus.is-skip { animation: fxIris .38s cubic-bezier(.7,0,.25,1) forwards; }
@keyframes fxRing { 0% { transform: scale(1.7); filter: blur(10px); opacity: 0; } 60% { opacity: .5; } 100% { transform: scale(1); filter: blur(0); } }
@keyframes fxDot { 0% { transform: scale(0); } 60% { transform: scale(1.6); } 100% { transform: scale(1); opacity: 0; } }
@keyframes fxLogo { from { opacity: 0; transform: scale(.86); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fxWord { from { opacity: 0; letter-spacing: .7em; } to { opacity: 1; letter-spacing: .42em; } }
@keyframes fxIris { to { clip-path: circle(0% at 50% 50%); } }

/* ---- 2. page transition (the iris alone) ---- */
.fx-iris { position: fixed; inset: 0; z-index: 220; background: var(--bg); pointer-events: none; }
.fx-iris.is-out { clip-path: circle(0px at var(--x) var(--y)); animation: fxIrisOut .24s cubic-bezier(.6,0,.4,1) forwards; }
.fx-iris.is-in { clip-path: circle(150% at 50% 50%); animation: fxIris .34s cubic-bezier(.5,0,.2,1) .02s forwards; }
@keyframes fxIrisOut { to { clip-path: circle(150% at var(--x) var(--y)); } }
.fx-iris-ring { position: fixed; z-index: 221; left: var(--x); top: var(--y); width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; border: 1.5px solid #FF8A00; pointer-events: none; animation: fxRingOut .3s cubic-bezier(.3,0,.2,1) forwards; }
@keyframes fxRingOut { from { transform: scale(.4); opacity: 1; } to { transform: scale(7); opacity: 0; } }
.fx-iris-dot { position: fixed; z-index: 221; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #FF8A00; pointer-events: none; animation: fxDotIn .5s cubic-bezier(.2,.7,.2,1) .26s both; }
@keyframes fxDotIn { 0% { transform: scale(0); opacity: 1; } 40% { transform: scale(1.4); opacity: 1; } 100% { transform: scale(.6); opacity: 0; } }

/* ---- 3. ambient scenes ---- */
.mx-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; }
.mx-host { position: relative; }
.mx-host > :not(.mx-scene) { position: relative; z-index: 1; }
/* keep the text side clean: scenes live on the right on wide screens, fade upward on phones */
.mx-fade-right { -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 34%, #000 70%); mask-image: linear-gradient(90deg, transparent 0, transparent 34%, #000 70%); }
.mx-fade-bottom { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
@media (max-width: 760px) {
    .mx-fade-right { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 60%, transparent 100%); opacity: .55; }
}
.partners-band-glow { z-index: 0; }

/* reading progress (articles) */
.mx-progress { position: fixed; left: 0; top: 0; z-index: 70; height: 2px; width: 0; background: linear-gradient(90deg, #FF8A00, #FFB547); pointer-events: none; }
.mx-progress::after { content: ""; position: absolute; right: -3px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: #FF8A00; box-shadow: 0 0 10px 2px rgba(255,138,0,.6); }

@media (prefers-reduced-motion: reduce) {
    html.fx-cover body::after, .fx-focus, .fx-iris, .fx-iris-ring, .fx-iris-dot { display: none !important; }
}