/* =============================================================================
   V3 — Felt-Table / Premium brand
   Deep felt green. Cream + gold. Card art. Confident & poker-y.
   ============================================================================= */

:root {
  --felt:        #0d2820;
  --felt-deep:   #081e17;
  --felt-soft:   #143a2c;
  --felt-light:  #1e4a39;
  --rail-leather:#2a1d12;    /* table rail color */
  --cream:       #f4ead0;
  --cream-dim:   #d6c9a1;
  --cream-soft:  rgba(244, 234, 208, 0.7);
  --cream-faint: rgba(244, 234, 208, 0.4);
  --gold:        #d4b66a;
  --gold-bright: #f3d579;
  --gold-deep:   #a08847;
  --red:         #c43533;     /* card-red */
  --red-deep:    #7a1a18;
  --card-black:  #14110d;

  --font-display: "DM Serif Display", "Times New Roman", Georgia, serif;
  --font-body:    "Manrope", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --container: 1280px;
  --gutter: clamp(20px, 4vw, 48px);
  --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  background: var(--felt-deep);
  /* `clip` (vs `hidden`) clips overflow without creating a scrollable
     container — prevents stray glows/transforms from forcing a horizontal
     scrollbar. Set on both html and body to be safe across browsers. */
  overflow-x: clip;
}

body {
  background: var(--felt);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  /* Felt texture — vignette + grain */
  background-image:
    radial-gradient(ellipse 1400px 800px at 50% 0%, rgba(30, 74, 57, 0.6), transparent 70%),
    radial-gradient(ellipse 1000px 600px at 80% 100%, rgba(8, 30, 23, 0.7), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.06  0 0 0 0 0.16  0 0 0 0 0.13  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

::selection { background: var(--gold); color: var(--card-black); }
a { color: var(--cream); text-decoration: none; transition: color 180ms ease; }
img, video, svg { max-width: 100%; height: auto; display: block; }

/* ── Container ───────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── Header ──────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(13, 40, 32, 0.85);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(212, 182, 106, 0.15);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.site-header .brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.site-header .brand img { height: 28px; filter: brightness(1.05); }
.site-header .brand .v {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--gold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}
.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav a.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--cream-soft);
  letter-spacing: -0.005em;
}
.site-nav a.nav-link:hover { color: var(--gold); }
.site-nav .styles-link {
  font-size: 12px;
  color: var(--cream-faint);
  padding: 4px 12px;
  border: 1px solid rgba(212, 182, 106, 0.25);
  border-radius: 999px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}
.site-nav .styles-link:hover { color: var(--gold); border-color: var(--gold); }
@media (max-width: 720px) {
  .site-nav a.nav-link:not(.btn):not(.styles-link) { display: none; }
}

/* ── Buttons ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  background: transparent;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, transform 80ms ease;
}
.btn:hover { background: rgba(212, 182, 106, 0.1); color: var(--gold); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--card-black);
  border-color: var(--gold-bright);
  box-shadow:
    0 8px 24px -6px rgba(212, 182, 106, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn-primary:hover { color: var(--card-black); background: var(--gold-bright); }
.btn-cta {
  background: var(--red);
  color: white;
  border-color: var(--red);
  box-shadow: 0 10px 30px -8px var(--red);
}
.btn-cta:hover { background: var(--red-deep); border-color: var(--red-deep); color: white; }

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero {
  padding: 48px 0;
  position: relative;
  min-height: calc(100vh - 76px);   /* 76px = header height */
  display: flex;
  align-items: center;
}
.hero::before {
  /* Warm pool of overhead light. Anchored to the right edge of the viewport
     (not past it) so it never causes horizontal overflow. Extends past the
     hero bottom and fades gradually into the next section. */
  content: "";
  position: absolute;
  right: 0;
  top: -20%;
  bottom: -80%;
  width: 60%;
  background:
    radial-gradient(ellipse 50% 38% at 60% 30%, rgba(212, 182, 106, 0.22), transparent 70%),
    radial-gradient(ellipse 70% 50% at 60% 50%, rgba(30, 74, 57, 0.40), transparent 75%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  /* Dither layer to mask color banding in the card shadows. The two large
     soft box-shadows on .card-face produce visible 8-bit gradient steps
     over the dark felt; fine-grained noise breaks the smooth gradient into
     pseudo-random pixels that the eye averages back to the intended color.
     Sits above the warm-light pool (::before) but below the content layer,
     so the cards' semi-transparent shadows composite against (noise + pool +
     felt) and the dither shows through. */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.14 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  pointer-events: none;
  z-index: 0;
}
.hero > .container { position: relative; z-index: 1; }

/* 2-col asymmetric hero — copy left, hand right */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  width: 100%;
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 64px; }
  .hero-copy { text-align: center; }
  .hero-copy h1 { margin-left: auto; margin-right: auto; }
  .hero-copy .lead { margin-left: auto; margin-right: auto; }
  .hero-copy .cta-row { justify-content: center; }
}

