@import "tailwindcss";
@import "@fontsource-variable/google-sans-flex/wght.css";

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

@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: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --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);
  --font-sans: var(--font-antebas);
  --font-display: var(--font-antebas);
  --font-wordmark: "Google Sans Flex Variable", system-ui, sans-serif;
  --font-hero-serif: var(--font-hero-serif);
  --color-brand-primary: #37a47a;
  --color-brand-secondary: #b9d8c9;
  --color-brand-tertiary: #30614c;
  --color-brand-black: #000000;
  --color-brand-grey-1: #5b5b5b;
  --color-brand-grey-2: #a0a0a0;
  --color-brand-grey-3: #dbdbdb;
  --color-brand-white: #ffffff;
  --color-brand-green: var(--color-brand-primary);
  --color-brand-green-dark: var(--color-brand-tertiary);
  --color-surface-muted: #e8f2ec;
  --color-text-muted: #5b5b5b;
}

:root {
  --radius: 0.75rem;
  --brand-primary: #37a47a;
  --brand-secondary: #b9d8c9;
  --brand-tertiary: #30614c;
  --brand-black: #000000;
  --brand-grey-1: #5b5b5b;
  --brand-grey-2: #a0a0a0;
  --brand-grey-3: #dbdbdb;
  --brand-white: #ffffff;
  --brand-white-soft: #fafafa;
  --brand-surface-muted: #e8f2ec;
  --background: var(--brand-white);
  --foreground: var(--brand-tertiary);
  --card: var(--brand-white);
  --card-foreground: var(--brand-tertiary);
  --popover: var(--brand-white);
  --popover-foreground: var(--brand-tertiary);
  --primary: var(--brand-primary);
  --primary-foreground: var(--brand-white);
  --secondary: var(--brand-secondary);
  --secondary-foreground: var(--brand-tertiary);
  --muted: var(--brand-surface-muted);
  --muted-foreground: var(--brand-grey-1);
  --accent: var(--brand-primary);
  --accent-foreground: var(--brand-white);
  --destructive: #dc2626;
  --border: var(--brand-grey-3);
  --input: var(--brand-grey-3);
  --ring: var(--brand-primary);
  --hero: var(--brand-tertiary);
  --section-muted: var(--brand-surface-muted);
  --section-inverse: var(--brand-primary);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground antialiased;
    font-family: var(--font-antebas), system-ui, sans-serif;
  }
  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-antebas), system-ui, sans-serif;
    letter-spacing: -0.02em;
  }

  /* Landing hero — keep Syne / DM Sans / Playfair (see lib/fonts/hero.ts) */
  [data-section-hero],
  [data-section-hero] .topo-content-layer,
  [data-section-hero] .topo-content-readable {
    font-family: var(--font-hero-body), system-ui, sans-serif;
  }

  [data-section-hero] h1,
  [data-section-hero] h2,
  [data-section-hero] h3,
  [data-section-hero] h4 {
    font-family: var(--font-hero-display), system-ui, sans-serif;
  }

  [data-section-hero] .font-display {
    font-family: var(--font-hero-display), system-ui, sans-serif;
  }
}

