/* public/co/assets/css/flair.css
 * ==========================================================================
 * THE HOME PAGE, WITH SOME LIFE IN IT (commit 1161)
 *
 * The page was right but flat: every section the same weight, nothing moving.
 * This adds depth and motion in the site's own hand - the hard offset shadow
 * the buttons already use, the marker stroke, the line art - rather than a
 * new style:
 *
 *   hero        a dotted field and a soft wash behind the scene, the scene
 *               drifting gently, two pieces of the product floating over it,
 *               the marker drawing itself under "whole club"
 *   clubs band  the logos scroll as a ticker, fading at the edges
 *   cards       lift on hover with a light that follows the pointer
 *   sections    rise into place as they scroll into view
 *   partners    the honest replacement for the testimonial (see index.html)
 *   finale      a dark band with mowed-fairway stripes and one last ask
 *
 * Everything that moves stops for prefers-reduced-motion, and everything
 * that waits for the script (reveals, the ticker, the count) shows normally
 * without it: those rules only apply under html.has-flair, which flair.js
 * sets.
 *
 * The logo itself is never given a glow or a shadow - flat, as it should be.
 * ========================================================================== */

/* ---- Hero ---------------------------------------------------------------- */

.hero--flair {
  position: relative;
  isolation: isolate;
}

/* A dotted field, strongest behind the scene and gone by the edges. */
.hero--flair::before {
  content: "";
  position: absolute;
  inset: -40px 0 -60px;
  z-index: -1;
  background-image: radial-gradient(var(--verde-300) 1.3px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 55% 70% at 72% 45%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 55% 70% at 72% 45%, #000 0%, transparent 72%);
  opacity: 0.55;
  pointer-events: none;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero__stage {
  position: relative;
  justify-self: center;
  width: 100%;
}

/* A pale wash under the figures, so the scene sits on something. */
.hero__stage::before {
  content: "";
  position: absolute;
  inset: 4% 2% -4% 4%;
  z-index: 0;
  border-radius: 48% 52% 46% 54% / 55% 48% 52% 45%;
  background: var(--verde-50);
}

.hero__stage .hero__art {
  position: relative;
  z-index: 1;
  display: block;
}

/* ---- The product, drawn as the real screens (1244) ------------------------
 * `.ui` is a small copy of the admin's dark theme (styles/verde-tokens.css,
 * the .dark block): its surfaces, text greys, green, amber, Inter, 8px radii,
 * the seat dots, the golfer card. The FRAME stays the site's: ink edge and the
 * hard green offset shadow, so it reads as the marketing brand holding up the
 * actual product. If the admin's look changes, change these to match.
 */
.ui {
  --ui-bg: #1f211f;
  --ui-card: #242624;
  --ui-chrome: #1a1c1a;
  --ui-elev: #2a2d2a;
  --ui-line: rgba(255, 255, 255, 0.07);
  --ui-hair: rgba(255, 255, 255, 0.05);
  --ui-fg: #e4e6e3;
  --ui-muted: #9aa09b;
  --ui-dim: #6f7671;
  --ui-g: #599f78;
  --ui-g-hi: #6fb68d;
  --ui-g-bg: rgba(89, 159, 120, 0.12);
  --ui-amber: #e0a24a;
  background: var(--ui-bg);
  color: var(--ui-fg);
  font-family: "Inter", system-ui, sans-serif;
  font-feature-settings: "tnum" 1;
}

.ui-muted { color: var(--ui-muted); }
.ui-crumb { font-size: 11px; color: var(--ui-muted); }
.ui-title { font-weight: 500; font-size: 15px; letter-spacing: -0.01em; }
.ui-title--lg { font-size: 22px; }
.ui-num { font-variant-numeric: tabular-nums; }

.ui-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ui-muted);
}

.ui-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ui-g);
  box-shadow: 0 0 0 3px var(--ui-g-bg);
}

