/* ============================================================
   Amoré · demo-extras.css — richer sections shared by all example
   demos (charts, place-map, roulette, song card, floating hearts).
   Themed entirely through generic vars each demo maps to its palette:
     --acc  primary accent   --acc2 secondary   --acc-soft soft tint
     --ink  text             --ink2 muted       --card / --card-bd / --card-sh
   ============================================================ */

/* section heading helper reused below */
.ex-eyebrow{font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--acc);opacity:.9;text-align:center;display:block;margin-bottom:8px}

/* ---------- animated charts ---------- */
.charts{display:grid;grid-template-columns:1fr;gap:20px;margin-top:26px}
@media(min-width:640px){.charts{grid-template-columns:1.4fr 1fr}.charts .chart-card.wide{grid-column:1 / -1}}
.chart-card{background:var(--card);border:1px solid var(--card-bd);border-radius:22px;padding:22px 20px 18px;
  box-shadow:0 18px 40px -24px var(--card-sh);position:relative;overflow:hidden}
.chart-card h3{font-family:var(--sans);font-size:15px;font-weight:700;color:var(--ink);margin:0 0 2px;letter-spacing:0}
.chart-card .sub{font-size:12.5px;color:var(--ink2);margin-bottom:12px}
.chart-card svg{width:100%;height:auto;display:block;overflow:visible}
.chart-card .area-line{fill:none;stroke:var(--acc);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.16,1,.3,1)}
.chart-card.in .area-line{stroke-dashoffset:0}
.chart-card .area-fill{opacity:0;transition:opacity 1.1s ease .3s}
.chart-card.in .area-fill{opacity:.9}
.chart-card .dot{fill:var(--acc);opacity:0;transition:opacity .3s ease}
.chart-card.in .dot{opacity:1;transition-delay:1.3s}
.chart-card .axis{stroke:var(--card-bd);stroke-width:1}
.chart-card .xlab{fill:var(--ink2);font-size:10px;font-family:var(--sans)}
/* bars */
.bars-row{display:flex;align-items:center;gap:12px;margin:11px 0}
.bars-row .blab{flex:0 0 92px;font-size:13px;color:var(--ink);font-weight:600;text-align:right}
.bars-row .btrack{flex:1;height:16px;background:var(--acc-soft);border-radius:99px;overflow:hidden}
.bars-row .bfill{height:100%;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--acc2),var(--acc));transition:transform 1.3s cubic-bezier(.16,1,.3,1)}
.chart-card.in .bfill{transform:scaleX(var(--w))}
.bars-row .bval{flex:0 0 34px;font-size:12.5px;color:var(--ink2);font-weight:700;font-variant-numeric:tabular-nums}
/* donut gauge */
.donut{display:flex;align-items:center;gap:18px}
.donut svg{width:118px;height:118px;flex:0 0 118px}
.donut .track{fill:none;stroke:var(--acc-soft);stroke-width:13}
.donut .val{fill:none;stroke:var(--acc);stroke-width:13;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;transform:rotate(-90deg);transform-origin:center;
  transition:stroke-dashoffset 1.5s cubic-bezier(.16,1,.3,1)}
.chart-card.in .donut .val{stroke-dashoffset:var(--off)}
.donut .cap{font-family:var(--disp);font-size:34px;font-weight:700;fill:var(--acc);text-anchor:middle}
.donut .dtext .big{font-family:var(--disp);font-size:30px;color:var(--acc);line-height:1}
.donut .dtext .small{font-size:13px;color:var(--ink2);max-width:16ch}

/* ---------- place map ---------- */
.placemap{position:relative;max-width:560px;margin:22px auto 0;background:var(--card);border:1px solid var(--card-bd);
  border-radius:24px;padding:20px;box-shadow:0 18px 40px -24px var(--card-sh)}
.placemap svg{width:100%;height:auto;display:block;overflow:visible}
.placemap .route{fill:none;stroke:var(--acc);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:6 8;
  stroke-dashoffset:400;opacity:.55;transition:stroke-dashoffset 2.4s linear}
.placemap.in .route{stroke-dashoffset:0}
.placemap .pin{cursor:pointer;transform:scale(0);transform-box:fill-box;transform-origin:center bottom;
  transition:transform .55s cubic-bezier(.22,1,.36,1)}
