.happy-mac {
	position: relative;
	width: 300px;
	max-width: 100%;

	margin: 0 auto 27px;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;

	touch-action: manipulation;
}
.happy-mac.is-crashed,
.happy-mac.is-booting {
	cursor: default;
}
.happy-mac img {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
}
.happy-mac svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;

	overflow: visible;
}
.happy-mac__face {
	fill: #000;
}
.happy-mac__dim {
	fill: #10112e;
	opacity: 0;
	transition: opacity 1.5s ease;
}
.happy-mac.is-asleep .happy-mac__dim {
	opacity: 0.45;
}
.happy-mac__snores,
.happy-mac__power {
	display: none;
}
.happy-mac.is-asleep .happy-mac__snores,
.happy-mac.is-booting .happy-mac__power {
	display: inline;
}
.happy-mac__z {
	transform-box: fill-box;
	transform-origin: center;
	animation: happy-mac-snore 3s linear infinite;
}
.happy-mac__z--second {
	animation-delay: -1s;
}
.happy-mac__z--third {
	animation-delay: -2s;
}

.happy-mac__shutter {
	fill: #000;
	transform-box: fill-box;
}
.happy-mac.is-booting .happy-mac__shutter {
	animation: happy-mac-shutter 0.9s ease-in both;
}
.happy-mac__shutter--top {
	transform-origin: top;
}
.happy-mac__shutter--bottom {
	transform-origin: bottom;
}
.happy-mac__beam {
	fill: #fff;
	transform-box: fill-box;
	transform-origin: center;
}
.happy-mac.is-booting .happy-mac__beam {
	animation: happy-mac-beam 0.9s ease-out both;
}
.happy-mac.is-booting .happy-mac__face {
	animation: happy-mac-flicker 0.9s linear both;
}
.happy-mac.is-waking .happy-mac__face {
	animation: happy-mac-wake 0.4s linear;
}
@keyframes happy-mac-snore {
	0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
	15% { opacity: 1; }
	100% { transform: translate(2px, -3.4px) scale(1.1); opacity: 0; }
}
@keyframes happy-mac-shutter {
	0%, 35% { transform: scaleY(1); }
	75%, 100% { transform: scaleY(0); }
}
@keyframes happy-mac-beam {
	0% { transform: scale(0, 1); opacity: 1; }
	35% { transform: scale(1, 1); opacity: 1; }
	75%, 100% { transform: scale(1, 110); opacity: 0; }
}
@keyframes happy-mac-flicker {
	0%, 70% { opacity: 0; }
	78% { opacity: 1; }
	84% { opacity: 0.3; }
	92%, 100% { opacity: 1; }
}
@keyframes happy-mac-wake {
	0% { opacity: 0.2; }
	30% { opacity: 1; }
	50% { opacity: 0.5; }
	100% { opacity: 1; }
}
.happy-mac__tint {
	fill: none;
	mix-blend-mode: multiply;
}
.happy-mac[data-occasion="halloween"] .happy-mac__tint {
	fill: #ff7a00;
	opacity: 0.5;
	animation: happy-mac-candle 3.7s steps(1) infinite;
}
.happy-mac__candlelight {
	mix-blend-mode: screen;
	animation: happy-mac-candlelight 2.9s ease-in-out infinite;
}
.happy-mac__glow {
	fill: #ffd27a;
	opacity: 0;
	mix-blend-mode: screen;
}
.happy-mac.is-flaring .happy-mac__glow {
	animation: happy-mac-flare 0.7s ease-out;
}
.happy-mac.is-hungover .happy-mac__tint {
	fill: #b8e6a0;
	opacity: 0.45;
}
.happy-mac[data-occasion="easter"] .happy-mac__tint {
	fill: #ffc8e6;
	opacity: 0.5;
}
.happy-mac__wings {
	animation: happy-mac-flap 0.24s steps(1) infinite;
}
.happy-mac__wings--down {
	animation-delay: -0.12s;
}
.happy-mac__cheeks {
	fill: #ff6f91;
	opacity: 0.85;
}
.happy-mac[data-occasion="april-fools"] .happy-mac__tint {
	fill: #008080;
	opacity: 0.92;
	mix-blend-mode: normal;
}
.happy-mac__bsod,
.happy-mac__hourglass,
.happy-mac__startup,
.happy-mac__splash {
	display: none;
}
.happy-mac.is-crashed .happy-mac__bsod,
.happy-mac.is-busy .happy-mac__hourglass,
.happy-mac.is-starting-up .happy-mac__startup,
.happy-mac.is-starting-up .happy-mac__splash {
	display: inline;
}
.happy-mac[data-occasion="april-fools"].is-starting-up .happy-mac__startup {
	display: none;
}
.happy-mac__disk,
.happy-mac__no-disk {
	display: none;
}
.happy-mac.is-disk-out .happy-mac__disk,
.happy-mac.is-diskless .happy-mac__no-disk {
	display: inline;
}
.happy-mac__disk {
	transform-box: fill-box;
	transform-origin: center;
}
.happy-mac__found,
.happy-mac__desktop,
.happy-mac__zoom,
.happy-mac__window,
.happy-mac__pointer,
.happy-mac__selected,
.happy-mac__opening {
	display: none;
}
.happy-mac[data-stage] .happy-mac__no-disk {
	display: none;
}
.happy-mac[data-stage="found"] .happy-mac__found,
.happy-mac[data-stage="desktop"] .happy-mac__desktop,
.happy-mac[data-stage="zoom"] .happy-mac__desktop,
.happy-mac[data-stage="zoom"] .happy-mac__zoom,
.happy-mac[data-stage="window"] .happy-mac__desktop,
.happy-mac[data-stage="window"] .happy-mac__window,
.happy-mac[data-stage="point"] .happy-mac__desktop,
.happy-mac[data-stage="point"] .happy-mac__window,
.happy-mac[data-stage="point"] .happy-mac__pointer,
.happy-mac[data-stage="open"] .happy-mac__desktop,
.happy-mac[data-stage="open"] .happy-mac__window,
.happy-mac[data-stage="open"] .happy-mac__pointer,
.happy-mac[data-stage="open"] .happy-mac__selected,
.happy-mac[data-stage="open"] .happy-mac__opening {
	display: inline;
}
.happy-mac[data-stage="point"] .happy-mac__pointer > g {
	animation: happy-mac-point 0.6s ease-out both;
}

