@import "tailwindcss";

/**
 * Polyfill: @property initial-value fallback untuk Firefox < 128 (mis. Windows 7).
 * Tailwind v4 mendefinisikan semua --tw-* variables via @property (CSS Houdini).
 * Browser lama tidak support @property sehingga initial-value tidak terset otomatis.
 * Blok :root ini memberikan nilai default yang identik dengan initial-value Tailwind.
 * Di browser modern, @property tetap mengontrol behaviour; ini hanya fallback.
 */
:root {
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-translate-z: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-scale-z: 1;
  --tw-scroll-snap-strictness: proximity;
  --tw-space-y-reverse: 0;
  --tw-space-x-reverse: 0;
  --tw-divide-x-reverse: 0;
  --tw-divide-y-reverse: 0;
  --tw-border-style: solid;
  --tw-outline-style: solid;
  --tw-gradient-from: transparent;
  --tw-gradient-via: transparent;
  --tw-gradient-to: transparent;
  --tw-gradient-from-position: 0%;
  --tw-gradient-via-position: 50%;
  --tw-gradient-to-position: 100%;
  --tw-shadow: 0 0 transparent;
  --tw-shadow-alpha: 100%;
  --tw-inset-shadow: 0 0 transparent;
  --tw-inset-shadow-alpha: 100%;
  --tw-ring-shadow: 0 0 transparent;
  --tw-inset-ring-shadow: 0 0 transparent;
  --tw-ring-offset-width: 0;
  --tw-ring-offset-color: #fff;
  --tw-ring-offset-shadow: 0 0 transparent;
  --tw-drop-shadow-alpha: 100%;
  --tw-content: "";
}

