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

/* ============================================================
   AVENUE MINE — Design System

   Brand palette: black #000000, white #FFFFFF, and a three-point
   gradient — #E91388 (pink) -> #EB2D2E (red) -> #F4892D (orange).

   The gradient itself is reserved for brand moments (logo, headline
   accents, hero rules). For solid UI colour — buttons, links, focus
   rings, badges — we use the pink stop alone: the red stop is too
   close to --destructive to sit next to error states, and the orange
   stop collides with --attention.
   ============================================================ */

/* --- CSS Variables (Dark-first) --- */
:root {
  /* Brand gradient stops, for use in gradients and one-off brand fills. */
  --brand-pink: #E91388;
  --brand-red: #EB2D2E;
  --brand-orange: #F4892D;
  --brand-gradient: linear-gradient(135deg, #E91388 0%, #EB2D2E 47.6%, #F4892D 100%);

  /* True black: pages are #000, cards and popovers lift a shade off it. */
  --background: 0 0% 0%;        /* #000000 */
  --foreground: 0 0% 100%;          /* #ffffff */
  --card: 0 0% 4.7%;            /* #0c0c0c */
  --card-foreground: 0 0% 100%;
  --popover: 0 0% 4.7%;
  --popover-foreground: 0 0% 100%;
  --primary: 327 85% 49%;     /* #E91388 */
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 2%;        /* #050505 */
  --secondary-foreground: 0 0% 67%; /* #a1a1aa */
  --muted: 0 0% 2%;
  --muted-foreground: 0 0% 67%;
  --accent: 327 85% 60%;            /* #F042A1 */
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 100% / 0.07;
  --input: 0 0% 100% / 0.08;
  --ring: 327 85% 49%;
  --radius: 0.875rem;

  --chart-1: 327 85% 49%;
  --chart-2: 28 90% 57%;
  --chart-3: 360 83% 55%;
  --chart-4: 173.4 80% 40%;
  --chart-5: 217 91% 60%;

  --sidebar: 0 0% 8%;
  --sidebar-foreground: 0 0% 100%;
  --sidebar-primary: 327 85% 49%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 0 0% 6%;
  --sidebar-accent-foreground: 0 0% 67%;
  --sidebar-border: 0 0% 100% / 0.07;
  --sidebar-ring: 327 85% 49%;

  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Instrument Serif', 'Playfair Display', ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --shadow-x: 0px;
  --shadow-y: 4px;
  --shadow-blur: 10px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.25;
  --shadow-color: #000000;
  --shadow-2xs: 0px 4px 10px 0px hsl(0 0% 0% / 0.13);
  --shadow-xs: 0px 4px 10px 0px hsl(0 0% 0% / 0.13);
  --shadow-sm: 0px 4px 10px 0px hsl(0 0% 0% / 0.25), 0px 1px 2px -1px hsl(0 0% 0% / 0.25);
  --shadow: 0px 4px 10px 0px hsl(0 0% 0% / 0.25), 0px 1px 2px -1px hsl(0 0% 0% / 0.25);
  --shadow-md: 0px 4px 10px 0px hsl(0 0% 0% / 0.25), 0px 2px 4px -1px hsl(0 0% 0% / 0.25);
  --shadow-lg: 0px 4px 10px 0px hsl(0 0% 0% / 0.25), 0px 4px 6px -1px hsl(0 0% 0% / 0.25);
  --shadow-xl: 0px 4px 10px 0px hsl(0 0% 0% / 0.25), 0px 8px 10px -1px hsl(0 0% 0% / 0.25);
  --shadow-2xl: 0px 4px 10px 0px hsl(0 0% 0% / 0.63);
  --tracking-normal: -0.011em;
  --spacing: 0.25rem;

  --success: 142 76% 36%;
  --success-foreground: 0 0% 100%;
  --info: 217 91% 60%;
  --info-foreground: 217 91% 20%;
  --attention: 38 92% 50%;
  --attention-foreground: 38 92% 20%;
}

/* Light mode overrides (accessible but app defaults to dark) */
.light {
  --background: 0 0% 100%;
  --foreground: 240 10% 4%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 4%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 4%;
  --primary: 327 85% 49%;
  --primary-foreground: 0 0% 100%;
  --secondary: 240 5% 96%;
  --secondary-foreground: 240 6% 10%;
  --muted: 240 5% 96%;
  --muted-foreground: 240 4% 46%;
  --accent: 240 5% 96%;
  --accent-foreground: 240 6% 10%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 6% 90%;
  --input: 240 6% 90%;
  --ring: 327 85% 49%;
  --sidebar: 0 0% 100%;
  --sidebar-foreground: 240 10% 4%;
  --sidebar-primary: 327 85% 49%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 240 5% 96%;
  --sidebar-accent-foreground: 240 6% 10%;
  --sidebar-border: 240 6% 90%;
  --sidebar-ring: 327 85% 49%;
}

/* Also support .dark class for compatibility */
.dark {
  --background: 0 0% 8%;
  --foreground: 0 0% 100%;
  --card: 0 0% 11%;
  --card-foreground: 0 0% 100%;
  --popover: 0 0% 11%;
  --popover-foreground: 0 0% 100%;
  --primary: 327 85% 49%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 6%;
  --secondary-foreground: 0 0% 67%;
  --muted: 0 0% 6%;
  --muted-foreground: 0 0% 67%;
  --accent: 327 85% 60%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 100% / 0.07;
  --input: 0 0% 100% / 0.08;
  --ring: 327 85% 49%;
  --sidebar: 0 0% 8%;
  --sidebar-foreground: 0 0% 100%;
  --sidebar-primary: 327 85% 49%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 0 0% 6%;
  --sidebar-accent-foreground: 0 0% 67%;
  --sidebar-border: 0 0% 100% / 0.07;
  --sidebar-ring: 327 85% 49%;

  --success: 142 76% 36%;
  --success-foreground: 0 0% 100%;
  --attention: 43 96% 56%;
  --attention-foreground: 43 96% 20%;
}

/* ============================================================
   BASE STYLES
   ============================================================ */
@layer base {
  * {
    @apply border-border;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-family: var(--font-sans);
    letter-spacing: var(--tracking-normal);
    font-feature-settings: "rlig" 1, "calt" 1;
  }

  /* Gradient text utility */
  .text-gradient {
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.4) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .text-gradient-accent {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Full three-stop brand gradient as a background — for hero rules,
     dividers, and brand fills. Pair with .text-gradient-accent for type. */
  .bg-brand-gradient {
    background: var(--brand-gradient);
  }

  /* --- Custom Radio Button --- */
  .ave-radio .ave-radio-card {
    @apply flex items-center gap-2.5 rounded-xl px-4 py-2.5 text-sm transition-all;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    color: rgba(161, 161, 170, 0.6);
  }

  .ave-radio:hover .ave-radio-card {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
  }

  .ave-radio input:checked ~ .ave-radio-card {
    border-color: rgba(233, 19, 136, 0.4);
    background: rgba(233, 19, 136, 0.06);
    color: #fff;
  }

  .ave-radio-dot {
    @apply flex-shrink-0 rounded-full transition-all;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.15);
  }

  .ave-radio input:checked ~ .ave-radio-card .ave-radio-dot {
    border-color: #E91388;
    border-width: 5px;
  }

  /* --- Custom Checkbox --- */
  .ave-checkbox {
    display: block;
  }

  .ave-checkbox .ave-checkbox-card {
    @apply flex items-start gap-3 rounded-xl px-4 py-3.5 transition-all;
    border: none;
    background: transparent;
    color: rgba(161, 161, 170, 0.6);
  }

  .ave-checkbox:hover .ave-checkbox-card {
    color: rgba(161, 161, 170, 0.8);
  }

  .ave-checkbox input:checked ~ .ave-checkbox-card {
    color: rgba(161, 161, 170, 0.8);
  }

  .ave-checkbox-box {
    @apply mt-0.5 flex-shrink-0 transition-all;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.02);
  }

  .ave-checkbox:hover .ave-checkbox-box {
    border-color: rgba(255, 255, 255, 0.25);
  }

  .ave-checkbox input:checked ~ .ave-checkbox-card .ave-checkbox-box {
    border-color: #E91388;
    background: #E91388;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
  }

  /* Fix browser autofill/prefill background on dark theme */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active,
  textarea:-webkit-autofill,
  select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #050505 inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    transition: background-color 5000s ease-in-out 0s;
  }

  input.error {
    @apply border-red-400;
  }
  label.error {
    @apply text-destructive;
  }
  input.error:focus-visible {
    @apply ring-destructive;
  }
}

