/* DogDog 2026 Wrapped — sticker edition (sample data).
   System: rescues.dogdog.org sticker look — cream, ink outlines, hard offset shadows,
   flat die-cut stickers, Fredoka + Nunito Sans. */
:root {
  --cream: #FFF5E4; --cream2: #FCEBD0;
  --ink: #2B2340; --ink2: #6E6580;
  --purple: #8381E0; --purple-d: #5F5CCB; --purple-l: #E6E4FB;
  --teal: #4ABDD7; --teal-l: #D8F1F7;
  --gold: #E7A83E; --gold-d: #C17A2E; --gold-l: #FBE6C2;
  --line: 2.5px solid var(--ink);
  --display: "Fredoka", "Nunito Sans", system-ui, sans-serif;
  --body: "Nunito Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
}
img { display: block; }
button { font: inherit; color: inherit; }

/* ---------- page + phone frame ---------- */
.page { position: relative; height: 100dvh; width: 100%; }
.phone-wrap { height: 100%; width: 100%; }
.phone {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  container-type: size;
  outline: none;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: var(--cream);
}

@media (min-width: 720px) and (min-height: 700px) {
  body { background: var(--cream2); }
  .page { display: grid; place-items: center; padding: 24px; }
  .phone-wrap { width: auto; height: auto; }
  .phone {
    width: min(400px, calc((100dvh - 48px) * 0.4615));
    height: min(866px, calc(100dvh - 48px));
    border: 3px solid var(--ink);
    border-radius: 44px;
    box-shadow: 8px 8px 0 var(--ink);
  }
}

