/* ==========================================================================
   ALHAMD AUTOMATION - COMPACT CUSTOM STYLES (Complementing Tailwind CSS v3)
   Typography, loader, and loop animations
   Strict Rule: No visible dashes, no decorative dots, no emojis.
   ========================================================================== */

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

/* Global Reset adjustments */
html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

ul, ol {
  list-style: none !important;
  padding: 0;
  margin: 0;
}

:root {
  /* Rich Shades of Green Palette */
  --forest-950: #031710; /* Deepest Forest Midnight */
  --forest-900: #06281E; /* Deep Evergreen */
  --forest-800: #093B2C; /* Dark Pine */
  --emerald-700: #0B6B4F; /* Signature Brand Emerald */
  --emerald-600: #0E8562; /* Vibrant Jade */
  --emerald-500: #10B981; /* Glowing Mint */
  --emerald-400: #34D399; /* Bright Seafoam */
  --emerald-300: #6EE7B7; /* Light Mint */
  --emerald-200: #A7F3D0; /* Soft Jade Border */
  --emerald-100: #D1FAE5; /* Gentle Mint Badge */
  --emerald-50: #ECFDF5;  /* Frosted Mint Surface */
  --sage-100: #E6F4EE;    /* Tinted Sage Section */
  --sage-50: #F2FAF6;     /* Silky Clean Sage */
  --surface-jade: #F8FCFA; /* Warm Jade Tint Surface */
  
  /* Brand Accents */
  --gold-500: #D9A441;
  --gold-600: #C59132;
  --gold-100: #FCF6EC;
}

/* Subtle line grid background (Tinted emerald lines, no dots) */
.hero-grid-pattern {
  background-image: 
    linear-gradient(to right, rgba(11, 107, 79, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 107, 79, 0.08) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 70%);
}

/* Rich Emerald Mesh Backdrop */
.emerald-ambient-mesh {
  background-image: 
    radial-gradient(at 12% 15%, rgba(16, 185, 129, 0.14) 0px, transparent 55%),
    radial-gradient(at 88% 25%, rgba(11, 107, 79, 0.12) 0px, transparent 50%),
    radial-gradient(at 50% 85%, rgba(52, 211, 153, 0.09) 0px, transparent 55%);
}