.hero .kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 32px;
  font-weight: 600;
}
.hero .kicker::before {
  content: "";
  width: 32px; height: 1px;
  background: var(--gold);
  opacity: 0.6;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 6.4vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  font-weight: 400;
  margin: 0 0 24px;
  max-width: 14ch;
  color: var(--cream);
}
.hero h1 .red {
  color: var(--red);
  font-style: italic;
}
.hero h1 .gold {
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}

.hero p.lead {
  font-size: 19px;
  color: var(--cream-dim);
  max-width: 48ch;
  margin: 0 0 36px;
  line-height: 1.5;
}

.hero .cta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── The Hand: pocket kings being held ───────────────────────────────── */
.hero-hand {
  position: relative;
  perspective: 2000px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 520px;
}
.card-stage {
  position: relative;
  width: 380px;
  height: 460px;
  transform-style: preserve-3d;
  z-index: 2;
  flex-shrink: 0;
  /* Transform is defined in the Motion section below using CSS variables
     so page-load, scroll-lift and mouse-parallax can all compose cleanly. */
}

.card-face {
  position: absolute;
  width: 280px;
  height: 400px;
  background:
    radial-gradient(ellipse 100% 80% at 50% 0%, rgba(0,0,0,0.05), transparent 60%),
    var(--cream);
  color: var(--card-black);
  border-radius: 18px;
  box-shadow:
    0 60px 70px -30px rgba(0, 0, 0, 0.5),
    0 24px 36px -14px rgba(0, 0, 0, 0.32),
    inset 0 0 0 1px rgba(0, 0, 0, 0.22),
    inset 0 -6px 12px rgba(0, 0, 0, 0.06),
    inset 0 2px 4px rgba(255, 255, 255, 0.6);
  /* No CSS transition on transform — the cards track scroll directly via the
     --spread variable for 1:1 responsiveness. */
  display: grid;
  place-items: center;
  overflow: hidden;
  will-change: transform;
}
/* paper texture on the cards */
.card-face::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.09  0 0 0 0 0.07  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  pointer-events: none;
  opacity: 0.7;
}
.card-face .corner {
  position: absolute;
  top: 20px; left: 26px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-family: var(--font-display);
  line-height: 0.9;
  z-index: 2;
}
.card-face .corner.br { top: auto; left: auto; bottom: 20px; right: 26px; transform: rotate(180deg); }
.card-face .corner .rank { font-size: 44px; }
.card-face .corner .suit { font-size: 34px; }
.card-face .suit-big {
  font-family: var(--font-display);
  font-size: 220px;
  line-height: 1;
  color: var(--card-black);
  z-index: 1;
}

/* Royal Flush of spades — 5 cards, all black ♠, fan out as --spread goes 0→1.
   At spread=0 the cards are stacked tight (slight rotation cascade for depth).
   At spread=1 they fan out symmetrically — each card's top-left corner pip
   showing ("10 ♠", "J ♠", "Q ♠", "K ♠", "A ♠"). */
