/* ----------------------------------------------------------
   KEBARU DESIGN SYSTEM - Full Static CSS
   For standalone HTML without Tailwind build process
----------------------------------------------------------- */

/* GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Outfit:wght@200;300;400;500&display=swap');

/* ----------------------------------------------------------
   ROOT TOKENS (from index.css + tailwind.config.ts)
----------------------------------------------------------- */
:root {
  --background: 40 25% 97%;
  --foreground: 30 10% 15%;

  --card: 40 20% 95%;
  --card-foreground: 30 10% 15%;

  --popover: 40 25% 97%;
  --popover-foreground: 30 10% 15%;

  --primary: 25 35% 45%;
  --primary-foreground: 40 25% 97%;

  --secondary: 150 15% 85%;
  --secondary-foreground: 30 10% 25%;

  --muted: 35 15% 90%;
  --muted-foreground: 30 8% 45%;

  --accent: 195 45% 45%;
  --accent-foreground: 40 25% 97%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;

  --border: 35 20% 85%;
  --input: 35 20% 85%;
  --ring: 25 35% 45%;

  --radius: 0.25rem;

  /* KEBARU Brand Colors */
  --sand: 38 30% 92%;
  --sand-dark: 35 25% 75%;
  --terracotta: 18 45% 55%;
  --limestone: 45 15% 88%;
  --ocean: 195 50% 50%;
  --ocean-deep: 200 55% 35%;
  --ocean-light: 190 45% 75%;
  --warmth: 30 80% 55%;
  --earth: 25 20% 30%;
  --sage: 150 20% 70%;

  /* Gradients */
  --gradient-sunset: linear-gradient(180deg, hsl(25 60% 70% / 0.3) 0%, hsl(195 50% 50% / 0.1) 100%);
  --gradient-ocean: linear-gradient(180deg, hsl(195 50% 50% / 0.1) 0%, hsl(200 55% 35% / 0.2) 100%);
  --gradient-sand: linear-gradient(180deg, hsl(38 30% 92%) 0%, hsl(40 25% 97%) 100%);
  --gradient-hero: linear-gradient(180deg, transparent 0%, hsl(30 10% 15% / 0.4) 100%);

  /* Shadows */
  --shadow-soft: 0 4px 20px -4px hsl(30 10% 15% / 0.08);
  --shadow-elevated: 0 12px 40px -8px hsl(30 10% 15% / 0.12);
  --shadow-glow: 0 0 60px hsl(195 50% 50% / 0.15);

  /* Fonts */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Outfit', system-ui, sans-serif;

  /* Transitions */
  --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
}
/* ----------------------------------------------------------
   SIZE UTILITIES
----------------------------------------------------------- */
.w-px { width: 1px; }
.h-16 { height: 4rem; }

/* ----------------------------------------------------------
   CUSTOM COLOR CLASSES (Tailwind-style utilities)
----------------------------------------------------------- */

/* ===== Base System Colors ===== */
.text-foreground { color: hsl(var(--foreground)); }
.text-foreground-70 { color: hsl(var(--foreground) / 0.7); }
.text-background { color: hsl(var(--background)); }