/* ---------- chrome ---------- */
.chrome {
  position: absolute; z-index: 20; left: 0; right: 0; top: 0;
  padding: calc(10px + env(safe-area-inset-top)) 14px 0;
  pointer-events: none;
}
.bars { display: flex; gap: 3px; }
.bar { flex: 1; height: 5px; border-radius: 99px; background: rgba(43,35,64,.16); overflow: hidden; }
.bar-fill { height: 100%; width: 100%; background: var(--ink); border-radius: 99px; transform: scaleX(0); transform-origin: left center; will-change: transform; }
.chrome-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; min-height: 26px; }
.pills { display: flex; gap: 5px; opacity: 0; transition: opacity .25s; }
.phone.has-pills .pills { opacity: 1; }
.pills span, .sample-chip {
  font: 600 11.5px/1 var(--display);
  padding: 6px 9px 5px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--cream);
  white-space: nowrap;
}
.pills span.is-on { background: var(--ink); color: var(--cream); }
.sample-chip { background: #fff; color: var(--ink2); border-color: var(--ink2); border-style: dashed; font-weight: 600; }

/* ---------- slides ---------- */
.stories { position: absolute; inset: 0; }
.slide {
  --u: min(1cqw, 0.47cqh);
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: stretch;
  gap: calc(var(--u) * 3.6);
  padding: calc(66px + env(safe-area-inset-top)) calc(var(--u) * 6.5) calc(28px + env(safe-area-inset-bottom));
  visibility: hidden; opacity: 0;
  transition: opacity .28s ease, visibility 0s linear .28s;
  overflow: hidden;
}
.slide.is-active { visibility: visible; opacity: 1; transition: opacity .28s ease; }
.slide > * { position: relative; z-index: 1; }

.slide[data-bg="cream"] { background: var(--cream); }
.slide[data-bg="cream2"] { background: var(--cream2); }
.slide[data-bg="purple"] { background: var(--purple); }
.slide[data-bg="purple-l"] { background: var(--purple-l); }
.slide[data-bg="teal"] { background: var(--teal); }
.slide[data-bg="teal-l"] { background: var(--teal-l); }
.slide[data-bg="gold"] { background: var(--gold); }
.slide[data-bg="gold-l"] { background: var(--gold-l); }

/* big outlined accent circle that bleeds off a corner */
.slide > .blob {
  position: absolute; z-index: 0;
  width: calc(var(--u) * 78); aspect-ratio: 1;
  border-radius: 50%;
  border: var(--line);
  pointer-events: none;
}
.slide[data-blob="purple"] .blob { background: var(--purple); }
.slide[data-blob="teal"] .blob { background: var(--teal); }
.slide[data-blob="gold"] .blob { background: var(--gold); }
.slide[data-blob="cream"] .blob { background: var(--cream); }
.blob.b-tr { right: calc(var(--u) * -30); top: calc(var(--u) * -18); }
.blob.b-tl { left: calc(var(--u) * -32); top: calc(var(--u) * -20); }
.blob.b-br { right: calc(var(--u) * -34); bottom: calc(var(--u) * -30); }
.blob.b-bl { left: calc(var(--u) * -34); bottom: calc(var(--u) * -28); }

/* ---------- type ---------- */
.kicker {
  font: 700 calc(var(--u) * 3.4)/1 var(--display);
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--gold-d);
  margin-bottom: calc(var(--u) * -2);
}
.slide[data-bg="cream2"] .kicker, .slide[data-bg="gold-l"] .kicker { color: var(--gold-d); }
.sec {
  font: 700 calc(var(--u) * 9.6)/1 var(--display);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sec.sm { font-size: calc(var(--u) * 6); margin-top: calc(var(--u) * 1.5); }
.hl { position: relative; z-index: 0; white-space: nowrap; }
.hl::after {
  content: ""; position: absolute; z-index: -1;
  left: -0.08em; right: -0.08em; bottom: 0.02em; height: 0.36em;
  background: var(--teal); opacity: .55; border-radius: 8px;
  transform: rotate(-1deg);
}
.slide[data-bg="teal"] .hl::after, .slide[data-bg="teal-l"] .hl::after { background: var(--gold); opacity: .7; }
.slide[data-bg="purple"] .hl::after { background: var(--gold); opacity: .8; }

.lead { font: 700 calc(var(--u) * 4.4)/1.35 var(--body); color: var(--ink); }
.after { font: 700 calc(var(--u) * 4.2)/1.4 var(--body); color: var(--ink); text-align: center; padding: 0 calc(var(--u) * 2); }
.after.left { text-align: left; padding: 0; font-size: calc(var(--u) * 3.7); }

/* ---------- pills / chips ---------- */
.pill {
  align-self: center;
  display: inline-block;
  font: 600 calc(var(--u) * 4)/1.15 var(--display);
  padding: calc(var(--u) * 2.2) calc(var(--u) * 4.2);
  border: var(--line); border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  text-align: center;
  max-width: 100%;
}
.pill.gold { background: var(--gold); }
.pill.cream { background: var(--cream); }
.pill.purple { background: var(--purple); color: #fff; }
.pill.teal-l { background: var(--teal-l); }
.tilt-l { transform: rotate(-3deg); }
.tilt-r { transform: rotate(3deg); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font: 700 calc(var(--u) * 3.3)/1 var(--body);
  padding: 6px 10px; border: 2px solid var(--ink); border-radius: 999px;
  white-space: nowrap;
}
.teal-l { background: var(--teal-l); } .gold-l { background: var(--gold-l); }
.purple-l { background: var(--purple-l); } .cream2 { background: var(--cream2); }

/* ---------- cards ---------- */
.card {
  position: relative;
  background: #fff;
  border: var(--line);
  border-radius: 28px;
  padding: calc(var(--u) * 6) calc(var(--u) * 5.5) calc(var(--u) * 5.5);
}
.card .poke {
  position: absolute; z-index: 2;
  width: calc(var(--u) * 27);
  right: calc(var(--u) * -5); top: calc(var(--u) * -13);
  transform: rotate(8deg);
}
.lift.has-poke { margin-top: calc(var(--u) * 5); }
.card .poke.wide { width: calc(var(--u) * 31); top: calc(var(--u) * -12); }
.card .poke.tall { width: calc(var(--u) * 22); top: calc(var(--u) * -17); }
.big-num {
  font-family: var(--display); font-weight: 700;
  line-height: .9; letter-spacing: -0.03em;
  color: var(--ink);
  display: flex; align-items: baseline;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.big-num.n-xl { font-size: calc(var(--u) * 33); }
.big-num.n-l { font-size: calc(var(--u) * 25); }
.big-num.n-m { font-size: calc(var(--u) * 21); }
.big-num .tilde { font-size: .5em; align-self: center; margin-right: .06em; color: var(--purple-d); }
.big-num .cur { font-size: .55em; margin-right: .04em; color: var(--purple-d); align-self: flex-start; margin-top: .12em; }
.big-num .suf { font-size: .42em; margin-left: .06em; color: var(--purple-d); }
.unit { font: 700 calc(var(--u) * 6.6)/1.1 var(--display); margin-top: calc(var(--u) * 2.4); }
.unit.big { font-size: calc(var(--u) * 7.6); }
.card-sub { font: 600 calc(var(--u) * 3.9)/1.45 var(--body); color: var(--ink2); margin-top: calc(var(--u) * 2.4); }
.card-sub strong { color: var(--ink); font-weight: 800; background: var(--gold-l); padding: 0 4px; border-radius: 5px; }

/* streak paws */
.paw-row { display: flex; gap: calc(var(--u) * 1.6); margin-top: calc(var(--u) * 4); }
.paw-row img { width: calc(var(--u) * 9.4); }
.paw-row img:nth-child(odd) { transform: rotate(-10deg); }
.paw-row img:nth-child(even) { transform: rotate(8deg) translateY(3px); }

/* mini card */
.mini-card {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: var(--line); border-radius: 20px;
  padding: calc(var(--u) * 3.6) calc(var(--u) * 5);
  font: 700 calc(var(--u) * 4)/1.2 var(--body);
}
.mini-card b { font: 700 calc(var(--u) * 8.4)/1 var(--display); letter-spacing: -0.02em; white-space: nowrap; }
.mini-card.teal { background: var(--teal); }
.mini-card.purple-l { background: var(--purple-l); }
.lift.mini.tilt-l { transform: rotate(-2deg); } .lift.mini.tilt-r { transform: rotate(2deg); }

/* ---------- title ---------- */
.slide.title { justify-content: center; align-items: center; text-align: center; }
.lockup { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 4); }
.title .logo { width: calc(var(--u) * 46); }
.title-h { font-family: var(--display); font-weight: 700; line-height: .9; letter-spacing: -0.02em; }
.title-h .yr { display: block; font-size: calc(var(--u) * 12); }
.title-h .big { display: block; font-size: calc(var(--u) * 21); color: var(--purple-d); margin-top: calc(var(--u) * 1); }
.title .lead { max-width: 30ch; }
.title .sk { position: absolute; z-index: 1; }
.s-title-1 { width: calc(var(--u) * 26); right: calc(var(--u) * 5); top: calc(var(--u) * 30); transform: rotate(9deg); }
.s-title-2 { width: calc(var(--u) * 18); left: calc(var(--u) * 6); top: calc(var(--u) * 36); transform: rotate(-12deg); }
.s-title-3 { width: calc(var(--u) * 30); left: calc(var(--u) * 5); bottom: calc(var(--u) * 34); transform: rotate(-6deg); }

/* ---------- chapter ---------- */
.slide.chapter { align-items: center; text-align: center; }
.ch-lock { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 4); }
.ch-word {
  font: 700 calc(var(--u) * 36)/.9 var(--display);
  letter-spacing: -0.02em;
  color: var(--cream);
  -webkit-text-stroke: calc(var(--u) * 1.1) var(--ink);
  paint-order: stroke fill;
  text-shadow: calc(var(--u) * 1.6) calc(var(--u) * 1.8) 0 var(--ink);
}
.ch-word.md { font-size: calc(var(--u) * 24.5); }
.ch-word.sm { font-size: calc(var(--u) * 21); line-height: .95; }
.chapter .lead { max-width: 26ch; }
.chapter .sk { position: absolute; z-index: 1; }
.s-ch-a { width: calc(var(--u) * 34); left: calc(var(--u) * 6); top: calc(var(--u) * 34); transform: rotate(-8deg); }
.s-ch-b { width: calc(var(--u) * 28); right: calc(var(--u) * 6); bottom: calc(var(--u) * 36); transform: rotate(9deg); }

/* ---------- badge / heatmap ---------- */
.badge-card { padding-top: calc(var(--u) * 7); }
.badge-card .card-sub { margin-top: calc(var(--u) * 3); }
.heat-wrap { margin-top: calc(var(--u) * 4); border: 2px solid var(--ink); border-radius: 14px; padding: 10px 10px 8px; background: var(--cream); }
.heat-months { display: flex; justify-content: space-between; font: 700 10px/1 var(--display); color: var(--ink2); margin-bottom: 5px; }
.heat { display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1.5px; aspect-ratio: 53 / 8.2; }
.heat i, .heat-legend .scale i { display: block; border-radius: 1.5px; background: #F1E3CB; }
.heat i.out { background: transparent; }
.heat i[data-n="1"], .heat-legend i[data-n="1"] { background: #A9DDEA; }
.heat i[data-n="2"], .heat-legend i[data-n="2"] { background: var(--teal); }
.heat i[data-n="3"], .heat-legend i[data-n="3"] { background: var(--purple-d); }
.heat-legend { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font: 700 11.5px/1 var(--body); }
.heat-legend .scale { display: flex; gap: 3px; }
.heat-legend .scale i { width: 10px; height: 10px; border-radius: 2px; }

/* ---------- rescue profile ---------- */
.slide.dense { gap: calc(var(--u) * 2.8); }
.org { padding-top: calc(var(--u) * 5); }
.org-lift { margin-top: calc(var(--u) * 3); }
.org-head { display: flex; align-items: center; gap: calc(var(--u) * 4); }
.polaroid {
  flex: none;
  width: calc(var(--u) * 24);
  background: #fff;
  padding: 6px 6px 16px;
  border-radius: 5px;
  box-shadow: 0 8px 18px rgba(30,20,60,.22);
  transform: rotate(-5deg);
  margin: calc(var(--u) * -6) 0 0 calc(var(--u) * -1);
}
.polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; border: 1px solid #EEDFC6; }
.org-name { font: 700 calc(var(--u) * 8)/1 var(--display); }
.org-place { font: 700 calc(var(--u) * 3.4)/1.2 var(--body); color: var(--ink2); margin-top: 4px; }
.org .card-sub { margin-top: calc(var(--u) * 3); color: var(--ink); }
.org .chips { margin-top: calc(var(--u) * 3); }
.motto { font: 600 calc(var(--u) * 4.4)/1.2 var(--display); color: var(--purple-d); margin-top: calc(var(--u) * 3); }
.stat-row { display: grid; grid-template-columns: 1fr 1.25fr 1.1fr; gap: calc(var(--u) * 2.4); }
.stat {
  border: var(--line); border-radius: 16px;
  padding: calc(var(--u) * 3) calc(var(--u) * 2.6); height: 100%;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.stat b { font: 700 calc(var(--u) * 6)/1 var(--display); letter-spacing: -0.02em; white-space: nowrap; }
.stat > span { font: 700 calc(var(--u) * 3)/1.2 var(--body); color: var(--ink2); }

/* ---------- bowls ---------- */
.bowls { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 2) calc(var(--u) * 1.6); margin-bottom: calc(var(--u) * 5); }
.bowls img { width: 100%; }
.bowls img:nth-child(3n+1) { transform: rotate(-6deg); }
.bowls img:nth-child(3n+2) { transform: rotate(5deg); }

/* ---------- rank ---------- */
.rank-card { padding-top: calc(var(--u) * 34); text-align: center; }
.rank-lift { margin-top: calc(var(--u) * 20); }
.burst {
  position: absolute; left: 50%; top: calc(var(--u) * -24);
  width: calc(var(--u) * 54); aspect-ratio: 1;
  translate: -50% 0;
  rotate: -10deg;
}
.burst img { width: 100%; height: 100%; }
.burst > span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 700 calc(var(--u) * 19)/1 var(--display); letter-spacing: -0.03em;
  padding-right: 4px;
}
.burst b { font-weight: 700; }

/* ---------- recap ---------- */
.recap-slide { gap: calc(var(--u) * 6); }
.recap {
  position: relative;
  background: #fff; border: var(--line); border-radius: 28px;
  padding: calc(var(--u) * 6);
  display: flex; flex-direction: column; align-items: flex-start;
}
.recap .logo.sm { width: calc(var(--u) * 30); }
.recap .eyebrow { font: 700 calc(var(--u) * 3)/1 var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--gold-d); margin-top: calc(var(--u) * 4); }
.recap .who-name { font: 700 calc(var(--u) * 15)/1 var(--display); letter-spacing: -0.02em; margin-top: calc(var(--u) * 1.4); }
.recap .pill { align-self: flex-start; margin-top: calc(var(--u) * 1); font-size: calc(var(--u) * 3.8); }
.recap .grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2.4); width: 100%; margin-top: calc(var(--u) * 5); }
.cell { border: 2px solid var(--ink); border-radius: 16px; padding: calc(var(--u) * 3) calc(var(--u) * 3.4); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cell b { font: 700 calc(var(--u) * 6.4)/1.05 var(--display); letter-spacing: -0.01em; }
.cell span { font: 700 calc(var(--u) * 3.1)/1 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); }
.tagline { font: 700 calc(var(--u) * 5)/1.2 var(--display); margin-top: calc(var(--u) * 5); }
.recap .poke { position: absolute; width: calc(var(--u) * 30); right: calc(var(--u) * -4); top: calc(var(--u) * -10); transform: rotate(10deg); }
.ctas { display: flex; flex-direction: column; gap: calc(var(--u) * 3); position: relative; z-index: 30; }
.btn {
  font: 700 calc(var(--u) * 4.6)/1 var(--display);
  border: var(--line); border-radius: 16px; box-shadow: 4px 4px 0 var(--ink);
  padding: calc(var(--u) * 4.2) 16px; cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn-primary { background: var(--gold); }
.btn-ghost { background: var(--cream); }

/* ---------- hit zones ---------- */
.hits { position: absolute; inset: 0; z-index: 10; display: flex; }
.hit { background: transparent; border: 0; cursor: pointer; }
.hit:focus-visible { outline: 3px dashed var(--ink); outline-offset: -8px; }
.hit-prev { width: 32%; } .hit-next { flex: 1; }
.hit:disabled { cursor: default; }
.sr-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }


