/* ============================================================
   Future Self Now — Base layer & brand helpers
   Element defaults + a small set of brand utility classes
   (kicker, gradient text, blob, scrim). Tokens only.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--text-body);
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  line-height: var(--leading-tight);
  color: var(--text-strong);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 0.4em;
  text-wrap: balance;
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--link-hover); }

::selection { background: var(--fsn-pink); color: #fff; }

/* ---------- Brand helpers ---------- */

/* Mono kicker / eyebrow — the playbook's typewriter voice */
.fsn-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--brand-primary);
}

/* Script flourish — Theresa's signature voice, accents only */
.fsn-script {
  font-family: var(--font-script);
  font-weight: 400;
  line-height: 1;
}

/* Gradient text using the brand spine */
.fsn-gradient-text {
  background: var(--fsn-gradient-cerise);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The ">>" forward motif (derived from the X mark / playbook) */
.fsn-chevrons::before {
  content: "\00BB";  /* » */
  color: var(--brand-primary);
  font-weight: var(--fw-black);
  margin-right: 0.4em;
}

/* Organic blob mask container */
.fsn-blob {
  border-radius: var(--radius-blob);
  overflow: hidden;
}

/* Photo scrim wrapper */
.fsn-scrim { position: relative; }
.fsn-scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-plum);
  pointer-events: none;
}

/* Slow drifting blob animation for hero backgrounds */
@keyframes fsn-drift {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(2%, -3%, 0) scale(1.06); }
}
.fsn-drift { animation: fsn-drift var(--dur-drift) var(--ease-in-out) infinite; }

/* Festival bunting flag sway — the "instant festival" motif */
@keyframes fsn-flag-sway {
  0%, 100% { transform: rotate(-2.5deg); }
  50%      { transform: rotate(2.5deg); }
}

/* Festival device animations (string lights, chevron trail, marquee) */
@keyframes fsn-twinkle {
  0%, 100% { opacity: 0.55; filter: brightness(0.9); }
  50%      { opacity: 1; filter: brightness(1.3); }
}
@keyframes fsn-chev-pulse {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}
@keyframes fsn-marquee {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .fsn-drift { animation: none; }
  .fsn-flag,
  .fsn-twinkle-el,
  .fsn-chev-el,
  .fsn-marquee-track { animation: none !important; }
}