@theme {
  /* 60-30-10 Rule Application */
  /* 60% Dominant (Background & Surfaces) */
  --color-background: #FAFAFB;
  --color-surface: #F4F5F7;
  --color-border: #E5E7EB;
  --color-neutral: #FFFFFF;
  
  /* 30% Secondary (Primary Brand: Teal from Logo) */
  --color-primary: #1F6376;
  --color-text-primary: #1F6376;
  --color-text-secondary: #4B5563;
  
  /* 10% Accent (Highlights & Calls to Action: Orange/Yellow from Logo) */
  --color-accent: #F39E20;

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-serif: "New York", "Charter", "Georgia", "Cambria", "Times New Roman", Times, serif;
  --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

@layer utilities {
  /* Apple Type Trinity Typography Utilities */
  .font-kpi {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: -0.025em;
  }
  .font-headline {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: -0.02em;
  }
  .font-tabular {
    font-family: var(--font-mono);
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
  }

  /* Apple Materials / Blurs */
  
  /* Ultra Thin Material */
  .material-ultra-thin {
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
  }

  /* Thin Material */
  .material-thin {
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
  }

  /* Regular Material */
  .material-regular {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
  }

  /* Thick Material */
  .material-thick {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
  }

  /* Ambient Shadow */
  .shadow-ambient {
    box-shadow: 0 4px 24px -8px rgba(0, 0, 0, 0.08), 0 2px 8px -2px rgba(0, 0, 0, 0.04);
  }

  .shadow-ambient-lg {
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.12), 0 4px 12px -4px rgba(0, 0, 0, 0.06);
  }

  /* Button Press Effect */
  .active-scale {
    transition: transform 0.1s cubic-bezier(0.2, 0, 0, 1), opacity 0.1s;
  }
  .active-scale:active {
    transform: scale(0.96);
    opacity: 0.8;
  }

  /* Grid ambient background */
  .bg-grid {
    background-size: 40px 40px;
    background-image: linear-gradient(to right, rgba(0,0,0,0.04) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(0,0,0,0.04) 1px, transparent 1px);
  }

  /* Text gradients */
  .text-gradient {
    background: linear-gradient(to right, #171717, #525252);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Section Decor Dots */
  .section-decor {
    position: relative;
  }
  .section-decor::before, .section-decor::after {
    content: "";
    position: absolute;
    left: -5rem;
    right: -5rem;
    height: 1px;
    background: rgba(148,163,184,.35);
    pointer-events: none;
  }
  .section-decor::before { top: 0; }
  .section-decor::after { bottom: 0; }
  
  .decor-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid rgba(148,163,184,.55);
    border-radius: 9999px;
    background: #FAFAFB;
    pointer-events: none;
  }
  .decor-dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    background: rgba(148,163,184,.7);
    transform: translate(-50%,-50%);
  }
  .decor-dot.tl { top: 0; left: 0; transform: translate(-50%,-50%); }
  .decor-dot.tr { top: 0; right: 0; transform: translate(50%,-50%); }
  .decor-dot.bl { bottom: 0; left: 0; transform: translate(-50%,50%); }
  .decor-dot.br { bottom: 0; right: 0; transform: translate(50%,50%); }

  /* Hide scrollbar */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* Custom Animations from References */
  @keyframes float-soft {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
  }
  @keyframes float-soft-delayed {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
  }
  @keyframes pulse-soft {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.96); opacity: 0.85; }
  }
  @keyframes slide-x-soft {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(3px); }
  }
  @keyframes scale-y-up {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(1.1); }
  }
  @keyframes scale-y-down {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.9); }
  }
  @keyframes shimmer-soft {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
  }
  @keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
  }

  .anim-float { animation: float-soft 4s ease-in-out infinite; }
  .anim-float-delayed-1 { animation: float-soft-delayed 5s ease-in-out infinite 1s; }
  .anim-float-delayed-2 { animation: float-soft 4.5s ease-in-out infinite 0.5s; }
  .anim-float-delayed-3 { animation: float-soft-delayed 6s ease-in-out infinite 2s; }
  .anim-pulse-soft { animation: pulse-soft 3s ease-in-out infinite; }
  .anim-slide-x-1 { animation: slide-x-soft 4s ease-in-out infinite; }
  .anim-slide-x-2 { animation: slide-x-soft 5s ease-in-out infinite 1s; }
  .anim-slide-x-3 { animation: slide-x-soft 4.5s ease-in-out infinite 0.5s; }
  .anim-bar-1 { animation: scale-y-up 3s ease-in-out infinite; transform-origin: bottom; }
  .anim-bar-2 { animation: scale-y-down 4s ease-in-out infinite 0.5s; transform-origin: bottom; }
  .anim-bar-3 { animation: scale-y-up 3.5s ease-in-out infinite 1s; transform-origin: bottom; }
  .anim-bar-4 { animation: scale-y-down 4.5s ease-in-out infinite 0.2s; transform-origin: bottom; }
  .anim-bar-5 { animation: scale-y-up 4s ease-in-out infinite 0.8s; transform-origin: bottom; }
  .anim-shimmer { animation: shimmer-soft 3s ease-in-out infinite; }
  .animate-marquee { animation: marquee 40s linear infinite; }
  
  /* Hero Frame Utils */
  .hero-frame::before, .hero-frame::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    height: 1px;
    background: rgba(148, 163, 184, 0.26);
    pointer-events: none;
  }
  .hero-frame::before { top: 44px; }
  .hero-frame::after { bottom: 34px; }
  .side-line-left, .side-line-right {
    position: absolute;
    top: 18px;
    bottom: 18px;
    width: 1px;
    background: rgba(148, 163, 184, 0.26);
    pointer-events: none;
  }
  .side-line-left { left: 42px; }
  .side-line-right { right: 42px; }
  .corner-cross {
    position: absolute;
    width: 14px;
    height: 14px;
    pointer-events: none;
  }
  .corner-cross::before, .corner-cross::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: #020617;
    transform: translate(-50%, -50%);
  }
  .corner-cross::before { width: 1px; height: 12px; }
  .corner-cross::after { width: 12px; height: 1px; }

  @media (max-width: 767px) {
    .hero-frame::before, .hero-frame::after, .side-line-left, .side-line-right, .corner-cross {
        display: none;
    }
  }

  /* Apple-style Custom Scrollbar */
  .custom-scrollbar::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: 9999px;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.6);
  }
  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
  }
}