/* ===================================================================== app build additions */
/* hard shadow lives on a wrapper so it can "land" with a transform-only animation */
.lift { position: relative; border-radius: var(--r, 28px); }
.lift::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--ink); transform: translate(5px, 5px);
}
.lift.mini::before, .lift.st::before { transform: translate(4px, 4px); }
.lift.st::before { transform: translate(3px, 3px); }
.lift.recap-lift { transform: rotate(-1.5deg); }
.lift.recap-lift::before { transform: translate(6px, 6px); }
.lift > * { position: relative; }
.lift.st { min-width: 0; }

.stat-row.n1 { grid-template-columns: 1fr; } .stat-row.n2 { grid-template-columns: 1fr 1fr; }
.recap .grid.n1 { grid-template-columns: 1fr; }
.recap .grid.n3 .cell:last-child { grid-column: 1 / -1; }
.big-num.n-s { font-size: calc(var(--u) * 17); }
.hl.wrap { white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.org-id { min-width: 0; }
.org-name { overflow-wrap: anywhere; }
.org-name.mid { font-size: calc(var(--u) * 6.4); }
.org-name.long { font-size: calc(var(--u) * 5.2); line-height: 1.05; }
.sec { overflow-wrap: anywhere; }
.recap .who-name { max-width: 100%; white-space: nowrap; overflow: hidden; }
.recap .who-name.mid { font-size: calc(var(--u) * 12); }
.recap .who-name.long { font-size: calc(var(--u) * 9); }
.cell b { overflow-wrap: anywhere; }
.cell b.mid { font-size: calc(var(--u) * 5); }
.cell b.long { font-size: calc(var(--u) * 4.1); }
.burst > span.s2 { font-size: calc(var(--u) * 14); }
.burst > span.s3 { font-size: calc(var(--u) * 10.5); }
.burst > span { white-space: nowrap; }
.polaroid { position: relative; }
.polaroid .ini { display: none; }
.polaroid.noimg .ini {
  display: grid; place-items: center; aspect-ratio: 1; width: 100%;
  background: var(--cream2); color: var(--purple-d); font: 700 calc(var(--u) * 11)/1 var(--display); border-radius: 2px;
}
.ch-word span { display: inline-block; }
.loader { position: absolute; inset: 0; display: none; place-items: center; z-index: 5; background: var(--cream); }
.phone.is-loading .loader { display: grid; }
.phone.is-loading .chrome { opacity: 0; }
.loader img { width: 90px; animation: bob 0.9s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(0) rotate(-8deg); } to { transform: translateY(-14px) rotate(8deg); } }

