/* Also Coffee Co — Base element styles + a few brand utilities.
   Lightweight, dependency-free. Sets page defaults and provides the
   signature wavy section dividers, eyebrow labels, scroll-in reveals,
   and the latte-leaf bullet. */

:root {
  /* Latte-leaf bullet/accent silhouette (data URI so it travels with the CSS) */
  --leaf-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c-1.5 0-2.4 1.3-2.4 3 0 1 .4 1.9 1 2.6-1-.8-2.1-1.3-3.1-1.3-1.6 0-2.7 1-2.7 2.4 0 1.6 1.6 3 3.8 3.9 1.4.6 2.6 1.4 3.3 2.6.2-1.4.9-2.6 2-3.6 1.7-1.5 3.2-3 3.2-5 0-1.4-.9-2.3-2-2.3-1.1 0-2.2.7-3.1 1.8.6-.8 1-1.7 1-2.7C14 3.3 13.1 2 12 2Zm-.3 12.4c-1-1-2.5-1.7-4.2-2.2-1.6-.5-2.9-1-3.9-1.7.2 2 1.3 3.8 3.1 5 1.5 1 3.2 1.4 4.6 1.3l-.2 3.2h1.8l-.2-3.4c.1-.7.3-1.4.6-2-.6.1-1.2 0-1.6 0Z'/%3E%3C/svg%3E"); /* @kind other */
}

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" var(--display-opsz), "SOFT" var(--display-soft), "WONK" var(--display-wonk);
  color: var(--text-strong);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
  margin: 0 0 0.4em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }

p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
strong { font-weight: var(--fw-bold); color: var(--text-strong); }
img { max-width: 100%; display: block; }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Layout helpers ---- */
.also-container { width: 100%; max-width: var(--content-size); margin-inline: auto; padding-inline: var(--gutter); }
.also-container--wide { max-width: var(--wide-size); }
.also-section { padding-block: var(--section-y); }

/* ---- Eyebrow label ---- */
.also-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

/* ---- Latte-leaf bullet list ---- */
.also-leaf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.also-leaf-list li { position: relative; padding-left: 1.9em; }
.also-leaf-list li::before {
  content: ""; position: absolute; left: 0; top: 0.15em;
  width: 1.25em; height: 1.25em;
  background: var(--accent);
  -webkit-mask: var(--leaf-mask) center / contain no-repeat;
          mask: var(--leaf-mask) center / contain no-repeat;
}

/* ---- Wavy section divider (signature) ---- */
.also-wave { display: block; width: 100%; height: clamp(40px, 5vw, 90px); }
.also-wave path { fill: currentColor; }

/* ---- Scroll-in reveal ----
   Content is ALWAYS fully opaque — the entrance only nudges transform, so even
   if the animation is paused (offscreen/unfocused preview) or JS never runs,
   content is guaranteed visible. JS adds `.is-in` to play the rise. */
.also-reveal { opacity: 1; }
.also-reveal.is-in { animation: also-rise var(--dur-reveal) var(--ease-out) both; }
@keyframes also-rise {
  from { transform: translateY(26px); }
  to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .also-reveal, .also-reveal.is-in { animation: none; transform: none; }
}

/* Gentle floating animation for product "pop" imagery */
@keyframes also-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.also-float { animation: also-float 6s var(--ease-in-out) infinite; }
@media (prefers-reduced-motion: reduce) { .also-float { animation: none; } }