:root {
	--fido-opening-bg: #d8f06b;
	--fido-opening-depth: #93a942;
	--fido-opening-paw: #8b73cf;
}

html.fido-opening-pending::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--fido-opening-bg);
}

.fido-intro { position: fixed; inset: 0; z-index: 10000; overflow: hidden; display: grid; place-items: center; background: var(--fido-opening-bg); color: #17231f; animation: intro-curtain 5.2s linear forwards; }
.fido-intro::before { content: ""; position: absolute; width: min(78vw, 980px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(23,35,31,.12); box-shadow: 0 0 0 10vw rgba(255,255,255,.04), 0 0 0 20vw rgba(23,35,31,.025); }
.intro-stage { position: relative; width: min(92vw, 920px); height: min(48vw, 390px); min-height: 250px; display: grid; place-items: center; perspective: 1200px; perspective-origin: 50% 42%; transform-style: preserve-3d; }
.intro-word { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: .035em; font: 900 clamp(86px, 19vw, 230px)/.8 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.075em; transform-style: preserve-3d; transform: rotateX(-4deg); }
.intro-letter { display: inline-block; transform-style: preserve-3d; transform: translate3d(var(--from-x), var(--from-y), var(--from-z)) rotateX(var(--from-rx)) rotateY(var(--from-ry)) rotateZ(var(--from-rz)) scale(.15); opacity: 0; filter: blur(14px); text-shadow: 0 1px 0 var(--fido-opening-depth), 0 2px 0 var(--fido-opening-depth), 0 3px 0 var(--fido-opening-depth), 0 4px 0 var(--fido-opening-depth), 0 5px 0 var(--fido-opening-depth), 0 6px 0 var(--fido-opening-depth), 0 7px 0 var(--fido-opening-depth), 0 17px 28px rgba(23,35,31,.22); animation: intro-letter-arrive 2.45s .18s cubic-bezier(.16,1,.3,1) forwards; will-change: transform, opacity, filter; }
.intro-f { --from-x: -62vw; --from-y: -54vh; --from-z: -720px; --from-rx: 128deg; --from-ry: -72deg; --from-rz: -78deg; }
.intro-i { --from-x: 12vw; --from-y: 62vh; --from-z: 560px; --from-rx: -132deg; --from-ry: 48deg; --from-rz: 42deg; }
.intro-d { --from-x: 57vw; --from-y: -44vh; --from-z: -480px; --from-rx: 76deg; --from-ry: 146deg; --from-rz: 96deg; }
.intro-o { --from-x: -43vw; --from-y: 58vh; --from-z: 740px; --from-rx: -96deg; --from-ry: -122deg; --from-rz: -124deg; }
.intro-tagline { position: absolute; z-index: 3; top: calc(50% + clamp(57px, 10vw, 122px)); left: 50%; width: min(88vw, 720px); margin: 0; transform: translate(-50%, 14px); color: #17231f; font: 800 clamp(11px, 1.75vw, 20px)/1.2 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: clamp(.16em, .55vw, .34em); text-align: center; opacity: 0; animation: intro-tagline-arrive .9s 2.25s cubic-bezier(.2,.8,.2,1) forwards; }
.intro-paw-trail { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.intro-paw { position: absolute; left: var(--paw-x); top: var(--paw-y); width: clamp(30px, 5.4vw, 60px); height: auto; color: var(--fido-opening-paw); fill: currentColor; opacity: 0; filter: drop-shadow(0 10px 8px color-mix(in srgb, var(--fido-opening-paw) 28%, transparent)); transform: translate3d(-50%, -50%, 90px) rotateX(18deg) rotateZ(var(--paw-r)) scale(.35); animation: intro-paw-step .52s var(--paw-delay) cubic-bezier(.2,.8,.3,1) forwards; }
.paw-1 { --paw-x: 18%; --paw-y: 63%; --paw-r: -22deg; --paw-delay: 2.72s; }
.paw-2 { --paw-x: 31%; --paw-y: 39%; --paw-r: 18deg; --paw-delay: 2.95s; }
.paw-3 { --paw-x: 44%; --paw-y: 61%; --paw-r: -19deg; --paw-delay: 3.18s; }
.paw-4 { --paw-x: 57%; --paw-y: 37%; --paw-r: 20deg; --paw-delay: 3.41s; }
.paw-5 { --paw-x: 70%; --paw-y: 59%; --paw-r: -17deg; --paw-delay: 3.64s; }
.paw-6 { --paw-x: 83%; --paw-y: 35%; --paw-r: 23deg; --paw-delay: 3.87s; }

@keyframes intro-letter-arrive {
	0% { transform: translate3d(var(--from-x), var(--from-y), var(--from-z)) rotateX(var(--from-rx)) rotateY(var(--from-ry)) rotateZ(var(--from-rz)) scale(.15); opacity: 0; filter: blur(14px); }
	70% { opacity: 1; filter: blur(0); }
	84% { transform: translate3d(0, 0, 30px) rotateX(-7deg) rotateY(5deg) rotateZ(0) scale(1.08); opacity: 1; filter: blur(0); }
	92% { transform: translate3d(0, 0, -8px) rotateX(2deg) rotateY(-2deg) rotateZ(0) scale(.97); }
	100% { transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) rotateZ(0) scale(1); opacity: 1; filter: blur(0); }
}
@keyframes intro-tagline-arrive { to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes intro-paw-step {
	0% { opacity: 0; transform: translate3d(-50%, -50%, 160px) rotateX(42deg) rotateZ(var(--paw-r)) scale(.35); }
	42% { opacity: .96; transform: translate3d(-50%, -50%, 105px) rotateX(18deg) rotateZ(var(--paw-r)) scale(1.08); }
	72% { opacity: .96; transform: translate3d(-50%, -50%, 78px) rotateX(12deg) rotateZ(var(--paw-r)) scale(.96); }
	100% { opacity: .3; transform: translate3d(-50%, -50%, 54px) rotateX(8deg) rotateZ(var(--paw-r)) scale(.88); }
}
@keyframes intro-curtain { 0%, 90.3% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; pointer-events: none; } }
.fido-intro.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s ease, visibility 0s .45s; }

@media (prefers-reduced-motion: reduce) {
	.fido-intro { animation: none !important; }
	.intro-letter { opacity: 1; filter: none; transform: none; animation: none !important; }
	.intro-tagline { opacity: 1; transform: translate(-50%, 0); animation: none !important; }
	.intro-paw { display: none; }
}