/* ===================================================================== motion (transform / opacity only, except two clip-path wipes) */
.slide { transition: none; }
.slide.is-active { visibility: visible; opacity: 1; z-index: 2; animation: slideIn .34s cubic-bezier(.2,.9,.25,1.15) both; }
.slide.is-leaving { visibility: visible; opacity: 1; z-index: 1; animation: slideOut .3s cubic-bezier(.5,0,.75,0) both; pointer-events: none; }
@keyframes slideIn {
  from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 18%)) scale(.92) rotate(calc(var(--dir, 1) * 3deg)); }
  to { opacity: 1; transform: none; }
}
@keyframes slideOut {
  to { opacity: 0; transform: translateX(calc(var(--dir, 1) * -12%)) scale(.9) rotate(calc(var(--dir, 1) * -2deg)); }
}

/* everything waits for its slide */
.slide .reveal, .slide .wipe, .slide .lift, .slide .slap, .slide > .blob,
.slide .bowls img, .slide .paw-row img, .slide .burst, .slide .ch-word span, .slide .heat { opacity: 0; }
.slide.is-active .reveal, .slide.is-active .wipe, .slide.is-active .lift, .slide.is-active .slap, .slide.is-active > .blob,
.slide.is-active .bowls img, .slide.is-active .paw-row img, .slide.is-active .burst, .slide.is-active .ch-word span, .slide.is-active .heat { animation-fill-mode: both; }

