@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-body);
  --font-display: var(--font-display);
  --font-wordmark: "Google Sans Flex Variable", system-ui, sans-serif;
  --font-hero-serif: var(--font-hero-serif);
  --color-brand-green: #1a5c38;
  --color-brand-green-dark: #0d3d26;
  --color-brand-gold: #ffb300;
  --color-brand-blue: #1f3d7e;
  --color-brand-navy: #0f0404;
  --color-surface-muted: #f7f7f7;
  --color-text-muted: #767676;
}

:root {
  --radius: 0.75rem;
  --background: #ffffff;
  --foreground: #0d3d26;
  --card: #ffffff;
  --card-foreground: #0d3d26;
  --popover: #ffffff;
  --popover-foreground: #0d3d26;
  /* Primary: brand green · Secondary: white */
  --primary: #1a5c38;
  --primary-foreground: #ffffff;
  --secondary: #ffffff;
  --secondary-foreground: #1a5c38;
  --muted: #f0f5f2;
  --muted-foreground: #5a6b62;
  --accent: #ffb300;
  --accent-foreground: #0d3d26;
  --destructive: #dc2626;
  --border: #dce8e0;
  --input: #dce8e0;
  --ring: #1a5c38;
  --hero: #0d3d26;
  --section-muted: #f0f5f2;
  --section-inverse: #1a5c38;
}

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

@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: #1a5c38;
    color: #fafafa;
  }
  .section-green {
    background-color: #1a5c38;
    color: #fafafa;
  }
  .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");
  }

  /* 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;
  }
  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .marquee {
      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, #1a5c38);
  }
  .ticket-admission[data-ticket-notch="light"] {
    --ticket-notch-fill: #f0f5f2;
  }
  .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(26, 92, 56, 0.18);
    --rift-stroke-minor: rgba(26, 92, 56, 0.26);
    --rift-stroke-inverse: rgba(255, 255, 255, 0.25);
    --rift-accent: #ffb300;
    --rift-channel: #1a5c38;
  }

  .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 on white sections only ─── */
  .topo-tone-light .topo-pattern-asset {
    mix-blend-mode: multiply;
    filter: sepia(0.35) saturate(2.6) hue-rotate(92deg) brightness(0.92) contrast(1.2);
  }

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

  /* Plain readable copy on white — no glow, shadow, or blur */
  .section-white .topo-content-readable,
  .section-white .topo-content-readable :is(h1, h2, h3, h4, p, li, label, summary),
  .section-white .topo-content-readable a:not([data-slot="button"]) {
    color: #0d3d26;
    text-shadow: none;
  }

  .section-white .topo-content-readable .text-muted-foreground {
    color: #3d5248;
  }

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

  .topo-prose-surface-light {
    background: #ffffff;
    border: 1px solid rgba(26, 92, 56, 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;
  }

  .section-green .topo-content-layer,
  .section-green .topo-content-layer :is(h1, h2, h3, h4, p, li, a, label, span) {
    color: #ffffff;
    text-shadow: none;
  }

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

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

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

  .section-green [data-slot="button"][data-variant="ghost"] {
    color: #ffffff;
  }

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

  .section-green [data-slot="button"][data-variant="default"]:not([class*="bg-[#ffb300]"]) {
    background-color: #ffb300;
    color: #0f0404;
  }

  .section-green [data-slot="button"][data-variant="default"]:not([class*="bg-[#ffb300]"]):hover {
    background-color: #e6a200;
    color: #0f0404;
  }

  .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-hero-settled .rift-hero-pattern-site .rift-contour-path,
  .rift-hero-settled .rift-hero-pattern-water .rift-contour-path {
    animation: rift-contour-pulse 8s ease-in-out infinite;
    stroke-dashoffset: 0;
  }

  .rift-hero-settled .rift-channel-inner {
    animation: rift-river-shimmer 6s ease-in-out infinite;
    stroke-dashoffset: 0;
  }

  .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) {
    .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 {
      animation: none !important;
    }
  }
}