/* =====================================================================
   AMARE landing page — additions on top of website.css
   (featured story, marquee, manifesto band, FAQ, flourishes)
   ===================================================================== */

/* ---------- flourishes: pixel-heart beat + sparkle twinkle ---------- */
@keyframes px-beat{
  0%,38%   {transform:scale(1)}
  44%,60%  {transform:scale(1.16)}
  66%,100% {transform:scale(1)}
}
.px-heart{display:inline-block;transform-origin:50% 60%;
  animation:px-beat 1.7s steps(1,end) infinite}

@keyframes twinkle{
  0%,100%{opacity:.35;transform:rotate(0deg) scale(.82)}
  50%    {opacity:1;  transform:rotate(45deg) scale(1)}
}
.sparkle-tw{animation:twinkle 3.4s var(--ease-inout) infinite;transform-origin:50% 50%}

@keyframes rise-soft{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.reveal{opacity:0}
.reveal.in{animation:rise-soft var(--dur-slow) var(--ease-soft) forwards}

/* ---------- header member counter ---------- */
.hdr-count .tick{font-variant-numeric:tabular-nums}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--sage-500);
  display:inline-block;margin-right:7px;box-shadow:0 0 0 0 color-mix(in oklab,var(--sage-500) 60%,transparent);
  animation:live-pulse 2.4s var(--ease-soft) infinite;vertical-align:middle}
@keyframes live-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--sage-500) 55%,transparent)}
  70%{box-shadow:0 0 0 7px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

/* ---------- hero embellishments ---------- */
.hero-eyebrow-spark{margin-right:4px}
.hero-card .scene-wrap{position:relative;border-radius:14px;overflow:hidden}
.hero-card .scene-grain{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 120% at 30% 0%,transparent 60%,rgba(58,40,24,.10));mix-blend-mode:multiply}
.hero-chip{position:absolute;left:-22px;top:34px;background:var(--bone-50);
  border:1px solid var(--border);border-radius:var(--radius-pill);
  box-shadow:var(--shadow-md);padding:9px 15px 9px 12px;display:flex;align-items:center;gap:9px;
  font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--ink-800)}
.hero-chip .px-heart svg{display:block}

/* ---------- pixel marquee ---------- */
.marquee{background:var(--ink-900);color:var(--bone-100);overflow:hidden;
  border-top:1px solid var(--clay-800);border-bottom:1px solid var(--clay-800)}
.marquee-track{display:flex;gap:0;white-space:nowrap;width:max-content;
  animation:marq 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-item{display:inline-flex;align-items:center;gap:18px;padding:15px 0}
.marquee-item .txt{font-family:var(--font-pixel);font-size:11px;letter-spacing:.04em;
  color:var(--clay-300);text-transform:uppercase}
.marquee-item .dot{color:var(--sage-400);font-size:18px;margin:0 26px}

/* ---------- manifesto pull band ---------- */
.creed{background:var(--bg-sage-soft);position:relative;overflow:hidden}
.creed-in{max-width:880px;margin:0 auto;text-align:center;position:relative;z-index:2}
.creed blockquote{font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:clamp(1.7rem,1.2rem+2vw,2.7rem);line-height:1.22;color:var(--ink-900);
  margin:22px 0 0;text-wrap:balance}
.creed blockquote em{color:var(--clay-600);font-style:italic}
.creed .attr{font-family:var(--font-emblem);text-transform:uppercase;letter-spacing:.2em;
  font-size:12px;color:var(--sage-700);margin-top:26px}
.creed-laurel{position:absolute;width:340px;opacity:.06;left:50%;top:50%;
  transform:translate(-50%,-50%);pointer-events:none}

/* ---------- featured story ---------- */
.feat{display:grid;grid-template-columns:1.05fr .95fr;gap:0;background:var(--bone-50);
  border:1px solid var(--border);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg);
  margin-bottom:40px}
.feat-media{position:relative;background:
   radial-gradient(130% 120% at 20% 10%,var(--clay-100),transparent 62%),
   radial-gradient(120% 120% at 90% 90%,var(--sage-100),transparent 60%),
   var(--bone-100);
  display:flex;align-items:center;justify-content:center;padding:40px;min-height:440px}
.feat-media img.fig{width:84%;max-width:420px;filter:drop-shadow(0 16px 32px rgba(58,40,24,.18))}
.feat-media .feat-seal{position:absolute;right:24px;bottom:24px;width:78px;
  filter:drop-shadow(0 6px 14px rgba(58,40,24,.22))}
