/* ── Error main area ── */

.err-main
{
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:64px 24px
}

.err-card
{
	background:#FFFDF9;
	border:1px solid var(--paw-card-bdr);
	border-radius:24px;
	padding:56px 48px 48px;
	max-width:520px;
	width:100%;
	text-align:center;
	position:relative;
	overflow:hidden;
}

/* Watermark circles */
/* .err-card::before{content:'';position:absolute;bottom:-44px;right:-44px;width:160px;height:160px;background:var(--paw-cream-dk);border-radius:50%;opacity:.6} */
/* .err-card::after {content:'';position:absolute;top:-32px;left:-32px;width:104px;height:104px;background:var(--paw-cream-dk);border-radius:50%;opacity:.4} */

/* Error code */

.err-code
{
	font-family:'Fraunces',serif;
	font-size:96px;
	font-weight:600;
	line-height:1;
	letter-spacing:-3px;
	margin-bottom:8px;
	position:relative;
	z-index:1
}

/* .err-code.e400{color:var(--paw-forest)} */

.err-code.e400,
.err-code.e404,
.err-code.e500
{
	color:var(--paw-gold)
}

/* .err-code.e500{color:var(--paw-coral)} */

/* Badge */

.err-badge
{
	display:inline-block;
	padding:4px 14px;
	border-radius:20px;
	font-size:12px;
	font-weight:500;
	margin-bottom:20px;
	position:relative;
	z-index:1
}

.badge-forest
{
	background:rgba(44,95,45,.1);
	color:var(--paw-forest)
}

.badge-gold
{
	background:rgba(201,151,42,.12);
	color:var(--paw-gold)
}

.badge-coral
{
	background:rgba(212,112,74,.1);
	color:var(--paw-coral-dk)
}

/* Illustration */

.err-illus
{
	margin:20px auto 24px;
	position:relative;
	z-index:1;
	width:180px;
	height:180px
}

/* Text */

.err-title
{
	font-family:'Fraunces',serif;
	font-size:24px;
	font-weight:600;
	margin-bottom:10px;
	position:relative;
	z-index:1;
	color:var(--paw-ink)
}

.err-sub
{
	font-size:14px;
	font-weight:300;
	color:var(--paw-bark-lt);
	line-height:1.65;
	margin-bottom:8px;
	position:relative;
	z-index:1
}

.err-tagline
{
	font-family:'Fraunces',serif;
	font-style:italic;
	font-size:13px;
	color:var(--paw-bark-xlt);
	margin-bottom:32px;
	position:relative;
	z-index:1
}

/* ══════════════════════════════
   CSS PET ILLUSTRATIONS
   ══════════════════════════════ */

/* --- 400: confused dog tilting head --- */

.dog
{
	position:relative;
	width:180px;
	height:180px
}

.dog .body
{
	position:absolute;
	bottom:20px;
	left:50%;
	transform:translateX(-50%);
	width:90px;
	height:70px;
	background:#D4956A;
	border-radius:45px 45px 35px 35px
}

.dog .hw
{
	position:absolute;
	bottom:76px;
	left:50%;
	transform-origin:bottom center;
	animation:tilt 2.8s ease-in-out infinite
}

@keyframes tilt
{
	0%,100%
	{
		transform:translateX(-50%) rotate(-18deg)
	}

	50%
	{
		transform:translateX(-50%) rotate(18deg)
	}
}

.dog .head
{
	width:72px;
	height:66px;
	background:#D4956A;
	border-radius:50%;
	position:relative
}

.dog .ear
{
	position:absolute;
	width:26px;
	height:38px;
	background:#B8724A;
	border-radius:50%;
	top:-10px
}

.dog .ear.l
{
	left:-8px;
	transform:rotate(-15deg)
}

.dog .ear.r
{
	right:-8px;
	transform:rotate(15deg)
}

.dog .eye
{
	position:absolute;
	width:12px;
	height:12px;
	background:#2C2C2A;
	border-radius:50%;
	top:22px
}

.dog .eye.l
{
	left:12px
}

.dog .eye.r
{
	right:12px
}

.dog .eye::after
{
	content:'';
	position:absolute;
	width:4px;
	height:4px;
	background:#fff;
	border-radius:50%;
	top:2px;
	left:2px
}

.dog .nose
{
	position:absolute;
	width:18px;
	height:13px;
	background:#2C2C2A;
	border-radius:50% 50% 40% 40%;
	bottom:16px;
	left:50%;
	transform:translateX(-50%)
}

.dog .tail
{
	position:absolute;
	bottom:28px;
	right:22px;
	width:14px;
	height:44px;
	background:#B8724A;
	border-radius:7px;
	transform-origin:bottom center;
	animation:wag .6s ease-in-out infinite alternate
}

