/* ── Landing Page Custom Styles ── */
/* Theme utilities & animations that extend Tailwind */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800;900&family=Suez+One&family=Playpen+Sans:wght@400;700&family=Neucha&family=Chilanka&display=swap');

/* ── Base typography ── */
.landing-page h1 {
  font-size: 3rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.025em;
}
@media (min-width: 768px) {
  .landing-page h1 {
    font-size: 3.75rem;
  }
}
.landing-page h2 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}
@media (min-width: 768px) {
  .landing-page h2 {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}
.landing-page h3 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* ── Hero overlay ── */
.hero-overlay {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.98) 40%,
    rgba(255, 255, 255, 0.7) 55%,
    rgba(255, 255, 255, 0.15) 70%,
    rgba(255, 255, 255, 0) 85%
  );
}

/* ── Noise texture overlay ── */
.landing-page::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* ── Scroll reveal animations ── */
:root {
  --reveal-duration: 0.4s;
  --reveal-stagger: 0.12s;
  --reveal-distance: 20px;
  --reveal-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity var(--reveal-duration) var(--reveal-easing),
    transform var(--reveal-duration) var(--reveal-easing);
  transition-delay: calc(var(--reveal-index, 0) * var(--reveal-stagger));
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Tab panel fade-up animation */
@keyframes panel-fade-up {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-panel-fade-up {
  animation: panel-fade-up var(--reveal-duration) var(--reveal-easing) both;
}

/* Fade-in animation */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-in {
  animation: fade-in 0.5s ease-out both;
}