@import "tailwindcss";

@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-mono: "SF Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

@layer utilities {
  /* 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;
    }
  }
}