/* ============================================================
   LANDING PAGE COMPONENTS
   ============================================================ */
@layer components {
  /* --- Glassmorphic Navbar (public) --- */
  .navbar-glass {
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: saturate(140%) blur(20px);
    -webkit-backdrop-filter: saturate(140%) blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* --- Hero search pill (tunnel hero) ---
     Fields sit flush inside one rounded bar and the focused field lights up.
     The guest-size select menu renders its trigger with .admin-input, so that
     class is flattened here, and its button is stretched over the whole field
     so a click anywhere in "Event size" opens the menu. */
  .hero-search-field {
    @apply relative flex min-w-0 cursor-pointer flex-col gap-1 rounded-xl px-4 py-2.5 text-left transition-colors duration-200 sm:rounded-full sm:px-6;
  }

  .hero-search-field:hover {
    background: rgba(255, 255, 255, 0.03);
  }

  .hero-search-field:focus-within {
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px rgba(233, 19, 136, 0.5);
  }

  .hero-search-label {
    @apply text-[11px] font-semibold uppercase leading-none tracking-[0.14em];
    color: rgba(161, 161, 170, 0.75);
  }

  .hero-search-input,
  .hero-search .admin-input {
    @apply h-6 w-full border-0 bg-transparent p-0 text-[15px] leading-6 text-white shadow-none;
  }

  .hero-search-input::placeholder,
  .hero-search [data-ui--select-menu-target="label"]:not(.text-white) {
    color: rgba(161, 161, 170, 0.6);
  }

  .hero-search-input:focus,
  .hero-search .admin-input:focus,
  .hero-search .admin-input:hover:not(:focus):not(:disabled) {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    outline: none;
  }

  .hero-search [data-controller="ui--select-menu"] {
    position: static;
  }

  .hero-search .admin-input::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  /* --- Image skeleton placeholder ---
     Applied to a container div around an <img>. The shimmer shows while the
     image is loading; once the <img>'s pixel data covers it, the skeleton is
     hidden behind. No JS needed. */
  .image-skeleton {
    background-color: rgba(255, 255, 255, 0.03);
    background-image: linear-gradient(
      100deg,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0.04) 50%,
      rgba(255, 255, 255, 0) 70%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: image-skeleton-shimmer 1.6s ease-in-out infinite;
  }

  /* --- Marquee --- */
  .marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 40s linear infinite;
  }

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

  .marquee-track-reverse {
    display: flex;
    width: max-content;
    animation: marquee-reverse 45s linear infinite;
  }

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

  /* --- Vertical Carousel --- */
  .vertical-carousel-track {
    animation: vertical-carousel 20s linear infinite;
  }

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

  /* --- Scroll Animation States --- */
  .scroll-hidden {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

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

  /* --- Hero entrance — CSS-only with stagger via nth-child --- */
  .hero-item {
    opacity: 0;
    transform: scale(0.97) translateY(10px);
    animation: hero-enter 0.7s ease-out forwards;
  }

  .hero-item:nth-child(1) { animation-delay: 0.1s; }
  .hero-item:nth-child(2) { animation-delay: 0.2s; }
  .hero-item:nth-child(3) { animation-delay: 0.35s; }
  .hero-item:nth-child(4) { animation-delay: 0.5s; }
  .hero-item:nth-child(5) { animation-delay: 0.65s; }
  .hero-item:nth-child(6) { animation-delay: 0.8s; }

  /* --- SVG Animations --- */
  .svg-draw-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
  }

  .svg-draw-path.animate {
    animation: svg-draw 2s ease-out forwards;
  }

  .svg-pulse-node {
    animation: svg-pulse 3s ease-in-out infinite;
  }

  .svg-pulse-node:nth-child(2) { animation-delay: 0.5s; }
  .svg-pulse-node:nth-child(3) { animation-delay: 1s; }
  .svg-pulse-node:nth-child(4) { animation-delay: 1.5s; }
}

