");
}
.fh-page {
font-family: 'Fredoka', sans-serif;
color: var(--text-dark);
min-height: 100vh;
overflow-x: hidden;
background-image:
url("data:image/svg+xml;utf8,
"),
url("data:image/svg+xml;utf8,
"),
linear-gradient(180deg, var(--shallow-top) 0%, var(--shallow-bottom) 100%);
background-position: left bottom, right bottom, center;
background-repeat: no-repeat;
background-size: 15vw 100vh, 15vw 100vh, cover;
}
.fh-hero, .fh-links, .fh-footer {
position: relative;
z-index: 10;
}
.fh-page::before {
content: '';
position: fixed;
top: 55%;
left: 0;
width: 120px;
height: 100px;
z-index: 0;
pointer-events: none;
background-image: var(--nemo-svg);
background-repeat: no-repeat;
animation: cute-swim 18s linear infinite;
}
.fh-page::after {
content: '';
position: fixed;
top: 20%;
left: 0;
width: 70px;
height: 58px;
z-index: 0;
pointer-events: none;
background-image: var(--nemo-svg);
background-repeat: no-repeat;
animation: cute-swim-reverse 24s linear infinite -4s;
}
.fh-hero::before {
content: '';
position: fixed;
top: 85%;
left: 0;
width: 90px;
height: 75px;
z-index: -1;
pointer-events: none;
background-image: var(--nemo-svg);
background-repeat: no-repeat;
animation: cute-swim 21s linear infinite -11s;
}
@keyframes cute-swim {
0% { transform: translateX(-20vw) translateY(0) scaleX(1); }
45% { transform: translateX(110vw) translateY(-15px) scaleX(1); }
46% { transform: translateX(110vw) translateY(-15px) scaleX(-1); }
95% { transform: translateX(-20vw) translateY(10px) scaleX(-1); }
96% { transform: translateX(-20vw) translateY(10px) scaleX(1); }
100% { transform: translateX(-20vw) translateY(0) scaleX(1); }
}
@keyframes cute-swim-reverse {
0% { transform: translateX(110vw) translateY(0) scaleX(-1); }
45% { transform: translateX(-20vw) translateY(15px) scaleX(-1); }
46% { transform: translateX(-20vw) translateY(15px) scaleX(1); }
95% { transform: translateX(110vw) translateY(-10px) scaleX(1); }
96% { transform: translateX(110vw) translateY(-10px) scaleX(-1); }
100% { transform: translateX(110vw) translateY(0) scaleX(-1); }
}
.fh-link-button > svg {
display: none !important;
}
.fh-link-button {
background: var(--btn-bg);
border: 3px solid white;
border-radius: 30px;
color: var(--text-dark);
margin-bottom: 16px;
padding: 1.2rem;
font-weight: 600;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 6px 0 rgba(12, 74, 110, 0.1), 0 10px 20px rgba(56, 189, 248, 0.2);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
}
.fh-link-button:hover {
transform: translateY(-6px) scale(1.02);
background: white;
box-shadow: 0 8px 0 rgba(12, 74, 110, 0.15), 0 15px 25px rgba(56, 189, 248, 0.3);
color: var(--nemo-orange);
}
.fh-link-primary {
background: var(--nemo-orange);
color: white;
border-color: #fdba74;
box-shadow: 0 6px 0 #c2410c, 0 10px 20px rgba(249, 115, 22, 0.3);
}
.fh-link-primary:hover {
background: #ea580c;
color: white;
box-shadow: 0 8px 0 #9a3412, 0 15px 25px rgba(249, 115, 22, 0.4);
}
.fh-link-button::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
top: 15px;
right: -20px;
opacity: 0;
transition: all 0.3s ease;
}
.fh-link-button:hover::after {
right: 20px;
opacity: 1;
}
.fh-avatar {
border: 4px solid white;
box-shadow: 0 0 0 4px var(--nemo-orange), 0 10px 20px rgba(12, 74, 110, 0.2);
}
.fh-display-name {
font-family: 'Chakra Petch', sans-serif;
color: var(--text-dark);
text-shadow: 2px 2px 0 white;
font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
.fh-page::before, .fh-page::after, .fh-hero::before { display: none; }
.fh-link-button { transition: none; transform: none; }
}
