/* Get Paid! Piggy Smash — site styles, matched to the in-game look. */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');

:root {
  --ink: #4a3329;
  --ink-soft: rgba(74, 51, 41, 0.6);
  --cream: #fff5e3;
  --paper: #fffcf2;
  --blush: #ffbfcc;
  --berry: #e05c78;
  --berry-dark: #b83a56;
  --gold: #ffcc47;
  --gold-dark: #b8851a;
  --mint: #87d4a1;
  --mint-dark: #388c5c;
  --wood: #c78c4f;
  --sky: #73c2d4;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Fredoka', system-ui, sans-serif;
  color: var(--ink);
  background-color: var(--cream);
  background-image: radial-gradient(rgba(74, 51, 41, 0.05) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 22px; }

/* ---- header ---- */
header {
  padding: 18px 0;
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 245, 227, 0.9);
  backdrop-filter: blur(6px);
  border-bottom: 3px solid var(--ink);
}
header .wrap { display: flex; align-items: center; justify-content: space-between; }
.brand { font-weight: 700; font-size: 22px; color: var(--berry); text-decoration: none; letter-spacing: -0.5px; }
.brand span { color: var(--gold-dark); }
nav a { color: var(--ink); text-decoration: none; font-weight: 600; margin-left: 22px; }
nav a:hover { color: var(--berry); }