.text-muted { color: hsl(var(--muted)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }

.text-accent { color: hsl(var(--accent)); }
.text-accent-foreground { color: hsl(var(--accent-foreground)); }

.bg-background { background-color: hsl(var(--background)); }
.bg-muted { background-color: hsl(var(--muted)); }
.bg-accent { background-color: hsl(var(--accent)); }
.bg-gradient-ocean { background-color: var(--gradient-ocean); }
.bg-foreground { background-color: hsl(var(--foreground)); }
.bg-muted-foreground { background-color: hsl(var(--muted-foreground)); }
/* ===== Primary & Secondary ===== */
.text-primary { color: hsl(var(--primary)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }

.text-secondary { color: hsl(var(--secondary)); }
.text-secondary-foreground { color: hsl(var(--secondary-foreground)); }

.bg-primary { background-color: hsl(var(--primary)); }
.bg-secondary { background-color: hsl(var(--secondary)); }

.bg-sunset { background-color: var(--gradient-sunset); }

/* ===== Card / Surface ===== */
.bg-card { background-color: hsl(var(--card)); }
.text-card-foreground { color: hsl(var(--card-foreground)); }

/* ===== Brand Colors (Kebaru) ===== */
.text-earth { color: hsl(var(--earth)); }
.bg-earth { background-color: hsl(var(--earth)); }

.text-sand { color: hsl(var(--sand)); }
.bg-sand { background-color: hsl(var(--sand)); }
.bg-sand-90 { background-color: hsl(var(--sand) / 0.9); }

.text-limestone { color: hsl(var(--limestone)); }
.bg-limestone { background-color: hsl(var(--limestone)); }

.text-teracotta { color: hsl(var(--terracotta)); }

.text-ocean { color: hsl(var(--ocean)); }
.text-ocean-deep { color: hsl(var(--ocean-deep)); }
.text-ocean-light { color: hsl(var(--ocean-light)); }

.bg-ocean { background-color: hsl(var(--ocean)); }
.bg-ocean-10 { background-color: hsl(var(--ocean) / 0.1); }
.bg-ocean-light { background-color: hsl(var(--ocean-light)); }
.bg-ocean-light-30 { background-color: hsl(var(--ocean-light) / 0.3); }

.bg-sage { background-color: hsl(var(--sage)); }
.bg-sage-30 { background-color: hsl(var(--sage) / 0.3); }

.bg-white { background-color: hsl(0 0% 100%); }
.bg-white-90 { background-color: hsl(0 0% 100% / 0.9); }

.bg-warmth { background-color: hsl(var(--warmth)); }
.bg-warmth-10 { background-color: hsl(var(--warmth) / 0.1); }
.bg-warmth-30 { background-color: hsl(var(--warmth) / 0.3); }
/* ----------------------------------------------------------
   HERO OVERLAYS
----------------------------------------------------------- */

/* Earth gradient overlay for hero sections */
.overlay-earth-hero {
  background: linear-gradient(
    to bottom,
    hsl(var(--earth) / 0.75) 0%,
    hsl(var(--earth) / 0.45) 45%,
    hsl(var(--earth) / 0.75) 100%
  );
}


/* ===== Opacity Utilities (Tailwind replacement) ===== */
.text-primary-60 { color: hsl(var(--primary) / 0.6); }
.text-primary-70 { color: hsl(var(--primary) / 0.7); }
.text-primary-80 { color: hsl(var(--primary) / 0.8); }
.text-muted-60 { color: hsl(var(--muted) / 0.6); }
.text-sand-40 { color: hsl(var(--sand) / 0.4); }
.text-sand-50 { color: hsl(var(--sand) / 0.5); }
.text-sand-60 { color: hsl(var(--sand) / 0.6); }
.text-sand-70 { color: hsl(var(--sand) / 0.7); }
.text-sand-80 { color: hsl(var(--sand) / 0.8); }
.text-sand-90 { color: hsl(var(--sand) / 0.9); }

/* ===== Border ===== */
.border-border { border-color: hsl(var(--border)); }
.border-border-50 { border-color: hsl(var(--border) / 0.5); }
.border-primary-30 { border-color: hsl(var(--primary) / 0.3); }
.border-primary-50 { border-color: hsl(var(--primary) / 0.5); }
.border-sand { border-color: hsl(var(--sand)); }
.border-sand-20 { border-color: hsl(var(--sand) / 0.2); }
.border-sand-30 { border-color: hsl(var(--sand) / 0.3); }
.border-sand-40 { border-color: hsl(var(--sand) / 0.4); }
.border-sand-60 { border-color: hsl(var(--sand) / 0.6); }
.border-sage-50 { border-color: hsl(var(--sage) / 0.5); }
.border-sand-dark-30 { border-color: hsl(var(--sand-dark) / 0.3); }
.border-ocean { border-color: hsl(var(--ocean)); }
.border-ocean-30 { border-color: hsl(var(--ocean) / 0.3); }
.border-ocean-light { border-color: hsl(var(--ocean-light)); }
.border-ocean-light-50 { border-color: hsl(var(--ocean-light) / 0.5); }
.border-warmth { border-color: hsl(var(--warmth)); }
.border-warmth-30 { border-color: hsl(var(--warmth) / 0.3); }
.border-secondary-foreground { border-color: hsl(var(--secondary-foreground)); }
.border-secondary-foreground-10 { border-color: hsl(var(--secondary-foreground) / 0.1); }

/* ----------------------------------------------------------
   TRANSITION UTILITIES
----------------------------------------------------------- */
.transition-colors {
  transition: color 0.3s ease;
}

/* ----------------------------------------------------------
   HOVER COLOR UTILITIES
----------------------------------------------------------- */
.hover\:text-sand:hover {
  color: hsl(var(--sand));
}
.hover\:text-earth:hover {
  color: hsl(var(--earth));
}
.hover\:text-foreground:hover {
  color: hsl(var(--foreground));
}

/* ----------------------------------------------------------
   GRADIENT UTILITIES
----------------------------------------------------------- */

.bg-gradient-earth-fade {
  background-image: linear-gradient(
    to bottom,
    hsl(var(--earth) / 0.2),
    transparent,
    hsl(var(--earth) / 0.6)
  );
}
.bg-gradient-earth-right {
  background-image: linear-gradient(
    to right,
    hsl(var(--earth) / 0.3),
    transparent
  );
}
.bg-gradient-earth-top {
  background-image: linear-gradient(
    to top,
    hsl(var(--earth) / 0.6),
    transparent,
    transparent
  );
}
.bg-gradient-sand-vertical {
  background-image: linear-gradient(
    to bottom,
    hsl(var(--sand) / 0.5),
    transparent
  );
}
/* ----------------------------------------------------------
   TYPOGRAPHY UTILITIES
----------------------------------------------------------- */
.text-body {
  font-family: var(--font-sans);
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.7;
}

.text-label {
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

/* ----------------------------------------------------------
   SHADOW UTILITIES
----------------------------------------------------------- */

.shadow-soft {
  box-shadow: var(--shadow-soft);
}

.shadow-elevated { box-shadow: var(--shadow-elevated); }
.hover\:shadow-elevated:hover {
  box-shadow: var(--shadow-elevated);
}
.shadow-glow {
  box-shadow: var(--shadow-glow);
}
/* ----------------------------------------------------------
   ANIMATIONS
----------------------------------------------------------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(60px); }
  to { opacity: 1; transform: translateY(0); }
}

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

/* Animation classes */
.animate-fade-up { animation: fadeUp 0.8s cubic-bezier(0.4,0,0.2,1) forwards; }
.animate-fade-in { animation: fadeIn 1s ease forwards; }
.animate-scale-in { animation: scaleIn 0.6s ease forwards; }
.animate-slide-up { animation: slideUp 0.8s ease forwards; }
.animate-float { animation: float 6s ease-in-out infinite; }

/* Delay utilities */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }

/* ----------------------------------------------------------
   CUSTOM INTERACTIONS
----------------------------------------------------------- */
.hover-text-primary:hover {
  color: hsl(var(--primary));
}

.group:hover .group-hover-text-primary {
  color: hsl(var(--primary));
}

.group:hover .group-hover-shift {
  transform: translateX(0.25rem);
}
.hover-lift {
  transition: var(--transition-smooth);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
}

/* Parallax scaling on hover */
.image-parallax {
  transform: scale(1.1);
  transition: transform 8s cubic-bezier(0.4,0,0.2,1);
}
.group:hover .image-parallax {
  transform: scale(1);
}

.chapter-philosophy i {
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.chapter-philosophy .hover-lift:hover i {
  transform: scale(1.1);
  opacity: 1;
}

/* new css additions */

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-up {
    animation: fade-up 1s ease forwards;
}

@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

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

/* WhatsApp Button */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 20px;
    right: 20px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.text-14 {
    font-size: 1.3rem;
    line-height: 1.35;
}
.pill {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: 1px solid hsl(var(--sand) / 0.4);
    border-radius: 999px;
    margin-bottom: 0.5rem;
}
.bg-earth-gradientup {
    background: linear-gradient(
        180deg,
        #7a5a22 0%,
        #6a4e1d 45%,
        #4f3a15 100%
    );
}
.bg-earth-gradientdown {
    background: linear-gradient(
        180deg,
        #4f3a15 0%,   /* gelap di atas */
        #6a4e1d 55%,  /* transisi tengah */
        #7a5a22 100%  /* terang di bawah */
    );
}

/* Market Scenario Panels */
.market-panel {
    position: relative;
    padding: 3rem 2.5rem;
    background: linear-gradient(
        180deg,
        hsl(var(--earth) / 0.35),
        hsl(var(--earth) / 0.55)
    );
    border-radius: 1rem;
    backdrop-filter: blur(6px);
    transition: transform 0.6s cubic-bezier(0.4,0,0.2,1),
                box-shadow 0.6s cubic-bezier(0.4,0,0.2,1);
}

.market-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    background: linear-gradient(
        to bottom,
        hsl(var(--sand) / 0.15),
        transparent
    );
    pointer-events: none;
}

.market-panel:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px -20px hsl(var(--foreground) / 0.4);
}

/* Short divider under title */
.market-divider {
    width: 48px;
    height: 4px;
    background-color: hsl(var(--sand));
    margin: 0.75rem auto 0;
    border-radius: 999px;
}

/* Subtle stagger animation */
.animate-market {
    animation: fadeUp 0.9s cubic-bezier(0.4,0,0.2,1) forwards;
    opacity: 0;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.25s; }
.delay-3 { animation-delay: 0.4s; }

/* Split panel hover effect */
.split-panel {
    transition: transform 1.2s cubic-bezier(0.4,0,0.2,1);
}

.split-panel img {
    transition: transform 1.4s cubic-bezier(0.4,0,0.2,1);
}

.split-panel:hover img {
    transform: scale(1.08);
}

/* Overlay subtle shift on hover */
.split-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at center,
        transparent 0%,
        rgba(0,0,0,0.15) 100%
    );
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
}

.split-panel:hover::after {
    opacity: 1;
}

/* Text lift on hover */
.split-content {
    transition: transform 0.8s ease, opacity 0.8s ease;
}

.split-panel:hover .split-content {
    transform: translateY(-6px);
}