@import "tailwindcss";

/* ── Design Tokens ─────────────────────────────────────── */
:root {
  --color-gold-light: #bca574;
  --color-gold: #a6905e;
  --color-gold-dark: #857043;
  --color-gold-cream: #f5f1ed;
  --color-gold-bg: #fbfaf7;
  --color-ink: #2d251a;
  --color-muted: #7a7060;
  --color-cream: #faf7f0;
  --color-green: #1f3a2e;
  --color-green-deep: #16281f;
}

@theme inline {
  --color-gold-light: var(--color-gold-light);
  --color-gold: var(--color-gold);
  --color-gold-dark: var(--color-gold-dark);
  --color-gold-cream: var(--color-gold-cream);
  --color-gold-bg: var(--color-gold-bg);
  --color-ink: var(--color-ink);
  --color-muted: var(--color-muted);
  --color-cream: var(--color-cream);
  --color-green: var(--color-green);
  --color-green-deep: var(--color-green-deep);

  --font-sans: var(--font-dm-sans), system-ui, sans-serif;
  --font-serif: var(--font-playfair), Georgia, serif;

  --animate-marquee: marquee 35s linear infinite;
  --animate-bird-flap: bird-flap 2.5s ease-in-out infinite;
  --animate-float: float 6s ease-in-out infinite;

  @keyframes marquee {
    from {
      transform: translateX(0%);
    }

    to {
      transform: translateX(-100%);
    }
  }

  @keyframes bird-flap {

    0%,
    100% {
      transform: translateY(0) rotate(0deg);
    }

    50% {
      transform: translateY(-6px) rotate(-4deg);
    }
  }

  @keyframes float {

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

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

/* ── Shared Flying-Bird Keyframe ──────────────────────── */
@keyframes fly-across {
  0%   { transform: translate(var(--fly-from-x), var(--fly-from-y)) scale(0.85); opacity: 0; }
  8%   { opacity: var(--fly-opacity, 0.6); }
  85%  { opacity: var(--fly-opacity, 0.6); }
  100% { transform: translate(var(--fly-to-x), var(--fly-to-y)) scale(1.05); opacity: 0; }
}
.fly-across {
  animation: fly-across var(--fly-duration, 15s) var(--fly-delay, 0s) infinite linear;
}

/* ── Scroll-Driven Fade (FadeIn component) ────────────── */
@supports (animation-timeline: view()) {
  .scroll-fade {
    opacity: 0;
    transform: translate(var(--fade-x, 0), var(--fade-y, 2rem));
    animation: scroll-fade-in var(--fade-duration, 600ms) ease-out forwards;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
    animation-fill-mode: both;
  }
  @keyframes scroll-fade-in {
    to { opacity: 1; transform: translate(0, 0); }
  }
}

/* ── Reduced Motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fly-across, .animate-bird-flap, .animate-float, .animate-marquee,
  .orbit-bird-1, .orbit-bird-1-counter, .orbit-bird-2, .orbit-bird-2-counter,
  .orbit-bird-3, .orbit-bird-3-counter,
  .journey-sweep-x, .journey-sweep-y, .journey-face {
    animation: none !important;
  }
  .fly-across { opacity: 0 !important; }
  .scroll-fade { opacity: 1 !important; transform: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ── Orbit Keyframes ───────────────────────────────────── */
@keyframes spin-cw {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes spin-ccw {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

/* Bird 1: CW orbit 14s, inner CCW 14s (stays upright) */
.orbit-bird-1 {
  animation: spin-cw 14s linear infinite;
}

.orbit-bird-1-counter {
  animation: spin-ccw 14s linear infinite;
}

/* Bird 2: CCW orbit 18s, inner CW 18s (stays upright) */
.orbit-bird-2 {
  animation: spin-ccw 18s linear infinite;
}

.orbit-bird-2-counter {
  animation: spin-cw 18s linear infinite;
}

/* Bird 3: CW orbit 10s (fast), inner CCW 10s */
.orbit-bird-3 {
  animation: spin-cw 10s linear infinite;
}

.orbit-bird-3-counter {
  animation: spin-ccw 10s linear infinite;
}

/* Journey traveler: wide oval sweep — rail is the LEFT edge of the oval */
:root {
  --journey-sweep-x: 120px;
  --journey-sweep-y: 16px;
}
@media (min-width: 640px) {
  :root { --journey-sweep-x: 240px; }
}
@keyframes journey-sweep-x {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(var(--journey-sweep-x)); }
}
@keyframes journey-sweep-y {
  0%, 50%, 100% { transform: translateY(0); }
  25% { transform: translateY(var(--journey-sweep-y)); }
  75% { transform: translateY(calc(-1 * var(--journey-sweep-y))); }
}
/* Bird faces its travel direction: 0-50% flying right, 50-100% flying back left */
@keyframes journey-face {
  0%, 49.99% { transform: scaleX(1); }
  50%, 100% { transform: scaleX(-1); }
}
.journey-sweep-x { animation: journey-sweep-x 5.5s ease-in-out infinite; }
.journey-sweep-y { animation: journey-sweep-y 5.5s ease-in-out infinite; }
.journey-face { animation: journey-face 5.5s linear infinite; }



/* ── Base Styles ───────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-gold-bg);
  color: var(--color-ink);
}

/* Serif headings by default */
h1,
h2,
h3,
.font-serif {
  font-family: var(--font-serif);
}