/* Frog Hair Golf Wear — custom styles layered on top of Tailwind (CDN) */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --forest-green: #1a3a32;
  --brand-red: #E53935;
  --brand-blue: #132C35;
  --cream: #F5F0E6;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  color: var(--forest-green);
  background-color: #ffffff;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
}

/* Font utility classes (mirrors the original Tailwind utilities) */
.font-outfit { font-family: 'Outfit', sans-serif; }
.font-inter  { font-family: 'Inter', sans-serif; }

/* Subtle grain overlay used on dark forest-green sections */
.noise-overlay { position: relative; }
.noise-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
}
/* Keep foreground content above the grain */
.noise-overlay > * { position: relative; z-index: 1; }

/* Scroll-reveal animations (replaces framer-motion entrance effects).
   Uses keyframe animations with fill-mode: forwards rather than CSS transitions —
   transitions can get stuck at their start value when a class toggles opacity in the
   same frame the element first renders; a keyframe animation runs reliably and holds
   its final state, so content can never be left invisible. */
.reveal        { opacity: 0; transform: translateY(20px); }
.reveal-left   { opacity: 0; transform: translateX(-30px); }
.reveal-right  { opacity: 0; transform: translateX(30px); }

/* .in-view sets the final visible state STATICALLY, so content is shown the instant the
   class is present — the entrance animation is layered on top purely as polish. If the
   animation is throttled/paused (e.g. a backgrounded tab) or unsupported, the static
   opacity:1 still applies, so content can never be stuck hidden. */
.reveal.in-view        { opacity: 1; transform: none; animation: fhRevealUp 0.6s ease; }
.reveal-left.in-view   { opacity: 1; transform: none; animation: fhRevealLeft 0.6s ease; }
.reveal-right.in-view  { opacity: 1; transform: none; animation: fhRevealRight 0.6s ease; }

@keyframes fhRevealUp    { from { opacity: 0; transform: translateY(20px); }  to { opacity: 1; transform: none; } }
@keyframes fhRevealLeft  { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes fhRevealRight { from { opacity: 0; transform: translateX(30px); }  to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* Line clamp helper (in case CDN build omits it) */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Lightbox */
body.lightbox-open { overflow: hidden; }

/* Home-page promotion banner — attention-grabbing shimmer + pulsing code chip */
@keyframes promoPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
.promo-code { animation: promoPulse 1.6s ease-in-out infinite; }

@keyframes promoShimmer {
  0% { transform: translateX(-160%) skewX(-20deg); }
  100% { transform: translateX(160%) skewX(-20deg); }
}
.promo-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 35%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-160%) skewX(-20deg);
  animation: promoShimmer 4s ease-in-out infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .promo-code,
  .promo-shimmer::after { animation: none; }
}