/* ILAV Grok visual system: toybox arcade. A spinning sunburst, chunky ink outlines, hard drop shadows, gummy Groks. Single bright look by choice. */
:root {
	--sun: #FFD23F;
	--sun-2: #FFE274;
	--burst-a: var(--sun);
	--burst-b: var(--sun-2);
	--ink: #1B1446;
	--ink-soft: #4A4275;
	--pop: #FF3D7F;
	--pop-deep: #D61F5E;
	--sky: #2EC4F1;
	--mint: #3DDC97;
	--mint-deep: #22B377;
	--bad: #FF4B3E;
	--tile: #FFFFFF;
	--tile-2: #F2EFFC;
	--f-display: "Bagel Fat One", "Arial Black", system-ui, sans-serif;
	--f-body: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
	color-scheme: light;
	padding-top: env(safe-area-inset-top, 0px);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; overflow-x: hidden; }
body {
	margin: 0;
	background: var(--burst-a);
	color: var(--ink);
	font-family: var(--f-body);
	font-size: 17px;
	padding-left: max(16px, env(safe-area-inset-left, 0px));
	padding-right: max(16px, env(safe-area-inset-right, 0px));
	-webkit-tap-highlight-color: transparent;
	transition: background-color .6s;
}

/* Background */
.sunburst {
	position: fixed;
	inset: -60vmax;
	z-index: -2;
	background: repeating-conic-gradient(from 0deg at 50% 50%, var(--burst-a) 0deg 9deg, var(--burst-b) 9deg 18deg);
	animation: spin 90s linear infinite;
	will-change: transform;
	transition: filter .3s;
}
.vignette {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(ellipse at 50% 40%, transparent 45%, rgb(27 20 70 / .16) 100%);
}
.flash {
	position: fixed;
	inset: 0;
	z-index: 30;
	pointer-events: none;
	background: var(--bad);
	opacity: 0;
}
.flash.on { animation: flash .35s ease-out; }
.confetti {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 40;
}

/* Type */
.logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: .8;
	transform: rotate(-4deg);
}
.logo-badge {
	font-family: var(--f-display);
	font-size: clamp(34px, 9vw, 46px);
	letter-spacing: .06em;
	color: #fff;
	background: var(--sky);
	border: 5px solid var(--ink);
	border-radius: 18px;
	padding: 10px 18px;
	box-shadow: 0 5px 0 var(--ink);
	transform: rotate(5deg) translateY(12px);
	position: relative;
	z-index: 1;
}
.logo-word {
	font-family: var(--f-display);
	font-size: clamp(76px, 23vw, 128px);
	color: var(--pop);
	-webkit-text-stroke: 10px var(--ink);
	paint-order: stroke fill;
	text-shadow: 0 10px 0 var(--ink);
	animation: wobble 3.2s ease-in-out infinite;
}
.outline-text {
	font-family: var(--f-display);
	color: #fff;
	-webkit-text-stroke: 7px var(--ink);
	paint-order: stroke fill;
	text-shadow: 0 7px 0 var(--ink);
	line-height: .95;
}