.happy-mac[data-stage="open"] .happy-mac__selected {
	animation: happy-mac-double-click 0.35s steps(1) both;
}

.happy-mac__zoom rect,
.happy-mac__opening rect {
	opacity: 0;
}
.happy-mac[data-stage="zoom"] .happy-mac__zoom rect,
.happy-mac[data-stage="open"] .happy-mac__opening rect {

	animation: happy-mac-zoom 0.4s steps(1) forwards;
}

.happy-mac[data-occasion="april-fools"] .happy-mac__mac-only {
	display: none !important;
}
.happy-mac[data-occasion="april-fools"][data-stage] .happy-mac__face,
.happy-mac[data-occasion="april-fools"][data-stage] .happy-mac__app {
	visibility: hidden;
}

.happy-mac[data-occasion="april-fools"].is-waking .happy-mac__face {
	animation: none;
}
.happy-mac__dos-starting,
.happy-mac__win-desktop,
.happy-mac__win-pointer,
.happy-mac__win-start,
.happy-mac__win-programs,
.happy-mac__win-ryblog {
	display: none;
}

.happy-mac[data-stage="starting"] .happy-mac__dos-starting,
.happy-mac[data-stage="splash"] .happy-mac__splash,
.happy-mac[data-stage^="win-"] .happy-mac__win-desktop,
.happy-mac[data-stage^="win-"]:not([data-stage="win-desktop"]) .happy-mac__win-pointer,
.happy-mac[data-stage="win-start"] .happy-mac__win-start,
.happy-mac[data-stage="win-to-programs"] .happy-mac__win-start,
.happy-mac[data-stage="win-programs"] .happy-mac__win-start,
.happy-mac[data-stage="win-programs"] .happy-mac__win-programs,
.happy-mac[data-stage="win-to-ryblog"] .happy-mac__win-start,
.happy-mac[data-stage="win-to-ryblog"] .happy-mac__win-programs,
.happy-mac[data-stage="win-ryblog"] .happy-mac__win-start,
.happy-mac[data-stage="win-ryblog"] .happy-mac__win-programs,
.happy-mac[data-stage="win-ryblog"] .happy-mac__win-ryblog {
	display: inline;
}

.happy-mac[data-stage="win-point"] .happy-mac__win-pointer {
	animation: happy-mac-to-start 0.5s ease-out both;
}
.happy-mac[data-stage="win-start"] .happy-mac__win-pointer {
	transform: translate(96px, 260px);
}
.happy-mac[data-stage="win-to-programs"] .happy-mac__win-pointer {
	animation: happy-mac-to-programs 0.5s ease-out both;
}
.happy-mac[data-stage="win-programs"] .happy-mac__win-pointer {
	transform: translate(130px, 154px);
}
.happy-mac[data-stage="win-to-ryblog"] .happy-mac__win-pointer {
	animation: happy-mac-to-ryblog 0.4s ease-out both;
}
.happy-mac[data-stage="win-ryblog"] .happy-mac__win-pointer {
	transform: translate(218px, 196px);
}
.happy-mac__question {
	animation: happy-mac-question 1s steps(1) infinite;
}
.happy-mac.is-starting-up .happy-mac__progress,
.happy-mac[data-stage="splash"] .happy-mac__progress {
	animation: happy-mac-progress 1.5s linear infinite;
}