.feat-media .feat-spark{position:absolute;left:30px;top:30px;color:var(--clay-400)}
.feat-body{padding:44px 46px;display:flex;flex-direction:column;justify-content:center}
.feat-tag{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  font-family:var(--font-emblem);text-transform:uppercase;letter-spacing:.16em;font-size:11px;
  color:var(--clay-700);background:var(--clay-50);border:1px solid var(--clay-200);
  padding:6px 13px;border-radius:var(--radius-pill);margin-bottom:20px}
.feat-body h3{font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.7rem,1.2rem+1.4vw,2.4rem);line-height:1.1;color:var(--ink-900);margin:0}
.feat-body .dek{font-family:var(--font-body);font-style:italic;font-size:18px;line-height:1.5;
  color:var(--ink-600);margin:12px 0 0}
.feat-body p.bd{font-size:16.5px;line-height:1.62;color:var(--ink-700);margin:20px 0 0}
.feat-reply{margin-top:22px;background:var(--ink-900);border-radius:14px;padding:16px 18px;
  display:flex;gap:13px;align-items:flex-start}
.feat-reply img{width:34px;height:34px;flex:none;image-rendering:pixelated;margin-top:1px}
.feat-reply .rt{font-family:var(--font-pixel);font-size:9.5px;line-height:1.9;
  color:var(--clay-300);text-transform:uppercase}
.feat-by{display:flex;align-items:center;gap:13px;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--rule)}
.feat-by .av{width:48px;height:48px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-family:var(--font-emblem);font-weight:600;font-size:18px;
  background:var(--sage-100);color:var(--sage-700);border:1.5px solid var(--sage-300)}
.feat-by b{font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--ink-900);display:block;line-height:1.15}
.feat-by span{font-family:var(--font-ui);font-size:12.5px;color:var(--fg-soft)}

/* a sage 'Claude voice' reply tucked into some story cards */
.story .reply{margin-top:auto;background:var(--ink-900);border-radius:10px;padding:11px 13px;
  display:flex;gap:10px;align-items:flex-start}
.story .reply img{width:26px;height:26px;flex:none;image-rendering:pixelated;margin-top:1px}
.story .reply .rt{font-family:var(--font-pixel);font-size:8px;line-height:1.9;color:var(--clay-300);text-transform:uppercase}

/* ---------- stories sub-nav (filter pills, decorative+functional) ---------- */
.story-filters{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:-18px 0 40px}
.sfilter{font-family:var(--font-ui);font-weight:600;font-size:13px;letter-spacing:.01em;
  padding:9px 17px;border-radius:var(--radius-pill);border:1px solid var(--border);
  background:var(--bone-50);color:var(--ink-700);cursor:pointer;
  transition:background var(--dur),color var(--dur),border-color var(--dur),box-shadow var(--dur)}
.sfilter:hover{border-color:var(--clay-300);color:var(--clay-700)}
.sfilter.active{background:var(--clay-500);color:var(--bone-50);border-color:var(--clay-500);box-shadow:var(--shadow-sm)}
.story.hide{display:none}

/* ---------- 'we are' human-units strip ---------- */
.weare{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:40px 0;margin-top:8px}
.weare .u{text-align:center}
.weare .u b{font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,1.4rem+1.6vw,2.9rem);
  color:var(--clay-600);display:block;line-height:1;font-variant-numeric:tabular-nums}
.weare .u span{font-family:var(--font-emblem);text-transform:uppercase;letter-spacing:.16em;
  font-size:11px;color:var(--ink-600);margin-top:10px;display:block}

/* ---------- FAQ ---------- */
.faq-grid{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:0;
  border-top:1px solid var(--rule)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-q{width:100%;background:none;border:0;text-align:left;padding:24px 8px;
  display:flex;align-items:center;gap:18px;cursor:pointer;
  font-family:var(--font-display);font-weight:600;font-size:21px;color:var(--ink-900)}
.faq-q .ix{font-family:var(--font-emblem);font-size:13px;letter-spacing:.12em;color:var(--clay-400);flex:none;width:34px}
.faq-q .mk{margin-left:auto;flex:none;color:var(--clay-500);transition:transform var(--dur) var(--ease-soft)}
.faq-item.open .faq-q .mk{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height var(--dur-slow) var(--ease-soft)}
.faq-a-in{padding:0 8px 26px 60px}
.faq-a p{font-size:16.5px;line-height:1.62;color:var(--ink-700);margin:0}
.faq-a .px{margin-top:12px}

/* ---------- thanks state in modal ---------- */
.modal .thanks{display:none}
.modal.done .form-state{display:none}
.modal.done .thanks{display:block}

@media(max-width:900px){
  .feat{grid-template-columns:1fr}
  .feat-media{min-height:300px}
  .weare{grid-template-columns:1fr 1fr;gap:30px}
}