/* ==========================================================================
   Desktop: wallpaper, the eye, headline, icons
   ========================================================================== */

.desk {
	--eye-w: clamp(150px, 13vw, 250px);
	position: fixed;
	inset: 0 0 var(--taskbar-h) 0;
	z-index: 0;
	overflow: hidden;
	background:
		radial-gradient(120% 60% at 50% 62%, rgb(255 69 69 / 0.14), transparent 60%),
		#000;
	user-select: none;
	-webkit-user-select: none;
}

.desk__wall {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	image-rendering: auto;
}

/* The glow the eye floats in front of. */
.desk__sun {
	position: absolute;
	left: 50%;
	top: 58%;
	width: min(70vw, 1100px);
	aspect-ratio: 2.2;
	transform: translate(-50%, -62%);
	background: radial-gradient(closest-side, rgb(255 69 69 / calc(0.32 * var(--glow-k) + 0.06)), rgb(255 69 69 / 0.05) 55%, transparent 75%);
	filter: blur(6px);
	pointer-events: none;
	animation: sun-breathe 6s ease-in-out infinite;
}

@keyframes sun-breathe { 50% { opacity: 0.7; transform: translate(-50%, -62%) scale(1.05); } }

.desk__title {
	position: absolute;
	top: clamp(36px, 8vh, 110px);
	left: 0;
	right: 0;
	display: grid;
	justify-items: center;
	gap: 0.1em;
	padding: 0 16px;
	font-family: var(--f-display);
	font-weight: 400;
	line-height: 0.92;
	text-align: center;
	text-transform: uppercase;
	pointer-events: none;
}

.desk__name {
	font-size: clamp(56px, 7.2vw, 132px);
	color: var(--white);
	text-shadow: var(--text-glow-white);
	letter-spacing: 0.02em;
}

.desk__tagline {
	font-size: clamp(22px, 2.9vw, 54px);
	color: var(--white);
	-webkit-text-stroke: 0;
	text-shadow: var(--text-glow);
}

.desk__eye {
	position: absolute;
	left: 50%;
	top: 56%;
	--rage: 0;
	width: var(--eye-w);
	transform: translate(-50%, -50%);
	pointer-events: none;
	filter: drop-shadow(0 0 calc(14px + var(--rage) * 20px) rgb(255 69 69 / calc(0.9 * var(--glow-k)))) drop-shadow(0 0 calc(46px + var(--rage) * 50px) rgb(255 69 69 / calc((0.5 + var(--rage) * 0.4) * var(--glow-k))));
	animation: eye-float 7s ease-in-out infinite;
}

@keyframes eye-float { 50% { transform: translate(-50%, calc(-50% - 10px)); } }

/* --------------------------------------------------------------------------
   The eye (shared with the phone hero and boot badge)
   -------------------------------------------------------------------------- */

.eye { width: 100%; height: auto; overflow: visible; }
.eye__ball { fill: var(--red); }
.eye__iris { fill: var(--white); }
.eye__pupil { fill: var(--red); }
.eye__glint { fill: var(--white); opacity: 0.85; }
.eye__lid { transform-origin: 50% 50%; transform-box: fill-box; }
.eye.is-blinking .eye__lid { animation: eye-blink 0.2s ease-in-out; }
.eye__look { transition: transform 0.18s linear; }

@keyframes eye-blink { 50% { transform: scaleY(0.06); } }

/* Bass hits make the pupil throb (--kick, 0..1); anger shrinks it to a pinprick (--rage). */
.eye__pupil { transform-origin: 110px 66px; transform: scale(calc((1 + var(--kick, 0) * 0.35) * (1 - var(--rage, 0) * 0.45))); }

/* --------------------------------------------------------------------------
   Poking the eye (os/tantrum.js)
   -------------------------------------------------------------------------- */

