/* ============================================================ WELGAMES — page transitions: the warp gate ------------------------------------------------------------ Two slanted panels close over the page like an airlock, a cyan/violet seam flares along the split, and a ring pulses out of the centre. On the next page the gate opens again and the content settles in from a slight overscale. FAIL-SAFE BY DESIGN: the resting state of every element here is "gate already open, page visible". The animations run FROM the closed state TO that resting state, so if keyframes never execute — ancient browser, CSS partially applied — the visitor simply sees the page. Nothing can leave the site covered by a black panel. transitions.js only adds `wg-leaving` to to play the closing half before it navigates. ============================================================ */ .wg-gate { position: fixed; inset: 0; z-index: 9990; pointer-events: none; visibility: hidden; /* resting state: out of the way */ contain: layout paint; /* not `strict` — size containment on an inset-sized box is a needless risk */ } .wg-gate-panel { position: absolute; inset: -1px; background: linear-gradient(115deg, rgba(34, 211, 238, .08) 0%, transparent 32%, transparent 68%, rgba(139, 92, 246, .09) 100%), radial-gradient(120% 140% at 50% 50%, #0b1230 0%, #02040c 68%); will-change: transform; } /* the slanted split: 54% on the left edge, 46% on the right */ .wg-gate-top { clip-path: polygon(0 0, 100% 0, 100% 46%, 0 54%); transform: translateY(-106%) } .wg-gate-bottom { clip-path: polygon(0 54%, 100% 46%, 100% 100%, 0 100%); transform: translateY(106%) } /* a glowing band clipped to exactly the same diagonal, so the seam lines up perfectly at any aspect ratio */ .wg-gate-seam { position: absolute; inset: 0; opacity: 0; background: linear-gradient(90deg, transparent 0%, #22D3EE 18%, #8FEBFF 34%, #8B5CF6 50%, #8FEBFF 66%, #22D3EE 82%, transparent 100%); clip-path: polygon(0 53.55%, 100% 45.55%, 100% 46.45%, 0 54.45%); filter: drop-shadow(0 0 12px rgba(34, 211, 238, .95)) drop-shadow(0 0 38px rgba(139, 92, 246, .6)); } /* the pulse that leaves the centre of the split */ .wg-gate-core { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 1.5px solid rgba(34, 211, 238, .9); box-shadow: 0 0 22px rgba(34, 211, 238, .8); opacity: 0; } @media (prefers-reduced-motion: no-preference) { /* ---------- arriving: the gate opens ---------- */ .wg-gate { animation: wg-gate-live 800ms linear } .wg-gate-top { animation: wg-open-top 720ms cubic-bezier(.72, 0, .22, 1) 40ms } .wg-gate-bottom { animation: wg-open-bottom 720ms cubic-bezier(.72, 0, .22, 1) 40ms } .wg-gate-seam { animation: wg-seam-fade 560ms cubic-bezier(.3, 0, .2, 1) } .wg-gate-core { animation: wg-core-burst 540ms cubic-bezier(.2, .6, .2, 1) } /* content settles in behind the opening gate. Only
is scaled — every position:fixed element on the site lives outside
, so nothing gets re-anchored. */ main { animation: wg-settle 780ms cubic-bezier(.22, .61, .36, 1) 40ms } @keyframes wg-gate-live { 0%, 100% { visibility: visible } } @keyframes wg-open-top { from { transform: translateY(0) } to { transform: translateY(-106%) } } @keyframes wg-open-bottom { from { transform: translateY(0) } to { transform: translateY(106%) } } @keyframes wg-seam-fade { 0% { opacity: 1; transform: scaleX(1) } 45% { opacity: .95 } 100% { opacity: 0; transform: scaleX(1.14) } } @keyframes wg-core-burst { 0% { opacity: .95; transform: scale(1) } 100% { opacity: 0; transform: scale(14) } } @keyframes wg-settle { from { transform: scale(1.035) } to { transform: none } } /* ---------- leaving: the gate closes ---------- */ html.wg-leaving .wg-gate { visibility: visible; animation: none } html.wg-leaving .wg-gate-top { animation: wg-close-top 400ms cubic-bezier(.5, 0, .25, 1) forwards } html.wg-leaving .wg-gate-bottom { animation: wg-close-bottom 400ms cubic-bezier(.5, 0, .25, 1) forwards } html.wg-leaving .wg-gate-seam { animation: wg-seam-flare 400ms cubic-bezier(.5, 0, .25, 1) forwards } html.wg-leaving .wg-gate-core { animation: wg-core-gather 400ms ease-in forwards } html.wg-leaving main { animation: wg-recede 400ms cubic-bezier(.5, 0, .8, 1) forwards } @keyframes wg-close-top { from { transform: translateY(-106%) } to { transform: translateY(0) } } @keyframes wg-close-bottom { from { transform: translateY(106%) } to { transform: translateY(0) } } @keyframes wg-seam-flare { 0% { opacity: 0; transform: scaleX(1.14) } 70% { opacity: 1; transform: scaleX(1) } 100% { opacity: 1; transform: scaleX(1) } } @keyframes wg-core-gather { 0% { opacity: 0; transform: scale(10) } 75% { opacity: .9; transform: scale(1) } 100% { opacity: .9; transform: scale(1) } } @keyframes wg-recede { from { transform: none } to { transform: scale(.985) } } } /* motion turned down: no gate at all, instant navigation */ @media (prefers-reduced-motion: reduce) { .wg-gate { display: none } } /* ============================================================ WELGAMES — language switcher (injected by i18n-core.js into any element carrying [data-wg-lang-mount]) ============================================================ */ .wg-lang { display: flex; gap: 2px; flex: 0 0 auto; background: rgba(255, 255, 255, .04); border: 1px solid rgba(34, 211, 238, .2); border-radius: 999px; padding: 3px; } .wg-lang-btn { font-family: var(--font-body, 'Inter', system-ui, sans-serif); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--muted, #A8B3C7); background: none; border: none; border-radius: 999px; padding: 6px 11px; cursor: pointer; transition: background .2s, color .2s; } .wg-lang-btn:hover { color: var(--text, #F5F7FA) } .wg-lang-btn.active { background: linear-gradient(135deg, var(--cyan, #22D3EE), var(--blue, #3B82F6)); color: #04101c; } .wg-lang-btn:focus-visible { outline: 2px solid var(--cyan, #22D3EE); outline-offset: 2px } @media (max-width: 640px) { .wg-lang-btn { padding: 5px 8px; font-size: 10.5px } }