/* ============================================================
   KEYFRAMES (outside @layer so always compiled)
   ============================================================ */
@keyframes hero-enter {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

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

@keyframes image-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   FLATPICKR — Dark Orange Theme Override
   ============================================================ */
.flatpickr-calendar {
  background: #161616 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6) !important;
  font-family: 'Inter', sans-serif !important;
  padding: 12px !important;
  width: 300px !important;
}

.flatpickr-calendar::before,
.flatpickr-calendar::after {
  display: none !important;
}

/* Month header */
.flatpickr-months {
  padding: 0 0 8px !important;
  align-items: center !important;
}

.flatpickr-months .flatpickr-month {
  color: #fff !important;
  fill: #fff !important;
  height: 36px !important;
  background: transparent !important;
}

.flatpickr-current-month {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #fff !important;
  padding-top: 8px !important;
}

.flatpickr-current-month input.cur-year {
  color: #fff !important;
  font-weight: 600 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  color: #fff !important;
  background: transparent !important;
  font-weight: 600 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 6px;
}

.flatpickr-current-month .flatpickr-monthDropdown-months option {
  background: #161616 !important;
  color: #fff !important;
}

/* Nav arrows */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: rgba(161, 161, 170, 0.4) !important;
  fill: rgba(161, 161, 170, 0.4) !important;
  padding: 8px !important;
  border-radius: 8px !important;
  top: 4px !important;
  transition: all 0.15s !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #E91388 !important;
}

/* Weekday headers */
.flatpickr-weekdays {
  height: 32px !important;
  border-bottom: none !important;
}

span.flatpickr-weekday {
  color: rgba(161, 161, 170, 0.25) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  background: transparent !important;
}

/* Day cells */
.flatpickr-days {
  width: 276px !important;
  border: none !important;
}

.dayContainer {
  width: 276px !important;
  min-width: 276px !important;
  max-width: 276px !important;
}

.dayContainer + .dayContainer {
  box-shadow: none !important;
}

