@import 'tailwindcss';

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee {
  animation: marquee 40s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .animate-marquee {
    animation: none;
  }
}
@import 'tw-animate-css';
@plugin "@tailwindcss/typography";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-card-border: hsl(var(--card-border));

  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-popover-border: hsl(var(--popover-border));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-primary-border: var(--primary-border);

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-secondary-border: var(--secondary-border);

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-muted-border: var(--muted-border);

  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-accent-border: var(--accent-border);

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-destructive-border: var(--destructive-border);

  --font-sans: var(--app-font-sans);
  --font-serif: var(--app-font-serif);

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

:root {
  --background: 40 33% 98%;
  --foreground: 330 44% 7%;
  --border: 326 30% 85%;
  --input: 326 30% 85%;
  --ring: 326 75% 43%;

  --card: 0 0% 100%;
  --card-foreground: 330 44% 7%;
  --card-border: 326 30% 90%;

  --popover: 0 0% 100%;
  --popover-foreground: 330 44% 7%;
  --popover-border: 326 30% 90%;

  --primary: 326 75% 43%;
  --primary-foreground: 0 0% 100%;

  --secondary: 326 62% 86%;
  --secondary-foreground: 326 75% 43%;

  --muted: 40 20% 94%;
  --muted-foreground: 330 15% 40%;

  --accent: 326 20% 95%;
  --accent-foreground: 326 75% 43%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --app-font-sans: var(--font-inter), sans-serif;
  --app-font-serif: var(--font-playfair), serif;
  --radius: 0.5rem;
}

.dark {
  --background: 330 44% 7%;
  --foreground: 40 33% 98%;
  --border: 330 20% 20%;
  --input: 330 20% 20%;
  --ring: 326 75% 43%;

  --card: 330 44% 9%;
  --card-foreground: 40 33% 98%;
  --card-border: 330 20% 20%;

  --popover: 330 44% 9%;
  --popover-foreground: 40 33% 98%;
  --popover-border: 330 20% 20%;

  --primary: 326 75% 43%;
  --primary-foreground: 0 0% 100%;

  --secondary: 330 30% 20%;
  --secondary-foreground: 40 33% 98%;

  --muted: 330 30% 15%;
  --muted-foreground: 330 10% 60%;

  --accent: 330 30% 20%;
  --accent-foreground: 40 33% 98%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply font-sans antialiased bg-background text-foreground;
  }
  h1, h2, h3, h4, h5, h6 {
    @apply font-serif;
  }
}

@layer components {
  /* Shared card hover, used by every card across the site. The accent bar is a
     ::before rather than an extra <span> so adopting this costs one class name
     and no markup change. Colours come from --primary, so a theme change carries
     through instead of leaving hard-coded magenta behind. */
  .uef-card {
    position: relative;
    overflow: hidden;
    transition-property: box-shadow, border-color;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }

  .uef-card::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 4px;
    /* Cards whose content is itself absolutely positioned — the reel tiles, with
       a fill <Image> and a scrim over it — would otherwise paint straight over
       this bar, since untiered absolute boxes stack in DOM order and ::before
       comes first. */
    z-index: 1;
    background-image: linear-gradient(to right, hsl(var(--primary)), hsl(var(--primary) / 0.3));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
  }

  .uef-card:hover::before { transform: scaleX(1); }

  .uef-card:hover {
    border-color: hsl(var(--primary) / 0.4);
    box-shadow: 0 18px 40px -12px hsl(var(--primary) / 0.35);
  }

  /* Cards sitting on a solid --primary section (the Chamber of Commerce
     objectives) need the palette inverted — a magenta bar, border and glow are
     all invisible against magenta. Same motion, different colours. Declared
     after .uef-card so these win at equal specificity. */
  .uef-card-on-primary::before {
    background-image: linear-gradient(to right, rgb(255 255 255), rgb(255 255 255 / 0.3));
  }

  .uef-card-on-primary:hover {
    border-color: rgb(255 255 255 / 0.55);
    box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.35);
  }

  /* Lift for ordinary cards. A card that is a framer-motion element already
     carries an inline transform, which this could never override — those pass
     whileHover={{ y: -8 }} instead and skip this class. Declared as a separate
     transition-property so adding it does not clobber the pair above. */
  .uef-card-lift {
    transition-property: box-shadow, border-color, transform;
  }

  .uef-card-lift:hover { transform: translateY(-8px); }

  @media (prefers-reduced-motion: reduce) {
    .uef-card,
    .uef-card::before,
    .uef-card-lift { transition: none; }
    .uef-card-lift:hover { transform: none; }
  }
}

@layer components {
  /* Loading state. Restrained on purpose: one arc turning inside a small disc,
     rather than rings thrown across the screen.

     The arc is a conic gradient masked into a ring — the mask cuts out
     everything inside `calc(100% - 3px)` of the radius, leaving a 3px band. That
     is what turns a filled gradient disc into a sweeping line, and it is why the
     tail fades smoothly instead of ending at a hard edge. Two mask properties
     because Safari still wants the -webkit- prefix. */
  .uef-halo {
    background: conic-gradient(
      from 0deg,
      transparent 0deg,
      hsl(var(--primary) / 0.06) 140deg,
      hsl(var(--primary) / 0.45) 280deg,
      hsl(var(--primary)) 345deg,
      transparent 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    animation: uef-sweep 1.4s linear infinite;
  }

  @keyframes uef-sweep {
    to { transform: rotate(360deg); }
  }

  /* The mark stays still. The halo carries the motion; moving both makes the
     centre look unstable. This is only a soft settle on first paint. */
  .uef-mark {
    animation: uef-settle 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  @keyframes uef-settle {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
  }

  .uef-underline {
    animation: uef-underline 1.4s ease-in-out infinite;
  }

  @keyframes uef-underline {
    0%, 100% { transform: scaleX(0.1); opacity: 0.4; }
    50%      { transform: scaleX(1);   opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .uef-halo { animation: none; }
    .uef-mark { animation: none; }
    .uef-underline { animation: none; transform: scaleX(1); }
  }
}