/* The Vows We Take, prototype v0.6
   Refero "Agence Foudre" system (reference/DESIGN-REF-agence-foudre.md):
   cream canvas, magenta + forest green, poster-scale condensed type, two pink dots,
   a FIXED card stack that fans, tucks into a deck, then flips through as a 3D carousel,
   and a page background that changes color per scroll beat. No JS libraries. */
:root {
  /* Colorway (Mag, 2026-08-19, Canva wedding palette): Cinder, Cavern Pink, Porcelain, Equator.
     Variable names kept from the Agence Foudre mapping: chalk = canvas, forest = ink,
     magenta = loud pink text, bubblegum = soft pink, blush = light surface. */
  --chalk: #dddedb;      /* Porcelain #DDDED9 canvas (tiny warm nudge) */
  --blush: #ecede9;      /* Porcelain light surface: pills, cards, secondary buttons */
  --bubblegum: #dfb3ae;  /* Cavern Pink #DFB3AE */
  --cotton: #c4908a;     /* Cavern Pink, deeper: hover + loud pink text */
  --magenta: #c4908a;    /* loud pink text (MEET SAM, WE) */
  --forest: #23292e;     /* Cinder #23292E ink */
  --lilac: #b9bab5;      /* Porcelain, darker: quiet labels */
  --gold: #e4bc62;       /* Equator #E4BC62: the one action color */
  --gold-deep: #cfa64c;
  --rose: #c4908a;
  --ink: #000;
  --font-display: "Tanker", "Saira Extra Condensed", Impact, "Arial Narrow", sans-serif;
  --font-body: "Clash Grotesk", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --card-h: 64vh;
  --pad-x: 40px;
}
@supports (height: 100svh) { :root { --card-h: 64svh; } }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--chalk);
  color: var(--forest);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .7s var(--ease);
}
/* page color per scroll beat (set by main.js) */
body[data-beat="1"] { background: var(--bubblegum); }
body[data-beat="2"] { background: var(--chalk); }
body[data-beat="3"] { background: var(--forest); }
body[data-beat="4"] { background: var(--gold); }
body[data-beat="5"] { background: var(--rose); }
body[data-beat="6"], body[data-beat="7"] { background: var(--forest); }
/* on the gold beat the chrome flips to ink */
body[data-beat="4"] .dot { background: var(--forest); color: var(--blush); }
body[data-beat="4"] .car-sticky .label, body[data-beat="4"] .car-sticky .h94 { color: var(--forest); }
body[data-beat="4"] .dots-nav button { background: rgba(35, 41, 46, .25); }
body[data-beat="4"] .dots-nav li.on button { background: var(--forest); }
body[data-beat="4"] .arrow { background: rgba(35, 41, 46, .14); color: var(--forest); }
.car-sticky .label, .car-sticky .h94, .dot, .arrow { transition: color .5s var(--ease), background-color .5s var(--ease); }
button { font: inherit; }

/* ---------- fixed chrome: the two pink dots ---------- */
.chrome {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px var(--pad-x); pointer-events: none;
}
.chrome > * { pointer-events: auto; }
.dot {
  width: 54px; height: 54px; border-radius: 50%; border: 0; padding: 0;
  background: var(--gold); color: var(--forest);
  display: grid; place-items: center; cursor: pointer; text-decoration: none;
  transform: scale(0);
  animation: pop .6s var(--ease) forwards;
  transition: transform .25s var(--ease), background .25s;
}
.dot-menu { animation-delay: .55s; }
.dot-right { animation-delay: .65s; }
.dot:hover { background: var(--gold-deep); }
.dot:active { transform: scale(.94) !important; }
.burger { display: grid; gap: 4px; }
.burger i { display: block; width: 18px; height: 2.5px; background: currentColor; border-radius: 2px; }

/* ---------- the fixed card stage ---------- */
.stage {
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
  will-change: transform, opacity;
}
.deck {
  position: absolute; inset: 0;
  perspective: 1400px; perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}
