@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Josefin Sans', sans-serif;
}

/* ── Logo Entry Animation ── */
@keyframes logoScale {
  0% {
    opacity: 0;
    transform: scale(0.6);
    filter: blur(10px);
  }
  60% {
    opacity: 1;
    filter: blur(0);
  }
  80% {
    transform: scale(1.03);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes scrollHintFade {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.logo-entry {
  animation: logoScale 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

.scroll-hint-entry {
  animation: scrollHintFade 0.8s ease-out 1.6s forwards;
  opacity: 0;
}

/* ── Scroll Reveal Animations ── */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal="up"] {
  transform: translateY(60px);
}

[data-reveal="down"] {
  transform: translateY(-60px);
}

[data-reveal="left"] {
  transform: translateX(-60px);
}

[data-reveal="right"] {
  transform: translateX(60px);
}

[data-reveal="scale"] {
  transform: scale(0.9);
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* Stagger delays for children */
[data-stagger] > [data-reveal]:nth-child(1) { transition-delay: 0s; }
[data-stagger] > [data-reveal]:nth-child(2) { transition-delay: 0.15s; }
[data-stagger] > [data-reveal]:nth-child(3) { transition-delay: 0.3s; }
[data-stagger] > [data-reveal]:nth-child(4) { transition-delay: 0.45s; }

/* ── Counter Animation ── */
.stat-value {
  transition: opacity 0.5s ease;
}

/* ── Parallax-like image zoom on scroll ── */
.scroll-zoom {
  transition: transform 6s cubic-bezier(0.16, 1, 0.3, 1);
  transform: scale(1);
}

.scroll-zoom.zoomed {
  transform: scale(1.08);
}