/* === MARQUEE SCROLL === */
@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* === DOT GRID DRIFT === */
@keyframes dotDrift {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 32px 32px;
  }
}

/* === REVEAL ON SCROLL — single fade-up via CSS transition === */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.reveal-group .reveal:nth-child(2) { transition-delay: 80ms; }
.reveal-group .reveal:nth-child(3) { transition-delay: 160ms; }
.reveal-group .reveal:nth-child(4) { transition-delay: 240ms; }
.reveal-group .reveal:nth-child(5) { transition-delay: 320ms; }
.reveal-group .reveal:nth-child(6) { transition-delay: 400ms; }
.reveal-group .reveal:nth-child(7) { transition-delay: 480ms; }
.reveal-group .reveal:nth-child(8) { transition-delay: 560ms; }


/* === PROOF CARD REVEAL — scale + fade-up for more polish === */
.proof-card.reveal {
  opacity: 0;
  transform: translateY(32px) scale(0.94);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.proof-card.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.proof-card.reveal.is-visible:hover {
  transform: translateY(-4px) scale(1.02);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.proof-grid.reveal-group .proof-card:nth-child(1) { transition-delay: 0ms; }
.proof-grid.reveal-group .proof-card:nth-child(2) { transition-delay: 120ms; }
.proof-grid.reveal-group .proof-card:nth-child(3) { transition-delay: 240ms; }
.proof-grid.reveal-group .proof-card:nth-child(4) { transition-delay: 360ms; }

/* === FADE UP (hero) === */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-up {
  animation: fadeUp 800ms var(--ease-out) 100ms both;
}

.fade-up-delay-1 {
  animation: fadeUp 800ms var(--ease-out) 250ms both;
}

.fade-up-delay-2 {
  animation: fadeUp 800ms var(--ease-out) 400ms both;
}

/* === 3D DASHBOARD — ENTRANCE + FLOAT === */
@keyframes dashEnter {
  from {
    opacity: 0;
    transform: rotateX(55deg) translateY(60px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: rotateX(32deg) translateY(0) scale(1);
  }
}

@keyframes dashFloat {
  0%, 100% {
    transform: rotateX(32deg) translateY(0) scale(1);
  }
  50% {
    transform: rotateX(34deg) translateY(-10px) scale(1);
  }
}

.hero-dashboard {
  animation:
    dashEnter 1.2s cubic-bezier(0.16, 1, 0.3, 1) 600ms both,
    dashFloat 6s ease-in-out 1.8s infinite;
}

/* === DASHBOARD BAR GROWTH === */
@keyframes barGrow {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 0.85;
  }
}

.dash-bar {
  transform-origin: left center;
  animation: barGrow 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.dash-row:nth-child(1) .dash-bar:nth-child(1) { animation-delay: 1.0s; }
.dash-row:nth-child(1) .dash-bar:nth-child(2) { animation-delay: 1.06s; }
.dash-row:nth-child(1) .dash-bar:nth-child(3) { animation-delay: 1.12s; }
.dash-row:nth-child(2) .dash-bar:nth-child(1) { animation-delay: 1.08s; }
.dash-row:nth-child(2) .dash-bar:nth-child(2) { animation-delay: 1.14s; }
.dash-row:nth-child(3) .dash-bar:nth-child(1) { animation-delay: 1.16s; }
.dash-row:nth-child(3) .dash-bar:nth-child(2) { animation-delay: 1.22s; }
.dash-row:nth-child(4) .dash-bar:nth-child(1) { animation-delay: 1.24s; }
.dash-row:nth-child(4) .dash-bar:nth-child(2) { animation-delay: 1.30s; }
.dash-row:nth-child(5) .dash-bar:nth-child(1) { animation-delay: 1.32s; }
.dash-row:nth-child(5) .dash-bar:nth-child(2) { animation-delay: 1.38s; }
.dash-row:nth-child(6) .dash-bar:nth-child(1) { animation-delay: 1.40s; }
.dash-row:nth-child(6) .dash-bar:nth-child(2) { animation-delay: 1.46s; }
.dash-row:nth-child(6) .dash-bar:nth-child(3) { animation-delay: 1.52s; }
.dash-row:nth-child(7) .dash-bar:nth-child(1) { animation-delay: 1.48s; }
.dash-row:nth-child(7) .dash-bar:nth-child(2) { animation-delay: 1.54s; }
.dash-row:nth-child(8) .dash-bar:nth-child(1) { animation-delay: 1.56s; }
.dash-row:nth-child(8) .dash-bar:nth-child(2) { animation-delay: 1.62s; }
.dash-row:nth-child(9) .dash-bar:nth-child(1) { animation-delay: 1.64s; }
.dash-row:nth-child(9) .dash-bar:nth-child(2) { animation-delay: 1.70s; }
.dash-row:nth-child(10) .dash-bar:nth-child(1) { animation-delay: 1.72s; }
.dash-row:nth-child(10) .dash-bar:nth-child(2) { animation-delay: 1.78s; }
.dash-row:nth-child(11) .dash-bar:nth-child(1) { animation-delay: 1.80s; }
.dash-row:nth-child(11) .dash-bar:nth-child(2) { animation-delay: 1.86s; }
.dash-row:nth-child(12) .dash-bar:nth-child(1) { animation-delay: 1.88s; }

/* === DASHBOARD LIVING ANIMATIONS (autonomous feel) === */

/* Bar slowly extends — active session growing in real-time */
@keyframes barExtend {
  0%, 100% { width: var(--bar-w-start); }
  50% { width: var(--bar-w-end); }
}

.dash-bar--extending {
  --bar-w-start: 28%;
  --bar-w-end: 34%;
  animation:
    barGrow 800ms cubic-bezier(0.16, 1, 0.3, 1) both,
    barExtend 8s ease-in-out 2.5s infinite;
}

.dash-row:nth-child(8) .dash-bar--extending {
  --bar-w-start: 28%;
  --bar-w-end: 35%;
}

/* Bar shifts amber → green → amber — auto-confirmed reservation */
@keyframes barConfirm {
  0%, 20% { background: var(--color-data-amber); }
  35%, 75% { background: var(--color-data-green); }
  90%, 100% { background: var(--color-data-amber); }
}

.dash-bar--confirming {
  animation:
    barGrow 800ms cubic-bezier(0.16, 1, 0.3, 1) both,
    barConfirm 8s ease-in-out 3s infinite;
}

/* Bar smoothly materializes — new booking arriving */
@keyframes barAppear {
  0%, 8% { opacity: 0; transform: scaleX(0); }
  18%, 90% { opacity: 0.85; transform: scaleX(1); }
  98%, 100% { opacity: 0; transform: scaleX(0); }
}

.dash-bar--appearing {
  transform-origin: left center;
  animation: barAppear 12s ease-in-out 3.5s infinite;
}

/* Bar smoothly fades out — checkout complete */
@keyframes barClose {
  0%, 55% { opacity: 0.85; transform: scaleX(1); }
  72% { opacity: 0; transform: scaleX(0.2); }
  73%, 88% { opacity: 0; transform: scaleX(0); }
  100% { opacity: 0.85; transform: scaleX(1); }
}

.dash-bar--closing {
  transform-origin: right center;
  animation:
    barGrow 800ms cubic-bezier(0.16, 1, 0.3, 1) both,
    barClose 14s ease-in-out 4s infinite;
}

/* === DASHBOARD NOW LINE === */
@keyframes nowLineReveal {
  from { opacity: 0; transform: scaleY(0); }
  to { opacity: 0.7; transform: scaleY(1); }
}

.dash-now-line {
  transform-origin: top center;
  animation: nowLineReveal 600ms cubic-bezier(0.16, 1, 0.3, 1) 1.6s both;
}

/* === DASHBOARD KPI COUNTERS === */
@keyframes kpiFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dash-kpi {
  animation: kpiFadeIn 500ms var(--ease-out) both;
}

.dash-kpi:nth-child(1) { animation-delay: 2.0s; }
.dash-kpi:nth-child(2) { animation-delay: 2.12s; }
.dash-kpi:nth-child(3) { animation-delay: 2.24s; }
.dash-kpi:nth-child(4) { animation-delay: 2.36s; }

/* === DASHBOARD BOAT LABELS (sidebar) === */
@keyframes labelSlide {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.dash-boat-label {
  animation: labelSlide 400ms var(--ease-out) both;
}

.dash-boat-label:nth-child(1) { animation-delay: 1.0s; }
.dash-boat-label:nth-child(2) { animation-delay: 1.08s; }
.dash-boat-label:nth-child(3) { animation-delay: 1.16s; }
.dash-boat-label:nth-child(4) { animation-delay: 1.24s; }
.dash-boat-label:nth-child(5) { animation-delay: 1.32s; }
.dash-boat-label:nth-child(6) { animation-delay: 1.40s; }
.dash-boat-label:nth-child(7) { animation-delay: 1.48s; }
.dash-boat-label:nth-child(8) { animation-delay: 1.56s; }
.dash-boat-label:nth-child(9) { animation-delay: 1.64s; }
.dash-boat-label:nth-child(10) { animation-delay: 1.72s; }
.dash-boat-label:nth-child(11) { animation-delay: 1.80s; }
.dash-boat-label:nth-child(12) { animation-delay: 1.88s; }

/* === DASHBOARD HEADER DOTS === */
@keyframes dotPop {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

.dash-dot {
  animation: dotPop 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.dash-dot:nth-child(1) { animation-delay: 0.8s; }
.dash-dot:nth-child(2) { animation-delay: 0.9s; }
.dash-dot:nth-child(3) { animation-delay: 1.0s; }

/* === DASHBOARD CHIPS & UI ELEMENTS === */
@keyframes uiFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.dash-time-axis span { animation: uiFadeIn 300ms var(--ease-out) 0.95s both; }
.dash-chip { animation: uiFadeIn 400ms var(--ease-out) 0.95s both; }
.dash-search { animation: uiFadeIn 400ms var(--ease-out) 1.05s both; }
.dash-date { animation: uiFadeIn 400ms var(--ease-out) 0.9s both; }
.dash-filter-chip { animation: uiFadeIn 400ms var(--ease-out) both; }
.dash-filter-chip:nth-child(1) { animation-delay: 0.92s; }
.dash-filter-chip:nth-child(2) { animation-delay: 0.98s; }
.dash-filter-chip:nth-child(3) { animation-delay: 1.04s; }

/* === DASHBOARD PANEL SKELETON === */
.dash-panel-title { animation: uiFadeIn 400ms var(--ease-out) 1.5s both; }
.dash-panel-row { animation: uiFadeIn 300ms var(--ease-out) both; }
.dash-panel-row:nth-child(2) { animation-delay: 1.6s; }
.dash-panel-row:nth-child(3) { animation-delay: 1.7s; }
.dash-panel-row:nth-child(4) { animation-delay: 1.8s; }
.dash-panel-divider { animation: uiFadeIn 300ms var(--ease-out) 1.85s both; }
.dash-panel-row:nth-child(6) { animation-delay: 1.9s; }
.dash-panel-row:nth-child(7) { animation-delay: 2.0s; }

/* === DASHBOARD SHIMMER SWEEP === */
@keyframes shimmerSweep {
  0% {
    transform: translateX(-100%) skewX(-15deg);
  }
  100% {
    transform: translateX(300%) skewX(-15deg);
  }
}

.hero-dashboard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 45%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.03) 55%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 10;
  animation: shimmerSweep 4s ease-in-out 2.5s infinite;
}

/* === FEATURE VISUAL — ENTRY ANIMATIONS === */
@keyframes fvEnter {
  from {
    opacity: 0;
    transform: rotateX(15deg) scale(0.95);
  }
  to {
    opacity: 1;
    transform: rotateX(4deg) scale(1);
  }
}

.reveal.is-visible .feature-visual {
  animation: fvEnter 700ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both;
}

/* Feature 1: Timeline bar stagger */
@keyframes fvBarGrow {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 0.75;
  }
}

.reveal.is-visible .fv-tl-bar {
  transform-origin: left center;
  animation: fvBarGrow 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.reveal.is-visible .fv-tl-row:nth-child(2) .fv-tl-bar { animation-delay: 400ms; }
.reveal.is-visible .fv-tl-row:nth-child(3) .fv-tl-bar { animation-delay: 480ms; }
.reveal.is-visible .fv-tl-row:nth-child(4) .fv-tl-bar { animation-delay: 560ms; }
.reveal.is-visible .fv-tl-row:nth-child(5) .fv-tl-bar { animation-delay: 640ms; }
.reveal.is-visible .fv-tl-row:nth-child(6) .fv-tl-bar { animation-delay: 720ms; }
.reveal.is-visible .fv-tl-row:nth-child(7) .fv-tl-bar { animation-delay: 800ms; }
.reveal.is-visible .fv-tl-row:nth-child(8) .fv-tl-bar { animation-delay: 880ms; }

/* Feature 2: Reservation slot stagger */
@keyframes slotReveal {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.reveal.is-visible .fv-slot {
  animation: slotReveal 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.reveal.is-visible .fv-slot:nth-child(1)  { animation-delay: 300ms; }
.reveal.is-visible .fv-slot:nth-child(2)  { animation-delay: 330ms; }
.reveal.is-visible .fv-slot:nth-child(3)  { animation-delay: 360ms; }
.reveal.is-visible .fv-slot:nth-child(4)  { animation-delay: 390ms; }
.reveal.is-visible .fv-slot:nth-child(5)  { animation-delay: 420ms; }
.reveal.is-visible .fv-slot:nth-child(6)  { animation-delay: 450ms; }
.reveal.is-visible .fv-slot:nth-child(7)  { animation-delay: 480ms; }
.reveal.is-visible .fv-slot:nth-child(8)  { animation-delay: 510ms; }
.reveal.is-visible .fv-slot:nth-child(9)  { animation-delay: 540ms; }
.reveal.is-visible .fv-slot:nth-child(10) { animation-delay: 570ms; }
.reveal.is-visible .fv-slot:nth-child(11) { animation-delay: 600ms; }
.reveal.is-visible .fv-slot:nth-child(12) { animation-delay: 630ms; }
.reveal.is-visible .fv-slot:nth-child(13) { animation-delay: 660ms; }
.reveal.is-visible .fv-slot:nth-child(14) { animation-delay: 690ms; }
.reveal.is-visible .fv-slot:nth-child(15) { animation-delay: 720ms; }
.reveal.is-visible .fv-slot:nth-child(16) { animation-delay: 750ms; }
.reveal.is-visible .fv-slot:nth-child(17) { animation-delay: 780ms; }
.reveal.is-visible .fv-slot:nth-child(18) { animation-delay: 810ms; }
.reveal.is-visible .fv-slot:nth-child(19) { animation-delay: 840ms; }
.reveal.is-visible .fv-slot:nth-child(20) { animation-delay: 870ms; }
.reveal.is-visible .fv-slot:nth-child(21) { animation-delay: 900ms; }
.reveal.is-visible .fv-slot:nth-child(22) { animation-delay: 930ms; }
.reveal.is-visible .fv-slot:nth-child(23) { animation-delay: 960ms; }
.reveal.is-visible .fv-slot:nth-child(24) { animation-delay: 990ms; }
.reveal.is-visible .fv-slot:nth-child(25) { animation-delay: 1020ms; }
.reveal.is-visible .fv-slot:nth-child(26) { animation-delay: 1050ms; }
.reveal.is-visible .fv-slot:nth-child(27) { animation-delay: 1080ms; }
.reveal.is-visible .fv-slot:nth-child(28) { animation-delay: 1110ms; }
.reveal.is-visible .fv-slot:nth-child(29) { animation-delay: 1140ms; }
.reveal.is-visible .fv-slot:nth-child(30) { animation-delay: 1170ms; }
.reveal.is-visible .fv-slot:nth-child(31) { animation-delay: 1200ms; }
.reveal.is-visible .fv-slot:nth-child(32) { animation-delay: 1230ms; }

/* Feature 3: KPI + chart animations */
@keyframes kpiFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes chartBarGrow {
  from {
    transform: scaleY(0);
    opacity: 0;
  }
  to {
    transform: scaleY(1);
    opacity: 0.7;
  }
}

@keyframes trendDraw {
  from { opacity: 0; stroke-dashoffset: 300; }
  to { opacity: 0.5; stroke-dashoffset: 0; }
}

.reveal.is-visible .fv-kpi {
  animation: kpiFadeIn 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.reveal.is-visible .fv-kpi:nth-child(1) { animation-delay: 300ms; }
.reveal.is-visible .fv-kpi:nth-child(2) { animation-delay: 420ms; }
.reveal.is-visible .fv-kpi:nth-child(3) { animation-delay: 540ms; }

.reveal.is-visible .fv-bar {
  transform-origin: bottom center;
  animation: chartBarGrow 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.reveal.is-visible .fv-bar:nth-child(1) { animation-delay: 450ms; }
.reveal.is-visible .fv-bar:nth-child(2) { animation-delay: 510ms; }
.reveal.is-visible .fv-bar:nth-child(3) { animation-delay: 570ms; }
.reveal.is-visible .fv-bar:nth-child(4) { animation-delay: 630ms; }
.reveal.is-visible .fv-bar:nth-child(5) { animation-delay: 690ms; }
.reveal.is-visible .fv-bar:nth-child(6) { animation-delay: 750ms; }
.reveal.is-visible .fv-bar:nth-child(7) { animation-delay: 810ms; }
.reveal.is-visible .fv-bar:nth-child(8) { animation-delay: 870ms; }

.reveal.is-visible .fv-trend {
  stroke-dasharray: 300;
  animation: trendDraw 1.2s cubic-bezier(0.16, 1, 0.3, 1) 900ms both;
}

/* === HERO GRID BREATHE === */
@keyframes gridFade {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.35;
  }
}

.hero-grid {
  animation: gridFade 8s ease-in-out infinite;
}


/* === STAT COUNTER REVEAL === */
@keyframes statReveal {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.stat-block.is-visible {
  animation: statReveal 600ms var(--ease-out) both;
}

.stat-block.is-visible:nth-child(2) {
  animation-delay: 120ms;
}

.stat-block.is-visible:nth-child(3) {
  animation-delay: 240ms;
}

.stat-block.is-visible:nth-child(4) {
  animation-delay: 360ms;
}


/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .marquee-track {
    animation-duration: 40s !important;
    animation-iteration-count: infinite !important;
  }

  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  .hero-bg,
  .hero-grid,
  .hero-dashboard {
    animation: none !important;
  }

  .hero-dashboard {
    transform: rotateX(32deg) !important;
  }

  .hero-dashboard::after {
    animation: none !important;
    display: none;
  }

  .section::before,
  .section-lg::before,
  .trust-bar::before,
  .site-footer::before {
    animation: none !important;
  }
}









/* Pause all animations in off-screen sections */
.is-offscreen *,
.is-offscreen::before,
.is-offscreen::after {
  animation-play-state: paused !important;
}