.card-1 {  /* 10♠ — far left */
  z-index: 1;
  transform:
    rotate(calc(-3deg + var(--spread, 0) * -36deg))
    translate(
      calc(-3px + var(--spread, 0) * -210px),
      calc(0px  + var(--spread, 0) * 56px)
    );
}
.card-2 {  /* J♠ — left */
  z-index: 2;
  transform:
    rotate(calc(-1.5deg + var(--spread, 0) * -18deg))
    translate(
      calc(-1.5px + var(--spread, 0) * -106px),
      calc(0px    + var(--spread, 0) * 14px)
    );
}
.card-3 {  /* Q♠ — centre */
  z-index: 3;
  transform:
    rotate(0deg)
    translate(0px, calc(var(--spread, 0) * -10px));
}
.card-4 {  /* K♠ — right */
  z-index: 4;
  transform:
    rotate(calc(1.5deg + var(--spread, 0) * 18deg))
    translate(
      calc(1.5px + var(--spread, 0) * 106px),
      calc(0px   + var(--spread, 0) * 14px)
    );
}
.card-5 {  /* A♠ — far right (drawn last → on top of the fan when spread) */
  z-index: 5;
  transform:
    rotate(calc(3deg + var(--spread, 0) * 36deg))
    translate(
      calc(3px + var(--spread, 0) * 210px),
      calc(0px + var(--spread, 0) * 56px)
    );
}

@media (max-width: 980px) {
  .hero-hand { min-height: 480px; }
  .card-stage { width: 340px; height: 440px; }
  .card-face { width: 260px; height: 370px; }
  .card-face .corner .rank { font-size: 42px; }
  .card-face .corner .suit { font-size: 32px; }
  .card-face .suit-big { font-size: 200px; }
}
@media (max-width: 720px) {
  .hero-hand { min-height: 400px; }
  .card-stage { width: 280px; height: 380px; }
  .card-face { width: 200px; height: 290px; }
  .card-face .corner .rank { font-size: 32px; }
  .card-face .corner .suit { font-size: 24px; }
  .card-face .suit-big { font-size: 156px; }
  .card-back { transform: rotate(-14deg) translate(-30px, 16px); }
  .card-mid  { transform: rotate(-6deg) translate(-12px, 4px); }
  .card-top  { transform: rotate(6deg) translate(24px, -10px); }
}

/* ── Sections ────────────────────────────────────────────────────────── */

section { padding: 120px 0; position: relative; }

h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  font-weight: 400;
  color: var(--cream);
  margin: 0 0 24px;
  max-width: 20ch;
}
h2 .gold {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}
h2 .italic { font-style: italic; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
  padding: 6px 14px;
  border: 1px solid rgba(212, 182, 106, 0.4);
  border-radius: 999px;
}

p { color: var(--cream-dim); margin: 0 0 16px; }
p.lead { font-size: 19px; color: var(--cream); line-height: 1.5; }

/* ── Feature row ─────────────────────────────────────────────────────── */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 80px;
  align-items: center;
}
.feature.reverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.feature.reverse .feature-copy { order: 2; }
.feature.reverse .feature-media { order: 1; }
@media (max-width: 900px) {
  .feature, .feature.reverse { grid-template-columns: 1fr; gap: 56px; }
  .feature.reverse .feature-copy { order: 1; }
  .feature.reverse .feature-media { order: 2; }
}

/* iPad presented on felt: angled, gold trim shadow */
.feature-media .table-stage {
  position: relative;
  display: flex;
  justify-content: center;
}
.feature-media .table-stage::before {
  content: "";
  position: absolute;
  inset: -10% -5%;
  background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(212, 182, 106, 0.18), transparent 60%);
  z-index: 0;
  filter: blur(20px);
}
.feature-media .device {
  position: relative;
  max-width: 540px;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 70px 90px -30px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(212, 182, 106, 0.18),
    0 0 0 4px rgba(212, 182, 106, 0.04);
  /* Transform + transition handled by scroll-driven motion rules below */
}

