@import "tailwindcss";
@import "tw-animate-css";

/* ---------------------------------------------------------------------------
   Brand palette (FGM Youpwe / City of Testimonies)
   Exact tokens from the cityoftestimonies site: deep maroon · warm
   parchment · warm near-black ink. Montserrat across the site — no
   gold/coral accents.
--------------------------------------------------------------------------- */
:root {
  --maroon-900: #3F0D16;   /* darkest - footer, hover states, shadows */
  --maroon-700: #6E1423;   /* primary brand color */
  --maroon-500: #93283A;   /* lighter tint - dividers, subtle accents */
  --ink: #1B1714;          /* warm near-black - body text */
  --parchment: #FAF6F1;    /* soft off-white - section backgrounds */
  --white: #FFFFFF;

  --font-display: var(--font-montserrat, 'Montserrat', system-ui, sans-serif);
  --font-body: var(--font-montserrat, 'Montserrat', system-ui, sans-serif);
}

@theme {
  --color-bg: var(--parchment);
  --color-surface: var(--white);
  --color-ink: var(--ink);
  --color-ink-soft: #5b504a;
  --color-muted: #8c817a;
  --color-brand: var(--maroon-700);
  --color-brand-deep: var(--maroon-900);
  --color-brand-bright: var(--maroon-500);
  --color-line: #e8e0d4;

  --font-display: var(--font-display);
  --font-body: var(--font-body);
  --font-sans: var(--font-body);
}

/* shadcn/ui design tokens, mapped onto the brand palette. */
:root {
  --radius: 1rem;

  --background: var(--parchment);
  --foreground: var(--ink);
  --card: var(--white);
  --card-foreground: var(--ink);
  --popover: var(--white);
  --popover-foreground: var(--ink);
  --primary: var(--maroon-700);
  --primary-foreground: var(--white);
  --secondary: var(--maroon-500);
  --secondary-foreground: var(--white);
  --muted: #f2ece0;
  --muted-foreground: #7a7184;
  --accent: var(--parchment);
  --accent-foreground: var(--ink);
  --destructive: var(--maroon-500);
  --destructive-foreground: var(--white);
  --border: #e8e0d4;
  --input: #e8e0d4;
  --ring: var(--maroon-900);
}

/* Expose the shadcn tokens as Tailwind color/radius utilities. */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted-token: var(--muted);
  --color-muted-token-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

:root {
  color-scheme: light;
}

html {
  scroll-behavior: smooth;
}

* {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  line-height: 1.6;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em; /* tracking-tight for the geometric sans */
  line-height: 1.08;
}

a {
  color: inherit;
}

::selection {
  background: var(--maroon-700);
  color: var(--white);
}

:focus-visible {
  outline: 2px solid var(--color-brand-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

@layer utilities {
  .radiance {
    background:
      radial-gradient(40% 54% at 14% 18%, rgba(147, 40, 58, 0.45), transparent 70%),
      radial-gradient(44% 50% at 86% 14%, rgba(110, 20, 35, 0.45), transparent 70%),
      radial-gradient(60% 70% at 50% 98%, rgba(63, 13, 22, 0.55), transparent 70%);
    filter: blur(22px);
  }
  .text-balance {
    text-wrap: balance;
  }
  .text-pretty {
    text-wrap: pretty;
  }
  .fade-x {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  /* light sheen that sweeps across an element on hover */
  .sheen {
    position: relative;
    overflow: hidden;
  }
  .sheen::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      105deg,
      transparent 35%,
      rgba(255, 255, 255, 0.35) 50%,
      transparent 65%
    );
    transform: translateX(-130%);
    transition: transform 0.7s ease;
  }
  .sheen:hover::after {
    transform: translateX(130%);
  }

  /* Faint parchment paper grid used behind light sections. */
  .bg-grid {
    background-image:
      linear-gradient(to right, rgba(110, 20, 35, 0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(110, 20, 35, 0.05) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 0%, #000 60%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 70% at 50% 0%, #000 60%, transparent 100%);
  }

  /* Animated underline that grows from the left on hover. */
  .link-underline {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% 1.5px;
    transition: background-size 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .link-underline:hover {
    background-size: 100% 1.5px;
  }

  /* Card lift used across the site. */
  .lift {
    transition:
      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px -28px rgba(63, 13, 22, 0.5);
  }

  .shadow-card {
    box-shadow: 0 1px 2px rgba(27, 23, 20, 0.04), 0 12px 32px -22px rgba(63, 13, 22, 0.35);
  }

  .animate-link::before {
    content: "";
    position: absolute;
    width: 0%;
    height: 5px;
    bottom: -5px;
    border-radius: 5px;
    left: 0;
    background-color: white;
    transition: width 0.3s ease;
  }

  .animate-link:hover::before {
    width: 100%;
  }

 
}

 .btn-light {
    @apply bg-bg text-brand shadow-sm hover:bg-white;
  }
  .btn-outline {
   @apply border border-white/50 bg-white/10 text-white backdrop-blur hover:bg-white hover:text-brand;
  }
/* --- keyframes / cool little animations --------------------------------- */
@keyframes drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(2%, -3%, 0) scale(1.06);
  }
}
.animate-drift {
  animation: drift 16s ease-in-out infinite;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.animate-marquee {
  animation: marquee 34s linear infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}
.animate-float {
  animation: float 5.5s ease-in-out infinite;
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.7;
  }
  50% {
    transform: translateY(6px);
    opacity: 1;
  }
}
.animate-bob {
  animation: bob 1.8s ease-in-out infinite;
}

/* Slow Ken-Burns push used on the hero video / large imagery. */
@keyframes kenburns {
  0% {
    transform: scale(1) translate3d(0, 0, 0);
  }
  100% {
    transform: scale(1.12) translate3d(-1.5%, -2%, 0);
  }
}
.animate-kenburns {
  animation: kenburns 22s ease-out forwards;
}

/* Panning gradient for the maroon "radiance" bands. */
@keyframes gradient-pan {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-pan 14s ease infinite;
}

/* Soft pulsing glow (e.g. play button, badges). */
@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(250, 246, 241, 0.35);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(250, 246, 241, 0);
  }
}
.animate-pulse-glow {
  animation: pulse-glow 2.4s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .animate-drift,
  .animate-marquee,
  .animate-float,
  .animate-bob,
  .animate-kenburns,
  .animate-gradient,
  .animate-pulse-glow {
    animation: none !important;
  }
  .sheen::after {
    display: none;
  }
  .lift:hover {
    transform: none;
  }
}