/* ==========================================================================
   Drop A Cake — Design Tokens
   Source of truth: DESIGN.md. Do not hardcode values elsewhere.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---- Color: the cake palette ---- */
  --cream:     #FAF3E7;  /* Buttercream — default page background */
  --sponge:    #F6E3A9;  /* Vanilla Sponge — alt band, highlights */
  --pink:      #F5A3B7;  /* Strawberry Frosting — primary brand */
  --blush:     #F8CDD5;  /* Icing Blush — soft surfaces, cards, fields */
  --peach:     #F2B98F;  /* Caramel Sponge — tertiary band */
  --cherry:    #C4112F;  /* Glacé Cherry — CTAs, links, urgency */
  --chocolate: #3B2117;  /* Dark Chocolate — ink, dark bands, footer */
  --white:     #FFFDF9;  /* Fresh Cream — text on dark */

  /* Semantic aliases */
  --bg:            var(--cream);
  --ink:           var(--chocolate);
  --ink-inverse:   var(--white);
  --action:        var(--cherry);
  --surface:       var(--blush);
  --border:        var(--chocolate);

  /* ---- Typography ---- */
  --font-display: 'Anton', Impact, sans-serif;             /* ALL-CAPS headlines */
  --font-serif:   'Instrument Serif', Georgia, serif;      /* italic accents */
  --font-body:    'Space Grotesk', 'Helvetica Neue', sans-serif;
  --font-mono:    'Space Mono', 'Courier New', monospace;  /* annotations, stats */

  --text-hero: clamp(4rem, 13vw, 12rem);
  --text-h2:   clamp(2.5rem, 6vw, 5.5rem);
  --text-h3:   clamp(1.5rem, 3vw, 2.25rem);
  --text-body: clamp(1rem, 1.2vw, 1.125rem);
  --text-mono: 0.8125rem;

  --leading-display: 0.92;
  --leading-body:    1.6;
  --tracking-display: -0.01em;
  --tracking-mono:    0.08em;

  /* ---- Space & shape ---- */
  --band-pad-y: clamp(4rem, 10vh, 8rem);
  --content-max: 1200px;
  --gap: clamp(1rem, 2.5vw, 2rem);

  --radius-pill: 999px;
  --radius-md:   12px;
  --radius-bubble: 20px;

  --border-w: 3px;
  --shadow-sticker: 4px 4px 0 var(--chocolate);
  --shadow-sticker-pressed: 1px 1px 0 var(--chocolate);
  --shadow-lift: 8px 8px 0 var(--chocolate);

  --tilt-1: -3deg;
  --tilt-2: 2deg;
  --tilt-3: -1.5deg;

  /* ---- Motion ---- */
  --ease-drop: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot: things DROP */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --dur-enter: 600ms;
  --dur-hover: 180ms;
  --stagger:   80ms;
  --marquee-loop: 35s;
}

/* ---- Base ---- */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

h1, h2, .display {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: 400; /* Anton is single-weight */
}

.accent-serif { /* the one italic word inside a display headline */
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: lowercase;
  color: var(--cherry);
}

.mono, figcaption, .stat-label {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
}

/* ---- Texture: sponge grain overlay (apply to colored bands, never text) ---- */
.texture-sponge { position: relative; }
.texture-sponge::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Piped button ---- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  padding: 1rem 2rem;
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sticker);
  background: var(--cherry);
  color: var(--white);
  cursor: pointer;
  transition: transform var(--dur-hover) var(--ease-out),
              box-shadow var(--dur-hover) var(--ease-out);
}
.btn:hover {
  transform: translate(3px, 3px);
  box-shadow: var(--shadow-sticker-pressed);
}
.btn--secondary { background: var(--cream); color: var(--ink); }

/* ---- Drop-in entrance (add .is-visible via IntersectionObserver) ---- */
.drop-in {
  opacity: 0;
  transform: translateY(-24px);
}
.drop-in.is-visible {
  animation: drop-land var(--dur-enter) var(--ease-drop) forwards;
}
@keyframes drop-land {
  0%   { opacity: 0; transform: translateY(-24px); }
  70%  { opacity: 1; transform: translateY(4px) scale(1.03, 0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1, 1); }
}

@media (prefers-reduced-motion: reduce) {
  .drop-in { transform: none; }
  .drop-in.is-visible { animation: none; opacity: 1; }
  .marquee * { animation: none !important; }
}