/* WorldOfMercek – hero animations. Enable on the home page with <body data-hero-fx="tunnel"> (also: lens | particles | ridges).
   The canvas fills the whole hero behind the headline; a scrim keeps the text side readable. */
[data-hero-fx] .home-hero { position: relative; isolation: isolate; min-height: min(calc(100svh - 72px), 940px); display: flex; flex-direction: column; justify-content: center; }
[data-hero-fx] .home-hero > :not(.hx) { position: relative; z-index: 2; }
[data-hero-fx] .home-hero-grid { grid-template-columns: minmax(0, 1fr); }
[data-hero-fx] .home-hero-text { max-width: 660px; }
.hx { position: absolute; z-index: 0; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; overflow: hidden; pointer-events: none; }
[data-hero-fx] .shell, [data-hero-fx] main { overflow-x: clip; }
.hx canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hx-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, var(--bg) max(0px, calc(50vw - 640px)), color-mix(in srgb, var(--bg) 86%, transparent) calc(50vw - 160px), transparent calc(50vw + 140px)),
    linear-gradient(0deg, var(--bg) 0%, transparent 22%); }
@media (max-width: 760px) {
    [data-hero-fx] .home-hero { min-height: 0; justify-content: flex-start; }
    [data-hero-fx] .home-hero-grid { padding-top: min(78vw, 360px); }
    .hx-scrim { background: linear-gradient(180deg, transparent 0%, transparent 34%, color-mix(in srgb, var(--bg) 80%, transparent) 52%, var(--bg) 66%); }
}
@media (prefers-reduced-motion: reduce) { .hx canvas { opacity: .9; } }