/* ---- buttons ---- */
.btn {
  display: inline-block; font-weight: 700; font-size: 18px;
  color: #fff; background: var(--berry);
  padding: 14px 30px; border-radius: 16px;
  border: 3px solid var(--ink);
  box-shadow: 0 5px 0 var(--ink);
  text-decoration: none; cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn.mint { background: var(--mint); color: var(--ink); }
.btn.gold { background: var(--gold); color: var(--ink); }

/* ---- hero ---- */
.hero { text-align: center; padding: 64px 0 40px; }
.sign {
  display: inline-block; background: linear-gradient(180deg, var(--paper), var(--cream));
  border: 4px solid var(--ink); border-radius: 24px;
  padding: 22px 40px; box-shadow: 0 8px 0 var(--ink);
  transform: rotate(-1.2deg);
}
.sign h1 {
  font-size: clamp(46px, 9vw, 88px); font-weight: 700; color: var(--berry);
  letter-spacing: -1px; line-height: 0.95;
  text-shadow: 3px 3px 0 var(--ink);
}
.ribbon {
  display: inline-block; margin-top: 8px; background: var(--gold);
  color: var(--cream); font-weight: 700; letter-spacing: 3px;
  padding: 6px 26px; border: 3px solid var(--ink);
  clip-path: polygon(6% 0, 94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%);
  text-shadow: 2px 2px 0 var(--ink);
}
.tagline { font-size: clamp(18px, 3vw, 24px); font-weight: 600; margin: 26px 0 8px; }
.sub { color: var(--ink-soft); max-width: 560px; margin: 0 auto 28px; }
.cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.soon { font-size: 14px; color: var(--ink-soft); margin-top: 14px; }

/* ---- shots ---- */
.shots { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; padding: 20px 0 50px; }
.shots img {
  width: 220px; max-width: 44vw; border-radius: 26px;
  border: 4px solid var(--ink); box-shadow: 0 8px 0 rgba(74, 51, 41, 0.35);
  transform: rotate(-2deg);
}
.shots img:nth-child(2) { transform: rotate(1.5deg) translateY(-10px); }
.shots img:nth-child(3) { transform: rotate(-1deg); }

/* ---- features ---- */
.features { padding: 30px 0 60px; }
.features h2, .page h1 { text-align: center; font-size: 34px; font-weight: 700; margin-bottom: 8px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 26px; }
.card {
  background: var(--paper); border: 3px solid var(--ink); border-radius: 20px;
  padding: 22px; box-shadow: 0 6px 0 var(--ink);
}
.card .emoji { font-size: 40px; }
.card h3 { margin: 8px 0 4px; font-size: 20px; font-weight: 700; }
.card p { color: var(--ink-soft); font-size: 15px; }

/* ---- content pages ---- */
.page { padding: 46px 0 60px; }
.page .panel {
  background: var(--paper); border: 3px solid var(--ink); border-radius: 22px;
  padding: 30px 34px; box-shadow: 0 6px 0 var(--ink); max-width: 760px; margin: 24px auto 0;
}
.page h2 { font-size: 22px; font-weight: 700; margin: 24px 0 8px; color: var(--berry-dark); }
.page p, .page li { color: var(--ink); margin-bottom: 10px; }
.page ul { padding-left: 22px; }
.page a { color: var(--berry); font-weight: 600; }
.updated { text-align: center; color: var(--ink-soft); font-size: 14px; margin-top: 6px; }

/* ---- footer ---- */
footer { border-top: 3px solid var(--ink); padding: 26px 0; text-align: center; color: var(--ink-soft); }
footer a { color: var(--berry); text-decoration: none; font-weight: 600; margin: 0 10px; }
footer .small { font-size: 13px; margin-top: 8px; }

/* ---- game-art additions ---- */
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand img { width: 34px; height: 34px; border-radius: 9px; border: 2px solid var(--ink); }

.hero-art { display: flex; align-items: flex-end; justify-content: center; gap: 6px; margin: 6px 0 26px; min-height: 160px; }
.hero-art .piggy { width: clamp(120px, 30vw, 168px); animation: bob 2.4s ease-in-out infinite; }
.hero-art .hammer { width: clamp(78px, 20vw, 112px); transform: rotate(-16deg); animation: swing 2.4s ease-in-out infinite; transform-origin: bottom center; }
.hero-art .coin { width: clamp(34px, 9vw, 48px); }
.hero-art .c1 { animation: float 2.8s ease-in-out infinite; }
.hero-art .c2 { animation: float 2.8s ease-in-out infinite 0.6s; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
@keyframes swing { 0%,100% { transform: rotate(-16deg); } 50% { transform: rotate(-30deg); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .hero-art * { animation: none !important; } }

.card { text-align: center; }
.card .ic { width: 62px; height: 62px; object-fit: contain; margin-bottom: 6px; }
.card p { text-align: left; }


/* ---- real logo + badged icons (overrides) ---- */
.hero .logo { width: min(560px, 90vw); height: auto; display: block; margin: 0 auto 6px; }
.brand img { width: 38px; height: 38px; }
.card .ic {
  width: 74px; height: 74px; object-fit: contain; box-sizing: border-box;
  padding: 14px; margin: 0 auto 10px; display: block;
  background: var(--cream); border: 3px solid var(--ink); border-radius: 50%;
}

/* ---- header brand: keep the icon small and inline ---- */
header .brand { font-size: 20px; flex-wrap: nowrap; white-space: nowrap; }
header .brand img { width: 34px !important; height: 34px !important; flex: 0 0 auto; }

/* ---- hero smash animation (loops, resets ~2s after each smash) ---- */
.hero-art { min-height: 210px; display: flex; justify-content: center; align-items: flex-end; }
.smash { position: relative; width: 280px; height: 200px; }
.smash .piggy {
  position: absolute; left: 50%; bottom: 0; width: 152px; margin: 0;
  transform: translateX(-50%);
  transform-origin: bottom center;
  animation: piggy-smash 3s ease-in-out infinite;
}
.smash .hammer {
  position: absolute; left: 54%; bottom: 78px; width: 116px; margin: 0;
  transform: rotate(-42deg);
  transform-origin: bottom left;
  animation: hammer-smash 3s ease-in-out infinite;
  z-index: 3;
}
.smash .coins { position: absolute; left: 50%; bottom: 92px; width: 0; height: 0; }
.smash .coin {
  position: absolute; left: 0; top: 0; width: 40px; margin-left: -20px;
  opacity: 0;
  animation: coin-burst 3s ease-in-out infinite;
}
@keyframes hammer-smash {
  0%, 10% { transform: rotate(-42deg); }
  17%     { transform: rotate(10deg); }   /* SLAM onto the piggy */
  23%     { transform: rotate(3deg); }
  34%, 100% { transform: rotate(-42deg); } /* raise back up and wait */
}
@keyframes piggy-smash {
  0%, 15%  { transform: translateX(-50%) scale(1, 1); }
  18%      { transform: translateX(-50%) scale(1.14, 0.8); }  /* squish on impact */
  22%      { transform: translateX(-53%) scale(0.93, 1.08); }
  26%      { transform: translateX(-47%) scale(1.03, 0.97); }
  32%      { transform: translateX(-50%) scale(1, 1); }
  100%     { transform: translateX(-50%) scale(1, 1); }
}
@keyframes coin-burst {
  0%, 15%   { opacity: 0; transform: translate(0, 0) scale(0.4); }
  18%       { opacity: 1; transform: translate(calc(var(--dx) * 0.4), -18px) scale(1); }
  34%       { opacity: 1; transform: translate(var(--dx), -50px) scale(1); }  /* burst up and out */
  60%       { opacity: 1; transform: translate(var(--dx), 44px) scale(1); }   /* fall to the table */
  80%       { opacity: 1; transform: translate(var(--dx), 44px) scale(1); }   /* rest a beat */
  92%, 100% { opacity: 0; transform: translate(var(--dx), 44px) scale(0.7); } /* fade, then reset */
}
@media (prefers-reduced-motion: reduce) {
  .smash .piggy, .smash .hammer, .smash .coin { animation: none !important; }
  .smash .hammer { transform: rotate(-30deg); }
  .smash .coin:nth-child(2), .smash .coin:nth-child(4) { opacity: 1; transform: translate(var(--dx), 30px); }
}

/* ---- hero smash animation v2 (chop, reliable positioning) ---- */
.smash { position: relative; width: 240px; height: 210px; }
.smash .piggy {
  position: absolute; left: 50%; bottom: 0; width: 150px; margin: 0;
  transform: translateX(-50%); transform-origin: bottom center;
  animation: piggy-smash 3s ease-in-out infinite;
}
.smash .hammer {
  position: absolute; left: 50%; top: 0; width: 112px; margin-left: -42px;
  transform-origin: bottom center; transform: translateY(-34px) rotate(-16deg);
  animation: hammer-chop 3s ease-in-out infinite; z-index: 3;
}
.smash .coins { position: absolute; left: 50%; top: 62px; width: 0; height: 0; }
.smash .coin {
  position: absolute; left: -19px; top: -19px; width: 38px; margin: 0;
  opacity: 0; animation: coin-burst 3s ease-in-out infinite;
}
@keyframes hammer-chop {
  0%, 10%  { transform: translateY(-34px) rotate(-16deg); }
  17%      { transform: translateY(8px) rotate(6deg); }
  24%      { transform: translateY(0) rotate(2deg); }
  34%,100% { transform: translateY(-34px) rotate(-16deg); }
}
@keyframes piggy-smash {
  0%, 15%  { transform: translateX(-50%) scale(1,1); }
  18%      { transform: translateX(-50%) scale(1.14,0.8); }
  22%      { transform: translateX(-53%) scale(0.93,1.08); }
  26%      { transform: translateX(-47%) scale(1.03,0.97); }
  32%,100% { transform: translateX(-50%) scale(1,1); }
}
@keyframes coin-burst {
  0%, 16%  { opacity: 0; transform: translate(0,0) scale(0.4); }
  19%      { opacity: 1; transform: translate(calc(var(--dx)*0.35), -14px) scale(1); }
  36%      { opacity: 1; transform: translate(var(--dx), -48px) scale(1); }
  62%      { opacity: 1; transform: translate(var(--dx), 74px) scale(1); }
  82%      { opacity: 1; transform: translate(var(--dx), 74px) scale(1); }
  93%,100% { opacity: 0; transform: translate(var(--dx), 74px) scale(0.7); }
}

/* ---- hero smash animation v3 (game-like: swing, crack, coins fall) ---- */
.smash { position: relative; width: 240px; height: 210px; }
.smash .piggy { position:absolute; left:50%; bottom:0; width:150px; margin:0; transform:translateX(-50%); transform-origin:bottom center; animation: hs-piggy 3s ease-in-out infinite; }
.smash .crack { position:absolute; left:50%; bottom:0; width:150px; margin:0; transform:translateX(-50%); opacity:0; animation: hs-crack 3s ease-in-out infinite; z-index:2; }
.smash .coins { position:absolute; left:50%; top:72px; width:0; height:0; }
.smash .coin { position:absolute; left:-18px; top:-18px; width:36px; margin:0; opacity:0; animation: hs-coin 3s ease-in-out infinite; }
.smash .hammer { position:absolute; left:36%; top:16px; width:116px; margin:0; transform-origin:22% 86%; transform:rotate(46deg); animation: hs-hammer 3s ease-in-out infinite; z-index:3; }
@keyframes hs-hammer { 0%,8%{transform:rotate(46deg)} 16%{transform:rotate(-52deg)} 22%{transform:rotate(-44deg)} 32%,100%{transform:rotate(46deg)} }
@keyframes hs-piggy { 0%,14%{transform:translateX(-50%) scale(1,1)} 17%{transform:translateX(-50%) scale(1.13,0.82)} 21%{transform:translateX(-52%) scale(0.94,1.07)} 26%{transform:translateX(-48%) scale(1.02,0.98)} 32%,100%{transform:translateX(-50%) scale(1,1)} }
@keyframes hs-crack { 0%,15%{opacity:0} 18%{opacity:1} 78%{opacity:1} 90%,100%{opacity:0} }
@keyframes hs-coin { 0%,15%{opacity:0; transform:translate(0,0) scale(0.4)} 19%{opacity:1; transform:translate(calc(var(--dx)*0.35),-14px) scale(1)} 36%{opacity:1; transform:translate(var(--dx),-44px) scale(1)} 62%{opacity:1; transform:translate(var(--dx),72px) scale(1)} 82%{opacity:1; transform:translate(var(--dx),72px) scale(1)} 92%,100%{opacity:0; transform:translate(var(--dx),72px) scale(0.7)} }
@media (prefers-reduced-motion: reduce) { .smash .piggy, .smash .hammer, .smash .coin, .smash .crack { animation: none !important; } .smash .hammer { transform: rotate(30deg); } }

/* ---- hero smash animation v4 (hit, crack, hit, break, coins drop in place) ---- */
.smash { position: relative; width: 240px; height: 210px; }
.smash .piggy { position:absolute; left:50%; bottom:0; width:150px; margin:0; transform:translateX(-50%); transform-origin:bottom center; animation: hs2-piggy 4.5s ease-in-out infinite; }
.smash .crack { position:absolute; left:50%; bottom:0; width:150px; margin:0; transform:translateX(-50%); opacity:0; z-index:2; animation: hs2-crack 4.5s ease-in-out infinite; }
.smash .coins { position:absolute; left:50%; top:auto; bottom:34px; width:0; height:0; z-index:4; }
.smash .coin { position:absolute; left:-17px; top:-17px; width:34px; margin:0; opacity:0; z-index:4; animation: hs2-coin 4.5s ease-in-out infinite; }
.smash .hammer { position:absolute; left:36%; top:16px; width:116px; margin:0; transform-origin:22% 86%; transform:rotate(46deg); z-index:3; animation: hs2-hammer 4.5s ease-in-out infinite; }
@keyframes hs2-hammer { 0%,7%{transform:rotate(46deg)} 13%{transform:rotate(-52deg)} 22%{transform:rotate(46deg)} 35%{transform:rotate(-52deg)} 44%,100%{transform:rotate(46deg)} }
@keyframes hs2-piggy { 0%,11%{transform:translateX(-50%) scale(1,1); opacity:1} 14%{transform:translateX(-50%) scale(1.1,0.85)} 20%{transform:translateX(-50%) scale(1,1)} 36%{transform:translateX(-50%) scale(1.14,0.8); opacity:1} 39%{transform:translateX(-50%) scale(1.25,0.6); opacity:0} 86%{opacity:0} 91%{transform:translateX(-50%) scale(1,1); opacity:1} 100%{transform:translateX(-50%) scale(1,1); opacity:1} }
@keyframes hs2-crack { 0%,13%{opacity:0} 16%{opacity:1} 37%{opacity:1} 39%,100%{opacity:0} }
@keyframes hs2-coin { 0%,37%{opacity:0; transform:translate(0,-30px) scale(0.4)} 41%{opacity:1; transform:translate(calc(var(--dx)*0.7),-40px) scale(1)} 56%{opacity:1; transform:translate(var(--dx),0) scale(1)} 80%{opacity:1; transform:translate(var(--dx),0) scale(1)} 88%,100%{opacity:0; transform:translate(var(--dx),0) scale(0.85)} }
@media (prefers-reduced-motion: reduce) { .smash .piggy, .smash .hammer, .smash .coin, .smash .crack { animation: none !important; } .smash .hammer { transform: rotate(30deg); } }

/* ---- stacked feature sections + the numbers strip ---- */
.features + .features { padding-top: 0; }
.features .sub { margin-bottom: 0; }
.features h2 + .sub { margin-top: 4px; }

.numbers { padding: 8px 0 66px; }
.numbers ul {
  list-style: none; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 12px 14px;
}
.numbers li {
  background: var(--paper); border: 3px solid var(--ink); border-radius: 999px;
  box-shadow: 0 4px 0 var(--ink);
  padding: 8px 20px; font-size: 15px; font-weight: 600; color: var(--ink-soft);
}
.numbers li:nth-child(odd)  { transform: rotate(-1.5deg); }
.numbers li:nth-child(even) { transform: rotate(1.5deg); }
.numbers b { font-size: 21px; font-weight: 700; color: var(--berry); margin-right: 5px; }

/* ---- hero smash animation v5: the game's actual break ----------------------
   Ported from Views/MenuPiggy.swift. Two things the earlier versions got
   wrong. First, damage is drawn INTO the body art — the game swaps the whole
   sprite as HP drops (PiggyType.damageSprite), so the cracks spread and the
   piggy comes apart, rather than one doodle fading in on a pristine body.
   Second, it breaks into shards (SmashBurst), not thin air.
   Hammer geometry is the game's: pivot on the grip at (0.82, 0.84), resting
   at +50 degrees, winding back to +74, landing at +10. Nudge those three and
   nothing else if the contact point ever needs moving.                      */

.smash {
  --h: 132px;                        /* piggy height; everything derives from it */
  position: relative;
  width: calc(var(--h) * 2.3); height: calc(var(--h) * 1.6);
}

/* ---- body: five stacked frames, one visible at a time ---- */
.smash .pig {
  position: absolute; left: calc(50% - var(--h) * 0.20); bottom: 0;
  width: calc(var(--h) * 1.128); height: var(--h);
  transform-origin: bottom center; translate: -50% 0;
  animation: hs5-pig 6s linear infinite;
}
.smash .body {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; margin: 0; opacity: 0;
  animation: 6s steps(1, end) infinite;
}
.smash .s0 { animation-name: hs5-s0; }
.smash .s1 { animation-name: hs5-s1; }
.smash .s2 { animation-name: hs5-s2; }
.smash .s3 { animation-name: hs5-s3; }
.smash .s4 { animation-name: hs5-s4; }

@keyframes hs5-s0 { 0%,9.1%{opacity:1} 9.2%,79.9%{opacity:0} 80%,100%{opacity:1} }
@keyframes hs5-s1 { 0%,9.1%{opacity:0} 9.2%,21.6%{opacity:1} 21.7%,100%{opacity:0} }
@keyframes hs5-s2 { 0%,21.6%{opacity:0} 21.7%,34.1%{opacity:1} 34.2%,100%{opacity:0} }
@keyframes hs5-s3 { 0%,34.1%{opacity:0} 34.2%,46.6%{opacity:1} 46.7%,100%{opacity:0} }
@keyframes hs5-s4 { 0%,46.6%{opacity:0} 46.7%,48.4%{opacity:1} 48.5%,100%{opacity:0} }

/* Squash on the wind-up, harder squash on impact, overshoot, settle — then
   scale away to 0.4 and fade, which is the game's break transition. */
@keyframes hs5-pig {
  0%,3.3%   { transform: scale(1,1) rotate(0deg);          opacity: 1 }
  8%        { transform: scale(1.10,0.92) rotate(2.5deg);  opacity: 1 }
  9.2%      { transform: scale(1.14,0.86) rotate(0deg);    opacity: 1 }
  12%       { transform: scale(0.97,1.04) rotate(0deg) }
  15.8%     { transform: scale(1,1) rotate(0deg) }
  20.5%     { transform: scale(1.10,0.92) rotate(2.5deg) }
  21.7%     { transform: scale(1.14,0.86) rotate(0deg) }
  24.5%     { transform: scale(0.97,1.04) rotate(0deg) }
  28.3%     { transform: scale(1,1) rotate(0deg) }
  33%       { transform: scale(1.10,0.92) rotate(2.5deg) }
  34.2%     { transform: scale(1.14,0.86) rotate(0deg) }
  37%       { transform: scale(0.97,1.04) rotate(0deg) }
  40.8%     { transform: scale(1,1) rotate(0deg) }
  45.5%     { transform: scale(1.10,0.92) rotate(2.5deg) }
  46.7%     { transform: scale(1.16,0.84) rotate(0deg);    opacity: 1 }
  48.5%     { transform: scale(1.16,0.84) rotate(0deg);    opacity: 1 }
  50.8%     { transform: scale(0.4,0.4) rotate(0deg);      opacity: 0 }
  80%       { transform: scale(0.4,0.4) rotate(0deg);      opacity: 0 }
  87%,100%  { transform: scale(1,1) rotate(0deg);          opacity: 1 }
}

/* ---- hammer: rest 50deg, wind back to 74, snap down to 10 ---- */
.smash .hammer {
  position: absolute; left: calc(50% + var(--h) * 0.46); bottom: calc(var(--h) * 0.14);
  width: calc(var(--h) * 0.883); height: auto; margin: 0;
  translate: -50% 0;
  transform-origin: 82% 84%; transform: rotate(50deg);
  z-index: 3;
  animation: hs5-hammer 6s infinite;
}
@keyframes hs5-hammer {
  0%,3.3%   { transform: rotate(50deg); animation-timing-function: linear }
  8%        { transform: rotate(74deg); animation-timing-function: ease-in }
  9.2%      { transform: rotate(10deg); animation-timing-function: ease-out }
  15.8%     { transform: rotate(50deg); animation-timing-function: linear }
  20.5%     { transform: rotate(74deg); animation-timing-function: ease-in }
  21.7%     { transform: rotate(10deg); animation-timing-function: ease-out }
  28.3%     { transform: rotate(50deg); animation-timing-function: linear }
  33%       { transform: rotate(74deg); animation-timing-function: ease-in }
  34.2%     { transform: rotate(10deg); animation-timing-function: ease-out }
  40.8%     { transform: rotate(50deg); animation-timing-function: linear }
  45.5%     { transform: rotate(74deg); animation-timing-function: ease-in }
  46.7%     { transform: rotate(10deg); animation-timing-function: ease-out }
  53.3%,100%{ transform: rotate(50deg) }
}

/* ---- the break: a flash and ten chips of whatever it was made of ---- */
.smash .burst {
  position: absolute; left: calc(50% - var(--h) * 0.20); bottom: calc(var(--h) * 0.38);
  width: 0; height: 0; z-index: 2;
}
.smash .spark {
  position: absolute; left: -65px; top: -65px; width: 130px; height: 130px;
  margin: 0; opacity: 0; animation: hs5-spark 6s ease-out infinite;
}
@keyframes hs5-spark {
  0%,48.4%   { opacity: 0;   transform: scale(0.34) }
  48.5%      { opacity: .95; transform: scale(0.34) }
  57.2%,100% { opacity: 0;   transform: scale(1) }
}
.smash .burst i {
  position: absolute; opacity: 0; border: 2px solid var(--ink);
  animation: hs5-shard 6s ease-out infinite;
}
.smash .chip {
  width: var(--s); height: calc(var(--s) * 0.8);
  margin: calc(var(--s) * -0.4) 0 0 calc(var(--s) * -0.5);
  background: var(--blush); border-radius: 3px;
}
.smash .cap {
  width: calc(var(--s) * 1.1); height: calc(var(--s) * 0.65);
  margin: calc(var(--s) * -0.325) 0 0 calc(var(--s) * -0.55);
  background: var(--paper); border-radius: 999px;
}
@keyframes hs5-shard {
  0%,48.4%   { opacity: 0; transform: translate(0,0) rotate(0deg) scale(1) }
  48.5%      { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1) }
  57.2%,100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(0.65) }
}

/* ---- coins, thrown on the break and left on the table ---- */
.smash .coins {
  position: absolute; left: calc(50% - var(--h) * 0.20); bottom: calc(var(--h) * 0.24);
  width: 0; height: 0; z-index: 4;
}
.smash .coin {
  position: absolute; left: -18px; top: -18px; width: 36px; height: 36px;
  margin: 0; opacity: 0; animation: hs5-coin 6s ease-out infinite;
}
@keyframes hs5-coin {
  0%,47%   { opacity: 0; transform: translate(0,0) scale(0.4) }
  50%      { opacity: 1; transform: translate(calc(var(--dx) * 0.6), -34px) scale(1) }
  57%      { opacity: 1; transform: translate(var(--dx), -46px) scale(1) }
  68%      { opacity: 1; transform: translate(var(--dx), 6px) scale(1) }
  74%      { opacity: 1; transform: translate(var(--dx), 6px) scale(1) }
  79%,100% { opacity: 0; transform: translate(var(--dx), 6px) scale(0.8) }
}

.hero-art { min-height: calc(132px * 1.6); }
@media (max-width: 520px) { .smash { --h: 104px; } .hero-art { min-height: 168px; } }

/* Frozen, it should still read as "hammer, cracked piggy, coins". */
@media (prefers-reduced-motion: reduce) {
  .smash .pig, .smash .body, .smash .hammer, .smash .coin,
  .smash .spark, .smash .burst i { animation: none !important; }
  .smash .pig { transform: scale(1,1) }
  .smash .s2 { opacity: 1 }
  .smash .hammer { transform: rotate(28deg) }
  .smash .spark { opacity: 0 }
  .smash .coin { opacity: 1; transform: translate(var(--dx), 6px) }
}