.flatpickr-day {
  color: rgba(161, 161, 170, 0.7) !important;
  border-radius: 10px !important;
  max-width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  font-size: 13px !important;
  border: 1px solid transparent !important;
  transition: all 0.15s !important;
}

.flatpickr-day:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

.flatpickr-day.today {
  border-color: rgba(233, 19, 136, 0.5) !important;
  color: #E91388 !important;
  background: transparent !important;
}

.flatpickr-day.today:hover {
  background: rgba(233, 19, 136, 0.1) !important;
  border-color: #E91388 !important;
  color: #E91388 !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
  background: #E91388 !important;
  border-color: #E91388 !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 0 12px rgba(233, 19, 136, 0.3) !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: rgba(161, 161, 170, 0.1) !important;
  background: transparent !important;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: rgba(161, 161, 170, 0.12) !important;
}

.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: transparent !important;
}

.flatpickr-day.inRange {
  background: rgba(233, 19, 136, 0.08) !important;
  border-color: transparent !important;
  box-shadow: -5px 0 0 rgba(233, 19, 136, 0.08), 5px 0 0 rgba(233, 19, 136, 0.08) !important;
}

/* Year input */
.numInputWrapper {
  border-radius: 4px;
}

.numInputWrapper:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

.numInputWrapper span {
  border-color: transparent !important;
  opacity: 0 !important;
}

.numInputWrapper:hover span {
  opacity: 1 !important;
}

.numInputWrapper span:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

.numInputWrapper span.arrowUp:after {
  border-bottom-color: rgba(161, 161, 170, 0.5) !important;
}

.numInputWrapper span.arrowDown:after {
  border-top-color: rgba(161, 161, 170, 0.5) !important;
}

/* Flatpickr wrapper — don't constrain inline-block */
.flatpickr-wrapper {
  display: block !important;
  width: 100% !important;
}

/* ============================================================
   HOW IT WORKS — Micro Animations
   ============================================================ */

/* Typing cursor blink on search bar */
.hiw-typing-text {
  border-right: 2px solid rgba(233, 19, 136, 0.5);
  animation: hiw-cursor-blink 1s step-end infinite;
  white-space: nowrap;
  overflow: hidden;
}

@keyframes hiw-cursor-blink {
  0%, 100% { border-color: rgba(233, 19, 136, 0.5); }
  50% { border-color: transparent; }
}

/* Venue cards sliding in from right */
.hiw-cards-slide {
  animation: hiw-slide-cards 8s ease-in-out infinite;
}

@keyframes hiw-slide-cards {
  0%, 20% { transform: translateX(0); }
  30%, 50% { transform: translateX(-130px); }
  60%, 80% { transform: translateX(-260px); }
  90%, 100% { transform: translateX(0); }
}

/* Floating filter badges */
.hiw-float {
  animation: hiw-float-badge 4s ease-in-out infinite;
}

@keyframes hiw-float-badge {
  0%, 100% { transform: translateY(0); opacity: 0.8; }
  50% { transform: translateY(-4px); opacity: 1; }
}

/* Send button pulse */
.hiw-send {
  animation: hiw-send-pulse 3s ease-in-out infinite;
}

@keyframes hiw-send-pulse {
  0%, 100% { transform: translate(0, 0) scale(1); }
  30% { transform: translate(3px, -3px) scale(1.05); }
  60% { transform: translate(0, 0) scale(1); }
}

/* Ripple rings from send */
.hiw-ripple {
  animation: hiw-ripple-expand 2s ease-out infinite;
}

@keyframes hiw-ripple-expand {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(4); opacity: 0; }
}

/* Proposal cards sliding in from left */
.hiw-proposal-slide {
  animation: hiw-proposal-in 4s ease-out infinite;
}

@keyframes hiw-proposal-in {
  0% { transform: translateX(-20px); opacity: 0; }
  15%, 85% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

/* Compare checkmark pulse */
.hiw-pulse-ring {
  animation: hiw-check-pulse 2s ease-in-out infinite;
}

@keyframes hiw-check-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.3); }
  50% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
}

/* Calendar date selection glow */
.hiw-calendar-select {
  color: white;
  background: #E91388;
  animation: hiw-cal-glow 2s ease-in-out infinite;
}

@keyframes hiw-cal-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(233, 19, 136, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(233, 19, 136, 0.1); }
}

/* Confirmed badge entrance */
.hiw-confirmed {
  animation: hiw-confirmed-pop 3s ease-out infinite;
}