/* Controls */
.btn {
	appearance: none;
	font: 800 20px/1 var(--f-body);
	padding: 15px 26px;
	border-radius: 20px;
	border: 4px solid var(--ink);
	background: var(--tile);
	color: var(--ink);
	box-shadow: 0 6px 0 var(--ink);
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	transition: transform .07s, box-shadow .07s, filter .15s;
	user-select: none;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
.btn:focus-visible, .icon-btn:focus-visible, .lang:focus-visible { outline: 4px solid var(--sky); outline-offset: 3px; }
.btn[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: 0 6px 0 var(--ink); }
.btn-mega {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 30px;
	letter-spacing: .02em;
	padding: 18px 36px;
	background: var(--pop);
	color: #fff;
	text-shadow: 0 3px 0 var(--pop-deep);
	box-shadow: 0 8px 0 var(--ink);
	animation: pulse 1.8s ease-in-out infinite;
}
.btn-mega:active { transform: translateY(7px); box-shadow: 0 1px 0 var(--ink); }
.btn-mega small {
	font: 700 14px/1 var(--f-body);
	text-shadow: none;
	opacity: .92;
	letter-spacing: 0;
}
.btn-go { background: var(--mint); color: var(--ink); }
.btn-row { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; }
.btn .ico { width: 1.05em; height: 1.05em; flex: none; }
/* Match the cap height of the display face so the icon reads as the same size as the letters. */
.btn-mega .ico { width: .78em; height: .78em; filter: drop-shadow(0 3px 0 var(--pop-deep)); }
.btn-mega .btn-row { gap: 12px; }
.icon-btn {
	appearance: none;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	border: 4px solid var(--ink);
	background: var(--tile);
	color: var(--ink);
	box-shadow: 0 4px 0 var(--ink);
	display: grid;
	place-items: center;
	cursor: pointer;
	padding: 0;
}
.icon-btn svg { width: 24px; height: 24px; }
.icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.lang {
	appearance: none;
	height: 46px;
	font: 800 15px/1 var(--f-body);
	color: var(--ink);
	background: var(--tile);
	border: 4px solid var(--ink);
	border-radius: 14px;
	box-shadow: 0 4px 0 var(--ink);
	padding: 0 14px;
	cursor: pointer;
}
.chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--tile);
	border: 3px solid var(--ink);
	border-radius: 99px;
	padding: 7px 14px;
	font-weight: 700;
	font-size: 15px;
}
.chip b { font-family: var(--f-display); font-weight: 400; font-size: 18px; color: var(--pop); }
.card {
	background: var(--tile);
	border: 4px solid var(--ink);
	border-radius: 26px;
	box-shadow: 0 8px 0 var(--ink);
}
.promo {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 18px 10px 10px;
	color: var(--ink);
	text-decoration: none;
	transition: transform .15s;
	max-width: 100%;
}
.promo:hover { transform: rotate(-2deg) scale(1.03); }
.promo:focus-visible { outline: 4px solid var(--sky); outline-offset: 3px; }
.promo .grok { width: 58px; height: 58px; flex: none; }
.promo strong { display: block; font-size: 18px; line-height: 1.1; }
.promo span { display: block; font-size: 14px; color: var(--ink-soft); font-weight: 600; }

/* Referral link to the Grok free trial */
.trial {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px 6px 10px;
	border-radius: 16px;
	background: var(--ink);
	color: #fff;
	text-decoration: none;
	text-align: left;
	box-shadow: 0 5px 0 rgb(27 20 70 / .35);
	transition: transform .15s;
}
.trial:hover { transform: rotate(-2deg) scale(1.04); }
.trial:focus-visible { outline: 4px solid var(--sky); outline-offset: 3px; }
.trial-spark { font-size: 24px; color: var(--sun); animation: wobble 2s ease-in-out infinite; }
.trial strong { display: block; font-size: 16px; line-height: 1.1; }
.trial small { display: block; font-size: 13px; opacity: .8; font-weight: 600; }

/* Both faces carry extra space above the letters. Trimming each text box to cap height
   makes flex centering line text up with icons and borders exactly. */
.btn > span, .btn-row > span, .btn small, .icon-btn > span, .chip > span, .chip > b,
.ribbon, .stamp, .logo-badge, .day-pill, .help-time span {
	text-box: trim-both cap alphabetic;
}
@supports not (text-box: trim-both cap alphabetic) {
	.btn .ico { margin-top: -.12em; }
	.btn-mega .ico { margin-top: .1em; }
}

/* Groks */
.grok { display: block; overflow: visible; }
.grok-body { transform-box: fill-box; transform-origin: 50% 100%; }
.grok-eyes { transform-box: fill-box; transform-origin: center; animation: blink 4.2s infinite; }
.bob .grok-body { animation: bob 2.2s ease-in-out infinite; animation-delay: var(--d); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes wobble { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(3deg) scale(1.04); } }
@keyframes pulse { 0%, 100% { scale: 1; } 50% { scale: 1.05; } }
@keyframes bob { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-5%) scale(.96, 1.04); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@keyframes flash { from { opacity: .35; } to { opacity: 0; } }
@keyframes squash { 0% { transform: scale(1); } 30% { transform: scale(1.35, .7); } 55% { transform: scale(.85, 1.25); } 80% { transform: scale(1.08, .95); } 100% { transform: scale(1); } }
@keyframes pop-in { from { transform: scale(0) rotate(-20deg); opacity: 0; } 70% { transform: scale(1.15) rotate(4deg); opacity: 1; } }
@keyframes stamp { from { transform: scale(3) rotate(-20deg); opacity: 0; } 60% { transform: scale(.9) rotate(-6deg); opacity: 1; } to { transform: scale(1) rotate(-6deg); } }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}