/* ============================================================
   BadFox Pools — Version A: "Aurelia"
   Inspiration: The Ritz-Carlton. Elegant serif display over clean
   sans-serif body. Wide tracking, refined weights, timeless luxury.
   Fonts: Cormorant Garamond (display) + Inter (body)
   ============================================================ */

:root {
  --navy: #0a1020;
  --navy-2: #0f1830;
  --navy-3: #121d3a;
  --white: #ffffff;
  --silver: #c9d1d9;
  --accent: #1da1f2;
  --accent-2: #6dcff6;
  --accent-glow: rgba(29, 161, 242, 0.35);
  --line: rgba(201, 209, 217, 0.14);
  --line-strong: rgba(201, 209, 217, 0.28);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.45);
  --radius: 8px;
  --radius-lg: 16px;
  --container: 1200px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --header-h: 72px;

  /* Aurelia typography stack */
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ============================================================
   Base reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/*
  DO NOT set scroll-behavior: smooth on html/body.
  CSS smooth scroll conflicts with GSAP ScrollTrigger's pin & scrub —
  it causes the pinned section to jitter and trigger positions to drift.
  Smooth scrolling is handled entirely via JS (window.scrollTo behavior).
*/

body {
  font-family: var(--font-body);
  background: var(--navy);
  color: var(--white);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video, iframe { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px; top: 8px;
  background: var(--white); color: var(--navy);
  padding: 8px 12px; border-radius: var(--radius);
  z-index: 999;
}
.skip-link:focus { left: 12px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* Below-fold performance: skip paint until visible.
   Only applied to the footer — sections with GSAP ScrollTrigger
   animations are excluded because content-visibility:auto skips
   rendering, breaking GSAP's position measurements at setup time. */
.site-footer {
  content-visibility: auto;
  contain-intrinsic-size: 300px;
}

/* ============================================================
   Header / Nav
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  background: linear-gradient(to bottom, rgba(10,16,32,0.85), rgba(10,16,32,0.6));
  border-bottom: 1px solid var(--line);
}
.nav-wrap {
  max-width: var(--container); margin: 0 auto;
  height: var(--header-h); padding: 0 24px;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 16px;
}

.wordmark { display: inline-flex; align-items: center; gap: 10px; letter-spacing: 0.04em; }
.wordmark-drop { flex-shrink: 0; display: block; }
.wordmark-text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  display: inline-flex; flex-direction: column; gap: 4px;
}
.wordmark-sub {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--silver);
}

/* Tabs */
.tabs { position: relative; justify-self: center; }
.tabs ul {
  list-style: none; display: flex; gap: 4px;
  padding: 6px; margin: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
}
.tab {
  display: inline-block;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver);
  border-radius: 999px;
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
.tab:hover { color: var(--white); }
.tab.is-active { color: var(--white); background: rgba(29, 161, 242, 0.08); }
.tab-underline {
  position: absolute; left: 0; bottom: -2px;
  height: 1px; width: 0;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  pointer-events: none; opacity: 0;
}

.nav-cta { justify-self: end; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; height: 48px; padding: 0 26px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: transform .3s var(--ease), background-color .3s var(--ease),
              border-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
  cursor: pointer; border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: #06223a;
  box-shadow: 0 8px 24px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 30px var(--accent-glow); }
.btn-secondary {
  background: transparent; color: var(--white);
  border-color: var(--line-strong);
}
.btn-secondary:hover { background: rgba(255,255,255,0.06); border-color: var(--silver); }
.btn-ghost {
  background: transparent; color: var(--white);
  border-color: var(--line-strong);
  height: 42px; padding: 0 20px;
}
.btn-ghost:hover { background: rgba(255,255,255,0.06); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  display: flex; align-items: center;
  overflow: hidden; isolation: isolate;
}
.hero-media {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  /* Poster image as CSS background — instant fallback while video loads */
  background: #000 url("assets/water-picture.jpg") center/cover no-repeat;
  /* will-change pre-creates the compositor layer at page load, BEFORE Chrome
     evaluates the video's autoplay eligibility. This is critical: if GSAP's
     ScrollTrigger creates the layer after autoplay is evaluated, Chrome can
     revoke the autoplay grant. Setting it here means the layer exists from
     the start, so GSAP's animation never changes the compositor context. */
  will-change: transform;
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  /* No will-change here — animating transforms on <video> elements causes
     Chrome to pause autoplay. GSAP targets .hero-media (the parent) instead. */
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(10,16,32,0.1), rgba(10,16,32,0.55) 60%, rgba(10,16,32,0.9) 100%),
    linear-gradient(180deg, rgba(10,16,32,0.3), rgba(10,16,32,0.88));
}

.hero-inner {
  position: relative; z-index: 2;
  max-width: var(--container); width: 100%;
  margin: 0 auto; padding: 120px 24px 140px;
}
.eyebrow {
  color: var(--accent-2);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin: 0 0 20px;
}
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(52px, 8.5vw, 120px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
  max-width: 16ch;
}
.hero-headline em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent-2);
}
.hero-sub {
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--silver);
  margin: 0 0 36px;
  max-width: 52ch;
  font-weight: 300;
  line-height: 1.65;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-scroll-hint {
  position: absolute; left: 50%; bottom: 22px;
  transform: translateX(-50%);
  width: 22px; height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 999px; opacity: 0.8;
}
.hero-scroll-hint span {
  position: absolute; left: 50%; top: 8px;
  width: 2px; height: 8px;
  background: var(--accent-2);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scroll-hint 2.4s var(--ease) infinite;
}
@keyframes scroll-hint {
  0%   { transform: translate(-50%, 0);    opacity: 1; }
  70%  { transform: translate(-50%, 14px); opacity: 0; }
  100% { transform: translate(-50%, 0);    opacity: 0; }
}

