/*
 * TEA DANCE brand layer. Mirrors ../tea-dance/src/app/globals.css.
 * Everything here is either variables, opt-in classes or harmless site-wide
 * styles; anything that would change the current pages is scoped to .td-new.
 */

:root {
  --pink: #E8247C;
  --purple: #8B2FC9;
  --dark: #111111;
  --muted: #666666;
  --bg: #FAFAFA;
  --surface: #FFFFFF;
  --grad: linear-gradient(135deg, #E8247C, #8B2FC9);

  --font-display: "Play", sans-serif;
  --font-serif: "Cormorant Garamond", serif;
  --font-sans: "Inter", sans-serif;
}

::selection {
  background: var(--pink);
  color: #fff;
}

:where(a, button):focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 4px;
}

/* Pilot pages only. globals.css paints body dark but every page's <main> is
   bg-bg, so the visible page background is --bg. */
body.td-new {
  background-color: var(--bg);
  color: var(--dark);
  font-family: var(--font-sans);
  font-weight: 300;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Gradient utilities */
.text-gradient {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-gradient-signature {
  background: var(--grad);
}

/* Marquee */
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  display: flex;
}

.marquee-content {
  display: flex;
  animation: marquee 20s linear infinite;
  will-change: transform;
}

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

.marquee-reverse {
  animation: marquee-reverse 40s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .marquee-content,
  .marquee-reverse {
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }
}