/* Bullet list with chip markers */
ul.chips {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 18px;
}
ul.chips li {
  position: relative;
  padding-left: 44px;
  font-size: 17px;
  color: var(--cream);
  line-height: 1.5;
}
ul.chips li::before {
  /* Mini poker chip */
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--cream) 0 35%, transparent 36%),
    repeating-conic-gradient(from 0deg, var(--red) 0 22.5deg, var(--cream) 22.5deg 45deg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
ul.chips li.gold::before {
  background:
    radial-gradient(circle at 50% 50%, var(--cream) 0 35%, transparent 36%),
    repeating-conic-gradient(from 0deg, var(--gold) 0 22.5deg, var(--card-black) 22.5deg 45deg);
}
ul.chips li.black::before {
  background:
    radial-gradient(circle at 50% 50%, var(--cream) 0 35%, transparent 36%),
    repeating-conic-gradient(from 0deg, var(--card-black) 0 22.5deg, var(--cream) 22.5deg 45deg);
}

/* ── Player phones (fan) ─────────────────────────────────────────────── */

.player-section .section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 80px;
}
.player-section .section-head .eyebrow { margin-bottom: 28px; }
.player-section .section-head h2 { margin: 0 auto 20px; }
.player-section .section-head p { margin: 0 auto; max-width: 60ch; }

.phones-fan {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  perspective: 1400px;
}
@media (max-width: 720px) { .phones-fan { grid-template-columns: 1fr; gap: 56px; max-width: 320px; margin: 0 auto; } }
.phones-fan .phone {
  border-radius: 36px;
  overflow: hidden;
  background: var(--card-black);
  box-shadow:
    0 60px 80px -30px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(212, 182, 106, 0.18);
  /* Transform driven by scroll via --reveal — no transition */
}
/* Phone transforms are now scroll-driven via --reveal (see motion section) */
@media (max-width: 720px) { .phones-fan .phone { transform: none !important; } }

/* ── Team / Video ─────────────────────────────────────────────────────── */

.team {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 900px) { .team { grid-template-columns: 1fr; gap: 56px; } }

.team-video {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--felt-deep);
  box-shadow:
    0 50px 80px -20px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(212, 182, 106, 0.2),
    0 0 0 6px rgba(212, 182, 106, 0.04);
}
.team-video video { width: 100%; height: 100%; object-fit: cover; }
.team-video .poster {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(212, 182, 106, 0.2) 0%, transparent 60%),
    linear-gradient(160deg, var(--felt-light), var(--felt-deep));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px 32px;
  pointer-events: none;
}
.team-video .poster .tag {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.team-video .poster h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  font-style: italic;
  color: var(--cream);
  max-width: 22ch;
  margin: 0;
  font-weight: 600;
  line-height: 1.1;
}
.team-video .play-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 88px; height: 88px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
  box-shadow:
    0 16px 40px rgba(212, 182, 106, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 200ms ease;
}
.team-video .play-btn::before {
  content: "";
  border-left: 22px solid var(--card-black);
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  margin-left: 7px;
}
.team-video .play-btn:hover { transform: scale(1.06); }
.team-video.is-playing .poster,
.team-video.is-playing .play-btn { display: none; }

/* ── Contact ──────────────────────────────────────────────────────────── */

.contact {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; gap: 48px; } }

.contact form {
  background: rgba(8, 30, 23, 0.6);
  border: 1px solid rgba(212, 182, 106, 0.25);
  border-radius: var(--radius);
  padding: 40px;
  backdrop-filter: blur(8px);
}
@media (max-width: 560px) { .contact form { padding: 28px 22px; } }

.contact .row { display: grid; gap: 22px; margin-bottom: 20px; }
.contact .row.split { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .contact .row.split { grid-template-columns: 1fr; } }