.desk__eye .eye__ball,
.desk__eye .eye__look { pointer-events: auto; cursor: var(--cursor-hover); }
.desk__eye .eye__iris { fill: color-mix(in srgb, var(--white), #ff2a2a calc(var(--rage) * 55%)); transition: fill 0.3s; }
.desk__eye .eye__pupil { fill: color-mix(in srgb, var(--red), #000 calc(var(--rage) * 85%)); }
/* An angry squint. Blinks still happen over the top of it. */
.desk__eye .eye__lid { transform: scaleY(calc(1 - var(--rage) * 0.38)); transition: transform 0.25s var(--ease-out); }
.desk__eye.is-angry .eye { animation: eye-shake calc(0.16s - var(--rage) * 0.1s) steps(2) infinite; }
.desk__eye.is-poked .eye { animation: eye-flinch 0.34s var(--ease-out), eye-shake calc(0.16s - var(--rage) * 0.1s) steps(2) infinite; }
@keyframes eye-flinch { 0% { transform: none; } 18% { transform: scale(0.84, 0.55); } 45% { transform: scale(1.08, 1.04); } 100% { transform: none; } }
@keyframes eye-shake {
	0% { translate: calc(var(--rage) * -4px) calc(var(--rage) * 2px); }
	100% { translate: calc(var(--rage) * 4px) calc(var(--rage) * -2px); }
}

/* What it says back: a hard-edged speech bubble off the top right of the eye. */
.desk__bubble {
	--tilt: -4deg;
	position: fixed;
	z-index: 6500;
	margin: 0;
	padding: 10px 16px 11px;
	border: 3px solid #000;
	background: var(--white);
	box-shadow: 5px 5px 0 var(--red), 0 0 30px rgb(255 69 69 / calc(0.6 * var(--glow-k)));
	color: #000;
	font-family: var(--f-display);
	font-size: clamp(16px, 1.3vw, 24px);
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
	transform-origin: 0 100%;
	rotate: var(--tilt);
}
.desk__bubble[hidden] { display: none; }
/* The tail, pointing down at the eye. */
.desk__bubble::after {
	content: '';
	position: absolute;
	left: 10px;
	top: 100%;
	width: 22px;
	height: 20px;
	background: #000;
	clip-path: polygon(0 0, 100% 0, 0 100%);
}
.desk__bubble::before {
	content: '';
	position: absolute;
	left: 13px;
	top: 100%;
	width: 13px;
	height: 12px;
	margin-top: -1px;
	z-index: 1;
	background: var(--white);
	clip-path: polygon(0 0, 100% 0, 0 100%);
}
.desk__bubble.is-loud { background: var(--red); color: #000; font-size: clamp(22px, 2vw, 38px); box-shadow: 6px 6px 0 #000, 0 0 40px var(--red); }
.desk__bubble.is-loud::before { background: var(--red); }
.desk__bubble.is-popping { animation: bubble-pop 0.3s var(--ease-snap); }
@keyframes bubble-pop { 0% { scale: 0.3; opacity: 0; } 60% { scale: 1.14; opacity: 1; } 100% { scale: 1; } }

/* Past halfway every poke jolts the screen; near the end the icons twitch. */
.desk.is-jolted { animation: desk-jolt 0.2s steps(3); }
@keyframes desk-jolt { 33% { translate: -6px 3px; } 66% { translate: 5px -4px; } 100% { translate: 0 0; } }
.desk.is-seething .desk-icon__icon { animation: icon-twitch 0.14s steps(2) infinite; }
.desk.is-seething .desk-icon:nth-child(3n) .desk-icon__icon { animation-duration: 0.19s; }
.desk.is-seething .desk-icon:nth-child(3n + 1) .desk-icon__icon { animation-duration: 0.11s; animation-direction: reverse; }
@keyframes icon-twitch { 0% { translate: -1.5px 1px; rotate: -3deg; } 100% { translate: 1.5px -1px; rotate: 3deg; } }

@media (prefers-reduced-motion: reduce) {
	.desk__eye.is-angry .eye,
	.desk__eye.is-poked .eye,
	.desk.is-jolted,
	.desk.is-seething .desk-icon__icon { animation: none; }
}

/* --------------------------------------------------------------------------
   Desktop icons
   -------------------------------------------------------------------------- */

.desk__icons {
	position: absolute;
	inset: 18px auto 18px 18px;
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(auto-fill, 112px);
	grid-auto-columns: 124px;
	gap: 6px 10px;
	z-index: 2;
}

/* Once JS has laid the icons out (and restored dragged positions), they are absolute. */
.desk__icons.is-free { display: block; inset: 0; pointer-events: none; }
.desk__icons.is-free .desk-icon { position: absolute; pointer-events: auto; }

.desk-icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 124px;
	padding: 8px 0 6px;
	border: 1px solid transparent;
	color: var(--white);
	text-decoration: none;
	touch-action: none;
	transition: background 0.15s, border-color 0.15s;
}

.desk-icon__icon {
	width: 54px;
	filter: drop-shadow(0 0 6px rgb(255 69 69 / calc(0.55 * var(--glow-k))));
	transition: transform 0.25s var(--ease-snap), filter 0.2s;
}

.desk-icon__label {
	max-width: 100%;
	padding: 2px 4px;
	font-family: var(--f-display);
	font-size: 10px;
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 0 1px 2px #000, 0 0 8px #000;
	/* Names with a space wrap onto a second line rather than run into the next icon. */
	text-wrap: balance;
}

.desk-icon:hover { background: rgb(255 69 69 / 0.08); border-color: var(--line-soft); color: var(--white); }
.desk-icon:hover .desk-icon__icon { transform: translateY(-3px) scale(1.06); filter: drop-shadow(0 0 10px rgb(255 69 69 / calc(0.9 * var(--glow-k)))); }

.desk-icon.is-selected { background: rgb(255 69 69 / 0.16); border: 1px dotted var(--blush); }
.desk-icon.is-selected .desk-icon__label { background: var(--red); color: var(--black); text-shadow: none; }
.desk-icon.is-dragging { opacity: 0.75; z-index: 5; }
.desk-icon.is-launching .desk-icon__icon { animation: icon-launch 0.45s var(--ease-out); }

@keyframes icon-launch {
	0% { transform: scale(1); }
	30% { transform: scale(0.85); filter: brightness(2) drop-shadow(0 0 16px var(--red)); }
	100% { transform: scale(1); }
}

.desk__logo {
	position: absolute;
	top: 22px;
	right: 26px;
	z-index: 2;
	text-decoration: none;
}

.desk__lasso {
	position: absolute;
	z-index: 3;
	border: 1px dotted var(--blush);
	background: rgb(255 69 69 / 0.12);
	pointer-events: none;
}
.desk__lasso[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Phone: the desk becomes a fixed backdrop only.
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
	.desk { inset: 0; position: fixed; }
	.desk__title,
	.desk__eye,
	.desk__icons,
	.desk__logo,
	.desk__lasso { display: none !important; }
	.desk__sun { top: 82%; width: 140vw; }
}

@media (min-width: 900px) and (max-height: 760px) {
	.desk__title { top: 24px; }
	.desk__name { font-size: clamp(44px, 6vw, 96px); }
	.desk__tagline { font-size: clamp(18px, 2.4vw, 40px); }
	.desk__icons { grid-template-rows: repeat(auto-fill, 100px); }
}