/* ============================================================
   Section helpers
   ============================================================ */
.section-head { max-width: 680px; margin: 0 auto 56px; text-align: center; }
.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.2vw, 56px);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.1;
  margin: 0;
}

/* ============================================================
   Features / Cards
   ============================================================ */
.features { padding: 140px 0 60px; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
  /* will-change omitted here — GSAP adds it during animation and removes it after.
     Declaring it statically would hoist all three cards to GPU layers immediately. */
}
.card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-soft); }
.card-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(29,161,242,0.08);
  color: var(--accent-2); margin-bottom: 22px;
}
.card-icon svg { width: 26px; height: 26px; }
.card h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0 0 10px;
}
.card p { margin: 0; color: var(--silver); font-size: 15px; line-height: 1.65; }

/* ============================================================
   Photo Gallery
   ============================================================ */
.gallery { padding: 60px 0; }
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.gallery-item {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  aspect-ratio: 4 / 3;
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}
.gallery-item:hover img { transform: scale(1.04); }

/* ============================================================
   Timeline — horizontal pinned scroll
   ============================================================ */
.timeline-section { padding: 80px 0 40px; }

/*
  overflow-x: clip clips overflowing track content WITHOUT creating a new
  scroll container (unlike overflow-x: hidden). This prevents a horizontal
  scrollbar flash before GSAP's ScrollTrigger pin kicks in, while still
  allowing GSAP's position: fixed pin to work correctly.
*/
.timeline-clip { overflow-x: clip; }

.timeline-pin { height: 100vh; position: relative; overflow: visible; }
.timeline-track {
  display: flex; gap: 32px; align-items: center;
  padding: 0 8vw; height: 100%;
  will-change: transform;
}
.timeline-panel {
  flex: 0 0 min(70vw, 540px);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  min-height: 340px;
  position: relative;
  box-shadow: var(--shadow-soft);
}
.panel-index {
  position: absolute; top: 28px; right: 32px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--accent-2);
  font-weight: 500;
}
.timeline-panel h3 {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 400;
  letter-spacing: -0.005em;
  margin: 16px 0 14px;
}
.timeline-panel p { color: var(--silver); font-size: 16px; max-width: 42ch; margin: 0; line-height: 1.65; }

/* ============================================================
   About
   ============================================================ */
.about { padding: 140px 0; }
.about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 72px; align-items: start; }
.about-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.6vw, 64px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin: 0 0 24px;
}
.about-copy h2 em { font-style: italic; color: var(--accent-2); font-weight: 400; }
.about-copy p {
  color: var(--silver); font-size: 17px;
  max-width: 60ch; margin: 0 0 18px;
  font-weight: 300; line-height: 1.75;
}