/* background accent circle grows in */
.slide.is-active > .blob { animation: grow .7s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes grow { from { opacity: 1; transform: scale(0); } to { opacity: 1; transform: scale(1); } }

/* generic rise for small copy + pills (pills keep their tilt via --rot) */
.slide .tilt-l { --rot: -3deg; } .slide .tilt-r { --rot: 3deg; }
.slide.is-active .reveal { animation: rise .5s cubic-bezier(.2,.9,.3,1.25) both; }
@keyframes rise { from { opacity: 0; transform: translateY(16px) rotate(0deg) scale(.96); } to { opacity: 1; transform: translateY(0) rotate(var(--rot, 0deg)); } }
.slide.is-active .pill.reveal { animation-name: pillPop; }
@keyframes pillPop {
  0% { opacity: 0; transform: scale(.4) rotate(calc(var(--rot, 0deg) * -4)); }
  65% { opacity: 1; transform: scale(1.08) rotate(calc(var(--rot, 0deg) * 1.6)); }
  100% { opacity: 1; transform: scale(1) rotate(var(--rot, 0deg)); }
}

/* headlines wipe in, then the marker swipes under them */
.slide.is-active .wipe { animation: wipe .55s cubic-bezier(.6,0,.2,1) both; }
@keyframes wipe { from { opacity: 1; clip-path: inset(-20% 100% -30% 0); transform: translateX(-10px); } to { opacity: 1; clip-path: inset(-20% -5% -30% 0); transform: none; } }
.slide .hl::after { transform: rotate(-1deg) scaleX(0); transform-origin: left center; }
.slide.is-active .hl::after { animation: marker .45s cubic-bezier(.6,0,.2,1) .42s both; }
@keyframes marker { to { transform: rotate(-1deg) scaleX(1); } }

/* cards: lift in high, then drop onto their hard shadow */
.slide.is-active .lift { animation: liftIn .62s cubic-bezier(.2,.8,.2,1) both; }
.slide.is-active .lift > * { animation: cardDrop .62s cubic-bezier(.2,.8,.2,1) both; animation-delay: inherit; }
.slide.is-active .lift::before { animation: shadowLand .62s cubic-bezier(.3,.7,.3,1.4) both; animation-delay: inherit; }
@keyframes liftIn { from { opacity: 0; } 25% { opacity: 1; } to { opacity: 1; } }
@keyframes cardDrop {
  0% { transform: translate(0, 46px) scale(.9); }
  55% { transform: translate(-4px, -6px) scale(1.02); }
  78% { transform: translate(-4px, -6px) scale(1); }
  100% { transform: none; }
}
@keyframes shadowLand { 0%, 55% { opacity: 0; transform: translate(0, 0); } 70% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 1; transform: translate(var(--sx, 5px), var(--sx, 5px)); } }
.lift.st { --sx: 3px; } .lift.mini { --sx: 4px; } .lift.recap-lift { --sx: 6px; }
.slide.is-active .lift.mini { animation-name: liftInTilt; }
@keyframes liftInTilt { from { opacity: 0; } 25% { opacity: 1; } to { opacity: 1; } }
.slide.is-active .stat-row .lift:nth-child(1) { animation-delay: .4s; }
.slide.is-active .stat-row .lift:nth-child(2) { animation-delay: .5s; }
.slide.is-active .stat-row .lift:nth-child(3) { animation-delay: .6s; }

