/* General layout */
html {
/* Gentle snap so each section settles roughly centered as you scroll,
without hard-locking the scroll (mandatory snap fought real content). */
scroll-snap-type: y proximity;
scroll-behavior: smooth;
}
body {
font-family: 'Inter', sans-serif;
margin: 0;
min-height: 100vh;
background-color: #121212;
color: #f0f0f0;
text-align: center;
}
/* The intro splash (logo + tagline) still gets its own full, centered
screen; it's just no longer the whole page. */
main {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
scroll-snap-align: center;
}
/* Logo animation */
.myriad-logo {
max-width: 300px;
height: auto;
margin-bottom: 30px;
animation: logo-zoom 1.6s ease-out forwards;
}
@keyframes logo-zoom {
0% {
transform: scale(100);
opacity: 1;
}
40% {
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* Fade-in for text */
.fade-in {
opacity: 0;
animation: fade-in 2s ease-in forwards;
animation-delay: 1s; /* starts after logo zoom */
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Fade-in for text */
.fade-in-first {
opacity: 0;
animation: fade-in 2s ease-in forwards;
animation-delay: 1s; /* starts after logo zoom */
}
@keyframes fade-in-first {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Fade-in for text */
.fade-in-second {
opacity: 0;
animation: fade-in 2s ease-in forwards;
animation-delay: 4s; /* starts after logo zoom */
}
@keyframes fade-in-second {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Contact info */
.contact-info {
margin-top: 10px;
font-family: 'Libre Baskerville', serif;
color: #e0e0e0;
line-height: 1.6;
}
.contact-info a {
color: #00AEEF;
text-decoration: none;
}
.contact-info a:hover {
text-decoration: underline;
}
/* Social icons */
.social-icons {
margin-top: 25px;
}
.social-icon {
width: 35px;
height: 35px;
margin: 0 10px;
opacity: 0.8;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.social-icon:hover {
opacity: 1;
transform: scale(1.1);
}
/* Footer: pinned to the bottom of the viewport at all times, overlaying
whatever section is currently in view, rather than being scrolled to at
the end of the page. Translucent + blurred so it reads as a persistent
bar without fully hiding the content behind it.
Scoped to `body > footer` (not just `footer`) because the legal pages
(impressum.html, datenschutz.html) reuse the