@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url('/assets/fonts/big-shoulders-display-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
}

:root {
  --purple: #A855C9;
  --purple-deep: #7B2D9F;
  --purple-ink: #2A0F3A;
  --green: #8BCF3F;
  --green-deep: #4F7A1F;
  --cream: #FBF7F0;
  --cream-warm: #F2EADB;
  --ink: #161019;
  --ink-soft: #2A1F30;
  --hot: #FFD23F;
  --hot-pink: #FF4FA3;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html,
body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}
body { overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.display {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 0.88;
  text-transform: uppercase;
}

.mono { font-family: 'JetBrains Mono', monospace; }

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--green), var(--hot), var(--purple));
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: 0 50%;
  z-index: 2000;
  pointer-events: none;
}

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 30px, 0) scale(0.985);
  transition:
    opacity 760ms cubic-bezier(.2,.8,.2,1),
    transform 760ms cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal="card"] {
  transform: translate3d(0, 22px, 0) scale(0.98);
  transition-duration: 620ms;
}

[data-reveal="stamp"] { transform: translate3d(-18px, 0, 0) rotate(-1.5deg); }
[data-reveal].is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0); }

.float-scroll {
  transform:
    translate3d(0, calc(var(--scroll-y, 0) * var(--float-speed, .03) * 1px), 0)
    rotate(var(--float-rotate, 0deg));
  will-change: transform;
}

.float-bob { animation: bayou-bob 6s ease-in-out infinite; }
.spin-stamp { animation: bayou-spin 18s linear infinite; }
.pulse-line {
  background-size: 44px 100%;
  animation: bayou-stripe 1.8s linear infinite;
}

.hero-gator-wobble {
  animation: bayou-gator-wobble 3.6s cubic-bezier(.32, 0, .2, 1) infinite;
  will-change: transform;
}

.kinetic-card {
  transition:
    transform 260ms cubic-bezier(.2,.8,.2,1),
    box-shadow 260ms cubic-bezier(.2,.8,.2,1),
    filter 260ms ease;
  will-change: transform;
}

.menu-spill-card {
  animation: bayou-spill 720ms cubic-bezier(.16, 1, .3, 1) both;
  transform-origin: 50% 0%;
}

@media (hover: hover) and (pointer: fine) {
  .kinetic-card:hover {
    transform: translate3d(0, -6px, 0) rotate(-0.35deg);
    filter: saturate(1.08);
  }
}

@keyframes bayou-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}

@keyframes bayou-spin {
  to { rotate: 360deg; }
}

@keyframes bayou-stripe {
  from { background-position: 0 0; }
  to { background-position: 44px 0; }
}

@keyframes bayou-gator-wobble {
  0%, 68%, 100% { transform: scaleX(-1) rotate(-4deg) translate3d(0, 0, 0); }
  73% { transform: scaleX(-1) rotate(-1deg) translate3d(-3px, -2px, 0); }
  78% { transform: scaleX(-1) rotate(-6deg) translate3d(2px, 1px, 0); }
  84% { transform: scaleX(-1) rotate(-3deg) translate3d(-1px, 0, 0); }
}

@keyframes bayou-spill {
  0% {
    opacity: 0;
    transform: translate3d(0, -28px, 0) rotate(var(--spill-rotate, -2deg)) scale(0.86);
    filter: saturate(1.25);
  }
  62% {
    opacity: 1;
    transform: translate3d(0, 8px, 0) rotate(calc(var(--spill-rotate, -2deg) * -0.25)) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    filter: saturate(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-progress { display: none; }
  .float-bob,
  .spin-stamp,
  .pulse-line,
  .menu-spill-card,
  .hero-gator-wobble { animation: none; }
  [data-reveal],
  [data-reveal].is-visible,
  .float-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.seo-fallback {
  max-width: 860px;
  margin: 0 auto;
  padding: 64px 22px;
  line-height: 1.55;
}

.seo-fallback h1 {
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: clamp(54px, 12vw, 96px);
  line-height: 0.9;
  text-transform: uppercase;
}

.seo-fallback p { margin-top: 16px; font-size: 18px; }