.happy-mac__startup-bar {
	transform-box: fill-box;
	transform-origin: left;
}
.happy-mac.is-starting-up .happy-mac__startup-bar {
	animation: happy-mac-startup-bar 3s ease-in both;
}
.happy-mac__bubble {
	animation: happy-mac-bubble 1.6s steps(8) infinite;
}
.happy-mac__cursor {
	animation: happy-mac-cursor 1s steps(1) infinite;
}
.happy-mac__flame {
	animation: happy-mac-flame 0.9s steps(1) infinite;
}
.happy-mac.is-blown-out .happy-mac__flames {
	display: none;
}
.happy-mac__pool {
	mix-blend-mode: screen;
}
.happy-mac__bulb,
.happy-mac__pool {
	animation: happy-mac-twinkle 2.4s steps(1) infinite;
}
.happy-mac__flake {
	fill: #fff;
	animation: happy-mac-snow linear infinite;
}
.happy-mac__pile {
	transform-box: fill-box;
	transform-origin: bottom;
	animation: happy-mac-pile 90s linear both;
}
.happy-mac__counter {
	fill: #000;
}
.happy-mac.is-counting .happy-mac__face {
	opacity: 0;
}
.happy-mac__egg,
.happy-mac__ear {
	transform-box: fill-box;
}
.happy-mac__egg {
	transform-origin: center;
}
.happy-mac__ear {
	transform-origin: bottom;
}
.happy-mac__ear.is-twitching {
	animation: happy-mac-twitch 0.5s ease-in-out;
}
@keyframes happy-mac-candle {
	0% { opacity: 0.5; }
	23% { opacity: 0.42; }
	27% { opacity: 0.52; }
	61% { opacity: 0.46; }
	64% { opacity: 0.56; }
	88% { opacity: 0.44; }
}
@keyframes happy-mac-candlelight {
	0%, 100% { opacity: 0.8; }
	18% { opacity: 0.6; }
	33% { opacity: 0.95; }
	52% { opacity: 0.7; }
	71% { opacity: 1; }
	86% { opacity: 0.65; }
}
@keyframes happy-mac-flare {
	0% { opacity: 0.35; }
	100% { opacity: 0; }
}
@keyframes happy-mac-flap {
	50% { opacity: 0; }
}
@keyframes happy-mac-point {
	from { transform: translate(-77px, 62px); }
}
@keyframes happy-mac-double-click {
	25% { opacity: 0; }
	50% { opacity: 1; }
}
@keyframes happy-mac-to-start {
	from { transform: translate(200px, 190px); }
	to { transform: translate(96px, 260px); }
}
@keyframes happy-mac-to-programs {
	from { transform: translate(96px, 260px); }
	to { transform: translate(130px, 154px); }
}
@keyframes happy-mac-to-ryblog {
	from { transform: translate(130px, 154px); }
	to { transform: translate(218px, 196px); }
}
@keyframes happy-mac-zoom {
	0% { opacity: 1; }
	30% { opacity: 0; }
}
@keyframes happy-mac-question {
	50% { opacity: 0; }
}
@keyframes happy-mac-startup-bar {
	from { transform: scaleX(0); }
}

@keyframes happy-mac-progress {
	to { transform: translateX(282px); }
}
@keyframes happy-mac-cursor {
	50% { fill-opacity: 0; }
}
@keyframes happy-mac-bubble {
	to { transform: translateY(-36px); opacity: 0; }
}
@keyframes happy-mac-flame {
	20% { opacity: 0.75; transform: translateX(1px); }
	45% { opacity: 1; transform: none; }
	60% { opacity: 0.6; }
	80% { opacity: 0.9; transform: translateX(-1px); }
}
@keyframes happy-mac-twinkle {
	50% { opacity: 0.35; }
}
@keyframes happy-mac-snow {
	from { transform: translate(0, var(--fall-from)); }
	to { transform: translate(var(--drift), var(--fall-to)); }
}
@keyframes happy-mac-pile {
	from { transform: scaleY(0.15); }
}
@keyframes happy-mac-twitch {
	25% { transform: rotate(-12deg); }
	50% { transform: rotate(5deg); }
	75% { transform: rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce) {
	.happy-mac * {
		animation: none !important;
		transition: none !important;
	}
}