@keyframes wag
{
	from
	{
		transform:rotate(10deg)
	}

	to
	{
		transform:rotate(40deg)
	}
}

.dog .paw
{
	position:absolute;
	bottom:10px;
	width:22px;
	height:16px;
	background:#D4956A;
	border-radius:11px 11px 8px 8px
}

.dog .paw.l
{
	left:38px
}

.dog .paw.r
{
	right:38px;
	z-index:2;
}

.dog .qs
{
	position:absolute;
	font-family:'Fraunces',serif;
	font-weight:600;
	color:var(--paw-forest);
	animation:fq 2.8s ease-in-out infinite
}

.dog .q1
{
	font-size:28px;
	top:0;
	right:10px;
	animation-delay:0s
}

.dog .q2
{
	font-size:20px;
	top:20px;
	right:0;
	animation-delay:.4s;
	opacity:.6
}

.dog .q3
{
	font-size:16px;
	top:36px;
	right:18px;
	animation-delay:.8s;
	opacity:.4
}

@keyframes fq
{
	0%,100%
	{
		transform:translateY(0)
	}

	50%
	{
		transform:translateY(-5px)
	}
}

/* --- 404: searching cat --- */

.cat404
{
	position:relative;
	width:180px;
	height:180px
}

.cat404 .body
{
	position:absolute;
	bottom:16px;
	left:50%;
	transform:translateX(-50%);
	width:80px;
	height:72px;
	background:#8C8C8A;
	border-radius:40px 40px 30px 30px
}

.cat404 .tail
{
	position:absolute;
	bottom:14px;
	right:14px;
	width:50px;
	height:16px;
	border:10px solid #6E6E6C;
	border-radius:0 0 30px 0;
	border-top:none;
	border-left:none
}

.cat404 .tail-tip
{
	position:absolute;
	bottom:14px;
	right:14px;
	width:18px;
	height:18px;
	background:#6E6E6C;
	border-radius:50%
}

.cat404 .hw
{
	position:absolute;
	bottom:76px;
	left:50%;
	transform-origin:bottom center;
	animation:look 3.5s ease-in-out infinite
}

@keyframes look
{
	0%
	{
		transform:translateX(-50%) rotate(0)
	}

	20%
	{
		transform:translateX(-50%) rotate(-25deg)
	}

	45%
	{
		transform:translateX(-50%) rotate(0)
	}

	65%
	{
		transform:translateX(-50%) rotate(25deg)
	}

	85%,100%
	{
		transform:translateX(-50%) rotate(0)
	}
}

.cat404 .head
{
	width:68px;
	height:62px;
	background:#8C8C8A;
	border-radius:50% 50% 48% 48%;
	position:relative
}

.cat404 .ear
{
	position:absolute;
	top:-14px;
	width:0;
	height:0;
	border-left:12px solid transparent;
	border-right:12px solid transparent;
	border-bottom:22px solid #8C8C8A
}

.cat404 .ear.l
{
	left:4px;
	transform:rotate(-8deg)
}

.cat404 .ear.r
{
	right:4px;
	transform:rotate(8deg)
}

.cat404 .ear::after
{
	content:'';
	position:absolute;
	top:4px;
	left:-7px;
	width:0;
	height:0;
	border-left:7px solid transparent;
	border-right:7px solid transparent;
	border-bottom:13px solid #E8ADAD
}

.cat404 .eye
{
	position:absolute;
	top:18px;
	width:15px;
	height:15px;
	background:#C4A53A;
	border-radius:50%
}

.cat404 .eye.l
{
	left:10px
}

.cat404 .eye.r
{
	right:10px
}

.cat404 .eye::before
{
	content:'';
	position:absolute;
	width:5px;
	height:12px;
	background:#1A1A1A;
	border-radius:3px;
	top:1.5px;
	left:5px
}

.cat404 .eye::after
{
	content:'';
	position:absolute;
	width:4px;
	height:4px;
	background:#fff;
	border-radius:50%;
	top:2px;
	left:2px;
	z-index:1
}

.cat404 .nose
{
	position:absolute;
	bottom:17px;
	left:50%;
	transform:translateX(-50%);
	width:10px;
	height:8px;
	background:#E8ADAD;
	border-radius:50%
}

.cat404 .wh
{
	position:absolute;
	height:1.5px;
	background:#555;
	border-radius:1px;
	opacity:.5
}

.cat404 .w1
{
	width:28px;
	bottom:22px;
	left:-24px;
	transform:rotate(-8deg)
}

.cat404 .w2
{
	width:28px;
	bottom:16px;
	left:-24px;
	transform:rotate(4deg)
}

.cat404 .w3
{
	width:28px;
	bottom:22px;
	right:-24px;
	transform:rotate(8deg)
}

