@import url(‘https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@1,400;1,500;1,600&display=swap’);
@tailwind base;
@tailwind components;
@tailwind utilities;
* {
font-family: ‘Inter’, sans-serif;
}
.font-playfair {
font-family: ‘Playfair Display’, serif;
}
@keyframes heroReveal {
0% {
opacity: 0;
transform: translateY(28px);
filter: blur(12px);
}
100% {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
@keyframes heroFadeUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes heroZoom {
0% {
transform: scale(1.12);
}
100% {
transform: scale(1);
}
}
.hero-anim {
opacity: 0;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-reveal {
animation-name: heroReveal;
animation-duration: 1.1s;
}
.hero-fade {
animation-name: heroFadeUp;
animation-duration: 1s;
}
.hero-zoom {
animation: heroZoom 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
.hero-anim,
.hero-zoom {
animation: none;
opacity: 1;
}
}