/* ============================================================
   Choice Words — The Claude Build Sprint sales page
   Self-contained styling. Brand foundations + page chrome.
   ============================================================ */

/* ---------- Fonts (hosted locally, variable) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("./assets/fonts/Fraunces-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cuprum";
  src: url("./assets/fonts/Cuprum-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Brand tokens ---------- */
:root {
  --cw-marsala-deep: #50021E;
  --cw-marsala:      #660226;
  --cw-red:          #E40232;
  --cw-red-deep:     #BA0107;
  --cw-pink:         #CB0E4F;
  --cw-yellow:       #F59C00;
  --cw-navy:         #1F2235;
  --cw-cream:        #F6F3F5;

  --cw-marsala-deep-700: #3A0116;
  --cw-marsala-600:      #54021F;
  --cw-red-600:          #97000B;
  --cw-pink-600:         #A60B40;
  --cw-pink-300:         #E25F88;
  --cw-cream-100:        #FFFFFF;
  --cw-cream-200:        #EFEAEC;
  --cw-ink:              #1A0009;

  --fg-muted:      #5A4951;
  --border:        rgba(26, 0, 9, 0.10);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cw-cream);
  color: var(--cw-ink);
  font-family: "Cuprum", "Arial Narrow", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; }

/* ---------- CTA buttons (hover / active states) ---------- */
.cta {
  transition: transform 140ms cubic-bezier(.22,.61,.36,1),
              background 140ms, box-shadow 140ms;
}
.cta-pink:hover {
  background: var(--cw-red);
  transform: translateY(-3px);
  box-shadow: 0 9px 0 var(--cw-marsala-deep-700);
}
.cta-pink:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 var(--cw-marsala-deep-700);
}
.cta-yellow:hover {
  transform: translateY(-3px);
  box-shadow: 0 9px 0 var(--cw-marsala-deep-700);
}
.cta-yellow:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 var(--cw-marsala-deep-700);
}
.cta-sticky:hover {
  background: var(--cw-red);
  transform: translateY(-2px);
}
.cta-sticky:active {
  transform: translateY(1px);
}

/* ---------- Footer Instagram link ---------- */
.ig-link { transition: color 140ms; }
.ig-link:hover { color: var(--cw-yellow); }

/* ---------- Sticky buy bar (revealed on scroll past hero) ---------- */
.sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  background: var(--cw-marsala-deep);
  border-top: 1px solid rgba(246,243,245,0.16);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.22);
  padding: 16px clamp(14px,4vw,28px);
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
  transition: transform 280ms cubic-bezier(.22,.61,.36,1), opacity 220ms;
}
.sticky-bar.is-shown {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}