/* WIGUEL UI: visual layer on top of the WIGUEL 2 theme and WIGUEL Tweaks. */

@property --wg-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
	--wg-pink: #f472b6;
	--wg-amber: #fbbf24;
	--wg-lime: #a3e635;
	--wg-ease: cubic-bezier(.2, .8, .2, 1);
	--wg-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* ---------- Living background ---------- */
html { background: #07070f; }
body { background: transparent; }
.wg-cosmos {
	position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: -3;
	pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
}
.wg-cosmos.is-on { opacity: 1; }
.wg-no-cosmos body::before {
	content: ""; position: fixed; inset: -20%; z-index: -3; pointer-events: none;
	background:
		radial-gradient(40% 35% at 25% 30%, rgba(34, 211, 238, .14), transparent 70%),
		radial-gradient(45% 40% at 75% 60%, rgba(139, 92, 246, .18), transparent 70%),
		radial-gradient(30% 30% at 60% 15%, rgba(244, 114, 182, .08), transparent 70%);
	animation: wg-drift 30s ease-in-out infinite alternate;
}
@keyframes wg-drift { to { transform: translate3d(4%, -3%, 0) rotate(6deg); } }

.wg-stars {
	position: fixed; left: 0; right: 0; top: 0; height: 160vh; z-index: -2; pointer-events: none;
	will-change: transform;
}
.wg-stars i { position: absolute; inset: 0; display: block; }
.wg-stars i:nth-child(1) {
	background-image:
		radial-gradient(1px 1px at 23px 41px, #fff, transparent), radial-gradient(1px 1px at 151px 97px, #cfefff, transparent),
		radial-gradient(1.4px 1.4px at 87px 203px, #fff, transparent), radial-gradient(1px 1px at 211px 161px, #e5dcff, transparent),
		radial-gradient(1px 1px at 41px 271px, #fff, transparent), radial-gradient(1.2px 1.2px at 263px 29px, #fff, transparent);
	background-size: 290px 300px; opacity: .55; animation: wg-twinkle 5s ease-in-out infinite alternate;
}
.wg-stars i:nth-child(2) {
	background-image:
		radial-gradient(1.6px 1.6px at 61px 113px, #9beafa, transparent), radial-gradient(1.2px 1.2px at 331px 59px, #fff, transparent),
		radial-gradient(2px 2px at 199px 331px, #c4b5fd, transparent), radial-gradient(1.3px 1.3px at 401px 251px, #fff, transparent);
	background-size: 470px 420px; opacity: .45; animation: wg-twinkle 7s ease-in-out -3s infinite alternate;
}
@keyframes wg-twinkle { from { opacity: .2; } to { opacity: .7; } }

/* Film grain keeps the gradients from banding and adds texture. */
body::after {
	content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wg-aura {
	position: fixed; left: 0; top: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px; z-index: -1; pointer-events: none;
	border-radius: 50%; opacity: 0; transition: opacity .6s ease;
	background: radial-gradient(circle, rgba(34, 211, 238, .13), rgba(139, 92, 246, .08) 38%, transparent 68%);
}
.wg-aura.is-on { opacity: 1; }

/* Let the cosmos show through the theme's solid backgrounds. */
.hero__bg { background: radial-gradient(60% 50% at 20% 25%, rgba(34, 211, 238, .14), transparent 70%), radial-gradient(55% 55% at 82% 30%, rgba(139, 92, 246, .18), transparent 70%), linear-gradient(180deg, rgba(7, 7, 15, .2), rgba(7, 7, 15, .55)); }
.section--alt { background: linear-gradient(180deg, rgba(7, 7, 15, 0), rgba(11, 12, 24, .7)); }
.site-footer { background: linear-gradient(180deg, rgba(11, 12, 24, .55), rgba(7, 7, 15, .95)); position: relative; overflow: hidden; }

/* ---------- Header ---------- */
.site-header { transition: background .3s ease, box-shadow .3s ease; }
.site-header.is-scrolled { background: rgba(7, 7, 15, .82); box-shadow: 0 10px 40px -20px rgba(0, 0, 0, .9); }
.wg-progress {
	position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform-origin: 0 50%; transform: scaleX(0);
	background: linear-gradient(90deg, var(--cyan), var(--violet), var(--wg-pink)); box-shadow: 0 0 12px rgba(34, 211, 238, .8);
	pointer-events: none;
}
.primary-nav .menu a { position: relative; transition: color .2s ease; }
@media (min-width: 761px) {
	.primary-nav .menu a { border-bottom-color: transparent !important; }
	.primary-nav .menu a::after {
		content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px;
		background: var(--grad); box-shadow: 0 0 10px rgba(34, 211, 238, .9);
		transform: scaleX(0); transition: transform .35s var(--wg-ease);
	}
	.primary-nav .menu a:hover::after, .primary-nav .menu .current-menu-item > a::after { transform: scaleX(1); }
}

/* ---------- Buttons: shine sweep + magnetic pull (transform set from JS) ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; translate: var(--wg-bx, 0) var(--wg-by, 0); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, translate .25s var(--wg-ease); }
.btn::after {
	content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: 1; pointer-events: none;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg);
	transition: left 0s;
}
.btn:hover::after { left: 130%; transition: left .7s var(--wg-ease); }
@keyframes wg-btn-glow {
	0%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 10px 30px -8px rgba(34, 211, 238, .55); }
	50% { box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset, 0 12px 40px -6px rgba(139, 92, 246, .75); }
}

/* ---------- Reveal on scroll ---------- */
.wg-rv { opacity: 0; transform: translate3d(0, 34px, 0) scale(.97); filter: blur(8px); }
.wg-rv.is-in { opacity: 1; transform: none; filter: none; transition: opacity .8s var(--wg-ease), transform .9s var(--wg-ease), filter .8s ease; transition-delay: var(--wg-d, 0s); }

/* ---------- Kinetic tape ---------- */
.wg-tape { position: relative; height: clamp(120px, 15vw, 190px); overflow: hidden; margin: -2rem 0 -1rem; pointer-events: none; }
.wg-tape__band {
	position: absolute; left: -5%; right: -5%; top: 50%; padding: .85rem 0; white-space: nowrap;
	font: 900 clamp(1rem, 2.4vw, 1.6rem)/1 var(--font); letter-spacing: .14em; text-transform: uppercase;
}
.wg-tape__band--a { transform: translateY(-50%) rotate(-3.2deg); background: linear-gradient(90deg, var(--cyan), #6ee7f9 40%, var(--violet)); color: #04121a; box-shadow: 0 0 40px rgba(34, 211, 238, .45); z-index: 2; }
.wg-tape__band--b { transform: translateY(-50%) rotate(2.6deg); background: #0d0f22; color: transparent; -webkit-text-stroke: 1px rgba(196, 181, 253, .8); border-block: 1px solid rgba(139, 92, 246, .5); z-index: 1; }
.wg-tape__track { display: inline-flex; gap: 2.2rem; will-change: transform; }
.wg-tape__track span { display: inline-flex; align-items: center; gap: 2.2rem; }
.wg-tape__track span::after { content: "✦"; -webkit-text-stroke: 0; }
.wg-tape__band--a .wg-tape__track span::after { color: #fff; text-shadow: 0 0 10px #fff; }
.wg-tape__band--b .wg-tape__track span::after { color: var(--wg-pink); }

/* ---------- Section heads ---------- */
.section__head { position: relative; }
.section__head h2 {
	background: linear-gradient(100deg, #fff 0%, #fff 40%, #a5f3fc 50%, #fff 60%, #fff 100%) 0 0 / 250% 100%;
	-webkit-background-clip: text; background-clip: text; color: transparent;
	animation: wg-sheen 6s ease-in-out 3;
}
@keyframes wg-sheen { 0%, 60% { background-position: 100% 0; } 100% { background-position: -50% 0; } }
.wg-ghost {
	position: absolute; right: -1rem; top: 50%; z-index: -1; pointer-events: none; user-select: none;
	font: 900 clamp(4rem, 13vw, 11rem)/.8 var(--font); letter-spacing: -.02em; white-space: nowrap;
	color: transparent; -webkit-text-stroke: 1px rgba(148, 163, 255, .14);
	transform: translate3d(var(--wg-gx, 0), -50%, 0);
}
.eyebrow { font-family: var(--wg-mono); }

/* ---------- Filter chips: sliding pill ---------- */
.wg-filters { position: relative; isolation: isolate; }
.wg-filters .wg-filter { position: relative; z-index: 1; transition: color .3s ease, background .3s ease, border-color .3s ease; }
.wg-pill {
	position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; pointer-events: none;
	background: var(--grad); box-shadow: 0 0 24px rgba(34, 211, 238, .55);
	transition: transform .5s var(--wg-ease), width .5s var(--wg-ease), height .5s var(--wg-ease);
}
.wg-filters.has-pill .wg-filter[aria-pressed="true"] { background: transparent !important; border-color: transparent !important; }

/* ---------- Game cards: holographic 3D ---------- */
.game-grid { perspective: 1400px; }
.game-card {
	--rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --hov: 0;
	position: relative; isolation: isolate; transform-style: preserve-3d;
	background: linear-gradient(180deg, rgba(21, 24, 51, .9), rgba(12, 14, 30, .94));
	transition: transform .5s var(--wg-ease), border-color .3s ease, box-shadow .4s ease;
}
.game-card[data-cat="arcade"] { --c1: #22d3ee; --c2: #8b5cf6; }
.game-card[data-cat="reflexes"] { --c1: #f472b6; --c2: #8b5cf6; }
.game-card[data-cat="timing"] { --c1: #fbbf24; --c2: #f472b6; }
.game-card[data-cat="brain"] { --c1: #a3e635; --c2: #22d3ee; }
.game-card::before {
	content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1.5px; pointer-events: none;
	background: conic-gradient(from var(--wg-a), transparent 0deg, var(--c1, var(--cyan)) 70deg, transparent 140deg, var(--c2, var(--violet)) 230deg, transparent 300deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	opacity: 0; transition: opacity .4s ease;
}
a.game-card:hover::before, .game-card.is-focus::before { animation: wg-spin 4s linear infinite; }
.game-card::after {
	content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
	background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, .13), transparent 45%);
	opacity: 0; transition: opacity .4s ease;
}
@keyframes wg-spin { to { --wg-a: 360deg; } }
a.game-card:hover, .game-card.is-focus {
	transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-8px) scale(1.02);
	border-color: transparent;
	box-shadow: 0 30px 60px -25px color-mix(in srgb, var(--c1, #22d3ee) 70%, transparent), 0 0 0 1px rgba(255, 255, 255, .04);
}
a.game-card:hover::before, a.game-card:hover::after, .game-card.is-focus::before, .game-card.is-focus::after { opacity: 1; }
.game-card.is-press { transform: scale(.97); transition-duration: .12s; }
.game-card__media { transform: translateZ(0); }
.game-card__media img { transition: transform .8s var(--wg-ease), filter .5s ease; }
a.game-card:hover .game-card__media img, .game-card.is-focus .game-card__media img { transform: scale(1.09) translate(calc((var(--mx) - 50%) * -.04), calc((var(--my) - 50%) * -.04)); filter: saturate(1.25) brightness(1.08); }
.game-card__media::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, transparent 55%, rgba(12, 14, 30, .85));
}
.wg-holo {
	position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: color-dodge; opacity: 0;
	background:
		repeating-linear-gradient(115deg, rgba(255, 0, 128, .5) 0%, rgba(255, 220, 0, .5) 6%, rgba(0, 255, 170, .5) 12%, rgba(0, 170, 255, .5) 18%, rgba(170, 0, 255, .5) 24%, rgba(255, 0, 128, .5) 30%) var(--mx) var(--my) / 300% 300%,
		radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .5), transparent 40%);
	transition: opacity .4s ease;
}
a.game-card:hover .wg-holo, .game-card.is-focus .wg-holo { opacity: .28; }
.wg-num {
	position: absolute; right: .7rem; bottom: .3rem; z-index: 2; pointer-events: none;
	font: 900 2.4rem/1 var(--wg-mono); letter-spacing: -.04em;
	color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .45);
	transition: color .4s ease, text-shadow .4s ease, transform .5s var(--wg-ease);
}
a.game-card:hover .wg-num, .game-card.is-focus .wg-num { color: #fff; -webkit-text-stroke: 0; text-shadow: 0 0 18px var(--c1, var(--cyan)); transform: translateY(-4px); }
.game-card .wg-tag { color: var(--c1, var(--cyan)); }
.game-card__title { transition: color .3s ease; }
.game-card__cta {
	display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start;
	padding: .5rem .9rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c1, #22d3ee) 45%, transparent);
	color: var(--c1, var(--cyan)); transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}
a.game-card:hover .game-card__cta, .game-card.is-focus .game-card__cta { background: var(--c1, var(--cyan)); color: #05060f; box-shadow: 0 0 22px color-mix(in srgb, var(--c1, #22d3ee) 70%, transparent); }
@media (hover: none) {
	a.game-card:hover { transform: none; }
	.game-card.is-focus { transform: translateY(-4px) scale(1.015); }
}
@media (max-width: 600px) {
	.wg-num { font-size: 1.6rem; right: .45rem; }
	.game-card__cta { padding: .35rem .7rem; }
}

/* ---------- Daily challenge ---------- */
.wg-daily { position: relative; isolation: isolate; overflow: hidden; }
.wg-daily .wg-ring {
	position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1.5px; pointer-events: none;
	background: conic-gradient(from var(--wg-a), var(--cyan), var(--violet), var(--wg-pink), var(--wg-amber), var(--cyan));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	animation: wg-spin 6s linear infinite;
}
.wg-daily .wg-sweep {
	position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: radial-gradient(60% 120% at 85% 50%, rgba(139, 92, 246, .28), transparent 70%), radial-gradient(40% 90% at 30% 0%, rgba(34, 211, 238, .18), transparent 70%);
	animation: wg-breathe 5s ease-in-out infinite alternate;
}
@keyframes wg-breathe { to { opacity: .45; transform: scale(1.08); } }
.wg-daily__eyebrow { display: inline-flex; align-items: center; gap: .5rem; }
.wg-daily__eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #f43f5e; box-shadow: 0 0 0 0 rgba(244, 63, 94, .7); animation: wg-live 1.6s ease-out infinite; }
@keyframes wg-live { 70% { box-shadow: 0 0 0 9px rgba(244, 63, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0); } }
.wg-daily__timer { font-family: var(--wg-mono); font-variant-numeric: tabular-nums; text-shadow: 0 0 12px rgba(34, 211, 238, .6); }
.wg-daily__title { font-size: clamp(1.6rem, 3.4vw, 2.4rem) !important; letter-spacing: -.02em; }

/* ---------- Features ---------- */
.feature { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(21, 24, 51, .75), rgba(12, 14, 30, .85)); transition: transform .5s var(--wg-ease), border-color .3s ease; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.feature::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(34, 211, 238, .12), transparent 50%); opacity: 0; transition: opacity .4s ease; }
.feature:hover { border-color: rgba(34, 211, 238, .45); }
.feature:hover::after { opacity: 1; }
.feature__icon { animation: wg-float 4s ease-in-out infinite; }
.feature:nth-child(2) .feature__icon { animation-delay: -1.3s; }
.feature:nth-child(3) .feature__icon { animation-delay: -2.6s; }
@keyframes wg-float { 50% { transform: translateY(-6px) rotate(-4deg); } }

/* ---------- Footer mega wordmark ---------- */
.wg-mega {
	position: relative; display: block; text-align: center; user-select: none; pointer-events: none;
	font: 900 clamp(4.5rem, 21vw, 20rem)/.8 var(--font); letter-spacing: -.03em; margin: 2.5rem 0 -1.2vw;
	color: transparent; -webkit-text-stroke: 1px rgba(148, 163, 255, .22);
}
.wg-mega::after {
	content: attr(data-text); position: absolute; inset: 0; -webkit-text-stroke: 0;
	background: radial-gradient(28vw circle at var(--fx, 50%) var(--fy, 50%), rgba(34, 211, 238, .95), rgba(139, 92, 246, .7) 35%, transparent 65%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	opacity: var(--fo, .35); transition: opacity .5s ease;
}

/* ---------- Game page ---------- */
.page--game .crumbs a {
	display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 999px; text-decoration: none;
	border: 1px solid var(--line); background: rgba(15, 17, 32, .6); color: var(--text); font-size: .9rem;
	transition: border-color .3s ease, box-shadow .3s ease, transform .3s var(--wg-ease);
}
.page--game .crumbs a:hover { border-color: var(--cyan); box-shadow: 0 0 20px rgba(34, 211, 238, .35); transform: translateX(-3px); }
.page--game .page__head h1 {
	font-size: clamp(2.4rem, 6vw, 4.2rem); letter-spacing: -.03em;
	background: linear-gradient(100deg, #fff 30%, var(--wg-c1, #a5f3fc) 55%, #fff 80%) 0 0 / 250% 100%;
	-webkit-background-clip: text; background-clip: text; color: transparent; animation: wg-sheen 6s ease-in-out 3;
}
.wg-gcat { display: inline-block; margin: 0 0 .4rem; font: 800 .74rem/1 var(--wg-mono); letter-spacing: .28em; text-transform: uppercase; color: var(--wg-c1, var(--cyan)); }
.page--game .game { position: relative; isolation: isolate; }
.wg-ambient {
	position: absolute; left: -8%; right: -8%; top: 4rem; height: min(820px, 90vh); z-index: -1; pointer-events: none;
	background-position: center; background-size: cover; filter: blur(90px) saturate(1.8); opacity: .5; border-radius: 40%;
	will-change: transform;
}
@keyframes wg-amb { to { opacity: .32; transform: scale(1.08) rotate(3deg); } }
.page--game .game__stage { background: linear-gradient(180deg, rgba(21, 24, 51, .78), rgba(12, 14, 30, .88)); border-color: rgba(148, 163, 255, .22); box-shadow: 0 40px 120px -50px var(--wg-c1, rgba(139, 92, 246, .8)), 0 0 0 1px rgba(255, 255, 255, .03) inset; }

/* ---------- Records ---------- */
.wg-stat { position: relative; overflow: hidden; }
.wg-stat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .08) 50%, transparent 65%) -100% 0 / 250% 100% no-repeat; animation: wg-glint 5s ease-in-out 2; pointer-events: none; }
@keyframes wg-glint { 0%, 70% { background-position: 150% 0; } 100% { background-position: -100% 0; } }
.wg-ach__item.is-on { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(34, 211, 238, .12), rgba(139, 92, 246, .14)); }
.wg-ach__item.is-on::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .22;
	background: repeating-linear-gradient(115deg, #ff0080 0%, #ffdc00 7%, #00ffaa 14%, #00aaff 21%, #aa00ff 28%, #ff0080 35%) 0 0 / 300% 300%;
	animation: wg-foil 6s linear infinite;
}
@keyframes wg-foil { to { background-position: 300% 300%; } }

/* ---------- Page transitions (cross-document view transitions) ---------- */
@view-transition { navigation: auto; }
.site-header { view-transition-name: wg-header; }
.page--game .game__stage { view-transition-name: wg-stage; }
::view-transition-old(root) { animation: wg-vt-out .32s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: wg-vt-in .55s var(--wg-ease) both; }
::view-transition-group(wg-stage) { animation-duration: .6s; animation-timing-function: var(--wg-ease); }
@keyframes wg-vt-out { to { opacity: 0; transform: scale(.97); } }
@keyframes wg-vt-in { from { opacity: 0; transform: translateY(28px); } }

/* ---------- First-visit intro (home, once per session) ---------- */
html.wg-intro::before {
	content: ""; position: fixed; inset: 0; z-index: 2147483646; pointer-events: none;
	background: radial-gradient(circle at 50% 50%, #15163a 0%, #07070f 60%);
	animation: wg-intro-bg .8s 1.25s cubic-bezier(.7, 0, .3, 1) forwards;
}
html.wg-intro::after {
	content: ""; position: fixed; left: 50%; top: 50%; width: 130px; height: 130px; margin: -65px 0 0 -65px; z-index: 2147483647; pointer-events: none;
	background: url(logo-mark.svg) center / contain no-repeat;
	filter: drop-shadow(0 0 22px rgba(34, 211, 238, .85));
	will-change: transform, opacity;
	animation: wg-intro-logo 2.05s cubic-bezier(.2, .9, .2, 1) forwards;
}
@keyframes wg-intro-logo {
	0% { transform: scale(.1) rotate(-220deg); opacity: 0; }
	32% { transform: scale(1.12) rotate(10deg); opacity: 1; }
	44% { transform: scale(.9) rotate(-3deg); }
	54% { transform: scale(1) rotate(0); }
	66% { transform: scale(1); opacity: 1; }
	78% { opacity: .9; }
	100% { transform: scale(5); opacity: 0; visibility: hidden; }
}
@keyframes wg-intro-bg { to { opacity: 0; visibility: hidden; } }

/* ---------- Hyper mode (type "wiguel") ---------- */
html.wg-hyper body { animation: wg-hyper 2.4s linear; }
@keyframes wg-hyper { 0% { filter: hue-rotate(0); } 100% { filter: hue-rotate(360deg); } }
.wg-burst { position: fixed; z-index: 2147483000; inset: 0; pointer-events: none; }

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.wg-rv { opacity: 1 !important; transform: none !important; filter: none !important; }
	.wg-stars i, .btn, .game-card::before, .wg-daily .wg-ring, .section__head h2, .page--game .page__head h1 { animation: none !important; }
	@view-transition { navigation: none; }
}

/* The 3D logo renders on its own dark backdrop: lighten blending drops that backdrop over the nebula. */
.hero__canvas { mix-blend-mode: lighten; }
.section { overflow-x: clip; }
@media (min-width: 900px) { .page--game .crumbs { max-width: 1000px; margin-inline: auto; } }
.page--game { overflow-x: clip; }

/* Performance: the header no longer blurs the animated background every frame. */
.site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(7, 7, 15, .86); }
.site-header.is-scrolled { background: rgba(7, 7, 15, .93); }
.wg-stars, .wg-cosmos, .wg-aura { contain: strict; }
.wg-stars i { will-change: opacity; }
@media (hover: none) { .wg-stars i:nth-child(2) { display: none; } }

/* ---------- 3D card art: the console lifts out of the card ---------- */
.game-card.has-pop { overflow: visible; }
.game-card.has-pop .game-card__media { border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }
.wg-pop-wrap { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 16 / 10; z-index: 4; pointer-events: none; transform-style: preserve-3d; }
.wg-pop {
	position: absolute; display: block; max-width: none; height: auto; transform-origin: 50% 95%;
	transition: transform .75s cubic-bezier(.2, 1.4, .3, 1), filter .5s ease; will-change: transform;
}
a.game-card:hover, .game-card.is-focus { z-index: 6; }
a.game-card:hover .wg-pop, .game-card.is-focus .wg-pop {
	transform: translate3d(0, -17%, 90px) scale(1.16) rotate(-3deg);
	filter: drop-shadow(0 28px 22px rgba(0, 0, 0, .6)) drop-shadow(0 0 26px color-mix(in srgb, var(--c1, #22d3ee) 75%, transparent));
}
a.game-card:hover .wg-pop-wrap, .game-card.is-focus .wg-pop-wrap { animation: wg-bob 3.2s ease-in-out .75s infinite; }
@keyframes wg-bob { 50% { transform: translate3d(0, -2.5%, 0); } }
.game-card.has-pop .game-card__body { transition: transform .6s var(--wg-ease); }
a.game-card.has-pop:hover .game-card__body { transform: translateZ(28px); }
@media (prefers-reduced-motion: reduce) { .wg-pop, .wg-pop-wrap { transition: none !important; animation: none !important; } }

/* ---------- Hero: lead, arcade buttons and facts ---------- */
.wg-lead {
	max-width: 44rem; margin: 0 auto 2rem; color: #dfe3ff; font-weight: 700; letter-spacing: -.01em;
	font-size: clamp(1.25rem, 2.6vw, 1.85rem); line-height: 1.3; text-wrap: balance;
	text-shadow: 0 2px 24px rgba(7, 7, 15, .9);
}
.wg-k {
	position: relative; display: inline-block; font-weight: 900; padding: 0 .06em;
	background: linear-gradient(100deg, var(--k1) 0%, var(--k2) 45%, #fff 50%, var(--k2) 55%, var(--k1) 100%) 0 0 / 260% 100%;
	-webkit-background-clip: text; background-clip: text; color: transparent;
	animation: wg-k-shine 5s ease-in-out infinite;
}
.wg-k--a { --k1: #22d3ee; --k2: #67e8f9; animation-delay: 0s; }
.wg-k--b { --k1: #a78bfa; --k2: #c4b5fd; animation-delay: .35s; }
.wg-k--c { --k1: #f472b6; --k2: #f9a8d4; animation-delay: .7s; }
.wg-k::after {
	content: ""; position: absolute; left: .06em; right: .06em; bottom: -.08em; height: 3px; border-radius: 3px;
	background: var(--k1); box-shadow: 0 0 12px var(--k1), 0 0 2px #fff;
	transform-origin: 0 50%; transform: scaleX(0); animation: wg-k-line .9s cubic-bezier(.2, .9, .2, 1) forwards;
}
.wg-k--a::after { animation-delay: 1.1s; } .wg-k--b::after { animation-delay: 1.3s; } .wg-k--c::after { animation-delay: 1.5s; }
@keyframes wg-k-shine { 0%, 55% { background-position: 100% 0; } 100% { background-position: -60% 0; } }
@keyframes wg-k-line { to { transform: scaleX(1); } }
.wg-lead__sub {
	display: block; margin-top: .8rem; font: 600 clamp(.72rem, 1.4vw, .82rem)/1.4 var(--wg-mono);
	letter-spacing: .22em; text-transform: uppercase; color: #8f96c2; text-shadow: none;
}

.wg-actions { gap: 1.1rem; }
.wg-actions .btn { animation: none; }
/* Arcade button: a lit top that sits on its own darker base and sinks when pressed. */
.wg-cta {
	--lift: 6px;
	padding: 1.05rem 2rem 1.05rem 1.1rem; gap: .85rem; border-radius: 18px; font-size: 1.02rem; letter-spacing: .12em;
	color: #04121a; overflow: visible;
	background: linear-gradient(180deg, #a5f3fc 0%, #22d3ee 30%, #6d6af7 78%, #8b5cf6 100%);
	transform: translateY(calc(var(--lift) * -1));
	box-shadow:
		0 var(--lift) 0 #3a1f8f, 0 var(--lift) 0 1px rgba(0, 0, 0, .35),
		0 calc(var(--lift) + 14px) 34px -8px rgba(34, 211, 238, .55), 0 0 44px -6px rgba(139, 92, 246, .55),
		inset 0 2px 0 rgba(255, 255, 255, .75), inset 0 -2px 0 rgba(0, 0, 0, .18);
	transition: transform .12s ease, box-shadow .12s ease, filter .2s ease, translate .25s var(--wg-ease);
}
.wg-cta::before {
	content: ""; position: absolute; inset: -3px; border-radius: 21px; padding: 2px; z-index: -1; pointer-events: none;
	background: conic-gradient(from var(--wg-a), #22d3ee, #f472b6, #fbbf24, #a3e635, #22d3ee);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	animation: wg-spin 3.5s linear infinite;
}
.wg-cta:hover { color: #04121a; filter: brightness(1.08) saturate(1.1); transform: translateY(calc(var(--lift) * -1 - 2px)); }
.wg-cta:active { transform: translateY(0); box-shadow: 0 0 0 #3a1f8f, 0 0 0 1px rgba(0, 0, 0, .35), 0 8px 24px -8px rgba(34, 211, 238, .6), inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(0, 0, 0, .18); }
.wg-cta__icon {
	position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
	background: #07070f; color: #67e8f9; box-shadow: 0 0 0 2px rgba(255, 255, 255, .55), 0 0 18px rgba(34, 211, 238, .8);
}
.wg-cta__icon svg { margin-left: 2px; filter: drop-shadow(0 0 6px #22d3ee); }
.wg-cta__icon::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(103, 232, 249, .8); animation: wg-ping 2s cubic-bezier(0, .6, .4, 1) infinite; }
@keyframes wg-ping { 0% { transform: scale(1); opacity: .9; } 80%, 100% { transform: scale(1.75); opacity: 0; } }
.wg-cta__label { position: relative; z-index: 2; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }

.wg-cta2 {
	gap: .7rem; padding: 1.05rem 1.6rem; border-radius: 18px; font-size: 1.02rem; letter-spacing: .12em;
	background: linear-gradient(180deg, rgba(30, 33, 66, .75), rgba(12, 13, 30, .85)) !important;
	box-shadow: inset 0 0 0 1px rgba(148, 163, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .12), 0 16px 34px -18px rgba(0, 0, 0, .9) !important;
	transition: box-shadow .3s ease, color .3s ease, translate .25s var(--wg-ease);
}
.wg-cta2::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; transition: opacity .3s ease;
	background: linear-gradient(120deg, #22d3ee, #8b5cf6, #f472b6);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.wg-cta2:hover::before { opacity: 1; }
.wg-cta2:hover { box-shadow: 0 0 30px -6px rgba(139, 92, 246, .7), inset 0 1px 0 rgba(255, 255, 255, .15) !important; }
.wg-cta2 svg { transition: transform .35s var(--wg-ease); color: #a5b4fc; }
.wg-cta2:hover svg { transform: translateX(5px); color: #fff; }

.wg-facts {
	list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 0; margin: 2.2rem auto 0; padding: .55rem .4rem;
	border-radius: 999px; background: rgba(12, 13, 30, .55); box-shadow: inset 0 0 0 1px rgba(148, 163, 255, .16);
}
.wg-facts li { display: flex; align-items: baseline; gap: .45rem; padding: .2rem 1.15rem; }
.wg-facts li + li { border-left: 1px solid rgba(148, 163, 255, .18); }
.wg-facts strong {
	font: 900 1.05rem/1 var(--wg-mono); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wg-facts span { font: 700 .7rem/1 var(--wg-mono); letter-spacing: .2em; text-transform: uppercase; color: #8f96c2; }

/* Entrance after the logo. */
.wg-lead, .wg-actions, .wg-facts { animation: wg-rise .9s cubic-bezier(.2, .8, .2, 1) both; }
.wg-lead { animation-delay: .5s; } .wg-actions { animation-delay: .75s; } .wg-facts { animation-delay: 1s; }
html.wg-intro .wg-lead { animation-delay: 2.1s; } html.wg-intro .wg-actions { animation-delay: 2.35s; } html.wg-intro .wg-facts { animation-delay: 2.6s; }
@keyframes wg-rise { from { opacity: 0; transform: translateY(18px); } }
.wg-actions .wg-cta { animation: none; }

@media (max-width: 600px) {
	.wg-lead { margin-bottom: 1.6rem; }
	.wg-actions { flex-direction: column; align-items: stretch; width: min(100%, 340px); margin-inline: auto; gap: 1.2rem; }
	.wg-actions .btn { justify-content: center; }
	.wg-facts { border-radius: 18px; padding: .5rem; display: grid; grid-template-columns: repeat(2, 1fr); width: min(100%, 340px); margin-inline: auto; }
	.wg-facts li { justify-content: center; padding: .45rem .3rem; }
	.wg-facts li + li { border-left: 0; }
	.wg-facts li:nth-child(even) { border-left: 1px solid rgba(148, 163, 255, .18); }
	.wg-facts li:nth-child(n+3) { border-top: 1px solid rgba(148, 163, 255, .18); }
}
@media (prefers-reduced-motion: reduce) { .wg-k, .wg-k::after, .wg-cta::before, .wg-cta__icon::after, .wg-lead, .wg-actions, .wg-facts { animation: none !important; } .wg-k::after { transform: none; } }
.wg-cta::after { content: none; }

/* ---------- "Why WIGUEL": holographic deck ---------- */
#por-que { position: relative; isolation: isolate; overflow: hidden; padding-bottom: clamp(5rem, 11vw, 8rem); }
.wg-deck { position: absolute; left: -20%; right: -20%; bottom: 0; height: 62%; z-index: -1; pointer-events: none; perspective: 520px; perspective-origin: 50% 0;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 80%, transparent 100%); }
.wg-deck i { position: absolute; left: 0; right: 0; top: 0; height: 200%; transform-origin: 50% 0; transform: rotateX(68deg);
	background-image: linear-gradient(rgba(34, 211, 238, .38) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(139, 92, 246, .32) 1.5px, transparent 1.5px);
	background-size: 64px 64px; animation: wg-deck-run 2.4s linear infinite; }
@keyframes wg-deck-run { to { translate: 0 64px; } }
.wg-deck::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #22d3ee 30%, #f472b6 50%, #8b5cf6 70%, transparent); box-shadow: 0 0 30px 6px rgba(139, 92, 246, .45); }

/* Title: the three words light up in turn, the arrow closes the loop. */
.section__head h2.wg-loop { background: none; color: #fff; animation: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 .35em; }
.wg-loop__w { display: inline-block; animation: wg-word 3.6s ease-in-out infinite; }
.wg-loop__w:nth-child(2) { animation-delay: 1.2s; } .wg-loop__w:nth-child(3) { animation-delay: 2.4s; }
@keyframes wg-word {
	0%, 40%, 100% { color: #fff; text-shadow: none; transform: none; }
	10%, 28% { color: #a5f3fc; text-shadow: 0 0 18px rgba(34, 211, 238, .9), 0 0 50px rgba(139, 92, 246, .7); transform: translateY(-4px) scale(1.04); }
}
.wg-loop__arrow { width: .85em; height: .85em; color: #22d3ee; filter: drop-shadow(0 0 10px rgba(34, 211, 238, .9)); animation: wg-turn 3.6s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes wg-turn { 0%, 70% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

/* Cards */
.wg-feats { gap: clamp(1rem, 2vw, 1.6rem); perspective: 1200px; }
.wg-feat {
	--fc: #22d3ee; --fc2: #8b5cf6;
	display: flex; flex-direction: column; min-height: 400px; padding: 1.4rem 1.6rem 1.8rem; border-radius: 22px;
	border: 1px solid rgba(148, 163, 255, .2);
	background:
		radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--fc) 16%, transparent), transparent 60%),
		linear-gradient(180deg, rgba(22, 25, 54, .82), rgba(9, 10, 24, .92));
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .08);
	transform-style: preserve-3d;
}
.wg-feat--2 { --fc: #8b5cf6; --fc2: #22d3ee; }
.wg-feat--3 { --fc: #f472b6; --fc2: #fbbf24; }
.wg-feat::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; transition: opacity .4s ease;
	background: conic-gradient(from var(--wg-a), transparent, var(--fc) 25%, transparent 50%, var(--fc2) 75%, transparent);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.wg-feat:hover::before { opacity: 1; animation: wg-spin 4s linear infinite; }
.wg-feat:hover { border-color: transparent; }
.wg-feat__beam { position: absolute; left: 20%; right: 20%; top: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--fc), transparent); box-shadow: 0 0 24px 4px color-mix(in srgb, var(--fc) 60%, transparent); }
.wg-feat__num { position: absolute; top: 1rem; right: 1.3rem; font: 900 2.6rem/1 var(--wg-mono); color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--fc) 55%, transparent); }
.wg-feat h3 { font-size: clamp(1.3rem, 2vw, 1.55rem); margin-top: auto; transform: translateZ(20px); }
.wg-feat p { transform: translateZ(12px); }

.wg-viz {
	position: relative; height: 190px; margin: 1.6rem 0 1.4rem; display: grid; place-items: center;
	transform: translateZ(40px); transition: transform .6s var(--wg-ease);
}
.wg-feat:hover .wg-viz { transform: translateZ(70px) scale(1.04); }
.wg-viz::before { content: ""; position: absolute; inset: 10% 15%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--fc) 35%, transparent), transparent); filter: blur(10px); z-index: -1; }
.wg-viz__tag { position: absolute; bottom: 0; font: 800 .72rem/1 var(--wg-mono); letter-spacing: .3em; text-transform: uppercase; color: #a5f3fc; padding: .45rem .8rem; border-radius: 999px; background: rgba(34, 211, 238, .1); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .35); }

/* 01: the comet around the infinity loop */
.wg-viz--inf svg { width: min(100%, 260px); overflow: visible; filter: drop-shadow(0 0 8px rgba(34, 211, 238, .7)); }
.wg-inf__base { fill: none; stroke: rgba(148, 163, 255, .18); stroke-width: 7; stroke-linecap: round; }
.wg-inf__run { fill: none; stroke: url(#wg-ig); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 22 78; animation: wg-comet 2.6s linear infinite; }
.wg-inf__run--2 { stroke-width: 3; stroke: #fff; stroke-dasharray: 3 97; animation-duration: 2.6s; animation-delay: -.12s; opacity: .9; }
@keyframes wg-comet { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* 02: a tiny browser that loads and is ready */
.wg-br { width: min(100%, 270px); border-radius: 14px; overflow: hidden; background: #0b0d1f; box-shadow: 0 0 0 1px rgba(148, 163, 255, .28), 0 24px 40px -18px rgba(0, 0, 0, .9), 0 0 40px -10px rgba(139, 92, 246, .6); transform: rotateX(8deg) rotateY(-10deg); }
.wg-br__bar { display: flex; align-items: center; gap: 6px; padding: 9px 10px; background: linear-gradient(180deg, #1a1d3a, #13152c); }
.wg-br__bar i { width: 9px; height: 9px; border-radius: 50%; background: #f87171; } .wg-br__bar i:nth-child(2) { background: #fbbf24; } .wg-br__bar i:nth-child(3) { background: #34d399; }
.wg-br__url { flex: 1; margin-left: 6px; padding: 4px 9px; border-radius: 6px; background: #07070f; font: 700 .72rem/1.2 var(--wg-mono); color: #c7d2fe; overflow: hidden; white-space: nowrap; }
.wg-br__url span { display: inline-block; overflow: hidden; vertical-align: bottom; width: 0; border-right: 2px solid #22d3ee; animation: wg-type 4.5s steps(10) infinite; }
@keyframes wg-type { 0% { width: 0; } 25%, 100% { width: 10ch; } }
.wg-br__body { position: relative; height: 110px; display: grid; place-items: center; background: radial-gradient(80% 90% at 50% 100%, rgba(139, 92, 246, .35), transparent 70%), repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 4px); }
.wg-br__load { width: 70%; height: 8px; border-radius: 8px; background: rgba(148, 163, 255, .15); overflow: hidden; animation: wg-hide 4.5s steps(1) infinite; }
.wg-br__load b { display: block; height: 100%; background: linear-gradient(90deg, #22d3ee, #8b5cf6); box-shadow: 0 0 12px #22d3ee; transform-origin: 0 50%; animation: wg-fill 4.5s ease-in-out infinite; }
@keyframes wg-fill { 0%, 25% { transform: scaleX(0); } 55%, 100% { transform: scaleX(1); } }
@keyframes wg-hide { 0%, 58% { opacity: 1; } 59%, 100% { opacity: 0; } }
.wg-br__ready { position: absolute; display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1.1rem; border-radius: 999px; font: 900 .85rem/1 var(--wg-mono); letter-spacing: .25em; text-transform: uppercase; color: #04121a; background: var(--grad); box-shadow: 0 0 30px rgba(34, 211, 238, .7); animation: wg-ready 4.5s cubic-bezier(.2, 1.6, .4, 1) infinite; }
@keyframes wg-ready { 0%, 58% { opacity: 0; transform: scale(.4); } 66%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1); } }

/* 03: labels that flip between the two languages (texts taken from the games) */
.wg-viz--lang { gap: .6rem; align-content: center; }
.wg-flip { display: block; width: min(100%, 270px); height: 42px; perspective: 500px; }
.wg-flip__in { position: relative; display: block; height: 100%; transform-style: preserve-3d; animation: wg-flipx 6s cubic-bezier(.7, 0, .3, 1) infinite; animation-delay: calc(var(--i) * .25s); }
.wg-flip b {
	position: absolute; inset: 0; display: flex; align-items: center; gap: .7rem; padding: 0 .9rem; border-radius: 12px; backface-visibility: hidden;
	font: 800 .95rem/1 var(--font); color: #fff; background: linear-gradient(90deg, rgba(244, 114, 182, .18), rgba(15, 17, 36, .9) 60%); box-shadow: inset 0 0 0 1px rgba(244, 114, 182, .4);
}
.wg-flip b + b { transform: rotateX(180deg); background: linear-gradient(90deg, rgba(251, 191, 36, .2), rgba(15, 17, 36, .9) 60%); box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .45); }
.wg-flip em { font: 900 .68rem/1 var(--wg-mono); font-style: normal; letter-spacing: .12em; padding: .3rem .4rem; border-radius: 6px; color: #07070f; background: #f472b6; }
.wg-flip b + b em { background: #fbbf24; }
@keyframes wg-flipx { 0%, 40% { transform: rotateX(0); } 50%, 90% { transform: rotateX(180deg); } 100% { transform: rotateX(360deg); } }

@media (max-width: 760px) {
	.wg-feat { min-height: 0; }
	.wg-viz { height: 160px; margin: 1rem 0; }
	.wg-feat__num { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
	.wg-deck i, .wg-loop__w, .wg-loop__arrow, .wg-inf__run, .wg-br__url span, .wg-br__load, .wg-br__load b, .wg-br__ready, .wg-flip__in { animation: none !important; }
	.wg-br__url span { width: 10ch; } .wg-br__load { opacity: 0; } .wg-br__ready { opacity: 1; }
}
.wg-feat { overflow: visible; }
.wg-viz { margin-top: 2.8rem; }
.wg-br { width: min(100%, 250px); }
@media (max-width: 760px) { .wg-viz { margin-top: 2.2rem; } }