/* ══════════════════════════════════════════════
   Gianna's Homebaked Goods — Custom Styles
   Palette: Midnight Blue (#0A2342) + Mint (#34D399)
   ══════════════════════════════════════════════ */

/* ── Custom Tailwind Extensions ── */
@layer components {
  /* Pill badges */
  .pill {
    @apply inline-flex items-center px-4 py-2 rounded-full bg-mint-100 text-mint-700 text-sm font-medium font-body;
  }

  /* Primary CTA */
  .cta-primary {
    @apply inline-flex items-center gap-2 px-7 py-3.5 rounded-full bg-mint-400 text-midnight-900 font-semibold text-sm transition-all duration-300 shadow-lg shadow-mint-400/30 hover:shadow-xl hover:shadow-mint-400/40 hover:-translate-y-0.5 active:scale-[0.97];
  }

  /* Secondary CTA */
  .cta-secondary {
    @apply inline-flex items-center gap-2 px-7 py-3.5 rounded-full bg-white/10 backdrop-blur text-white font-semibold text-sm border border-white/20 transition-all duration-300 hover:bg-white/20 hover:border-white/30 hover:-translate-y-0.5 active:scale-[0.97];
  }

  /* Navigation links */
  .nav-link {
    @apply relative;
  }
  .nav-link::after {
    content: '';
    @apply absolute bottom-1 left-4 right-4 h-px bg-mint-400 transform scale-x-0 transition-transform duration-200;
  }
  .nav-link:hover::after {
    @apply scale-x-100;
  }

  /* Mobile nav links */
  .mobile-nav-link {
    @apply block w-full text-center;
  }

  /* Menu cards */
  .menu-card {
    @apply rounded-2xl;
  }

  /* Feature cards */
  .feature-card {
    @apply rounded-2xl;
  }
}

/* ── Geometric Decorations ── */
.geo-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.geo-circle--1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(110, 231, 183, 0.08) 0%, transparent 70%);
  top: -200px;
  right: -100px;
  animation: float-slow 20s ease-in-out infinite;
}

.geo-circle--2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.06) 0%, transparent 70%);
  bottom: -100px;
  left: 10%;
  animation: float-slow 15s ease-in-out infinite reverse;
}

.geo-circle--3 {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(110, 231, 183, 0.1) 0%, transparent 70%);
  top: 40%;
  left: 50%;
  animation: float-slow 12s ease-in-out infinite;
}

.geo-triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 40px 70px 40px;
  border-color: transparent transparent rgba(110, 231, 183, 0.08) transparent;
  top: 20%;
  right: 8%;
  transform: rotate(15deg);
  animation: float-slow 18s ease-in-out infinite;
}

.geo-dots {
  position: absolute;
  top: 15%;
  left: 45%;
  width: 120px;
  height: 120px;
  background-image: radial-gradient(circle, rgba(110, 231, 183, 0.15) 1.5px, transparent 1.5px);
  background-size: 16px 16px;
  animation: float-slow 22s ease-in-out infinite reverse;
}

/* ── Hero Animations ── */
.hero-badge {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease forwards 0.2s;
}

.hero-sub {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease forwards 0.4s;
}

.hero-ctas {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease forwards 0.5s;
}

.hero-stats {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease forwards 0.6s;
}

.hero-image-card {
  opacity: 0;
  transform: translateX(40px);
  animation: slideInRight 1s ease forwards 0.3s;
}

.hero-float-card {
  opacity: 0;
  transform: translateY(20px) rotate(-3deg);
  animation: fadeUpRotate 0.8s ease forwards 0.8s;
  position: absolute;
  bottom: 10%;
  left: -10%;
  z-index: 20;
}

/* ── Marquee ── */
.marquee-track {
  animation: marquee 30s linear infinite;
}

.marquee-item {
  display: inline-flex;
  align-items: center;
}

/* ── Reveal Animations (scroll-triggered via JS) ── */
.reveal {
  /* Default state: visible (progressive enhancement) */
  opacity: 1;
  transform: none;
}

.reveal.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Keyframes ── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeUpRotate {
  from {
    opacity: 0;
    transform: translateY(20px) rotate(-3deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(-3deg);
  }
}

@keyframes float-slow {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(2deg);
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .reveal.animate-on-scroll {
    opacity: 1;
    transform: none;
  }
  
  .marquee-track {
    animation: none;
  }
}

/* ── Smooth Scroll ── */
html {
  scroll-behavior: smooth;
}

/* ── Scrollbar Styling ── */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #FAF7F0;
}
::-webkit-scrollbar-thumb {
  background: #0A2342;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #0D2F5C;
}

/* ── Selection ── */
::selection {
  background: rgba(52, 211, 153, 0.3);
  color: #0A2342;
}