/* recap card drops in from above with a tilt */
.slide.is-active .lift.recap-lift { animation: recapDrop .8s cubic-bezier(.25,.9,.3,1) .1s both; }
.slide.is-active .lift.recap-lift > *, .slide.is-active .lift.recap-lift::before { animation: none; }
@keyframes recapDrop {
  0% { opacity: 0; transform: translateY(-120%) rotate(-14deg); }
  55% { opacity: 1; transform: translateY(3%) rotate(2deg); }
  75% { transform: translateY(-1.5%) rotate(-3deg); }
  100% { opacity: 1; transform: translateY(0) rotate(-1.5deg); }
}

/* stickers slap on: big + spun, overshoot small, settle (rotate/scale props compose with their base tilt) */
.slide.is-active .slap { animation: slap .6s cubic-bezier(.3,.7,.4,1) .55s both; }
@keyframes slap {
  0% { opacity: 0; scale: 2.3; rotate: -28deg; }
  45% { opacity: 1; scale: .86; rotate: 7deg; }
  70% { scale: 1.07; rotate: -3deg; }
  85% { scale: .98; rotate: 1deg; }
  100% { opacity: 1; scale: 1; rotate: 0deg; }
}
.slide.is-active .title .slap, .slide.is-active.title .slap:nth-of-type(1) { animation-delay: .7s; }
.slide.is-active.title .s-title-2 { animation-delay: .85s; }
.slide.is-active.title .s-title-3 { animation-delay: 1s; }
.slide.is-active.chapter .s-ch-a { animation-delay: .3s; }
.slide.is-active.chapter .s-ch-b { animation-delay: .5s; }
.slide.is-active .polaroid.slap { animation-delay: .45s; }
.slide.is-active .recap .slap { animation-delay: .85s; }

