/* ==============================================================================
   JP ASSOCIATE — EARTHY INDUSTRIAL LUXURY GLOBAL STYLESHEET
   Strict 65% Light / 25% Forest Green / 10% Caramel-Copper Balance Ratio
   Zero Blue / Zero Navy / Zero Neon / Zero Excessive Glassmorphism
   ============================================================================== */

:root {
  --color-forest-deep: #213128;      /* Primary Dominant Green (25%) */
  --color-forest-muted: #33473B;     /* Card borders, Secondary Green */
  --color-cream-bg: #F3F0E6;         /* Primary Light Surface (65%) */
  --color-ivory-soft: #E5EECF;       /* Highlight badges, subtle pills, tags */
  --color-caramel: #BE9A69;          /* Primary Accent (10%) - Buttons, borders */
  --color-copper: #89572F;           /* Secondary Accent - Badges, hover states */
  --color-white: #FFFFFF;            /* Pure White for inner cards, contrast */
  --color-text-primary: #292A23;     /* Main readable typography on light */
  --color-text-secondary: #6B6A58;   /* Subtitles, specs labels, timestamps */
}

/* Global HTML & Body defaults */
[x-cloak] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  background-color: var(--color-cream-bg);
  color: var(--color-text-primary);
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background-color: var(--color-cream-bg);
  color: var(--color-text-primary);
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

/* Consistent editorial heading voice across the public site and admin. */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-optical-sizing: auto;
}

/* Custom Text Selections */
::selection {
  background-color: var(--color-caramel);
  color: var(--color-forest-deep);
}

/* Navigation & Header */
.jp-header-forest {
  background-color: var(--color-forest-deep);
  border-bottom: 1px solid var(--color-forest-muted);
}

/* Footer Forest */
.jp-footer-forest {
  background-color: var(--color-forest-deep);
  border-top: 3px solid var(--color-copper);
  color: #D3DACF;
}

/* Accent Buttons */
.btn-caramel {
  background-color: var(--color-caramel);
  color: var(--color-forest-deep);
  font-weight: 800;
  border-radius: 0.75rem;
  transition: all 0.2s ease-in-out;
}
.btn-caramel:hover {
  background-color: var(--color-copper);
  color: #FFFFFF;
}

.btn-forest {
  background-color: var(--color-forest-deep);
  color: #FFFFFF;
  font-weight: 700;
  border: 1px solid var(--color-forest-muted);
  border-radius: 0.75rem;
  transition: all 0.2s ease-in-out;
}
.btn-forest:hover {
  background-color: var(--color-forest-muted);
}

/* Badge & Tag Helpers */
.badge-ivory {
  background-color: var(--color-ivory-soft);
  color: var(--color-forest-deep);
  border: 1px solid rgba(51, 71, 59, 0.2);
  font-weight: 700;
}

.badge-caramel {
  background-color: rgba(190, 154, 105, 0.15);
  color: var(--color-copper);
  border: 1px solid rgba(190, 154, 105, 0.4);
  font-weight: 700;
}

.badge-forest {
  background-color: var(--color-forest-deep);
  color: #FFFFFF;
}

/* Cards & Surfaces */
.card-white {
  background-color: var(--color-white);
  border: 1px solid rgba(51, 71, 59, 0.15);
  border-radius: 1rem;
}

.card-cream {
  background-color: var(--color-cream-bg);
  border: 1px solid rgba(51, 71, 59, 0.15);
  border-radius: 1rem;
}

.card-forest {
  background-color: var(--color-forest-deep);
  border: 1px solid var(--color-forest-muted);
  border-radius: 1rem;
  color: #FFFFFF;
}

/* Data Tables */
.jp-table-header {
  background-color: var(--color-forest-muted);
  color: #FFFFFF;
}

/* Marquee continuous scroll */
@keyframes jpMarquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  display: flex;
  width: max-content;
  animation: jpMarquee 38s linear infinite;
}

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

/* Admin Layout Frozen Viewport */
.admin-sidebar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100vh;
  overflow-y: auto;
  z-index: 40;
  background-color: var(--color-forest-deep);
  border-right: 1px solid var(--color-forest-muted);
}

.admin-topbar-sticky {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--color-white);
  border-bottom: 1px solid rgba(51, 71, 59, 0.15);
}

.admin-central-canvas {
  margin-left: 260px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-cream-bg);
  overflow-y: auto;
  padding: 2rem;
}

@media (max-width: 1024px) {
  .admin-sidebar-fixed {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  .admin-sidebar-fixed.open {
    transform: translateX(0);
  }
  .admin-central-canvas {
    margin-left: 0;
    padding: 1rem;
  }
}

/* Lenis smooth scroll */
html.lenis, html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

/* ==============================================================================
   TRENDING LUXURY ANIMATION SUITE (GSAP + AOS + Micro-Interactions)
   ============================================================================== */

/* Floating badge levitation */
@keyframes jpFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-6px);
  }
}

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

.animate-float-slow {
  animation: jpFloat 6s ease-in-out infinite;
}

/* Subtle Golden Shimmer Sweep for Premium CTAs */
@keyframes jpShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.btn-caramel-shimmer {
  position: relative;
  overflow: hidden;
}

.btn-caramel-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: none;
}

.btn-caramel-shimmer:hover::after {
  animation: jpShimmerSweep 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes jpShimmerSweep {
  0% {
    left: -150%;
  }
  100% {
    left: 200%;
  }
}

/* Pulse Glow for Live Status Badges */
@keyframes jpPulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(190, 154, 105, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(190, 154, 105, 0);
  }
}

.pulse-glow-caramel {
  animation: jpPulseGlow 2.5s infinite;
}

/* Luxury 3D Card Hover Lift & Border Illumination */
.card-luxury {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, box-shadow;
}

.card-luxury:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 30px -10px rgba(33, 49, 40, 0.12), 0 10px 15px -5px rgba(33, 49, 40, 0.08);
  border-color: rgba(190, 154, 105, 0.45) !important;
}

/* Image Zoom on Card Hover */
.img-zoom-container {
  overflow: hidden;
}

.img-zoom-container img {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-luxury:hover .img-zoom-container img,
.group:hover .img-zoom-container img {
  transform: scale(1.06);
}

/* High-Performance AOS Hardware Acceleration */
[data-aos] {
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform, opacity;
}

/* ==============================================================================
   TRENDING 3D HOVER & SCROLL ANIMATIONS (Hardware Accelerated)
   ============================================================================== */
.card-3d-hover {
  perspective: 1200px;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease, border-color 0.3s ease;
  will-change: transform;
}
.card-3d-hover:hover {
  transform: translateY(-8px) scale(1.01) rotateX(1.5deg);
  box-shadow: 0 25px 50px -12px rgba(33, 49, 40, 0.22), 0 0 25px rgba(190, 154, 105, 0.25);
  border-color: rgba(190, 154, 105, 0.6) !important;
}
.card-3d-hover .card-3d-inner {
  transform: translateZ(15px);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.card-3d-hover:hover .card-3d-inner {
  transform: translateZ(25px);
}

/* Image Shimmer & Depth Zoom */
.image-3d-glow {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}
.image-3d-glow:hover {
  transform: scale(1.04);
  filter: contrast(1.03) brightness(1.02);
}

/* Float Glow Animation */
@keyframes floatGlow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}
.animate-float-slow {
  animation: floatGlow 5s ease-in-out infinite;
}