.ui-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--ui-line);
  border-radius: 6px;
  background: var(--ui-chrome);
  color: var(--ui-fg);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

/* The book-sold bar and its figure. */
.ui-sold {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.ui-sold__bar {
  flex: 1;
  height: 4px;
  border-radius: 99px;
  background: var(--ui-elev);
  overflow: hidden;
}

.ui-sold__bar span {
  display: block;
  height: 100%;
  background: var(--ui-g);
}

.ui-sold__pct { font-size: 14px; font-weight: 500; }

.ui-key { display: inline-flex; align-items: center; gap: 5px; color: var(--ui-fg); white-space: nowrap; }
.ui-key::before { content: ""; width: 7px; height: 7px; border-radius: 2px; }
.ui-key--on::before { background: var(--ui-g); }
.ui-key--part::before { background: transparent; border: 1px solid var(--ui-g); }

/* Table head and rows. */
.ui-th {
  color: var(--ui-muted);
  font-size: 11px;
}

.ui-tr {
  border-top: 1px solid var(--ui-hair);
  font-size: 12.5px;
}

.ui-tr b { font-weight: 500; white-space: nowrap; }
.ui-tr span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Seat dots: a filled seat is the green disc with a soft ring, an empty one
   is a faint ring - the same marks the tee sheet uses. */
.ui-seats { display: inline-flex; gap: 4px; }

.ui-seat {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--ui-line);
}

.ui-seat.is-on {
  border-color: var(--ui-g-hi);
  background: var(--ui-g);
  box-shadow: 0 0 0 2px var(--ui-g-bg);
}

.ui-chev { color: var(--ui-dim); text-align: right; }

/* The golfer card, as in the booking drawer. */
.ui-golfer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.ui-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(145deg, #63ac83, #35634b);
  color: #0a1a12;
  font-size: 13px;
  font-weight: 600;
}

.ui-golfer__who { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; }
.ui-golfer__who b { font-size: 14px; font-weight: 500; color: var(--ui-fg); }

.ui-golfer__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.ui-owed { color: var(--ui-amber); font-size: 13px; font-weight: 500; }

/* ---- The two hero cards -------------------------------------------------- */

.hero-card {
  position: absolute;
  z-index: 2;
  width: 300px;
  padding: 12px 14px 8px;
  border: 1px solid var(--forest);
  border-radius: 10px;
  box-shadow: 6px 6px 0 var(--verde-400);
  line-height: 1.35;
}

.hero-card--sheet {
  left: -4%;
  bottom: -18%;
}

.hero-card--charge {
  right: -2%;
  top: -12%;
  width: 228px;
  padding: 12px 14px 14px;
  background: var(--ui-card);
}

.hero-card .ui-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1px 0 8px;
}

.hero-card .ui-sold { margin-bottom: 8px; }

.hero-card__grid {
  display: grid;
  grid-template-columns: 54px 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

/* The booking that just landed: a green wash, as the live sheet shows it. */
.hero-card__row.is-new {
  margin: 0 -14px;
  padding-left: 14px;
  padding-right: 14px;
  background: var(--ui-g-bg);
}

/* The huge gap under the hero was air, not breathing room. */
.clients {
  margin-top: 120px;
}

@media (max-width: 1100px) {
  .hero-card--sheet { left: 0; bottom: -10%; }
  .hero-card--charge { right: 0; top: -8%; }
}

/* On a phone the scene is small; the cards would cover it. */
@media (max-width: 640px) {
  .hero-card { display: none; }
  .hero__stage::before { inset: 6%; }
  .clients { margin-top: 80px; }
}

/* ---- Feature cards --------------------------------------------------------- */

.feature-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* A light that follows the pointer (flair.js sets --mx and --my). */
.feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%),
      rgba(111, 203, 159, 0.22), transparent 45%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.feature-card:hover {
  transform: translate(-3px, -5px);
  box-shadow: 6px 6px 0 var(--verde-400);
}