.card {
  position: absolute; left: 50%; top: 50%;
  height: var(--card-h); aspect-ratio: 9 / 16;
  margin: 0; border-radius: 24px; overflow: hidden;
  background: var(--blush);
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  will-change: transform;
  pointer-events: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tint { position: absolute; inset: 0; }
.tint-forest { background: rgba(35, 41, 46, .6); }
.tint-magenta { background: rgba(196, 144, 138, .78); }
.cbars { position: absolute; top: 12px; left: 12px; right: 12px; height: 3px; display: flex; gap: 6px; }
.cbars i { flex: 1; border-radius: 3px; background: rgba(236, 237, 233, .5); }
.ctitle {
  position: absolute; left: 0; right: 0; top: 14%; margin: 0; text-align: center;
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(34px, 4.2vw, 64px); line-height: .84; color: var(--blush);
}
.ctag {
  position: absolute; left: 14px; bottom: 16px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--blush); color: var(--forest);
  font-size: 12px; font-weight: 500; line-height: 1;
}
.cactions { position: absolute; left: 14px; right: 14px; bottom: 14px; display: grid; gap: 8px; }
.cbtn {
  display: block; text-align: center; padding: 13px 14px; border-radius: 10px;
  background: var(--gold); color: var(--forest); text-decoration: none;
  font-size: 13px; font-weight: 700; line-height: 1;
}
.cbtn.ghost { background: rgba(236, 237, 233, .22); color: var(--blush); }
.card-v { background: #000; }
.media { position: absolute; inset: 0; background: var(--blush); }
.media video, .media iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; border: 0; object-fit: cover; background: #000;
}
.media video { background: var(--blush); }
.bars { position: absolute; top: 12px; left: 12px; right: 12px; height: 3px; z-index: 3; display: flex; gap: 6px; }
.bar { flex: 1; display: block; height: 100%; border-radius: 3px; background: rgba(255, 255, 255, .38); overflow: hidden; }
.bar b { display: block; height: 100%; width: 0; border-radius: 3px; background: #fff; }
.card.is-yt .bars { display: none; }
.snd {
  position: absolute; right: 14px; bottom: 14px; z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; border: 0; padding: 0;
  background: var(--gold); color: var(--forest); cursor: pointer;
  display: grid; place-items: center;
  transition: transform .2s var(--ease);
}
.snd:active { transform: scale(.92); }
.card[data-muted="true"] .wave { display: none; }
.card[data-muted="false"] .mute { display: none; }
.pill {
  position: absolute; left: 14px; bottom: 20px; z-index: 3; margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px 9px 11px; border-radius: 999px;
  background: var(--blush); color: var(--forest);
  font-size: 12px; font-weight: 500; line-height: 1;
}
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-deep); animation: pulse 1.6s ease-in-out infinite; }
.tap {
  position: absolute; inset: 0; z-index: 4; border: 0; padding: 0;
  background: rgba(35, 41, 46, .25); cursor: pointer;
  display: grid; place-items: center;
}
.tap[hidden] { display: none; }
.tap-ring { width: 84px; height: 84px; border-radius: 50%; background: var(--gold); color: var(--forest); display: grid; place-items: center; }

/* carousel arrows, only while the cards are spread out */
.arrow {
  position: absolute; top: 50%; z-index: 9;
  width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(236, 237, 233, .3); color: var(--blush); cursor: pointer;
  display: grid; place-items: center; pointer-events: auto;
  opacity: 0; transform: translateY(-50%) scale(.8);
  transition: opacity .35s var(--ease), transform .35s var(--ease), background .25s;
}
.arrow:hover { background: rgba(236, 237, 233, .5); }
.arrow.prev { left: calc(50% + var(--shift, 0px) - var(--card-h) * .28125 - 24px); }
.arrow.next { right: calc(50% - var(--shift, 0px) - var(--card-h) * .28125 - 24px); }
.stage.car .arrow { opacity: 1; transform: translateY(-50%) scale(1); }
.stage.car .arrow.prev.off, .stage.car .arrow.next.off { opacity: .25; pointer-events: none; }

