/* ============================================================
   FairwayFinda — landing
   Keyframes + small CSS bits not easily expressed in Tailwind.
   ============================================================ */

@keyframes ff-pulse-ring {
  0%   { transform: scale(0.85); opacity: 0.55; }
  70%  { transform: scale(1.6);  opacity: 0; }
  100% { transform: scale(1.6);  opacity: 0; }
}
.ff-pulse-ring::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 999px;
  border: 1px solid currentColor;
  animation: ff-pulse-ring 2.4s ease-out infinite;
}

@keyframes ff-float-cue {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(6px); opacity: 1; }
}
.ff-scroll-cue { animation: ff-float-cue 2.2s ease-in-out infinite; }

@keyframes ff-sweep {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(110%);  }
}
.ff-sweep::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.06) 50%, transparent 70%);
  animation: ff-sweep 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ff-tick {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
.ff-tick { animation: ff-tick 1.8s ease-in-out infinite; }

@keyframes ff-bar-grow {
  0%   { transform: scaleY(0.2); }
  100% { transform: scaleY(1);   }
}
.ff-bar { transform-origin: bottom; animation: ff-bar-grow 1.2s cubic-bezier(.2,.7,.2,1) both; }

/* tabular numerals everywhere stats appear */
.tnum { font-variant-numeric: tabular-nums; }

/* glass system */
.glass-layer-1 {
  background: rgba(0,0,0,0.60);
  border: 1px solid rgba(255,255,255,0.20);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.glass-layer-2 {
  background: rgba(0,0,0,0.50);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ========== HERO VIDEO + OVERLAY ========== */
.hero {
  position: relative;
  background: #020617;
}
.hero-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  /* Cover only the splash viewport — not the whole hero (which extends into the intro+cards section).
     This prevents the video from being scaled up massively to fill the entire hero height. */
  height: 100vh;
  min-height: 600px;
  max-height: 100vh;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}
.hero-video-overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100vh;
  min-height: 600px;
  max-height: 100vh;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2,6,23,0.35) 0%, rgba(2,6,23,0.55) 40%, rgba(2,6,23,0.85) 90%, #020617 100%),
    radial-gradient(60% 50% at 10% 20%, rgba(232,200,121,0.10), transparent 70%),
    radial-gradient(80% 70% at 90% 90%, rgba(52,211,153,0.10), transparent 70%);
}

/* ========== SPLASH HEADLINE (text overlaid on video) ========== */
.splash-headline {
  /* tighter than the default tracking; adds drama with a soft shadow for legibility on video */
  text-shadow:
    0 2px 12px rgba(0,0,0,0.45),
    0 1px 0 rgba(0,0,0,0.2);
  color: #fff;
}
.splash-headline-accent {
  background: linear-gradient(180deg, #fbe7a6 0%, #e8c879 35%, #b88c3a 80%, #f4d98a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* gradient text has no shadow rendering — fake a soft glow with filter */
  filter: drop-shadow(0 2px 18px rgba(232,200,121,0.25));
}

/* splash eyebrow (top row) — small ticking dot indicator */
.splash-eyebrow {
  position: relative;
}
.grid-overlay {
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 40%, black 35%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 35%, transparent 80%);
}

/* card hover lift */
.lift {
  transition: transform 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
.lift:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.35);
}

/* eyebrow */
.eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
}

