@tailwind base;
@tailwind components;
@tailwind utilities;

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    /* Warm cream background — the foundation's signature */
    --background: 42 46% 94%;
    --foreground: 224 49% 8%;

    --card: 0 0% 100%;
    --card-foreground: 224 49% 8%;

    --popover: 0 0% 100%;
    --popover-foreground: 224 49% 8%;

    /* Refined gold — richer, more premium, WCAG AA on white */
    --primary: 36 55% 40%;
    --primary-foreground: 0 0% 100%;

    --secondary: 42 30% 88%;
    --secondary-foreground: 224 49% 8%;

    --muted: 42 30% 88%;
    --muted-foreground: 224 20% 40%;

    --accent: 36 55% 40%;
    --accent-foreground: 0 0% 100%;

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

    --border: 42 22% 82%;
    --input: 42 22% 82%;
    --ring: 38 52% 46%;

    --radius: 0.5rem;

    /* Semantic section tokens */
    --section-cream: 42 46% 94%;
    --section-cream-soft: 40 40% 96%;
    --section-dark: 224 49% 8%;
    --section-dark-card: 224 45% 12%;

    /* Gold gradient stops */
    --gold-light: 38 52% 48%;
    --gold-base: 36 55% 40%;
    --gold-deep: 32 50% 32%;

    --sidebar-background: 42 46% 96%;
    --sidebar-foreground: 224 49% 8%;
    --sidebar-primary: 38 52% 46%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 42 30% 88%;
    --sidebar-accent-foreground: 224 49% 8%;
    --sidebar-border: 42 22% 82%;
    --sidebar-ring: 38 52% 46%;
  }

  .dark {
    --background: 224 49% 8%;
    --foreground: 42 46% 94%;

    --card: 224 45% 12%;
    --card-foreground: 42 46% 94%;

    --popover: 224 45% 12%;
    --popover-foreground: 42 46% 94%;

    --primary: 36 55% 40%;
    --primary-foreground: 0 0% 100%;

    --secondary: 224 30% 18%;
    --secondary-foreground: 42 46% 94%;

    --muted: 224 30% 18%;
    --muted-foreground: 42 20% 70%;

    --accent: 36 55% 40%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 224 30% 18%;
    --input: 224 30% 18%;
    --ring: 38 52% 46%;

    --section-cream: 224 49% 8%;
    --section-cream-soft: 224 45% 10%;
    --section-dark: 224 49% 8%;
    --section-dark-card: 224 45% 12%;

    --sidebar-background: 224 45% 12%;
    --sidebar-foreground: 42 46% 94%;
    --sidebar-primary: 38 52% 46%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 224 30% 18%;
    --sidebar-accent-foreground: 42 46% 94%;
    --sidebar-border: 224 30% 18%;
    --sidebar-ring: 38 52% 46%;
  }
}

@layer utilities {
  .bg-section-cream { background-color: hsl(var(--section-cream)); }
  .bg-section-cream-soft { background-color: hsl(var(--section-cream-soft)); }
  .bg-section-dark { background-color: hsl(var(--section-dark)); }
  .bg-section-dark-card { background-color: hsl(var(--section-dark-card)); }

  /* Gold gradient text for headings */
  .text-gradient-gold {
    background: linear-gradient(135deg, hsl(var(--gold-light)), hsl(var(--gold-base)), hsl(var(--gold-deep)));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  /* Gold gradient background */
  .bg-gradient-gold {
    background: linear-gradient(135deg, hsl(var(--gold-light)), hsl(var(--gold-base)), hsl(var(--gold-deep)));
  }

  /* Glassmorphism */
  .glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
  }
  .glass-dark {
    background: rgba(10, 15, 29, 0.6);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
  }

  /* Elegant shadows */
  .shadow-elegant {
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.08), 0 2px 8px -2px rgba(0, 0, 0, 0.04);
  }
  .shadow-elegant-lg {
    box-shadow: 0 12px 40px -4px rgba(0, 0, 0, 0.12), 0 4px 16px -4px rgba(0, 0, 0, 0.06);
  }
  .shadow-gold {
    box-shadow: 0 8px 30px -6px hsl(var(--gold-base) / 0.35);
  }
  .shadow-gold-lg {
    box-shadow: 0 16px 50px -8px hsl(var(--gold-base) / 0.4);
  }

  /* Subtle grain texture overlay — removed for performance (saves ~2KB CSS) */
  .bg-grain {
    position: relative;
  }
  /* .bg-grain::after content removed — use background-color or gradient instead */
  /* Subtle gold-tinted hero overlay for visual depth */
  .hero-overlay {
    background:
      linear-gradient(to bottom, hsl(38 52% 46% / 0.12) 0%, transparent 30%, transparent 70%, hsl(38 52% 46% / 0.10) 100%),
      linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.6));
  }
  .hero-overlay-dark {
    background:
      linear-gradient(to bottom, hsl(38 52% 46% / 0.15) 0%, transparent 35%, transparent 65%, hsl(38 52% 46% / 0.12) 100%),
      linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
  }

  /* Section transition fade */
  .section-fade-top {
    mask-image: linear-gradient(to bottom, transparent, black 40px);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 40px);
  }

  /* Animated underline */
  .link-underline {
    background-image: linear-gradient(hsl(var(--primary)), hsl(var(--primary)));
    background-size: 0% 1.5px;
    background-repeat: no-repeat;
    background-position: left bottom;
    transition: background-size 0.3s ease;
  }
  .link-underline:hover {
    background-size: 100% 1.5px;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  /* Smooth scroll for anchor links */
  html {
    scroll-behavior: smooth;
  }

  /* Refined focus styles */
  :focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
  }

  /* Selection color */
  ::selection {
    background: hsl(var(--primary) / 0.25);
    color: hsl(var(--foreground));
  }

  /* Respect reduced motion preference */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

.logo-scroll {
    animation: logo-scroll 60s linear infinite;
  }

  .logo-scroll:hover {
    animation-play-state: paused;
  }

  @media (prefers-reduced-motion: reduce) {
    .logo-scroll {
      animation: none;
    }
  }
}

@keyframes logo-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

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

/* Shimmer effect for loading/skeleton */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* ── Lightweight scroll-reveal animations (CSS-based, no JS runtime) ── */
.reveal-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-visible {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) !important;
}

/* Stagger group */
.stagger-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.stagger-visible .stagger-item {
  opacity: 1;
  transform: translateY(0);
}
.stagger-visible .stagger-item:nth-child(1) { transition-delay: 0ms; }
.stagger-visible .stagger-item:nth-child(2) { transition-delay: 80ms; }
.stagger-visible .stagger-item:nth-child(3) { transition-delay: 160ms; }
.stagger-visible .stagger-item:nth-child(4) { transition-delay: 240ms; }
.stagger-visible .stagger-item:nth-child(5) { transition-delay: 320ms; }
.stagger-visible .stagger-item:nth-child(6) { transition-delay: 400ms; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal-up, .reveal-left, .reveal-right, .reveal-scale,
  .stagger-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Performance optimization — skip rendering off-screen sections */
.content-visibility-auto {
  contain-intrinsic-size: 0 500px;
}

@supports (content-visibility: auto) {
  section:not(:first-of-type) {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
  }
}