/* ---------- scroll beats ---------- */
.beat { position: relative; min-height: 100vh; min-height: 100svh; }
main { position: relative; }

/* beat 0: hero */
.hero { overflow: hidden; }
.word { pointer-events: none; }
.word-top {
  position: absolute; left: 0; right: 0; top: clamp(4px, 1.4vw, 18px);
  margin: 0; z-index: 1; text-align: center;
}
.line { display: block; overflow: hidden; }
.line > span {
  display: inline-block;
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: -.005em;
  transform: translateY(112%);
  animation: rise 1s var(--ease) forwards;
}
.l1 > span { font-size: clamp(92px, 22.5vw, 340px); line-height: .82; color: var(--forest); animation-delay: .05s; }
.l2 > span { font-size: clamp(60px, 9.6vw, 150px); line-height: .86; color: var(--rose); animation-delay: .38s; }
.l3 > span { font-size: clamp(60px, 9.6vw, 150px); line-height: .86; color: var(--gold); animation-delay: .48s; }
.word-bottom { position: absolute; left: var(--pad-x); bottom: clamp(18px, 3vh, 36px); z-index: 6; margin: 0; }
.eyebrow {
  margin: 0 0 10px 4px;
  font-size: clamp(13px, 1.2vw, 18px); font-weight: 500; line-height: 1.2;
  color: var(--rose); letter-spacing: .01em;
  opacity: 0; animation: fade .8s .9s var(--ease) forwards;
}
.jump {
  position: absolute; right: var(--pad-x); bottom: 30px; z-index: 7;
  display: inline-flex; align-items: baseline; gap: .3em;
  padding: 12px 18px 10px; border: 2px solid var(--rose); border-radius: 0;
  background: transparent; text-decoration: none;
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(22px, 2vw, 30px); line-height: .9; letter-spacing: .01em;
  transform: scale(0); opacity: 0;
  animation: pop .6s 1.15s var(--ease) forwards;
  transition: background .25s, border-color .25s;
}
.jump .j1 { color: var(--rose); }
.jump .j2 { color: var(--gold); }
.jump:hover { background: var(--blush); border-color: var(--gold); }
.jump .jarr { display: inline-block; animation: bob 1.6s ease-in-out infinite; }

/* beat 1: statement on magenta */
.statement { display: flex; align-items: flex-end; padding: 0 var(--pad-x) 8vh; }
.state { margin: 0; max-width: 46vw; }
.state .line > span { transform: none; animation: none; font-size: clamp(60px, 8.5vw, 140px); line-height: .84; }
.st1 { color: var(--blush); }
.st2 { color: var(--forest); }

/* beat 2: about on cream */
.about { display: flex; align-items: center; padding: 12vh var(--pad-x); }
.about-col { max-width: 34vw; }
.label {
  margin: 0 0 18px; font-size: 14px; font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase; color: var(--rose);
  text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px;
}
.label.on-color { color: var(--bubblegum); }
.h94 {
  margin: 0 0 22px;
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(56px, 8.8vw, 130px); line-height: .84; color: var(--rose);
}
.h94.on-color { color: var(--blush); }
.copy { margin: 0; max-width: 60ch; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.3; color: var(--forest); }

/* beats 3 to 5: the carousel, 3 beats tall, text stays put */
.carousel { min-height: 300vh; min-height: 300svh; }
.car-sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--pad-x); max-width: 36vw;
}
.dots-nav { list-style: none; margin: 26px 0 0; padding: 0; display: flex; gap: 10px; }
.dots-nav button {
  width: 12px; height: 12px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(236, 237, 233, .4); transition: background .25s, transform .25s;
}
.dots-nav li.on button { background: var(--blush); transform: scale(1.25); }