/* chapter word: letters bounce up one by one */
.slide.is-active .ch-word span { animation: letter .5s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(.12s + var(--i) * .06s); }
@keyframes letter { from { opacity: 0; transform: translateY(40%) scale(.3) rotate(-12deg); } to { opacity: 1; transform: none; } }

/* bowls fill one by one; paws stamp along */
.slide.is-active .bowls img, .slide.is-active .paw-row img { animation: pop .38s cubic-bezier(.3,1.7,.5,1) both; }
@keyframes pop { from { opacity: 0; scale: .2; } to { opacity: 1; scale: 1; } }
.bowls img:nth-child(1) { animation-delay: .45s !important; } .bowls img:nth-child(2) { animation-delay: .52s !important; }
.bowls img:nth-child(3) { animation-delay: .59s !important; } .bowls img:nth-child(4) { animation-delay: .66s !important; }
.bowls img:nth-child(5) { animation-delay: .73s !important; } .bowls img:nth-child(6) { animation-delay: .80s !important; }
.bowls img:nth-child(7) { animation-delay: .87s !important; } .bowls img:nth-child(8) { animation-delay: .94s !important; }
.bowls img:nth-child(9) { animation-delay: 1.01s !important; } .bowls img:nth-child(10) { animation-delay: 1.08s !important; }
.bowls img:nth-child(11) { animation-delay: 1.15s !important; } .bowls img:nth-child(12) { animation-delay: 1.22s !important; }
.bowls img:nth-child(13) { animation-delay: 1.29s !important; } .bowls img:nth-child(14) { animation-delay: 1.36s !important; }
.bowls img:nth-child(15) { animation-delay: 1.43s !important; }
.paw-row img:nth-child(1) { animation-delay: .6s !important; } .paw-row img:nth-child(2) { animation-delay: .7s !important; }
.paw-row img:nth-child(3) { animation-delay: .8s !important; } .paw-row img:nth-child(4) { animation-delay: .9s !important; }
.paw-row img:nth-child(5) { animation-delay: 1s !important; } .paw-row img:nth-child(6) { animation-delay: 1.1s !important; }
.paw-row img:nth-child(7) { animation-delay: 1.2s !important; }