@keyframes hiw-confirmed-pop {
  0% { transform: scale(0.8); opacity: 0; }
  15%, 85% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Confetti particles */
.hiw-confetti {
  animation: hiw-confetti-float 3s ease-out infinite;
}

@keyframes hiw-confetti-float {
  0% { transform: translateY(0) scale(0); opacity: 0; }
  20% { transform: translateY(-10px) scale(1); opacity: 1; }
  100% { transform: translateY(-30px) scale(0.5); opacity: 0; }
}

/* ============================================================
   ADMIN DASHBOARD COMPONENTS
   ============================================================ */
@layer components {
  /* --- Admin Card --- */
  .admin-card {
    border: none;
    border-radius: 12px;
    background: #0c0c0c;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.03),
      0 1px 2px 0 rgba(0, 0, 0, 0.4);
    transition: background-color 200ms ease;
  }

  /* --- Admin Button Variants --- */
  .admin-btn {
    @apply inline-flex cursor-pointer items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium transition-all duration-200;
  }

  .admin-btn:disabled {
    @apply opacity-50 cursor-not-allowed;
  }

  .admin-btn-primary {
    background: #E91388;
    border: 1px solid rgba(233, 19, 136, 0.3);
    color: #fff;
    box-shadow: 0 0 24px rgba(233, 19, 136, 0.25);
  }

  .admin-btn-primary:hover:not(:disabled) {
    box-shadow: 0 0 32px rgba(233, 19, 136, 0.4);
  }

  .admin-btn-white {
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.9);
    color: #151515;
    border-radius: 0.75rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5), 0 4px 12px -2px rgba(0, 0, 0, 0.35);
  }

  .admin-btn-white:hover:not(:disabled) {
    background: #f5f5f5;
    box-shadow:
      0 1px 2px 0 rgba(0, 0, 0, 0.5),
      0 8px 20px -2px rgba(0, 0, 0, 0.55),
      0 0 0 4px rgba(255, 255, 255, 0.05);
    transform: translateY(-1px);
  }

  .admin-btn-outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-radius: 0.75rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  }

  .admin-btn-outline:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4), 0 4px 12px -2px rgba(0, 0, 0, 0.3);
  }

  .admin-btn-secondary {
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.02);
    color: #a1a1aa;
  }

  .admin-btn-secondary:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
  }

  .admin-btn-danger {
    border: 1px solid rgba(239, 68, 68, 0.2);
    background: rgba(239, 68, 68, 0.05);
    color: #f87171;
  }

  .admin-btn-danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.1);
  }

  .admin-btn-ghost {
    border: none;
    background: transparent;
    color: #a1a1aa;
  }

  .admin-btn-ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.03);
  }

  /* --- Admin Input / Textarea / Select --- */
  .admin-input {
    @apply w-full rounded-lg px-3.5 py-2.5 text-sm text-white placeholder-[#a1a1aa]/50;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: #161616;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
  }

  .admin-input:hover:not(:focus):not(:disabled) {
    border-color: rgba(255, 255, 255, 0.1);
    background: #1a1a1a;
  }

  .admin-input:focus {
    border-color: rgba(233, 19, 136, 0.5);
    background: #1a1a1a;
    box-shadow: 0 0 0 3px rgba(233, 19, 136, 0.12);
    outline: none;
  }

  .admin-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .admin-input.is-invalid,
  .admin-input.is-invalid:hover {
    border-color: rgba(239, 68, 68, 0.6);
  }

  .admin-input.is-invalid:focus {
    border-color: rgba(239, 68, 68, 0.7);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
  }

  /* --- Admin Label --- */
  .admin-label {
    @apply block text-xs font-semibold uppercase tracking-widest;
    color: rgba(161, 161, 170, 0.5);
  }

  /* --- Admin Badge Variants --- */
  .admin-badge {
    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium;
  }

  .admin-badge-default {
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.03);
    color: #a1a1aa;
  }

  .admin-badge-success {
    border: 1px solid rgba(34, 197, 94, 0.2);
    background: rgba(34, 197, 94, 0.08);
    color: #4ade80;
  }

  .admin-badge-warning {
    border: 1px solid rgba(245, 158, 11, 0.2);
    background: rgba(245, 158, 11, 0.08);
    color: #fbbf24;
  }

  .admin-badge-danger {
    border: 1px solid rgba(239, 68, 68, 0.2);
    background: rgba(239, 68, 68, 0.08);
    color: #f87171;
  }

  .admin-badge-info {
    border: 1px solid rgba(59, 130, 246, 0.2);
    background: rgba(59, 130, 246, 0.08);
    color: #60a5fa;
  }

  .admin-badge-accent {
    border: 1px solid rgba(233, 19, 136, 0.2);
    background: rgba(233, 19, 136, 0.08);
    color: #E91388;
  }

  /* For badges overlaying images — dark scrim + white text so it stays
     readable against any image content */
  .admin-badge-overlay {
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(4, 7, 13, 0.7);
    color: #ffffff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .admin-badge-overlay::before {
    content: "";
    display: inline-block;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: #E91388;
    margin-right: 0.375rem;
    vertical-align: middle;
  }

  /* --- Admin Table --- */
  .admin-table {
    @apply w-full text-sm;
    border-collapse: separate;
    border-spacing: 0;
  }

  .admin-table thead {
    background: transparent;
  }

  .admin-table th {
    @apply px-4 py-3 text-left font-medium uppercase tracking-widest;
    font-size: 10px;
    color: rgba(161, 161, 170, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .admin-table th:first-child {
    padding-left: 1.5rem;
  }

  .admin-table th:last-child {
    padding-right: 1.5rem;
  }

  .admin-table tbody tr {
    transition: background-color 0.15s ease;
  }

  .admin-table tbody tr + tr td {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
  }

  .admin-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.025);
  }

  .admin-table tbody tr:last-child td {
    border-bottom: none;
  }

  .admin-table td {
    @apply px-4 py-4;
    color: #a1a1aa;
    transition: background-color 0.15s ease;
  }

  .admin-table td:first-child {
    padding-left: 1.5rem;
  }

  .admin-table td:last-child {
    padding-right: 1.5rem;
  }

  /* --- Admin Sidebar --- */
  .admin-sidebar-link {
    @apply flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-150;
    color: #a1a1aa;
    opacity: 0.7;
  }

  .admin-sidebar-link:hover {
    background: rgba(255, 255, 255, 0.03);
    opacity: 1;
  }

  .admin-sidebar-link-active {
    @apply flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium;
    background: rgba(255, 255, 255, 0.04);
    color: #E91388;
    opacity: 1;
  }

  .admin-sidebar-link-active .sidebar-label {
    color: #fff;
  }

  .admin-sidebar-section-label {
    @apply px-3 text-xs font-semibold uppercase tracking-widest;
    color: rgba(161, 161, 170, 0.4);
  }

  /* --- Admin Tabs (segmented control) --- */
  .admin-tabs {
    @apply inline-flex items-center gap-0.5 rounded-xl p-1;
    background: #0c0c0c;
    border: 1px solid rgba(255, 255, 255, 0.04);
  }

  .admin-tab {
    @apply inline-flex items-center justify-center rounded-lg px-3.5 py-1.5 text-sm font-medium transition-all duration-150;
    color: rgba(161, 161, 170, 0.7);
  }

  .admin-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.03);
  }

  .admin-tab-active {
    @apply inline-flex items-center justify-center rounded-lg px-3.5 py-1.5 text-sm font-medium;
    background: #1e1e1e;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  }

  /* --- Select Menu — show check on active item --- */
  [data-ui--select-menu-target="item"][data-active="true"] .check-icon {
    display: block;
  }

  /* --- Collapsible Sidebar --- */
  aside[data-controller~="sidebar-collapse"] {
    transition: width 200ms ease;
  }

  aside[data-collapsed="true"] {
    width: 4rem;
  }

  aside[data-collapsed="true"] .sidebar-label,
  aside[data-collapsed="true"] .sidebar-brand-text,
  aside[data-collapsed="true"] .admin-sidebar-section-label {
    display: none;
  }

  aside[data-collapsed="true"] .admin-sidebar-link,
  aside[data-collapsed="true"] .admin-sidebar-link-active {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  aside[data-collapsed="true"] .sidebar-brand {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  aside[data-collapsed="true"] .sidebar-toggle-icon {
    transform: rotate(180deg);
  }

  /* When the desktop sidebar is collapsed, reclaim the freed width for <main>. */
  @media (min-width: 1024px) {
    body:has(aside[data-collapsed="true"]) main {
      margin-left: 4rem;
    }
  }

  /* --- Admin Page Header --- */
  .admin-page-title {
    @apply text-xl font-semibold tracking-tight text-white sm:text-2xl md:text-[28px];
  }

  .admin-page-description {
    @apply text-sm;
    color: rgba(161, 161, 170, 0.6);
  }

  /* --- Admin Stat Card --- */
  .admin-stat-card {
    @apply admin-card p-5;
  }

  .admin-stat-card .stat-label {
    @apply text-xs font-semibold uppercase tracking-widest;
    color: rgba(161, 161, 170, 0.5);
  }

  .admin-stat-card .stat-value {
    @apply mt-2 text-2xl font-bold text-white;
  }
}

/* ============================================================
   SVG ANIMATION HELPERS (non-Tailwind)
   ============================================================ */
.svg-neural-pulse {
  animation: svg-pulse 5s ease-in-out infinite;
}

.svg-neural-pulse:nth-child(2) { animation-delay: 1s; }
.svg-neural-pulse:nth-child(3) { animation-delay: 2s; }
.svg-neural-pulse:nth-child(4) { animation-delay: 3s; }

.svg-bar-bounce {
  transform-origin: bottom;
  animation: bar-bounce 1.2s ease-in-out infinite;
}
.svg-bar-bounce:nth-child(1) { animation-delay: 0s; }
.svg-bar-bounce:nth-child(2) { animation-delay: 0.2s; }
.svg-bar-bounce:nth-child(3) { animation-delay: 0.4s; }
.svg-bar-bounce:nth-child(4) { animation-delay: 0.6s; }

.svg-connector-slide {
  animation: connector-slide 2s ease-in-out infinite;
}

/* ============================================================
   RANGE INPUT (preserved from original)
   ============================================================ */
input[type="range"] {
  display: inline-block;
  vertical-align: middle;
  font-size: 1em;
  -webkit-appearance: none;
  margin-right: 15px;
  min-width: 200px;
  height: 7px;
  background: #1a1d2b;
  border-radius: 5px;
  background-image: linear-gradient(#E91388, #E91388);
  background-repeat: no-repeat;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #fff;
  cursor: ew-resize;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
  transition: background 0.3s ease-in-out;
}

input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #fff;
  cursor: ew-resize;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
  transition: background 0.3s ease-in-out;
}

input[type="range"]::-ms-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #fff;
  cursor: ew-resize;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
}

input[type="range"]::-moz-range-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

input[type="range"]::-ms-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

/* ============================================================
   ACCORDION (preserved)
   ============================================================ */
.st-accordion .st-accordion__icon:before {
  content: "\25BC";
  display: inline-block;
  margin-right: 5px;
  font-size: 80%;
  text-decoration: none;
  transform: rotate(-90deg);
}
.st-accordion .st-accordion__icon--opened:before {
  transform: rotate(0deg);
}
.st-accordion .st-accordion__content:not(.st-accordion__content--visible) {
  height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: all 0.2s;
}
.st-accordion .st-accordion__content.st-accordion__content--visible {
  opacity: 1;
  visibility: visible;
  overflow: hidden;
  transition: all 0.2s;
}

/* ============================================================
   SCROLLBAR STYLING
   ============================================================ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* --- Google Places Autocomplete dark theme --- */
.pac-container {
  background-color: #050505 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4) !important;
  margin-top: 4px !important;
  padding: 4px !important;
  max-height: 14rem !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  text-align: left !important;
}

.pac-item {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0.5rem !important;
  color: rgba(161, 161, 170, 0.8) !important;
  cursor: pointer !important;
  line-height: 2.5rem !important;
  padding: 0 12px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: left !important;
}

.pac-item:hover,
.pac-item-selected {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

.pac-item-query {
  color: #ffffff !important;
  font-size: 0.875rem !important;
}

.pac-matched {
  color: #E91388 !important;
}

.pac-icon {
  display: none !important;
}

.pac-container::after {
  display: none !important;
}


/* ---------------------------------------------------------------------------
   Landing section entrances (section_intro_controller.js)
   --------------------------------------------------------------------------- */
@layer components {
  .si-section { position: relative; }

  /* Masked words (created by section_intro_controller) */
  .lh-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding: 0 0.12em 0.1em 0;
    margin: 0 -0.12em -0.1em 0;
  }
  .lh-word > span { display: inline-block; transform-origin: 0 100%; will-change: transform; }

  /* Brand hairline drawn from the centre as the section arrives */
  .si-line::before {
    content: "";
    position: absolute; top: 0; left: 50%;
    width: min(72rem, 90%); height: 1px;
    background: linear-gradient(90deg, transparent, rgba(233,19,136,.7) 35%, rgba(244,137,45,.6) 65%, transparent);
    transform: translateX(-50%) scaleX(0);
    transition: transform 1.4s cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
  }
  .si-line.is-in::before { transform: translateX(-50%) scaleX(1); }

  /* Title words */
  .si-section .lh-word > span {
    transform: translate3d(0, 110%, 0) rotate(4deg);
    transition: transform 1s cubic-bezier(.2,.8,.2,1);
    transition-delay: calc(.1s + var(--i, 0) * .06s);
  }
  .si-section.is-in .lh-word > span { transform: none; }

  /* Cards, paragraphs, buttons */
  .si-item, .si-sub {
    opacity: 0;
    filter: blur(8px);
    transition: opacity .8s ease-out, transform 1s cubic-bezier(.2,.8,.2,1), filter .8s ease-out;
    transition-delay: var(--d, 0s);
  }
  .si-item { transform: translate3d(0, 40px, 0) scale(.97); }
  .si-sub  { transform: translate3d(0, 16px, 0); }
  .si-section.is-in .si-item,
  .si-section.is-in .si-sub { opacity: 1; filter: none; transform: none; }
  .si-item.si-done, .si-sub.si-done { transition: none; filter: none; }

  /* Images: bottom-up unveil + settle */
  .si-img {
    clip-path: inset(100% 0 0 0);
    transform: scale(1.15);
    transition: clip-path 1.2s cubic-bezier(.7,0,.2,1), transform 1.8s cubic-bezier(.2,.8,.2,1);
    transition-delay: var(--d, 0s), var(--d, 0s);
  }
  .si-section.is-in .si-img { clip-path: inset(0 0 0 0); transform: none; }
  .si-section.is-in .si-img.si-done { clip-path: none; transition: transform .5s ease; transition-delay: 0s; }

  @media (prefers-reduced-motion: reduce) {
    .si-item, .si-sub, .si-img, .si-section .lh-word > span { opacity: 1 !important; filter: none !important; transform: none !important; clip-path: none !important; transition: none !important; }
    .si-line::before { transform: translateX(-50%) scaleX(1); transition: none; }
  }
}

/* ---------------------------------------------------------------------------
   Landing motion: hero copy entrance, the hero-to-trust-band cover, scroll-
   linked section flow and the heading light sweep. Outside @layer on purpose:
   some of these classes are only ever added by JavaScript.
   --------------------------------------------------------------------------- */

/* Hero copy. Pure CSS with fill-mode both, so the first paint is already the
   start of the animation: no flash before JavaScript, and it runs without JS. */
.hero-title .hero-word { display: inline-block; white-space: nowrap; perspective: 700px; }
.hero-title .hero-char,
.hero-title .hero-accent {
  display: inline-block;
  transform-origin: 50% 85%;
  animation: hero-letter 1s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(.3s + var(--i, 0) * .045s);
}
/* Once "perfect" lands, a highlight sweeps across it like a passing spotlight. */
.hero-title .hero-accent {
  background:
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .95) 50%, transparent 62%) 130% 0 / 260% 100% no-repeat,
    var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  animation: hero-letter 1s cubic-bezier(.2, .8, .2, 1) both, light-sweep 1.5s cubic-bezier(.45, 0, .2, 1) 1.15s both;
  animation-delay: calc(.3s + var(--i, 0) * .045s), 1.15s;
}
.hero-fade { animation: hero-fade-up .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0s); }
/* The search pill sends out one pink ring as it settles. */
.hero-search-wrap .hero-search { animation: hero-ring 1.6s ease-out 1.35s both; }