/* beat 6: book a consult on forest */
.book {
  padding: 140px var(--pad-x) 60px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 28px;
  color: var(--blush);
}
.book-title { margin: 0; }
.book .line > span { font-size: clamp(64px, 12.5vw, 210px); line-height: .84; color: var(--blush); transform: translateY(112%); animation: none; }
.book .line.alt > span { color: var(--bubblegum); }
.book.in .line > span { animation: rise .9s var(--ease) forwards; }
.book.in .line:nth-child(2) > span { animation-delay: .08s; }
.book.in .line:nth-child(3) > span { animation-delay: .16s; }
.book-copy { margin: 0; max-width: 60ch; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.3; color: var(--blush); }
.book-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 18px 26px; border-radius: 12px;
  font-size: 16px; font-weight: 700; text-decoration: none; line-height: 1;
  transition: transform .2s var(--ease), background .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-pink { background: var(--gold); color: var(--forest); }
.btn-pink:hover { background: var(--gold-deep); }
.btn-blush { background: var(--blush); color: var(--forest); }
.btn-blush:hover { background: #fff; }

.foot {
  background: var(--forest); color: var(--bubblegum);
  padding: 0 var(--pad-x) 28px; display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-size: 13px; font-weight: 500;
}
.foot a { color: var(--blush); text-decoration: none; }
.foot a:hover { color: var(--bubblegum); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- motion ---------- */
@keyframes rise { to { transform: translateY(0); } }
@keyframes fade { to { opacity: 1; } }
@keyframes pop { to { transform: scale(1); opacity: 1; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .55; } }

/* ---------- mobile ---------- */
@media (max-width: 767px) {
  :root { --card-h: 56vh; --pad-x: 18px; }
  @supports (height: 100svh) { :root { --card-h: 56svh; } }
  .chrome { padding: 14px 16px; }
  .dot { width: 46px; height: 46px; }
  .word-top { top: 62px; }
  .l1 > span { font-size: clamp(78px, 24vw, 112px); line-height: .84; }
  .l2 > span, .l3 > span { font-size: clamp(52px, 15vw, 84px); line-height: .86; }
  .word-bottom { bottom: 16px; }
  .eyebrow { font-size: 12px; margin-bottom: 8px; }
  .jump { right: 14px; bottom: 16px; padding: 10px 14px 8px; font-size: 20px; }
  .card { border-radius: 20px; }
  .ctitle { font-size: clamp(30px, 11vw, 44px); }
  .cbtn { font-size: 12px; padding: 12px; }
  .snd { width: 42px; height: 42px; right: 10px; bottom: 10px; }
  .pill { left: 10px; bottom: 16px; font-size: 11px; }
  .arrow { width: 42px; height: 42px; }
  .arrow { top: calc(50% + 8vh); }
  .arrow.prev { left: calc(50% - var(--card-h) * .28125 - 6px); }
  .arrow.next { right: calc(50% - var(--card-h) * .28125 - 6px); }
  .statement { align-items: flex-start; padding: 76px var(--pad-x) 0; }
  .state { max-width: none; }
  .state .line > span { font-size: clamp(40px, 13vw, 64px); }
  .about { align-items: flex-start; padding: 76px var(--pad-x) 0; }
  .about-col { max-width: none; }
  .h94 { font-size: clamp(44px, 13vw, 72px); margin-bottom: 14px; }
  .copy { font-size: 15px; max-width: 34ch; }
  .car-sticky { max-width: none; justify-content: flex-start; padding-top: 76px; }
  .car-sticky .h94 { font-size: clamp(36px, 9.5vw, 56px); margin-bottom: 10px; }
  .dots-nav { margin-top: 12px; }
  .book { padding: 96px var(--pad-x) 40px; gap: 22px; }
  .book .line > span { font-size: clamp(56px, 17vw, 96px); }
  .book-actions { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; padding: 16px 18px; font-size: 15px; }
  .foot { padding: 0 var(--pad-x) 24px; font-size: 12px; gap: 6px 14px; }
}
@media (max-height: 640px) and (min-width: 768px) {
  :root { --card-h: 58vh; }
}