.contact label {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.contact label .req { color: var(--red); letter-spacing: 0; }
.contact input,
.contact textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(244, 234, 208, 0.3);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  padding: 10px 2px 12px;
  transition: border-color 180ms ease;
}
.contact input::placeholder,
.contact textarea::placeholder { color: var(--cream-faint); }
.contact input:focus,
.contact textarea:focus { outline: none; border-bottom-color: var(--gold); }
.contact textarea {
  resize: vertical;
  min-height: 110px;
  border: 1px solid rgba(244, 234, 208, 0.3);
  border-radius: 6px;
  padding: 12px;
}
.contact textarea:focus { border-color: var(--gold); }

.contact .form-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.contact .form-foot .note {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-faint);
  margin: 0;
  max-width: 30ch;
  font-weight: 500;
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid rgba(212, 182, 106, 0.18);
  padding: 56px 0 32px;
  margin-top: 64px;
  background: var(--felt-deep);
}
.site-footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.site-footer .brand-row { display: flex; align-items: center; gap: 16px; }
.site-footer .brand-row img { height: 24px; }
.site-footer .brand-row .copy {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--cream-faint);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}
.site-footer .footer-links {
  display: flex; gap: 28px;
}
.site-footer .footer-links a {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--cream-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}
.site-footer .footer-links a:hover { color: var(--gold); }

/* ─── PUSHED FELT: additional components ──────────────────────────────── */

/* Refined royal-flush card art (overrides earlier card layout slightly) */
.hero-cards .card .corner {
  /* show both rank and suit on top */
  display: flex; flex-direction: column; align-items: center;
}
.hero-cards .card .suit {
  font-size: 1em;
  line-height: 1;
}
.hero-cards .card.red .suit { color: var(--red); }
.hero-cards .card.black .suit { color: var(--card-black); }
/* Subtle paper texture on each card */
.hero-cards .card {
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(0,0,0,0.04), transparent 60%),
    var(--cream);
  box-shadow:
    0 30px 60px -15px rgba(0, 0, 0, 0.75),
    inset 0 0 0 1px rgba(0, 0, 0, 0.15),
    inset 0 -4px 8px rgba(0, 0, 0, 0.05);
}

/* ── Pushed video poster ─────────────────────────────────────────────── */
.team-video.pushed .poster .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  position: relative;
}
.team-video.pushed .poster .row .tag.runtime {
  color: var(--red);
}
.team-video.pushed .poster {
  background:
    /* film grain */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.85  0 0 0 0 0.72  0 0 0 0 0.42  0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    /* spotlight from center */
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(212, 182, 106, 0.30) 0%, transparent 60%),
    /* deep felt — semi-transparent so the video poster bleeds through */
    linear-gradient(160deg, rgba(28, 74, 57, 0.86) 0%, rgba(8, 30, 23, 0.94) 80%);
}
.team-video.pushed .poster::before {
  /* faint top vignette + projector frame */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}
.team-video.pushed .poster .runtime {
  display: flex; align-items: center; gap: 12px;
}
.team-video.pushed .poster .runtime::before {
  content: "●";
  color: var(--red);
  font-size: 10px;
  animation: pulse-rec 2.4s ease-in-out infinite;
}
@keyframes pulse-rec {
  0%, 100% { opacity: 1; } 50% { opacity: 0.3; }
}