.placemap.in .pin{transform:scale(1)}
.placemap .pin circle{fill:var(--acc)}
.placemap .pin .ring{fill:none;stroke:var(--acc);stroke-width:2;opacity:.4}
.placemap .plabel{position:absolute;transform:translate(-50%,-140%);background:var(--acc);color:#fff;font-size:12px;
  font-weight:700;padding:5px 11px;border-radius:99px;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;box-shadow:0 10px 24px -12px var(--card-sh)}
.placemap .plabel.show{opacity:1;transform:translate(-50%,-170%)}
.placemap .maphint{text-align:center;font-size:12.5px;color:var(--ink2);margin-top:6px}

/* ---------- reasons roulette ---------- */
.roulette{max-width:520px;margin:24px auto 0;text-align:center}
.roulette .rcard{background:var(--card);border:1px solid var(--card-bd);border-radius:24px;padding:34px 26px;
  box-shadow:0 20px 46px -26px var(--card-sh);min-height:150px;display:flex;flex-direction:column;justify-content:center;
  perspective:800px}
.roulette .rtext{font-family:var(--disp);font-size:clamp(26px,6vw,38px);color:var(--acc);line-height:1.12;
  transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .4s ease}
.roulette .rtext.flip{transform:rotateX(90deg);opacity:0}
.roulette .rnum{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2);margin-bottom:10px}
.roulette button{margin-top:18px;font-family:var(--sans);cursor:pointer;border:none;
  background:linear-gradient(135deg,var(--acc2),var(--acc));color:#fff;font-weight:700;font-size:15px;
  padding:14px 28px;border-radius:99px;box-shadow:0 14px 30px -12px var(--card-sh);transition:transform .2s}
.roulette button:active{transform:scale(.96)}

/* ---------- our-song card + equalizer ---------- */
.songcard{max-width:460px;margin:24px auto 0;display:flex;align-items:center;gap:18px;background:var(--card);
  border:1px solid var(--card-bd);border-radius:22px;padding:18px 22px;box-shadow:0 18px 40px -24px var(--card-sh)}
.songcard .art{flex:0 0 64px;height:64px;border-radius:16px;background:linear-gradient(135deg,var(--acc2),var(--acc));
  display:grid;place-items:center;box-shadow:0 12px 26px -14px var(--card-sh)}
.songcard .art svg{width:30px;height:30px;fill:#fff}
.songcard .meta{flex:1;text-align:left}
.songcard .meta .t{font-weight:700;color:var(--ink);font-size:15.5px}
.songcard .meta .a{font-size:13px;color:var(--ink2)}
.eq{display:flex;align-items:flex-end;gap:3px;height:26px;margin-top:8px}
.eq i{width:4px;background:var(--acc);border-radius:2px;height:30%;transform-origin:bottom}
.eq.play i{animation:eqbar .9s ease-in-out infinite}
.eq.play i:nth-child(2){animation-delay:.15s}.eq.play i:nth-child(3){animation-delay:.3s}
.eq.play i:nth-child(4){animation-delay:.45s}.eq.play i:nth-child(5){animation-delay:.1s}
.eq.play i:nth-child(6){animation-delay:.35s}.eq.play i:nth-child(7){animation-delay:.2s}
@keyframes eqbar{0%,100%{height:25%}50%{height:100%}}
.songcard .playbtn{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--card-bd);
  background:var(--card);cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 20px -12px var(--card-sh)}
.songcard .playbtn svg{width:18px;height:18px;fill:var(--acc)}

/* ---------- floating hearts (ambient) ---------- */
.floaty{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.floaty b{position:absolute;bottom:-30px;color:var(--acc-soft);opacity:.0;will-change:transform,opacity;
  animation:floatup linear forwards}
@keyframes floatup{0%{opacity:0;transform:translateY(0) scale(.6) rotate(0)}
  12%{opacity:.7}88%{opacity:.5}100%{opacity:0;transform:translateY(-115vh) scale(1) rotate(28deg)}}

@media(prefers-reduced-motion:reduce){
  .chart-card .area-line{stroke-dashoffset:0!important;transition:none}
  .chart-card .bfill{transition:none}
  .chart-card .donut .val{transition:none}
  .placemap .route{stroke-dashoffset:0;transition:none}
  .placemap .pin{transform:scale(1);transition:none}
  .eq.play i{animation:none;height:60%}
  .floaty{display:none}
}