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

@layer base {
  :root {
    --navy: #0b1f45;
    --gold: #c9a24b;
    --white: #ffffff;
  }

  html {
    scroll-behavior: smooth;
    /* Offset anchored sections so the sticky nav doesn't cover headings. */
    scroll-padding-top: 5rem;
    -webkit-text-size-adjust: 100%;
  }

  /* Body = Inter (clean sans-serif) */
  body {
    @apply bg-white text-navy font-body leading-relaxed antialiased;
    text-rendering: optimizeLegibility;
  }

  /* Headings = Manrope (confident, corporate display weight) */
  h1,
  h2,
  h3,
  h4 {
    @apply font-heading font-bold tracking-tightest text-navy;
    text-wrap: balance;
  }

  /* Gold focus ring for keyboard users */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 2px;
  }

  ::selection {
    background-color: var(--gold);
    color: var(--navy);
  }

  /* Smooth page transitions */
  .page-transition {
    animation: pageFadeIn 0.6s ease-out;
  }

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

  /* Magnetic cursor effect zones */
  .magnetic-zone {
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  }
}

@layer components {
  /* Centered content container used across sections */
  .container-x {
    @apply mx-auto w-full max-w-content px-6 sm:px-8 lg:px-12;
  }

  /* Gold eyebrow / section label */
  .eyebrow {
    @apply inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.22em] text-gold-600;
  }

  .eyebrow::before {
    content: "";
    @apply inline-block h-px w-8 bg-gold;
  }

  /* Buttons */
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-md px-6 py-3 text-sm font-semibold tracking-wide transition-all duration-200;
  }

  .btn-gold {
    @apply btn bg-gold text-navy shadow-card hover:bg-gold-400 hover:-translate-y-0.5 hover:shadow-cardHover;
  }

  .btn-navy {
    @apply btn bg-navy text-white hover:bg-navy-700 hover:-translate-y-0.5;
  }

  .btn-outline {
    @apply btn border border-white/40 text-white hover:border-gold hover:text-gold;
  }

  /* Section heading divider (short gold rule) */
  .heading-rule {
    @apply mt-5 h-1 w-16 rounded-full bg-gold;
  }

  /* Motion utilities */
  .reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }

  .reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Staggered children animations */
  .stagger-children > * {
    opacity: 0;
    transform: translateY(20px);
  }

  .stagger-children.is-visible > *:nth-child(1) {
    animation: fadeUp 0.6s ease-out 0s forwards;
  }

  .stagger-children.is-visible > *:nth-child(2) {
    animation: fadeUp 0.6s ease-out 0.1s forwards;
  }

  .stagger-children.is-visible > *:nth-child(3) {
    animation: fadeUp 0.6s ease-out 0.2s forwards;
  }

  .stagger-children.is-visible > *:nth-child(4) {
    animation: fadeUp 0.6s ease-out 0.3s forwards;
  }

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

  /* Horizontal marquee */
  .marquee-track {
    display: flex;
    animation: marquee 30s linear infinite;
  }

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

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

  /* Parallax layers */
  .parallax-layer {
    will-change: transform;
  }

  /* Magnetic button effect */
  .magnetic-btn {
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  /* Blog prose — brand headings inside MDX content */
  .prose h1,
  .prose h2,
  .prose h3,
  .prose h4 {
    @apply font-heading;
  }
  .prose a {
    text-decoration-color: var(--color-gold, #c9a24b);
  }
  .prose a:hover {
    color: var(--color-gold-700, #876427);
  }
  .prose code::before,
  .prose code::after {
    content: none;
  }
}