/* Pull quote (used between sections for cadence) */
.felt-quote {
  padding: 80px 0;
  text-align: center;
  max-width: 920px;
  margin: 0 auto;
}
.felt-quote blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.2;
  color: var(--cream);
  margin: 0 0 24px;
  font-weight: 400;
}
.felt-quote blockquote::before { content: "\201C"; color: var(--gold); margin-right: 4px; }
.felt-quote blockquote::after  { content: "\201D"; color: var(--gold); margin-left: 4px; }
.felt-quote cite {
  font-style: normal;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

/* ─── Motion ──────────────────────────────────────────────────────────── */

/* Page-load: deal the cards in from below + slight rotation */
@keyframes deal-card {
  from {
    opacity: 0;
    transform: translate(40px, 120px) rotate(20deg) scale(0.95);
  }
}
@keyframes copy-rise {
  from { opacity: 0; transform: translateY(20px); }
}

/* Apply entrance when JS adds .is-loaded to <html> (avoids FOUC on slow CPUs) */
html.felt-loaded .card-back {
  animation: deal-card 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 100ms backwards;
}
html.felt-loaded .card-mid {
  animation: deal-card 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 280ms backwards;
}
html.felt-loaded .card-top {
  animation: deal-card 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 460ms backwards;
}
html.felt-loaded .hero-copy h1,
html.felt-loaded .hero-copy .lead,
html.felt-loaded .hero-copy .cta-row {
  animation: copy-rise 700ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
html.felt-loaded .hero-copy h1       { animation-delay: 60ms; }
html.felt-loaded .hero-copy .lead    { animation-delay: 200ms; }
html.felt-loaded .hero-copy .cta-row { animation-delay: 340ms; }

/* Card-stage transform composes three sources of motion:
     --lift = scroll-driven (0 → -88px as user scrolls 0 → 320px)
     --px   = mouse parallax X axis (-0.5 to +0.5, rAF-lerped in JS)
     --py   = mouse parallax Y axis (-0.5 to +0.5, rAF-lerped in JS)
   No CSS transition — scroll/parallax both drive the value directly.
   Parallax smoothness comes from the JS lerp; scroll is 1:1 with scrollY. */
.card-stage {
  --lift: 0px;
  --px: 0;
  --py: 0;
  transform:
    translate3d(0, var(--lift), 0)
    rotateX(calc(10deg - var(--py) * 6deg))
    rotateY(calc(var(--px) * 8deg));
  will-change: transform;
}

/* ── Scroll-position-driven motion for lower sections ─────────────────
   JS writes --reveal (0→1) on tracked containers.
   - 0   = element top at bottom of viewport (just entering)
   - 0.5 = element centred in viewport
   - 1   = element bottom at top of viewport (exiting)
   Below rules use --reveal directly in calc() — no transitions, 1:1 with scroll. */

/* Feature blocks: copy fades in, iPad floats up + rotates through */
.feature                       { --reveal: 0.5; }
.feature .feature-copy {
  opacity: calc(0.15 + min(var(--reveal) * 2.4, 1) * 0.85);
  transform: translateY(calc((0.5 - var(--reveal)) * 80px));
  will-change: opacity, transform;
}
.feature .feature-media .device {
  /* Base rotation stays -3°; scroll bends it ±5° and floats ±60px */
  transform:
    translateY(calc((0.5 - var(--reveal)) * 120px))
    rotate(calc(-3deg + (0.5 - var(--reveal)) * -10deg));
  will-change: transform;
}
.feature.reverse .feature-media .device {
  transform:
    translateY(calc((0.5 - var(--reveal)) * 120px))
    rotate(calc(3deg + (0.5 - var(--reveal)) * 10deg));
}

/* Pull quote: spotlights at viewport centre, fades at edges */
.felt-quote {
  --reveal: 0.5;
  opacity: calc(0.25 + min(var(--reveal), 1 - var(--reveal)) * 1.5);
  transform: translateY(calc((0.5 - var(--reveal)) * 60px));
  will-change: opacity, transform;
}

/* Player section heading: rises and fades through */
.player-section .section-head {
  --reveal: 0.5;
  opacity: calc(0.2 + min(var(--reveal) * 2.4, 1) * 0.8);
  transform: translateY(calc((0.5 - var(--reveal)) * 60px));
  will-change: opacity, transform;
}

/* Phones: spread continuously from stack (reveal 0) to full fan (reveal 1) */
.phones-fan { --reveal: 0.5; }
.phones-fan .phone.p1 {
  transform:
    rotate(calc(var(--reveal) * -14deg))
    translateY(calc(var(--reveal) * 64px));
  will-change: transform;
}
.phones-fan .phone.p2 {
  transform:
    translateY(calc(var(--reveal) * -40px));
  will-change: transform;
}
.phones-fan .phone.p3 {
  transform:
    rotate(calc(var(--reveal) * 14deg))
    translateY(calc(var(--reveal) * 64px));
  will-change: transform;
}

/* Team + contact use "fade-in-and-stay" rather than "pass through" because
   they're the last sections — users can't scroll past them, so center-peak
   formulas would leave them stuck faded. They saturate at reveal=0.42 and
   stay revealed. */
.team { --reveal: 0.5; }
.contact    { --reveal: 0.5; }

/* ── Hero copy parallax — drifts up slower than cards as user scrolls past */
.hero { --hero-scroll: 0; }
.hero-copy {
  transform: translateY(calc(var(--hero-scroll, 0) * -60px));
  opacity: calc(1 - var(--hero-scroll, 0) * 0.6);
  will-change: transform, opacity;
}

/* ── Eyebrow pills slide in from the left as their section enters view */
.feature .feature-copy .eyebrow,
.player-section .section-head .eyebrow,
.team .eyebrow,
.compose .compose-intro .eyebrow,
.eyebrow {
  transform: translateX(calc((1 - min(var(--reveal, 0.5) * 2.2, 1)) * -32px));
  opacity: calc(0.2 + min(var(--reveal, 0.5) * 2.4, 1) * 0.8);
  will-change: transform, opacity;
}
/* In the parent's reveal context, eyebrow uses the parent's --reveal.
   The min(... * 2.2, 1) caps the offset by mid-reveal so the eyebrow
   settles in well before the section is centred. */

/* ── Chip-bullet list staggers in as the section enters view ──────── */
.feature .feature-copy ul.chips {
  /* The chip-list lives inside .feature which has --reveal set on it.
     Each li reads the parent's --reveal and applies its own offset based on
     --i (set inline). */
}
ul.chips li {
  opacity: calc(0.1 + clamp(0, var(--reveal, 0.5) * 2.4 - var(--i, 0) * 0.15, 1) * 0.9);
  transform: translateX(calc((1 - clamp(0, var(--reveal, 0.5) * 2.4 - var(--i, 0) * 0.15, 1)) * -40px));
  will-change: transform, opacity;
}

/* ── Dramatic pull quote — giant background quote marks grow with reveal */
.felt-quote {
  position: relative;
}
.felt-quote::before {
  /* Big "open quote" ornament behind the text. Grows from tiny to large
     as the quote crosses the viewport. */
  content: "\201C";
  position: absolute;
  top: -40px;
  left: 50%;
  transform:
    translateX(-50%)
    scale(calc(0.4 + min(var(--reveal, 0.5), 1 - var(--reveal, 0.5)) * 1.6));
  font-family: var(--font-display);
  font-style: italic;
  font-size: 360px;
  line-height: 0.7;
  color: var(--brass);
  opacity: calc(min(var(--reveal, 0.5), 1 - var(--reveal, 0.5)) * 0.32);
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
}
.felt-quote blockquote,
.felt-quote cite { position: relative; z-index: 1; }
.felt-quote blockquote {
  transform: scale(calc(0.92 + min(var(--reveal, 0.5), 1 - var(--reveal, 0.5)) * 0.16));
  transform-origin: center;
}

/* ── Italic accent words gain a subtle shimmer when their section is centred */
h2 .gold, .hero h1 .gold {
  background-size: 100% 200%;
  background-position: 0% calc(50% - var(--reveal, 0.5) * 30%);
  transition: background-position 200ms linear;
}

/* ── Team text + video — fade in from opposite sides and stay ───────── */
/* Single-shot reveal: by reveal=0.42 they're at rest, then static. */
.team > div:first-child {
  --p: clamp(0, var(--reveal, 0) * 2.4, 1);
  transform: translateX(calc((1 - var(--p)) * -120px));
  opacity: var(--p);
  will-change: transform, opacity;
}
.team > div:last-child {
  --p: clamp(0, var(--reveal, 0) * 2.4, 1);
  transform:
    translateX(calc((1 - var(--p)) * 120px))
    scale(calc(0.9 + var(--p) * 0.1));
  opacity: var(--p);
  will-change: transform, opacity;
}

/* ── Contact — intro rises from left, form from right with field stagger */
.contact > div:first-child {
  --p: clamp(0, var(--reveal, 0) * 2.4, 1);
  transform: translateX(calc((1 - var(--p)) * -80px));
  opacity: var(--p);
  will-change: transform, opacity;
}
.contact > form {
  --p: clamp(0, var(--reveal, 0) * 2.4, 1);
  transform: translateX(calc((1 - var(--p)) * 80px));
  opacity: var(--p);
  will-change: transform, opacity;
}
/* Form fields cascade in after the form card */
.contact form .row > div {
  --fp: clamp(0, var(--reveal, 0) * 3 - var(--i, 0) * 0.16, 1);
  transform: translateY(calc((1 - var(--fp)) * 24px));
  opacity: var(--fp);
  will-change: transform, opacity;
}
.contact form .form-foot {
  --fp: clamp(0, var(--reveal, 0) * 3 - 0.95, 1);
  transform: translateY(calc((1 - var(--fp)) * 20px));
  opacity: var(--fp);
  will-change: transform, opacity;
}

/* The team play button gets a continuous pulse so the video card feels alive */
.team-video .play-btn {
  animation: play-pulse 3.2s ease-in-out infinite;
}
@keyframes play-pulse {
  0%, 100% {
    box-shadow:
      0 16px 40px rgba(212, 182, 106, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      0 0 0 0 rgba(212, 182, 106, 0.45);
  }
  50% {
    box-shadow:
      0 16px 40px rgba(212, 182, 106, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      0 0 0 18px rgba(212, 182, 106, 0);
  }
}

/* ── Legal pages (privacy + terms) ──────────────────────────────────── */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 96px 0 80px;
}
.legal h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 84px);
  line-height: 1.0;
  letter-spacing: -0.015em;
  font-weight: 400;
  color: var(--cream);
  margin: 0 0 16px;
}
.legal h1 .italic {
  color: var(--red);
  font-style: italic;
}
.legal .legal-updated {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 64px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(212, 182, 106, 0.18);
  font-weight: 600;
}
.legal p, .legal li {
  color: var(--cream-dim);
  font-size: 17px;
  line-height: 1.7;
}
.legal p { margin: 0 0 18px; }
.legal a {
  color: var(--gold-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(212, 182, 106, 0.4);
}
.legal a:hover { color: var(--cream); text-decoration-color: var(--cream); }

/* WP exports nest content in <ol><li> with <b> as the section header.
   We render the <b> as the visual section title and drop the list marker
   entirely — the bold heading carries the structure, no artificial numbering. */
.legal ol,
.legal ul {
  margin: 0 0 8px;
}
.legal ol { list-style: none; padding-left: 0; }
.legal ul { padding-left: 22px; }
.legal ul li { margin-bottom: 6px; }
.legal ol > li {
  margin-bottom: 12px;
}

/* The bold prefix in each <li> is treated as the section's display heading.
   font-display + larger size + extra top margin lifts it visually so each
   section reads as its own block. */
.legal ol > li > b:first-child {
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--cream);
  margin: 36px 0 12px;
  padding-top: 24px;
  border-top: 1px solid rgba(212, 182, 106, 0.12);
  font-style: normal;
  line-height: 1.25;
}
/* The very first <b> doesn't need top spacing (it's after the updated date) */
.legal > ol:first-of-type > li:first-child > b:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .card-stage { transform: rotateX(10deg); }
  .reveal { opacity: 1; transform: none; }
}