.cat404 .w4
{
	width:28px;
	bottom:16px;
	right:-24px;
	transform:rotate(-4deg)
}

.cat404 .mag
{
	position:absolute;
	top:10px;
	right:8px;
	animation:magb 3.5s ease-in-out infinite
}

@keyframes magb
{
	0%
	{
		transform:rotate(0)
	}

	20%
	{
		transform:rotate(-30deg) translateY(2px)
	}

	45%
	{
		transform:rotate(0)
	}

	65%
	{
		transform:rotate(30deg) translateY(2px)
	}

	85%,100%
	{
		transform:rotate(0)
	}
}

.cat404 .mag-c
{
	width:34px;
	height:34px;
	border:4px solid var(--paw-gold);
	border-radius:50%
}

.cat404 .mag-h
{
	width:4px;
	height:18px;
	background:var(--paw-gold);
	border-radius:2px;
	margin-left:24px;
	margin-top:-2px;
	transform:rotate(45deg);
	transform-origin:top center
}

.cat404 .paw
{
	position:absolute;
	bottom:8px;
	width:20px;
	height:14px;
	background:#8C8C8A;
	border-radius:10px 10px 7px 7px
}

.cat404 .paw.l
{
	left:40px
}

.cat404 .paw.r
{
	right:40px;
	z-index:2;
}

/* --- 500: broken sleeping cat --- */

.cat500
{
	position:relative;
	width:180px;
	height:180px
}

.cat500 .body
{
	position:absolute;
	bottom:16px;
	left:50%;
	transform:translateX(-50%);
	width:100px;
	height:56px;
	background:#C8A882;
	border-radius:50%
}

.cat500 .head
{
	position:absolute;
	bottom:54px;
	left:30px;
	width:58px;
	height:52px;
	background:#C8A882;
	border-radius:50% 50% 46% 46%;
	animation:droop 3s ease-in-out infinite;
	transform-origin:bottom right
}

@keyframes droop
{
	0%,100%
	{
		transform:rotate(-15deg)
	}

	50%
	{
		transform:rotate(-22deg)
	}
}

.cat500 .ear
{
	position:absolute;
	top:-12px;
	width:0;
	height:0;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	border-bottom:18px solid #C8A882
}

.cat500 .ear.l
{
	left:2px;
	transform:rotate(-12deg)
}

.cat500 .ear.r
{
	right:4px;
	transform:rotate(8deg)
}

.cat500 .eye
{
	position:absolute;
	width:12px;
	height:12px;
	top:18px
}

.cat500 .eye.l
{
	left:6px
}

.cat500 .eye.r
{
	right:8px
}

.cat500 .eye::before,
.cat500 .eye::after
{
	content:'';
	position:absolute;
	width:12px;
	height:2px;
	background:#7A5C3A;
	border-radius:1px;
	top:5px;
	left:0
}

.cat500 .eye::before
{
	transform:rotate(45deg)
}

.cat500 .eye::after
{
	transform:rotate(-45deg)
}

.cat500 .nose
{
	position:absolute;
	width:9px;
	height:7px;
	background:#E8ADAD;
	border-radius:50%;
	bottom:14px;
	left:50%;
	transform:translateX(-50%)
}

.cat500 .tail
{
	position:absolute;
	bottom:12px;
	right:8px;
	width:48px;
	height:28px;
	border:9px solid #A8845C;
	border-radius:0 0 28px 0;
	border-top:none;
	border-left:none
}

.cat500 .zz
{
	position:absolute;
	font-family:'Fraunces',serif;
	font-weight:600;
	color:var(--paw-coral)
}

.cat500 .z1
{
	font-size:30px;
	top:4px;
	right:16px;
	animation:fz 2.2s ease-in-out infinite
}

.cat500 .z2
{
	font-size:22px;
	top:24px;
	right:6px;
	animation:fz 2.2s ease-in-out infinite .3s;
	opacity:.7
}

.cat500 .z3
{
	font-size:15px;
	top:40px;
	right:18px;
	animation:fz 2.2s ease-in-out infinite .6s;
	opacity:.4
}

@keyframes fz
{
	0%,100%
	{
		transform:translateY(0) rotate(0)
	}

	50%
	{
		transform:translateY(-8px) rotate(5deg)
	}
}

.cat500 .warn
{
	position:absolute;
	top:8px;
	left:12px
}

.cat500 .warn .tri
{
	width:0;
	height:0;
	border-left:18px solid transparent;
	border-right:18px solid transparent;
	border-bottom:32px solid var(--paw-coral);
	position:relative
}

.cat500 .warn .tri::after
{
	content:'!';
	position:absolute;
	top:8px;
	left:-5px;
	color:#fff;
	font-family:'DM Sans',sans-serif;
	font-size:14px;
	font-weight:700
}