@layer utilities {
  .font-wordmark {
    font-family: var(--font-wordmark);
    font-weight: 900;
    font-variation-settings: "wght" 900;
    letter-spacing: -0.02em;
  }
  .font-hero-serif {
    font-family: var(--font-hero-serif), Georgia, "Times New Roman", serif;
  }
  .text-balance {
    text-wrap: balance;
  }
  .section-inverse {
    background-color: var(--brand-primary);
    color: var(--brand-white-soft);
  }
  .section-green {
    background-color: var(--brand-primary);
    color: var(--brand-white-soft);
  }

  @keyframes geometric-mess-drift {
    0% {
      transform: translate(0, 0) scale(1);
    }
    50% {
      transform: translate(0.4%, -0.3%) scale(1.008);
    }
    100% {
      transform: translate(-0.3%, 0.2%) scale(1.004);
    }
  }
  .geometric-mess-layer {
    animation: geometric-mess-drift 56s ease-in-out infinite alternate;
  }

  .grain {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  }

  /* White-section contour lines — slow parallax drift */
  @keyframes wavy-contour-drift-a {
    0% {
      transform: translate(0, 0) scale(1);
    }
    50% {
      transform: translate(2.5%, -1.2%) scale(1.03);
    }
    100% {
      transform: translate(-1.5%, 0.8%) scale(1.01);
    }
  }
  @keyframes wavy-contour-drift-b {
    0% {
      transform: translate(0, 0) scale(1.02);
    }
    50% {
      transform: translate(-2%, 1%) scale(1.04);
    }
    100% {
      transform: translate(1.8%, -0.6%) scale(1.01);
    }
  }
  .wavy-contour-layer--primary {
    animation: wavy-contour-drift-a 48s ease-in-out infinite alternate;
  }
  .wavy-contour-layer--secondary {
    animation: wavy-contour-drift-b 62s ease-in-out infinite alternate-reverse;
  }

  /* Full-page atmosphere — brand wash drift (behind grain + lines) */
  @keyframes backdrop-bloom-a {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    50% {
      transform: translate(4%, -3%) scale(1.08);
    }
  }
  @keyframes backdrop-bloom-b {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    50% {
      transform: translate(-5%, 4%) scale(1.06);
    }
  }
  .backdrop-bloom-a {
    animation: backdrop-bloom-a 32s ease-in-out infinite;
  }
  .backdrop-bloom-b {
    animation: backdrop-bloom-b 38s ease-in-out infinite;
  }

  /* Seamless horizontal pan — valley / ocean line bands */
  @keyframes valley-pan-slow {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }
  .valley-pan-slow {
    animation: valley-pan-slow 140s linear infinite;
  }
  .valley-pan-slower {
    animation: valley-pan-slow 220s linear infinite;
  }
  .valley-pan-medium {
    animation: valley-pan-slow 95s linear infinite;
  }
  .valley-pan-slower-reverse {
    animation: valley-pan-slow 220s linear infinite reverse;
  }
  .marquee {
    animation: marquee 40s linear infinite;
  }
  .marquee-winners {
    animation: marquee 55s linear infinite;
  }
  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .marquee,
    .marquee-winners {
      animation: none;
    }
    .backdrop-bloom-a,
    .backdrop-bloom-b,
    .valley-pan-slow,
    .valley-pan-slower,
    .valley-pan-medium,
    .valley-pan-slower-reverse {
      animation: none;
    }
  }
  .ticket-notch::before,
  .ticket-notch::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 1.5rem;
    height: 1.5rem;
    transform: translateX(-50%);
    border-radius: 9999px;
    background: var(--section-inverse, #0a0a0a);
  }
  .ticket-notch::before {
    top: -0.75rem;
  }
  .ticket-notch::after {
    bottom: -0.75rem;
  }

  /* Admission ticket — side notches + rounded body */
  .ticket-admission {
    border-radius: 1rem;
    --ticket-notch-fill: var(--section-inverse, var(--brand-primary));
  }
  .ticket-admission[data-ticket-notch="light"] {
    --ticket-notch-fill: var(--brand-surface-muted);
  }
  .ticket-admission::before,
  .ticket-admission::after {
    content: "";
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 9999px;
    background: var(--ticket-notch-fill);
    transform: translateY(-50%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  }
  .ticket-admission::before {
    left: -0.675rem;
  }
  .ticket-admission::after {
    right: -0.675rem;
  }

  /* Rift topography tokens */
  :root {
    --rift-scroll: 0;
    --rift-canvas: #fbfdfb;
    --rift-stroke: rgba(55, 164, 122, 0.18);
    --rift-stroke-minor: rgba(55, 164, 122, 0.26);
    --rift-stroke-inverse: rgba(255, 255, 255, 0.25);
    --rift-accent: var(--brand-secondary);
    --rift-channel: var(--brand-primary);
  }

  .rift-profile-partners .rift-contour-minor,
  .rift-profile-terrace-dense .rift-terrace-line {
    opacity: 1.15;
  }
  .rift-profile-privacy .rift-contour-path,
  .rift-profile-contact .rift-contour-path {
    opacity: 0.85;
  }
  .rift-profile-pitch .rift-channel-inner {
    stroke: var(--rift-accent);
  }
  .rift-profile-payment .rift-channel-outer {
    stroke: var(--rift-accent);
  }

  .rift-ambient-pulse .rift-contour-path {
    animation: rift-contour-pulse 5s ease-in-out infinite;
  }

  .rift-channel-open {
    background: radial-gradient(
      ellipse 12% 35% at 50% 45%,
      rgba(255, 179, 0, 0.08) 0%,
      transparent 65%
    );
    opacity: 0;
  }
  .rift-hero-intro .rift-channel-open {
    animation: rift-channel-open 10s cubic-bezier(0.22, 0.03, 0.2, 1) forwards;
  }
  .rift-hero-settled .rift-channel-open,
  .rift-hero-static .rift-channel-open {
    opacity: 1;
  }

  @keyframes rift-channel-open {
    0%,
    28% {
      opacity: 0;
      transform: scaleY(0.2);
    }
    50% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
      transform: scaleY(1);
    }
  }
  .rift-line-draw path {
    transition:
      stroke 0.85s ease,
      opacity 0.85s ease,
      stroke-dashoffset 0.2s ease-out;
  }
  .valley-pan-slow {
    animation-duration: calc(140s - 55s * var(--rift-scroll, 0));
  }
  .valley-pan-slower {
    animation-duration: calc(220s - 80s * var(--rift-scroll, 0));
  }
  .valley-pan-medium {
    animation-duration: calc(95s - 40s * var(--rift-scroll, 0));
  }
  .valley-pan-slower-reverse {
    animation-duration: calc(220s - 80s * var(--rift-scroll, 0));
  }

  /* Navbar tickets CTA — glow + text + arrow */
  @keyframes ticket-glow {
    0%,
    100% {
      box-shadow: 0 0 0 0 rgba(255, 179, 0, 0.4);
    }
    50% {
      box-shadow: 0 0 0 10px rgba(255, 179, 0, 0);
    }
  }
  @keyframes ticket-text-pulse {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.06);
    }
  }
  @keyframes ticket-arrow-nudge {
    0%,
    100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(4px);
    }
  }
  .ticket-cta-pulse {
    animation: ticket-glow 2.2s ease-in-out infinite;
  }
  .ticket-cta-text {
    display: inline-block;
    animation: ticket-text-pulse 2.2s ease-in-out infinite;
  }
  .ticket-cta-arrow {
    animation: ticket-arrow-nudge 2.2s ease-in-out infinite;
  }

  @keyframes ticket-card-enter {
    from {
      opacity: 0;
      transform: translateY(24px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .ticket-card-enter {
    animation: ticket-card-enter 0.6s ease-out both;
  }

  @media (prefers-reduced-motion: reduce) {
    .ticket-cta-pulse,
    .ticket-cta-text,
    .ticket-cta-arrow,
    .ticket-card-enter {
      animation: none;
    }
  }

  /* Mobile menu tickets — continuous right-to-left scroll */
  @keyframes ticket-menu-marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }
  .ticket-menu-marquee {
    animation: ticket-menu-marquee 11s linear infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .ticket-menu-marquee {
      animation: none;
    }
  }

  /* ─── Hero rift cinematic (10s intro) ─── */
  .font-hero-serif,
  .rift-hero-heading {
    font-family: var(--font-hero-serif), Georgia, "Times New Roman", serif;
  }

  /* ─── mainwhite.svg: hero (green tint) · footer (white on green) ─── */
  .topo-tone-light .topo-pattern-asset {
    mix-blend-mode: multiply;
    filter: sepia(0.35) saturate(2.2) hue-rotate(92deg) brightness(0.96) contrast(0.92);
  }

  /* Hero — soft topography lines, gentle opacity breathe only */
  .rift-hero-topo .topo-hero-pattern-img {
    opacity: 0.26;
    mix-blend-mode: multiply;
    filter: sepia(0.3) saturate(1.9) hue-rotate(92deg) brightness(0.98) contrast(0.88);
    transform: scale(1.06);
    object-position: 50% 50%;
    animation: topo-hero-fill-breathe 9s ease-in-out infinite;
  }

  .rift-hero-topo .topo-hero-water-flow-img {
    opacity: 0.12;
    mix-blend-mode: multiply;
    filter: sepia(0.3) saturate(1.8) hue-rotate(92deg) brightness(1.02) contrast(0.85);
    transform: scale(1.06);
    object-position: 50% 50%;
    animation: topo-hero-fill-pulse 9s ease-in-out infinite;
    animation-delay: -4.5s;
  }

  .topo-hero-water-shimmer {
    background: radial-gradient(
      ellipse 80% 60% at 50% 55%,
      rgba(45, 122, 82, 0.14) 0%,
      rgba(55, 164, 122, 0.06) 45%,
      transparent 72%
    );
    mix-blend-mode: soft-light;
    opacity: 0.5;
    animation: topo-hero-shimmer-breathe 11s ease-in-out infinite;
  }

  .topo-hero-channel-glow {
    background: radial-gradient(
      ellipse 70% 50% at 50% 58%,
      rgba(120, 200, 160, 0.1) 0%,
      rgba(45, 122, 82, 0.04) 50%,
      transparent 75%
    );
    mix-blend-mode: soft-light;
    opacity: 0.34;
    animation: topo-hero-glow-breathe 13s ease-in-out infinite;
  }

  .topo-hero-water-spotlight {
    background: radial-gradient(
      circle at var(--topo-hover-x, 50%) var(--topo-hover-y, 50%),
      rgba(120, 200, 160, 0.16) 0%,
      rgba(45, 122, 82, 0.06) 28%,
      transparent 48%
    );
    mix-blend-mode: soft-light;
    opacity: 0;
    transition: opacity 0.6s ease;
  }

  .rift-hero-topo--hover .topo-hero-water-flow-img {
    opacity: 0.18;
  }

  .rift-hero-topo--hover .topo-hero-water-shimmer {
    opacity: 0.42;
  }

  .rift-hero-topo--hover .topo-hero-channel-glow {
    opacity: 0.44;
  }

  .rift-hero-topo--hover .topo-hero-water-spotlight {
    opacity: 0.5;
  }

  .rift-hero-topo--hover .topo-hero-pattern-img {
    opacity: 0.32;
  }

  [data-section-hero] .topo-curvy-extend path {
    stroke-opacity: 0.18 !important;
  }

  @keyframes topo-hero-fill-breathe {
    0%,
    100% {
      opacity: 0.22;
    }
    50% {
      opacity: 0.3;
    }
  }

  @keyframes topo-hero-fill-pulse {
    0%,
    100% {
      opacity: 0.08;
    }
    50% {
      opacity: 0.16;
    }
  }

  @keyframes topo-hero-shimmer-breathe {
    0%,
    100% {
      opacity: 0.26;
    }
    50% {
      opacity: 0.38;
    }
  }

  @keyframes topo-hero-glow-breathe {
    0%,
    100% {
      opacity: 0.28;
    }
    50% {
      opacity: 0.4;
    }
  }

  /* Footer — white pattern at bottom only */
  .topo-footer-pattern .topo-footer-pattern-asset {
    opacity: 0.34;
    filter: brightness(0) invert(1);
    mix-blend-mode: soft-light;
  }

  .topo-content-layer {
    position: relative;
    z-index: 10;
  }

  /* Landing hero — topography only, no contour-line overlay */
  [data-section-hero] .wavy-contour-lines {
    display: none;
  }

  /* Readable brand-green copy on all white sections */
  .section-white {
    color: var(--brand-tertiary);
  }

  .section-white .topo-content-layer,
  .section-white .topo-card-surface,
  .section-white [data-slot="card"] {
    isolation: isolate;
  }

  .section-white .topo-content-layer,
  .section-white .topo-content-readable,
  .section-white .topo-content-layer :is(h1, h2, h3, h4, h5, h6, p, li, label, summary),
  .section-white .topo-content-readable :is(h1, h2, h3, h4, h5, h6, p, li, label, summary),
  .section-white .topo-content-layer a:not([data-slot="button"]),
  .section-white .topo-content-readable a:not([data-slot="button"]) {
    color: var(--brand-tertiary);
    text-shadow: none;
  }

  .section-white .topo-content-layer .text-foreground,
  .section-white .topo-content-readable .text-foreground {
    color: var(--brand-primary);
  }

  .section-white .topo-content-layer .text-muted-foreground,
  .section-white .topo-content-readable .text-muted-foreground {
    color: var(--brand-grey-1);
  }

  .section-white .topo-prose-surface-light :is(h1, h2, h3, h4, p, li, span) {
    color: var(--brand-tertiary);
  }

  .section-white .topo-prose-surface-light .text-muted-foreground {
    color: var(--brand-grey-1);
  }

  .section-white .topo-card-surface,
  .section-white .topo-card-surface :is(h1, h2, h3, h4, p, span, li, label, a),
  .section-white .bg-white.topo-card-surface :is(h1, h2, h3, h4, p, span),
  .section-white [data-slot="card"],
  .section-white [data-slot="card"] :is(h1, h2, h3, h4, p, span, li, label) {
    color: var(--brand-primary);
  }

  .section-white .topo-card-surface .text-muted-foreground,
  .section-white [data-slot="card"] .text-muted-foreground,
  .section-white .bg-white .text-muted-foreground {
    color: var(--brand-grey-1);
  }

  .section-white [data-slot="accordion-trigger"] {
    color: var(--brand-tertiary);
  }

  .section-white [data-slot="button"][data-variant="outline"],
  .section-white [data-slot="button"][data-variant="ghost"],
  .section-white [data-slot="button"][data-variant="link"] {
    color: var(--brand-primary);
  }

  .section-white [data-slot="button"][data-variant="outline"] {
    border-color: rgba(55, 164, 122, 0.35);
  }

  .section-white [data-slot="button"][data-variant="ghost"]:hover,
  .section-white [data-slot="button"][data-variant="link"]:hover {
    color: var(--brand-tertiary);
    background-color: rgba(55, 164, 122, 0.06);
  }

  header.section-white {
    color: var(--brand-tertiary);
  }

  header.section-white .text-muted-foreground {
    color: var(--brand-grey-1);
  }

  .section-white:has(.topo-curvy-extend) {
    overflow: visible;
  }

  .topo-curvy-extend {
    overflow: visible;
  }

  .topo-prose-surface-light {
    background: #ffffff;
    border: 1px solid rgba(55, 164, 122, 0.12);
    box-shadow: none;
    backdrop-filter: none;
  }

  .topo-prose-surface-green {
    border: none;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    padding: 0;
  }

  .topo-prose-surface {
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
  }

  @media (min-width: 768px) {
    .topo-prose-surface {
      padding: 1.5rem 2rem;
    }
  }

  .topo-card-layer,
  [data-slot="card"] {
    position: relative;
    z-index: 20;
    isolation: isolate;
  }

  /* Copy sitting directly on green */
  .section-green .topo-on-green-bg,
  .section-green .topo-on-green-bg :is(h1, h2, h3, h4, p, li, label) {
    color: #ffffff;
    text-shadow: none;
  }

  .section-green .topo-on-green-bg .text-muted-foreground {
    color: rgba(255, 255, 255, 0.88);
  }

  /* Muted copy on green (outside white cards) → white, not grey */
  .section-green
    .topo-content-layer
    :not([data-slot="card"]):not([data-slot="card"] *)
    .text-muted-foreground {
    color: rgba(255, 255, 255, 0.88);
  }

  /* White cards / surfaces inside green sections → brand green text */
  .section-green .topo-card-surface,
  .section-green .topo-card-surface :is(h1, h2, h3, h4, p, span, li, label, a),
  .section-green .bg-white,
  .section-green .bg-white :is(h1, h2, h3, h4, p, span, li, label),
  .section-green [data-slot="card"],
  .section-green [data-slot="card"] :is(h1, h2, h3, h4, p, span, li, label, a) {
    color: var(--brand-primary);
    text-shadow: none;
  }

  .section-green .topo-card-surface .text-muted-foreground,
  .section-green .bg-white .text-muted-foreground,
  .section-green [data-slot="card"] .text-muted-foreground,
  .section-green [data-slot="card"] [data-slot="card-description"],
  .section-green .topo-card-surface [data-slot="card-description"] {
    color: var(--brand-grey-1);
  }

  .section-green .ticket-admission,
  .section-green .ticket-admission :is(h1, h2, h3, h4, p, span, li, label) {
    color: var(--brand-primary);
    text-shadow: none;
  }

  .section-green .ticket-admission .text-muted-foreground,
  .section-green .ticket-admission p {
    color: var(--brand-grey-1);
  }

  .topo-card-link,
  .topo-card-link svg {
    color: var(--brand-primary);
  }
  .topo-card-link:hover,
  .topo-card-link:hover svg {
    color: var(--brand-tertiary);
  }

  .section-green .topo-on-green-bg [data-slot="button"][data-variant="outline"] {
    border-color: rgba(255, 255, 255, 0.75);
    background-color: transparent;
    color: #ffffff;
    box-shadow: none;
  }

  .section-green .topo-on-green-bg [data-slot="button"][data-variant="outline"]:hover {
    background-color: rgba(255, 255, 255, 0.14);
    color: #ffffff;
  }

  /* Ghost/link buttons on the green band (outside white cards) */
  .section-green .topo-on-green-bg [data-slot="button"][data-variant="ghost"],
  .section-green .topo-on-green-bg [data-slot="button"][data-variant="link"],
  .section-green > .topo-content-layer > div:not(:has([data-slot="card"])) [data-slot="button"][data-variant="outline"] {
    color: #ffffff;
  }

  .section-green .topo-on-green-bg [data-slot="button"][data-variant="ghost"]:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
  }

  /* Ghost/link/outline actions inside white cards on green sections */
  .section-green .topo-card-surface .topo-card-link,
  .section-green [data-slot="card"] .topo-card-link,
  .section-green .topo-card-surface .text-foreground,
  .section-green [data-slot="card"] .text-foreground,
  .section-green [data-slot="card"] [data-slot="button"][data-variant="ghost"],
  .section-green [data-slot="card"] [data-slot="button"][data-variant="link"],
  .section-green .topo-card-surface [data-slot="button"][data-variant="ghost"],
  .section-green .topo-card-surface [data-slot="button"][data-variant="link"],
  .section-green .bg-white [data-slot="button"][data-variant="ghost"],
  .section-green .bg-white [data-slot="button"][data-variant="link"] {
    color: var(--brand-primary);
  }

  .section-green [data-slot="card"] [data-slot="button"][data-variant="ghost"]:hover,
  .section-green [data-slot="card"] [data-slot="button"][data-variant="link"]:hover,
  .section-green .topo-card-surface [data-slot="button"][data-variant="ghost"]:hover,
  .section-green .topo-card-surface [data-slot="button"][data-variant="link"]:hover {
    color: var(--brand-tertiary);
    background-color: rgba(55, 164, 122, 0.06);
  }

  .section-green [data-slot="card"] [data-slot="button"][data-variant="outline"],
  .section-green .topo-card-surface [data-slot="button"][data-variant="outline"],
  .section-green .bg-white [data-slot="button"][data-variant="outline"] {
    border-color: rgba(55, 164, 122, 0.4);
    color: var(--brand-primary);
    background-color: transparent;
  }

  .section-green [data-slot="card"] [data-slot="button"][data-variant="outline"]:hover,
  .section-green .topo-card-surface [data-slot="button"][data-variant="outline"]:hover {
    border-color: rgba(55, 164, 122, 0.55);
    color: var(--brand-tertiary);
    background-color: rgba(55, 164, 122, 0.06);
  }

  .section-green [data-slot="card"] [data-slot="button"] svg,
  .section-green .topo-card-surface [data-slot="button"] svg {
    color: currentColor;
  }

  .section-green .topo-on-green-bg [data-slot="button"][data-variant="default"]:not([class*="bg-white"]):not(
      [class*="bg-primary"]
    ):not([class*="bg-[#37a47a"]]) {
    background-color: var(--brand-white);
    color: var(--brand-tertiary);
  }

  .section-green .topo-on-green-bg [data-slot="button"][data-variant="default"]:not([class*="bg-white"]):not(
      [class*="bg-primary"]
    ):not([class*="bg-[#37a47a"]]):hover {
    background-color: var(--brand-white-soft);
    color: var(--brand-tertiary);
  }

  /* Filled primary CTAs (e.g. Get tickets) — white label + icon on green */
  .section-green [data-slot="button"][data-variant="default"][class*="text-white"],
  .section-green [data-slot="button"][data-variant="default"][class*="text-[#ffffff]"],
  .section-green [data-slot="button"][data-variant="default"][class*="text-primary-foreground"] {
    color: var(--brand-white);
  }

  .section-green [data-slot="button"][data-variant="default"][class*="text-white"] svg,
  .section-green [data-slot="button"][data-variant="default"][class*="text-[#ffffff]"] svg,
  .section-green
    [data-slot="button"][data-variant="default"][class*="text-primary-foreground"]
    svg {
    color: currentColor;
  }

  .topo-pattern-clearance-section {
    -webkit-mask-image: radial-gradient(
      ellipse min(92%, 44rem) min(58%, 540px) at 50% 44%,
      transparent 0%,
      transparent 34%,
      rgba(0, 0, 0, 0.18) 50%,
      rgba(0, 0, 0, 0.62) 72%,
      #000 100%
    );
    mask-image: radial-gradient(
      ellipse min(92%, 44rem) min(58%, 540px) at 50% 44%,
      transparent 0%,
      transparent 34%,
      rgba(0, 0, 0, 0.18) 50%,
      rgba(0, 0, 0, 0.62) 72%,
      #000 100%
    );
  }

  .topo-pattern-clearance-header {
    -webkit-mask-image: radial-gradient(
      ellipse min(90%, 40rem) min(48%, 400px) at 50% 58%,
      transparent 0%,
      transparent 38%,
      rgba(0, 0, 0, 0.22) 56%,
      rgba(0, 0, 0, 0.68) 78%,
      #000 100%
    );
    mask-image: radial-gradient(
      ellipse min(90%, 40rem) min(48%, 400px) at 50% 58%,
      transparent 0%,
      transparent 38%,
      rgba(0, 0, 0, 0.22) 56%,
      rgba(0, 0, 0, 0.68) 78%,
      #000 100%
    );
  }


  .rift-crack-line {
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 179, 0, 0.15) 20%,
      rgba(255, 200, 100, 0.95) 50%,
      rgba(255, 179, 0, 0.15) 80%,
      transparent
    );
    box-shadow: 0 0 20px rgba(255, 179, 0, 0.6);
    transform-origin: center;
    opacity: 0;
  }

  .rift-floor-glow {
    background: radial-gradient(
      ellipse 40% 18% at 50% 100%,
      rgba(255, 179, 0, 0.12) 0%,
      rgba(255, 179, 0, 0.04) 40%,
      transparent 70%
    );
    opacity: 0;
  }

  .rift-plate-left,
  .rift-plate-right {
    transform-origin: center center;
  }

  .rift-ridge-draw,
  .rift-edge-draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }

  .rift-contour-path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }

  @keyframes rift-hero-crack {
    0%,
    8% {
      opacity: 0;
      transform: scaleX(0);
    }
    18% {
      opacity: 0.6;
      transform: scaleX(0.08);
    }
    32% {
      opacity: 1;
      transform: scaleX(1);
    }
    100% {
      opacity: 0.35;
      transform: scaleX(1);
    }
  }

  @keyframes rift-hero-floor {
    0%,
    25% {
      opacity: 0;
      transform: scale(0.6);
    }
    45% {
      opacity: 0.7;
    }
    70%,
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes rift-hero-split-left {
    0%,
    30% {
      transform: translateX(0);
    }
    65%,
    100% {
      transform: translateX(-6%);
    }
  }

  @keyframes rift-hero-split-right {
    0%,
    30% {
      transform: translateX(0);
    }
    65%,
    100% {
      transform: translateX(6%);
    }
  }

  @keyframes rift-hero-draw {
    0%,
    20% {
      stroke-dashoffset: 1;
      opacity: 0;
    }
    55% {
      stroke-dashoffset: 0.15;
      opacity: 0.7;
    }
    100% {
      stroke-dashoffset: 0;
      opacity: 1;
    }
  }

  @keyframes rift-hero-title-in {
    0%,
    58% {
      opacity: 0;
      transform: translateY(16px) scale(0.98);
    }
    78%,
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes rift-contour-drift {
    0%,
    100% {
      transform: translateX(0) translateY(0);
    }
    50% {
      transform: translateX(6px) translateY(-3px);
    }
  }

  @keyframes rift-contour-pulse {
    0%,
    100% {
      opacity: 0.12;
    }
    50% {
      opacity: 0.28;
    }
  }

  @keyframes rift-river-shimmer {
    0%,
    100% {
      opacity: 0.35;
      stroke-width: 1;
    }
    50% {
      opacity: 0.75;
      stroke-width: 1.6;
    }
  }

  .rift-hero-intro .rift-floor-glow {
    animation: rift-hero-floor 10s cubic-bezier(0.22, 0.03, 0.2, 1) forwards;
  }
  .rift-hero-intro .rift-plate-left {
    animation: rift-hero-split-left 10s cubic-bezier(0.22, 0.03, 0.2, 1) forwards;
  }
  .rift-hero-intro .rift-plate-right {
    animation: rift-hero-split-right 10s cubic-bezier(0.22, 0.2, 0.2, 1) forwards;
  }
  .rift-hero-intro .rift-ridge-draw,
  .rift-hero-intro .rift-edge-draw {
    animation: rift-hero-draw 10s cubic-bezier(0.22, 0.03, 0.2, 1) forwards;
  }
  .rift-hero-intro .rift-contour-path,
  .rift-hero-intro .rift-channel-inner {
    animation: rift-hero-draw 10s cubic-bezier(0.22, 0.03, 0.2, 1) forwards;
  }
  .rift-hero-intro .rift-hero-title {
    animation: rift-hero-title-in 10s cubic-bezier(0.22, 0.03, 0.2, 1) forwards;
  }
  .rift-hero-settled .rift-contour-morph {
    animation: rift-contour-drift 14s ease-in-out infinite;
  }
  .rift-hero-settled .rift-contour-path,
  .rift-hero-settled .rift-channel-outer,
  .rift-hero-settled .rift-channel-inner {
    animation: rift-contour-pulse 5s ease-in-out infinite;
    stroke-dashoffset: 0;
  }
  .rift-hero-settled .rift-channel-inner {
    animation: rift-river-shimmer 4s ease-in-out infinite;
  }
  .rift-hero-settled .rift-floor-glow {
    opacity: 0.5;
  }
  .rift-hero-settled .rift-hero-title {
    opacity: 1;
  }

  /* Static final frame — reduced motion */
  .rift-hero-static .rift-floor-glow {
    opacity: 0.45;
  }
  .rift-hero-static .rift-contour-path,
  .rift-hero-static .rift-channel-outer,
  .rift-hero-static .rift-channel-inner {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  .rift-hero-static .rift-hero-title {
    opacity: 1;
  }

  /* Site-wide pulsing curved lines */
  @keyframes rift-pulse-opacity {
    0%,
    100% {
      opacity: 0.14;
    }
    50% {
      opacity: calc(0.22 + var(--rift-scroll, 0) * 0.35);
    }
  }

  .rift-pulse-animate {
    animation: rift-pulse-opacity 4.5s ease-in-out infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    .wavy-contour-layer--primary,
    .wavy-contour-layer--secondary,
    .wavy-contour-layer,
    .geometric-mess-layer {
      animation: none !important;
    }

    .rift-hero-intro .rift-floor-glow,
    .rift-hero-intro .rift-channel-open,
    .rift-hero-intro .rift-contour-path,
    .rift-hero-intro .rift-channel-outer,
    .rift-hero-intro .rift-channel-inner,
    .rift-hero-intro .rift-hero-title,
    .rift-hero-settled .rift-contour-morph,
    .rift-hero-settled .rift-contour-path,
    .rift-hero-settled .rift-channel-inner,
    .rift-ambient-pulse .rift-contour-path,
    .rift-pulse-animate,
    .rift-hero-topo .topo-hero-pattern-img {
      animation: none !important;
      opacity: 0.28 !important;
    }

    .rift-hero-topo .topo-hero-water-flow-img,
    .rift-hero-topo .topo-hero-water-shimmer,
    .rift-hero-topo .topo-hero-channel-glow,
    .rift-hero-topo .topo-hero-water-spotlight {
      animation: none !important;
      opacity: 0 !important;
    }
  }
}