.feature-card:hover::after { opacity: 1; }

.feature-card__icon { transition: transform 0.3s ease; }

.feature-card:hover .feature-card__icon { transform: rotate(-4deg) scale(1.06); }

/* ---- How Verde works: the panel arrives instead of appearing ---------------- */

.worksteps__frame:not([hidden]) {
  animation: flair-panel 0.45s ease both;
}

.tab { transition: background-color 0.2s ease, color 0.2s ease; }

/* ---- Nothing to bolt on: the list answers the pointer ----------------------- */

/* The whole row nudges right, tick and words together, so the tick can never
   end up over the text (padding-left moved the words under it). */
.incl__item { transition: transform 0.2s ease, color 0.2s ease; }
.incl__item:hover { transform: translateX(6px); color: var(--verde-300); }

/* ---- Founding Partners (replaces the testimonial) --------------------------- */

.partners__card {
  position: relative;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px 36px 32px;
  border: 1px solid var(--forest);
  border-radius: 10px;
  background: var(--white);
  box-shadow: 8px 8px 0 var(--forest);
}

.partners__badge {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 99px;
  background: var(--forest);
  color: var(--band);
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.partners__offer {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--h3);
  line-height: 1.1;
  color: var(--forest);
}

.partners__sub {
  color: var(--ink-soft);
}

.partners__list {
  margin: 6px 0 10px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.partners__list li {
  position: relative;
  padding-left: 30px;
}

.partners__list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: -1px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--band);
  color: var(--forest);
  font-size: 12px;
}

.partners__cta { align-self: flex-start; }

@media (max-width: 640px) {
  .partners__card { padding: 26px 22px; box-shadow: 5px 5px 0 var(--forest); }
}

/* ---- Finale: "The Tee Sheet Itself" (commit 1163, design 4) -------------- */

.finale {
  /* The footer brings its own space above it. */
  padding: 40px 0 10px;
}

.finale__card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  min-height: 520px;
  border-radius: 10px;
  background: var(--forest);
  color: var(--white);
}

.finale__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 0 64px 64px;
}

.finale__eyebrow { color: var(--band); }

.finale__title {
  margin-top: 8px;
  color: var(--white);
  /* Smaller than a section h2: it shares the band with the tee sheet. */
  font-size: clamp(36px, 3.8vw, 54px);
  line-height: 1.1;
}

.finale__lead {
  max-width: 470px;
  margin-top: 18px;
  color: var(--verde-100);
}

.finale__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.finale .btn:hover {
  background: var(--white);
  color: var(--forest);
  box-shadow: 4px 4px 0 var(--verde-600);
}

.finale__stage { position: relative; }

/* The product itself (1244: drawn as the real dark tee sheet), tilted, with
   the hard green offset shadow, running off the band's edge. */
.sheet {
  position: absolute;
  left: 40px;
  top: 44px;
  width: 660px;
  border: 2px solid var(--band);
  border-radius: 12px;
  box-shadow: 12px 12px 0 var(--verde-400);
  transform: rotate(-2.5deg);
  overflow: hidden;
}

.sheet__top {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 18px 22px 0;
}

.sheet__top .ui-live { margin-left: auto; padding-bottom: 6px; }

.sheet__summary {
  padding: 6px 22px 14px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--ui-line);
}

.sheet__body {
  padding: 14px 22px 4px;
}

.ui-sold--wide { gap: 10px; }
.ui-sold--wide .ui-sold__bar { flex: 0 0 200px; }

.ui-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin: 14px 0 12px;
  border-bottom: 1px solid var(--ui-line);
}

.ui-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 0 8px;
  font-size: 15px;
}

.ui-day small { font-size: 10.5px; color: var(--ui-muted); }
.ui-day.is-past { color: var(--ui-dim); }

.ui-day.is-on {
  border-top: 2px solid var(--ui-g);
  background: var(--ui-g-bg);
  color: var(--ui-g-hi);
}

