/* Custom Red Theme Styles & Micro-Animations for Vistanut Cashews */

:root {
  --primary-red: #8B0000;
  --primary-red-hover: #7A0000;
  --primary-wine: #560814;
  --primary-deep: #3B040B;
  --primary-accent: #C41E3A;
  --gold-accent: #D4AF37;
  --amber-gold: #F59E0B;
}

/* Scalloped Wavy Divider (Bolas Style) */
.scallop-divider {
  overflow: hidden;
  position: relative;
  width: 100%;
  line-height: 0;
  direction: ltr;
}

.scallop-divider svg {
  display: block;
  width: calc(100% + 1.3px);
  height: 48px;
}

@media (min-width: 768px) {
  .scallop-divider svg {
    height: 72px;
  }
}

/* Floating Animations for Cashew Nuts and Pouches */
@keyframes floatNut1 {
  0%, 100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-22px) rotate(12deg) scale(1.03);
  }
}

@keyframes floatNut2 {
  0%, 100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-16px) rotate(-14deg) scale(0.98);
  }
}

@keyframes floatNut3 {
  0%, 100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-26px) rotate(8deg) scale(1.04);
  }
}

@keyframes floatPouch {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-12px);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(212, 175, 55, 0);
  }
}

.animate-float-1 {
  animation: floatNut1 6s ease-in-out infinite;
}

.animate-float-2 {
  animation: floatNut2 7.5s ease-in-out infinite 0.8s;
}

.animate-float-3 {
  animation: floatNut3 8s ease-in-out infinite 1.5s;
}

.animate-float-pouch {
  animation: floatPouch 5s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulseGlow 2.5s infinite;
}

/* Dot Grid Pattern (Kaju Factory Hero Style) */
.hero-dot-pattern {
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
}

/* Depth shadow for 3D cashew pieces */
.cashew-nut-shadow {
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.45));
}

.cashew-nut-soft-shadow {
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
}

/* High Contrast Bug Fixes for Material Tokens */
.text-outline {
  color: #4B5563 !important; /* High-contrast readable charcoal-slate instead of faint outline */
}

.text-on-surface-variant {
  color: #4B5563 !important;
}

.text-on-surface {
  color: #1F2937 !important;
}

.custom-warm-border {
  border: 1px solid rgba(139, 0, 0, 0.12) !important;
}

/* Fix: Gold text contrast on white or light backgrounds */
.bg-white .text-secondary,
.bg-surface .text-secondary,
.bg-surface-container-lowest .text-secondary,
.bg-surface-container-low .text-secondary,
.bg-surface-container .text-secondary,
.bg-background .text-secondary,
.bg-white .text-amber-400,
.bg-white .text-amber-500 {
  color: #B45309 !important; /* Deep rich bronze/amber with 5.5:1 AAA contrast on white */
}

/* Keep gold luminous on dark wine/red backgrounds */
.bg-\[\#560814\] .text-secondary,
.bg-\[\#8B0000\] .text-secondary,
.bg-primary .text-secondary,
.bg-primary-container .text-secondary {
  color: #FBBF24 !important; /* Luminous warm gold */
}

.bg-secondary-container,
.bg-amber-100 {
  background-color: #FEF3C7 !important;
  color: #92400E !important;
}

/* Smooth Marquee Ticker */
@keyframes tickerSlide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-ticker {
  display: flex;
  width: max-content;
  animation: tickerSlide 30s linear infinite;
}

.animate-ticker:hover {
  animation-play-state: paused;
}

/* Universal Card Normalization & Contrast Bug Protections */
.shadow-fk {
  box-shadow: 0 4px 16px 0 rgba(139, 0, 0, 0.06) !important;
  border: 1px solid rgba(139, 0, 0, 0.1) !important;
}

[class*="rounded-sm/"] {
  border-radius: 0.75rem !important;
  background-color: rgba(254, 242, 242, 0.8) !important;
  border: 1px solid rgba(139, 0, 0, 0.12) !important;
}

/* Form controls contrast */
input, select, textarea {
  color: #1F2937 !important;
}

input:focus, select:focus, textarea:focus {
  border-color: #8B0000 !important;
  box-shadow: 0 0 0 2px rgba(139, 0, 0, 0.2) !important;
}

/* ==========================================================================
   BOLAS STYLE MEGA MENU & HERO SLIDER
   ========================================================================== */

/* Mega Menu Dropdown Panel (Image 3 & 4 style) */
.mega-menu-panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s;
  pointer-events: none;
}

.nav-mega-parent:hover .mega-menu-panel,
.mega-menu-panel:hover {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.nav-mega-parent:hover > a {
  border-bottom-color: #FBBF24 !important;
  color: #FFFFFF !important;
  background-color: rgba(0, 0, 0, 0.18);
}

/* Mega Menu Squircle Cards */
.mega-squircle {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}

.mega-squircle:hover {
  transform: translateY(-5px) scale(1.04);
  box-shadow: 0 14px 28px -6px rgba(139, 0, 0, 0.16);
  border-color: rgba(139, 0, 0, 0.35) !important;
}

/* Hero Slider Animation (Image 1 & 2 style) */
.hero-slider-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.hero-slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  transform: scale(0.98);
  pointer-events: none;
}

.hero-slide.active-slide {
  opacity: 1 !important;
  visibility: visible !important;
  transform: scale(1) !important;
  pointer-events: auto !important;
}

/* Hero Slider Progress Bar (Bolas White Indicator Bar in Image 1 & 2) */
@keyframes slideProgressBar {
  0% { width: 0%; }
  100% { width: 100%; }
}

.slider-progress-fill {
  animation: slideProgressBar 5.5s linear infinite;
}

.slider-progress-fill.paused {
  animation-play-state: paused;
}

/* Staggered 3-Photo Collage Card Hovers (Image 2 style) */
.hero-collage-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.hero-collage-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.55);
}

/* ======================================================== */
/* Sticky Reveal Footer (Curtain Effect) */
/* ======================================================== */
.page-reveal-wrapper {
  position: relative;
  z-index: 10;
  background-color: #FDFBF7;
  box-shadow: none;
  transition: margin-bottom 0.1s ease-out;
}

.reveal-footer-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 0;
  pointer-events: auto;
}

/* 50/50 Split Story Section Hover Physics */
.story-photo-box {
  overflow: hidden;
  position: relative;
}

.story-photo-box img {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-photo-box:hover img {
  transform: scale(1.04);
}

@media (max-width: 768px) {
  .reveal-footer-container {
    position: relative !important;
    z-index: 10 !important;
  }
  .page-reveal-wrapper {
    margin-bottom: 0 !important;
  }
}

/* ======================================================== */
/* Brand Preloader Animation */
/* ======================================================== */
#page-preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background-color: #FDFBF7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s ease-out;
}

#page-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}