@keyframes hero-letter {
  from { opacity: 0; transform: translate3d(0, .45em, 0) rotateX(-95deg); filter: blur(8px); }
  60% { opacity: 1; filter: blur(0); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes hero-fade-up {
  from { opacity: 0; transform: translate3d(0, 24px, 0); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes hero-ring {
  from { box-shadow: 0 0 0 0 rgba(233, 19, 136, .55), 0 25px 50px -12px rgba(0, 0, 0, .4); }
  to { box-shadow: 0 0 0 18px rgba(233, 19, 136, 0), 0 25px 50px -12px rgba(0, 0, 0, .4); }
}
@keyframes light-sweep { to { background-position: -40% 0, 0 0; } }

/* Hero to trust band: the hero stays put while the band slides up over it as a
   rounded card; --cover (0..1, from the hero's 3D controller) shrinks and dims it.
   On screens shorter than the hero's min height (--hero-min) it pins by its bottom
   edge instead, so the whole hero scrolls into view before the band covers it. */
.stage-stack > .hero-3d {
  position: sticky;
  top: min(0px, 100svh - var(--hero-min, 0px));
  transform: scale(calc(1 - var(--cover, 0) * .06));
  transform-origin: 50% 30%;
}
.hero-3d .hero-cover { opacity: calc(var(--cover, 0) * .8); }
.stage-stack > .hero-3d + section {
  position: relative;
  z-index: 1;
  background: #0a0a0a;
  border-radius: 32px 32px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 -40px 80px -20px rgba(0, 0, 0, .7);
}

/* Section flow (section_flow_controller.js sets --enter and --exit, each 0..1):
   content rises and settles as a section arrives, and drifts up and fades a
   little as it leaves. Without JavaScript the defaults leave everything in place. */
.flow-section > * {
  transform: translate3d(0, calc((1 - var(--enter, 1)) * 72px - var(--exit, 0) * 56px), 0) scale(calc(.955 + var(--enter, 1) * .045));
  opacity: calc(1 - var(--exit, 0) * .6);
  transform-origin: 50% 0;
}

/* Section headings: after the words rise, a highlight sweeps the italic accent. */
.si-section h2 em {
  background:
    linear-gradient(105deg, transparent 38%, rgba(255, 238, 247, .95) 50%, transparent 62%) 130% 0 / 260% 100% no-repeat,
    #F042A1;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.si-section.is-in h2 em { animation: light-sweep 1.5s cubic-bezier(.45, 0, .2, 1) .9s both; }

@media (prefers-reduced-motion: reduce) {
  .hero-title .hero-char, .hero-title .hero-accent, .hero-fade, .hero-search-wrap .hero-search, .si-section.is-in h2 em { animation: none !important; }
  .stage-stack > .hero-3d { transform: none; }
  .flow-section > * { transform: none !important; opacity: 1 !important; }
}