.ui-day.is-on small { color: var(--ui-g-hi); }

.sheet__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 12px;
}

.ui-select,
.ui-search {
  padding: 7px 10px;
  border: 1px solid var(--ui-line);
  border-radius: 6px;
  background: var(--ui-chrome);
  white-space: nowrap;
}

.ui-search { flex: 1; color: var(--ui-dim); }

.ui-seg {
  display: inline-flex;
  padding: 2px;
  border-radius: 6px;
  background: var(--ui-chrome);
  color: var(--ui-muted);
}

.ui-seg span { padding: 5px 10px; border-radius: 4px; }
.ui-seg .is-on { background: var(--ui-elev); color: var(--ui-fg); }

.sheet__grid {
  display: grid;
  grid-template-columns: 74px 70px minmax(0, 1fr) 46px 50px 14px;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
}

.sheet .ui-tr { font-size: 13.5px; }

.ui-now {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  background: var(--ui-g-bg);
  color: var(--ui-g-hi);
  font-size: 11.5px;
}

.ui-now::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ui-g);
}

.ui-now::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(89, 159, 120, 0.35);
}

.ui-hour {
  padding: 10px 4px 4px;
  font-size: 11.5px;
  color: var(--ui-muted);
}

@media (max-width: 1100px) {
  .finale__card { grid-template-columns: minmax(0, 1fr); }
  .finale__copy { padding: 56px 40px 24px; }
  .finale__stage { height: 300px; }
  .sheet { left: 40px; top: 24px; }
}

@media (max-width: 640px) {
  .finale { padding-bottom: 0; }
  .finale__copy { padding: 44px 22px 16px; }
  .finale__stage { height: 260px; }
  .sheet { left: 22px; width: 600px; transform: rotate(-2deg); box-shadow: 8px 8px 0 var(--verde-400); }
}

/* An outline button for a dark surface. */
.btn--ghost-light {
  background: transparent;
  border-color: var(--verde-300);
  color: var(--white);
}

@media (max-width: 640px) {
  .finale { padding-bottom: 0; }
  .finale__card { padding: 56px 22px; }
}

/* ==========================================================================
   MOTION - only with the script (html.has-flair) and never for anyone who
   asked their device for less of it.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .hero--flair .hero__art { animation: flair-drift 9s ease-in-out infinite; }
  .hero-card--sheet { animation: flair-bob 6s ease-in-out infinite; }
  .hero-card--charge { animation: flair-bob 6s ease-in-out -3s infinite; }

  /* The newest booking arrives. */
  .hero-card__row.is-new { animation: flair-arrive 0.6s ease 1.4s both; }

  /* The marker draws itself under "whole club". */
  .hero__title .marker { animation: flair-draw 0.9s cubic-bezier(0.6, 0, 0.3, 1) 0.35s both; }

  /* Sections rise in as they scroll into view. */
  .has-flair [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--reveal-delay, 0s);
  }

  .has-flair [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  /* The clubs as a ticker (flair.js doubles the row so it loops). */
  .has-flair .clients__track {
    margin-top: 58px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  }

  .has-flair .clients__track .clients__logos {
    display: flex;
    gap: 72px;
    width: max-content;
    margin-top: 0;
    animation: flair-ticker 42s linear infinite;
  }

  .has-flair .clients__track:hover .clients__logos { animation-play-state: paused; }

  .has-flair .clients__track .clients__logo { width: 190px; flex: none; }
}

@keyframes flair-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes flair-bob {
  0%, 100% { transform: translateY(0) rotate(-0.4deg); }
  50% { transform: translateY(-10px) rotate(0.4deg); }
}

@keyframes flair-arrive {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: none; }
}

@keyframes flair-draw {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes flair-panel {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* Half the doubled row = one full set, so the loop has no seam. */
@keyframes flair-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 36px)); }
}