/* Card hover with rich emerald elevation */
.card-emerald-hover {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.card-emerald-hover:hover {
  transform: translateY(-4px);
  border-color: rgba(11, 107, 79, 0.45);
  box-shadow: 0 20px 35px -10px rgba(11, 107, 79, 0.12), 0 0 0 1px rgba(11, 107, 79, 0.15);
}

/* --------------------------------------------------------------------------
   PAGE PRELOADER (Growth Animation)
   -------------------------------------------------------------------------- */
.page-loader {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, #02140D 0%, #05261C 50%, #041E16 100%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

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

/* Animated rising growth bars inside loader */
.loader-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 48px;
  margin-bottom: 20px;
}

.loader-bar {
  width: 8px;
  border-radius: 4px;
  background: linear-gradient(to top, #0B6B4F, #25D366);
  animation: barGrowth 1.2s ease-in-out infinite alternate;
}

.loader-bar:nth-child(1) { height: 16px; animation-delay: 0.1s; }
.loader-bar:nth-child(2) { height: 26px; animation-delay: 0.25s; }
.loader-bar:nth-child(3) { height: 38px; animation-delay: 0.4s; }
.loader-bar:nth-child(4) { height: 48px; animation-delay: 0.55s; background: linear-gradient(to top, #D9A441, #F59E0B); }

@keyframes barGrowth {
  0% { transform: scaleY(0.3); opacity: 0.4; }
  100% { transform: scaleY(1); opacity: 1; }
}

/* --------------------------------------------------------------------------
   HERO LOOPING ANIMATIONS
   -------------------------------------------------------------------------- */

/* Continuous stroke drawing loop for hero chart (seamless drawing & fade reset) */
@keyframes chartDrawLoop {
  0% {
    stroke-dashoffset: 400;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  65% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  85% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  94% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 400;
    opacity: 0;
  }
}

.animate-chart-line {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: chartDrawLoop 4.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Area fill glow pulsing with the chart */
@keyframes areaGlowPulse {
  0%, 100% { opacity: 0.18; }
  65% { opacity: 0.45; }
  94%, 100% { opacity: 0.12; }
}

.animate-area-pulse {
  animation: areaGlowPulse 4.2s ease-in-out infinite;
}

/* Moving scanner shimmer across hero chart */
@keyframes scanSweep {
  0% { transform: translateX(-100%); }
  50%, 100% { transform: translateX(200%); }
}

.animate-scan-sweep {
  animation: scanSweep 3.2s ease-in-out infinite;
}

/* Pulsing radar ring on the chart tip */
@keyframes radarPulse {
  0% { transform: scale(0.6); opacity: 0.9; }
  50% { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(0.6); opacity: 0; }
}

.animate-radar-ring {
  animation: radarPulse 2s ease-out infinite;
}

/* Continuous card floating & breathing */
@keyframes floatGentle1 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(0.8deg); }
}

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

@keyframes cardGlowBreathe {
  0%, 100% {
    box-shadow: 0 20px 30px -10px rgba(11, 107, 79, 0.15), 0 0 0 1px rgba(11, 107, 79, 0.1);
  }
  50% {
    box-shadow: 0 25px 40px -8px rgba(11, 107, 79, 0.25), 0 0 20px 2px rgba(11, 107, 79, 0.15);
  }
}

.hero-main-card-animated {
  animation: cardGlowBreathe 4s ease-in-out infinite;
}

.animate-float-card1 {
  animation: floatGentle1 4s ease-in-out infinite;
}

.animate-float-card2 {
  animation: floatGentle2 5s ease-in-out infinite 0.6s;
}

/* Gentle pulse for studio live tag */
@keyframes liveBreathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.95); }
}

.animate-live-badge {
  animation: liveBreathe 2s ease-in-out infinite;
}

/* Button Shimmer light sweep */
.btn-shimmer {
  position: relative;
  overflow: hidden;
}

.btn-shimmer::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 0%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 100%
  );
  transform: rotate(25deg);
  animation: btnSweep 4s ease-in-out infinite;
}

@keyframes btnSweep {
  0%, 80% { left: -60%; }
  100% { left: 160%; }
}

/* Scroll reveal helper classes */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Floating WhatsApp gentle pulse */
@keyframes waFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.03); }
}

.floating-wa-btn {
  animation: waFloat 3.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .animate-chart-line,
  .animate-area-pulse,
  .animate-scan-sweep,
  .animate-radar-ring,
  .animate-float-card1,
  .animate-float-card2,
  .hero-main-card-animated,
  .animate-live-badge,
  .btn-shimmer::after,
  .floating-wa-btn,
  .loader-bar {
    animation: none !important;
  }
}

/* Hamburger button animations */
.hamburger-active .line-1 {
  transform: translateY(7px) rotate(45deg);
}
.hamburger-active .line-2 {
  opacity: 0;
}
.hamburger-active .line-3 {
  transform: translateY(-7px) rotate(-45deg);
}

/* FAQ Accordion indicator drawn with CSS geometry (no text dashes) */
.faq-icon-v {
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.faq-active .faq-icon-v {
  transform: rotate(90deg);
  opacity: 0;
}
.faq-active .faq-icon-h {
  background-color: #0B6B4F;
}

/* Phone Mockup */
.phone-frame {
  width: 270px;
  height: 520px;
  border: 7px solid #0F172A;
  border-radius: 36px;
  background-color: #0F172A;
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.2);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.phone-notch-bar {
  width: 90px;
  height: 16px;
  background-color: #0F172A;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  margin: 0 auto;
  z-index: 10;
}

/* Cookie popup transition */
.cookie-popup {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}
.cookie-popup.hidden-popup {
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}
.cookie-popup.visible-popup {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}