.coverage { list-style: none; padding: 0; margin: 28px 0 36px; display: flex; gap: 16px; flex-wrap: wrap; }
.coverage li {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--silver);
}
.pin {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(29,161,242,0.15);
  flex-shrink: 0;
}
.about-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.about-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px;
  box-shadow: var(--shadow-soft);
}
.about-card h3 {
  margin: 0 0 20px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.facts { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.facts > div {
  display: grid; grid-template-columns: 120px 1fr;
  align-items: baseline; padding: 14px 0;
  border-top: 1px solid var(--line);
}
.facts dt {
  color: var(--silver);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
}
.facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
}

/* ============================================================
   Contact
   ============================================================ */
.contact { padding: 80px 0 140px; }
.contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: start; }
.contact-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.6vw, 60px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 20px;
}
.contact-copy p {
  color: var(--silver); font-size: 17px;
  margin: 0 0 28px;
  font-weight: 300; line-height: 1.75;
}
.link {
  color: var(--accent-2);
  border-bottom: 1px solid rgba(109,207,246,0.3);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.link:hover { color: var(--white); border-color: var(--white); }

.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; }
.field label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 10px;
  font-weight: 500;
}
.field input {
  height: 50px; padding: 0 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  color: var(--white);
  border-radius: var(--radius);
  font: inherit;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field input::placeholder { color: rgba(201,209,217,0.55); }
.field input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(29,161,242,0.06);
}
.form-actions { grid-column: 1 / -1; display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.form-note {
  grid-column: 1 / -1;
  color: var(--accent-2);
  margin: 10px 0 0;
  font-size: 14px;
  min-height: 1em;
}

.contact-map .map-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  aspect-ratio: 4 / 3;
  background: var(--navy-2);
}
.contact-map iframe {
  width: 100%; height: 100%; border: 0;
  filter: saturate(0.8) brightness(0.9) contrast(1.05);
}
.contact-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.contact-list li {
  display: grid; grid-template-columns: 120px 1fr; gap: 14px;
  font-size: 15px; color: var(--silver);
  padding: 12px 0; border-top: 1px solid var(--line);
}
.contact-list li span {
  color: rgba(201,209,217,0.7);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  align-self: center;
  font-weight: 500;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(10,16,32,0) 0%, rgba(10,16,32,0.8) 40%, var(--navy) 100%);
  padding: 72px 0 36px;
}
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 48px; }
.footer-brand .muted {
  color: var(--silver); margin-top: 16px; max-width: 36ch;
  font-weight: 300; font-size: 15px; line-height: 1.7;
}
.footer-col h4 {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 18px;
}
.hours, .plain {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 12px;
  font-size: 14px; color: var(--silver);
}
.hours li { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin-top: 56px; padding-top: 28px;
  border-top: 1px solid var(--line);
  color: rgba(201,209,217,0.7);
}
.legal { display: inline-flex; gap: 10px; align-items: center; }

/* ============================================================
   Animation initial states
   GSAP animates these to opacity:1, y:0. will-change is intentionally
   NOT set here — GSAP manages it internally during the tween and
   removes it afterward, avoiding permanent GPU layer allocation.
   ============================================================ */
[data-anim="fadeUp"], [data-anim="cardUp"] {
  opacity: 0;
  transform: translateY(24px);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .card-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-form { grid-template-columns: 1fr; }
  .nav-wrap { grid-template-columns: auto 1fr auto; gap: 10px; }
  .tabs ul { gap: 2px; padding: 4px; }
  .tab { padding: 8px 12px; font-size: 11px; }
  .nav-cta { display: none; }
  .hero-inner { padding: 100px 24px; }
  .features, .about, .contact { padding: 90px 0; }
  /* Timeline: vertical stack on mobile (GSAP horizontal scroll disabled) */
  .timeline-pin { height: auto; }
  .timeline-track { flex-direction: column; padding: 0 20px; gap: 20px; height: auto; }
  .timeline-panel { flex-basis: auto; width: 100%; padding: 32px 28px; min-height: auto; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .wordmark-sub { display: none; }
}

/* ============================================================
   Reduced motion — immediately reveal all animated elements,
   disable all transitions and CSS animations
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-anim="fadeUp"], [data-anim="cardUp"] { opacity: 1; transform: none; }
  .hero-scroll-hint { display: none; }
}