/* rank burst spins in */
.slide.is-active .burst { animation: spinIn .9s cubic-bezier(.2,.9,.3,1.25) .35s both; }
@keyframes spinIn { from { opacity: 0; rotate: -370deg; scale: .2; } 70% { opacity: 1; scale: 1.08; } to { opacity: 1; rotate: -10deg; scale: 1; } }

/* heatmap sweeps across the year */
.slide.is-active .heat { animation: wipe 1s cubic-bezier(.5,0,.3,1) .7s both; }

/* stagger helpers */
.slide.is-active .r1 { animation-delay: .06s; } .slide.is-active .r2 { animation-delay: .16s; }
.slide.is-active .r3 { animation-delay: .34s; } .slide.is-active .r4 { animation-delay: .9s; }
.slide.is-active .r5 { animation-delay: 1.1s; }
.slide.is-active .hl::after { animation-delay: .45s; }

/* press-and-hold pauses everything */
.phone.is-paused .slide.is-active, .phone.is-paused .slide.is-active *, .phone.is-paused .slide.is-active *::before, .phone.is-paused .slide.is-active *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .slide, .slide *, .slide *::before, .slide *::after { animation: none !important; }
  .slide.is-active .reveal, .slide.is-active .wipe, .slide.is-active .lift, .slide.is-active .slap, .slide.is-active > .blob,
  .slide.is-active .bowls img, .slide.is-active .paw-row img, .slide.is-active .burst, .slide.is-active .ch-word span, .slide.is-active .heat { opacity: 1; }
  .slide .hl::after { transform: rotate(-1deg); }
  .slide .pill.tilt-l { transform: rotate(-3deg); } .slide .pill.tilt-r { transform: rotate(3deg); }
  .loader img { animation: none; }
}

/* slides sit above the tap zones but let taps fall through, except real buttons */
.stories { z-index: 11; pointer-events: none; }
.slide .btn { pointer-events: auto; }

.sec.long-name { font-size: calc(var(--u) * 6.6); line-height: 1.08; }
.unit.long-name { font-size: calc(var(--u) * 5); line-height: 1.2; }
.cell b.num { white-space: nowrap; overflow-wrap: normal; }
.cell b.long { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }