/* ==========================================================================
   MOTION LAYER
   Styles for motion.js. Everything here is progressive: if JavaScript or the
   animation library fails to load, the page renders normally.
   ========================================================================== */

:root {
  --m-green: #657E2B;
  --m-green-light: #8FAE3E;
}

/* Chrome's scroll anchoring "corrects" the scroll position when layout shifts, but it can latch
   onto elements the animations have moved and throw the page thousands of pixels off
   (e.g. arriving at index.html#memberships on a phone). */
html {
  overflow-anchor: none;
}

/* --- Lenis smooth scroll (from the Lenis docs) --- */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* --- Hide hero pieces until the intro animation plays them in --- */
.js-motion .m-hero-label,
.js-motion .m-hero-title,
.js-motion .m-hero-sub,
.js-motion .m-hero-copy,
.js-motion .m-hero-cta,
.js-motion .m-hero-strip,
.js-motion .m-hero-inset {
  visibility: hidden;
}

/* The curtain only exists to be pulled away by the intro */
html:not(.js-motion) .m-hero-curtain {
  display: none;
}

/* --- Intro loader (first visit per session only) --- */
#m-loader {
  display: none;
}

.js-motion:not(.m-intro-seen) #m-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #121212;
}

.m-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.m-loader-word {
  display: flex;
  overflow: hidden;
  font-size: clamp(4rem, 12vw, 9rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0.05em;
}

.m-loader-word span {
  display: inline-block;
}

.m-loader-word span:first-child {
  color: var(--m-green-light);
}

.m-loader-bar {
  width: clamp(140px, 22vw, 260px);
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.m-loader-bar span {
  display: block;
  height: 100%;
  background: var(--m-green-light);
  transform: scaleX(0);
  transform-origin: left;
}

.m-loader-tag {
  font-size: 0.7rem;
  letter-spacing: 0.6em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  padding-left: 0.6em;
}

/* --- Split text --- */
.m-word {
  display: inline-block;
  white-space: nowrap;
}

.m-char {
  display: inline-block;
  will-change: transform;
}

.m-hero-title {
  perspective: 800px;
}

/* --- Scroll progress bar --- */
.m-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 60;
  background: linear-gradient(90deg, var(--m-green), var(--m-green-light));
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* --- Marquee band --- */
.m-marquee {
  position: relative;
  overflow: hidden;
  background: #121212;
  padding: clamp(1.25rem, 2.2vw, 2.25rem) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.m-marquee-row {
  display: flex;
  white-space: nowrap;
}

.m-marquee-row + .m-marquee-row {
  margin-top: 0.4rem;
}

.m-marquee-track {
  display: flex;
  flex-shrink: 0;
  will-change: transform;
}

.m-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1.9rem);
  padding-right: clamp(0.75rem, 1.5vw, 1.9rem);
  font-size: clamp(1.25rem, 3.4vw, 3.75rem);
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
}

.m-marquee-item i {
  color: var(--m-green-light);
  font-size: 0.5em;
}

/* Outline is painted first, then a fill in the band's own colour covers the inner half.
   That hides the font's overlapping internal contours, which a plain stroke would trace. */
.m-marquee-outline .m-marquee-item {
  color: #121212;
  -webkit-text-stroke: 2.5px #5f5f5f;
  paint-order: stroke fill;
}

.m-marquee-outline .m-marquee-item i {
  -webkit-text-stroke: 0;
  color: var(--m-green);
}

/* --- Stats --- */
.m-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 3rem);
  width: 100%;
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
}

.m-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-left: 2px solid var(--m-green);
  padding-left: 0.9rem;
}

@media (min-width: 768px) {
  .m-stat {
    align-items: flex-start;
  }
}

.m-stat-num {
  font-size: clamp(2.2rem, 3.6vw, 4.5rem);
  font-weight: 900;
  line-height: 1;
  color: var(--m-green-light);
  font-variant-numeric: tabular-nums;
}

.m-stat-label {
  margin-top: 0.4rem;
  font-size: clamp(0.6rem, 0.8vw, 0.85rem);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* --- Cursor spotlight on cards and membership tiers --- */
.m-spot {
  position: relative;
  isolation: isolate;
}

.m-spot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  transition: opacity 0.4s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
      rgba(143, 174, 62, 0.18), transparent 60%);
}

.m-spot.m-tier::after,
.m-spot.m-flex::after {
  z-index: -1;
}

.m-spot:hover::after {
  opacity: 1;
}

/* GSAP drives transforms on these, so stop Tailwind's transition-all from fighting it */
.m-magnetic,
.m-tilt {
  transition-property: color, background-color, border-color, box-shadow !important;
  will-change: transform;
}

/* --- Team photo curtain --- */
.m-curtain {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--m-green);
  transform-origin: top;
  pointer-events: none;
}

/* --- Pulsing glow on the main Join button --- */
.m-pulse {
  animation: m-pulse 2.6s ease-out infinite;
}

@keyframes m-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(143, 174, 62, 0.45);
  }

  70%,
  100% {
    box-shadow: 0 0 0 22px rgba(143, 174, 62, 0);
  }
}

/* --- Today's opening hours row --- */
.m-today {
  position: relative;
}

.m-today::before {
  content: "";
  position: absolute;
  left: -0.9rem;
  top: 0.15rem;
  bottom: 0.65rem;
  width: 3px;
  background: var(--m-green-light);
}

.m-today > span:first-child {
  color: #fff !important;
}

.m-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.m-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #888;
}

.m-status.is-open {
  border-color: rgba(143, 174, 62, 0.5);
  color: var(--m-green-light);
}

.m-status.is-open::before {
  background: var(--m-green-light);
  animation: m-blink 1.6s ease-in-out infinite;
}

@keyframes m-blink {
  50% {
    opacity: 0.25;
  }
}