/* per-section accent variables */
.accent-sky    { --accent: #38bdf8; --accent-rgb: 56,189,248; }
.accent-amber  { --accent: #fbbf24; --accent-rgb: 251,191,36; }
.accent-emerald{ --accent: #34d399; --accent-rgb: 52,211,153; }
.accent-indigo { --accent: #818cf8; --accent-rgb: 129,140,248; }

.accent-text   { color: var(--accent); }
.accent-bg     { background-color: var(--accent); }
.accent-border { border-color: rgba(var(--accent-rgb), 0.45) !important; }
.accent-ring   { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25); }
.accent-glow   {
  background:
    radial-gradient(700px 400px at 10% 0%, rgba(var(--accent-rgb), 0.10), transparent 60%),
    radial-gradient(700px 500px at 100% 100%, rgba(var(--accent-rgb), 0.08), transparent 60%);
}

/* glass form inputs */
.ff-input {
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 0.5rem;
  color: #f8fafc;
  padding: 0.75rem 1rem;
  width: 100%;
  font: inherit;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.ff-input::placeholder { color: rgba(248,250,252,0.35); }
.ff-input:focus {
  border-color: var(--accent, #34d399);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 52,211,153), 0.25);
  background: rgba(0,0,0,0.65);
}
.ff-submit {
  background: var(--accent, #34d399);
  color: #020617;
  font-weight: 800;
  letter-spacing: 0.04em;
  border-radius: 0.5rem;
  padding: 0.85rem 1.25rem;
  text-transform: uppercase;
  font-size: 13px;
  transition: transform 160ms ease, filter 160ms ease, opacity 160ms ease;
  cursor: pointer;
  border: 0;
}
.ff-submit:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.ff-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* honeypot */
.ff-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* topo line background for hero — pure CSS */
.topo {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(52,211,153,0.05) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, rgba(56,189,248,0.05) 0 1px, transparent 1px);
  background-size: 22px 22px, 28px 28px;
}

/* nav active dot */
.nav-link { position: relative; }
.nav-link:hover .nav-dot, .nav-link.is-active .nav-dot { opacity: 1; }
.nav-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 999px;
  background: currentColor; opacity: 0;
  transition: opacity 160ms ease;
}

/* product preview "screens" */
.screen-frame {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  background: linear-gradient(180deg, #0b1220 0%, #060a14 100%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.04) inset;
}

/* mini scoreline rows */
.row-divider > * + * { border-top: 1px solid rgba(255,255,255,0.06); }

/* fade-in on scroll — only active once JS confirms it can drive the observer.
   Without .js-ready, content stays fully visible (no-JS / pre-hydration / PDF / social preview). */
.js-ready .reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms ease, transform 600ms ease; }
.js-ready .reveal.is-in { opacity: 1; transform: none; }

/* footnote dots */
.dot-sep::before { content: "•"; margin: 0 .6rem; opacity: .35; }

/* scoped helper */
html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ========== LOGO LOCKUP ========== */
/* Full brand lockup PNG (FF mark + wordmark + flag/ball flourish) used in header / footer / splash.
   Sized via height; width auto-scales. Override Tailwind's preflight img reset which would
   otherwise clamp width and squash the aspect ratio in narrow flex containers. */
.brand-mark {
  display: block;
  height: 32px;
  width: auto;
  max-width: none;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-drag: none;
}
.brand-mark--lg { height: 40px; }
.brand-mark--xl { height: 64px; }

/* Legacy: keep ff-logo class as an alias of the lockup image (in case any references remain) */
.ff-logo { display: inline-flex; align-items: center; gap: 0.65rem; line-height: 1; }

/* ========== HERO SPLASH ========== */
.splash {
  position: relative;
  /* Massive responsive wordmark — gold gradient, letter-spaced tight */
}
.splash-wordmark {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.045em;
  line-height: 0.88;
  background: linear-gradient(180deg,
    #fbe7a6 0%,
    #ecc66f 25%,
    #f6dc8a 45%,
    #b88c3a 70%,
    #f0d27a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* very soft gold halo */
  filter: drop-shadow(0 18px 60px rgba(232, 200, 121, 0.18));
  font-size: clamp(56px, 13vw, 220px);
  display: inline-block;
}
.splash-wordmark .letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  animation: splash-in 900ms cubic-bezier(.22,.7,.18,1) forwards;
}
@keyframes splash-in {
  0%   { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

.splash-flourish {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  height: 36px;
  position: relative;
}
.splash-flourish svg { width: 100%; height: 100%; display: block; overflow: visible; }
.splash-flourish .trail {
  fill: none;
  stroke: #e8c879;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: trail-draw 2200ms 600ms cubic-bezier(.6,.04,.3,1) forwards;
  filter: drop-shadow(0 0 8px rgba(232,200,121,0.4));
}
@keyframes trail-draw {
  to { stroke-dashoffset: 0; }
}
.splash-flourish .ball {
  opacity: 0;
  animation: ball-in 400ms 2400ms ease-out forwards;
  transform-origin: center;
}
.splash-flourish .flag {
  opacity: 0;
  animation: flag-in 500ms 2600ms ease-out forwards;
  transform-box: fill-box;
  transform-origin: bottom center;
}
@keyframes ball-in { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }
@keyframes flag-in { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } }

.splash-sub {
  opacity: 0;
  animation: fade-up 800ms 200ms cubic-bezier(.2,.7,.2,1) forwards;
}

/* New: the supplied brand lockup graphic as the splash centerpiece */
.splash-lockup {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  animation: lockup-in 1100ms 350ms cubic-bezier(.22,.7,.18,1) forwards;
  max-width: 1180px;
  width: 100%;
}
.splash-lockup-img {
  display: block;
  width: 100%;
  height: auto;
  /* Fade the dark-green edges into the page background so it doesn't look like a hard rectangle */
  -webkit-mask-image: radial-gradient(125% 110% at 50% 50%, #000 60%, transparent 92%);
          mask-image: radial-gradient(125% 110% at 50% 50%, #000 60%, transparent 92%);
  filter: drop-shadow(0 30px 80px rgba(0,0,0,0.55)) drop-shadow(0 0 60px rgba(232,200,121,0.08));
}
@keyframes lockup-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* slow ambient drift in the hero background */
@keyframes hero-drift {
  0%   { transform: translate3d(0,0,0); }
  50%  { transform: translate3d(-1.5%, 1%, 0); }
  100% { transform: translate3d(0,0,0); }
}
.hero-drift { animation: hero-drift 22s ease-in-out infinite; }

/* ========== SECTION TRANSITIONS ========== */
/* Section glow now extends past section bounds — accent colours bleed gently into
   the next section rather than stopping at a hard border. */
.section-bleed {
  position: relative;
}
.section-bleed::before,
.section-bleed::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 220px;
  pointer-events: none;
  z-index: 0;
}
.section-bleed::before {
  top: -120px;
  background: radial-gradient(60% 100% at 50% 100%, rgba(var(--accent-rgb), 0.10), transparent 70%);
}
.section-bleed::after {
  bottom: -120px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(var(--accent-rgb), 0.10), transparent 70%);
}

/* ========== SCROLL-DRIVEN PARALLAX (modern browsers; harmless elsewhere) ========== */
@supports (animation-timeline: view()) {
  .parallax-up {
    animation: parallax-up linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  @keyframes parallax-up {
    from { transform: translateY(40px); }
    to   { transform: translateY(-40px); }
  }
  .parallax-fade {
    animation: parallax-fade linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  @keyframes parallax-fade {
    from { opacity: 0.0; transform: translateY(30px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
}

/* staggered reveal — set style="--i: N" on revealed elements for cascade */
.js-ready .reveal { transition-delay: calc(var(--i, 0) * 90ms); }

/* eased smoother reveal */
.js-ready .reveal {
  transition:
    opacity 800ms cubic-bezier(.2,.7,.2,1),
    transform 800ms cubic-bezier(.2,.7,.2,1);
}

/* ========== FIXED TOP BAR (revealed on scroll past splash) ========== */
.topbar-fixed {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 320ms ease, transform 420ms cubic-bezier(.22,.7,.18,1);
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.topbar-fixed.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.topbar-inner {
  height: 64px;
}

/* ========== INFINITE-SCROLL MARQUEE (continuous discovery strip) ========== */
.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: 3.5rem;
  animation: marquee-scroll 60s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: rgba(248,250,252,0.75);
  white-space: nowrap;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.marquee-item .pin { color: #34d399; }
.marquee-item .state {
  color: rgba(248,250,252,0.35);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
}
.marquee-item .rating {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: #e8c879;
  font-size: 14px;
  font-weight: 800;
}
.marquee-sep {
  display: inline-block;
  width: 1px; height: 18px;
  background: rgba(255,255,255,0.15);
  align-self: center;
}

/* ========== PRODUCT CARDS (intro grid) ========== */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 1.25rem;
  overflow: hidden;
  text-decoration: none;
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), 0.6);
  background: rgba(0,0,0,0.65);
}
.product-card-graphic {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(135deg,
      rgba(var(--accent-rgb), 0.18) 0 10px,
      transparent 10px 22px),
    radial-gradient(80% 90% at 50% 100%, rgba(var(--accent-rgb), 0.18), transparent 70%),
    rgba(255,255,255,0.025);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}
.product-card-graphic::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.45));
  pointer-events: none;
}
.product-card-graphic .mono-label {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 2;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.product-card-graphic .card-num {
  position: absolute;
  bottom: 0.6rem; right: 1.1rem;
  z-index: 2;
  font-size: clamp(64px, 8vw, 96px);
  font-weight: 900;
  line-height: 0.85;
  color: var(--accent);
  opacity: 0.35;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  pointer-events: none;
}
.product-card-graphic .card-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: rgba(2,6,23,0.6);
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
}
.product-card-body {
  padding: 1.25rem 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.product-card-body .eyebrow {
  color: var(--accent);
}
.product-card-body h3 {
  font-weight: 900;
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.05;
}
.product-card-body p {
  font-size: 0.9rem;
  color: rgba(248,250,252,0.65);
  line-height: 1.55;
}
.product-card .learn-more {
  margin-top: 0.75rem;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.product-card:hover .learn-more span { transform: translateX(4px); }
.product-card .learn-more span { transition: transform 200ms ease; }
.product-visual {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), 0.40);
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,0.6),
    0 0 80px -10px rgba(var(--accent-rgb), 0.20),
    0 0 0 1px rgba(255,255,255,0.04) inset;
  background: #0b1220;
}
.product-visual img {
  display: block;
  width: 100%;
  height: auto;
}
.product-visual::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 50%, rgba(2,6,23,0.85) 100%),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(var(--accent-rgb), 0.12) 100%);
  pointer-events: none;
}
.product-visual-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1rem 1.25rem 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  color: #f8fafc;
}
.product-visual-caption .label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: rgba(248,250,252,0.55);
}
.product-visual-caption .title {
  margin-top: 0.25rem;
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.product-visual-stat {
  text-align: right;
}
.product-visual-stat .v {
  font-weight: 900;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.product-visual-stat .l {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: rgba(248,250,252,0.5);
}

/* tag chip overlay (top-left) */
.product-visual-tag {
  position: absolute;
  top: 1rem; left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  background: rgba(2,6,23,0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
}
.product-visual-tag .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: currentColor;
}