/* Ambient life on the race road. Layered over the inline sky colour, transform and opacity only. */
.road::after {
  content: ""; position: absolute; left: 0; top: 6%; width: 70px; height: 20px; z-index: 0; pointer-events: none; border-radius: 999px;
  background: rgba(255,255,255,.8); box-shadow: 120px 18px 0 -2px rgba(255,255,255,.7), 260px -2px 0 2px rgba(255,255,255,.75), 26px -9px 0 3px rgba(255,255,255,.8);
  animation: roadClouds 60s linear infinite;
}
@keyframes roadClouds { from { transform: translateX(-100px); } to { transform: translateX(110vw); } }
.finish::after {
  content: "\1F64B  \1F64B"; position: absolute; bottom: 0; left: 50%; font-size: clamp(.9rem, 4.5dvh, 1.4rem); line-height: 1;
  white-space: nowrap; transform: translateX(-30%); transform-origin: 50% 100%; pointer-events: none; animation: cheer 1.6s ease-in-out infinite alternate;
}
@keyframes cheer { from { transform: translateX(-30%) rotate(-4deg); } to { transform: translateX(-30%) translateY(-3px) rotate(4deg); } }
/* Calm mode (grown-ups' screen) */
body.calm .road::after, body.calm .finish::after { animation: none !important; }


/* Level pass: a ribbon that swoops in over the results card */
.level-pass { position: absolute; left: 0; right: 0; top: 10px; display: flex; justify-content: center; z-index: 5; pointer-events: none; }
.level-pass .ribbon {
  position: relative; font-family: var(--display); font-size: clamp(1.4rem, 5vmin, 2.2rem); color: #fff;
  background: linear-gradient(var(--red), #b52419); padding: 8px 34px; border-radius: 10px;
  box-shadow: 0 6px 14px rgba(20, 30, 50, .3); text-shadow: 0 2px 0 rgba(0, 0, 0, .2);
  animation: ribbonIn .7s cubic-bezier(.16, 1, .3, 1) both, ribbonOut .5s ease-in 3.2s forwards;
}
.level-pass .ribbon::before, .level-pass .ribbon::after {
  content: ""; position: absolute; top: 10px; width: 22px; height: 100%; background: #9a1d14; z-index: -1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%);
}
.level-pass .ribbon::before { left: -16px; }
.level-pass .ribbon::after { right: -16px; transform: scaleX(-1); }
@keyframes ribbonIn { from { transform: translateY(-60px) scale(.6) rotate(-6deg); opacity: 0; } }
@keyframes ribbonOut { to { transform: translateY(-20px); opacity: 0; } }

/* Stops the picked game can't run on */
.stop.no-game { opacity: .45; filter: grayscale(.6); }
.pick-toast {
  position: absolute; left: 50%; bottom: 18px; translate: -50% 0; z-index: 10; max-width: min(92vw, 520px);
  background: var(--paper); color: var(--ink); border-radius: 16px; padding: 12px 18px; box-shadow: var(--shadow);
  font-weight: 700; font-size: 1.1rem; text-align: center; animation: ribbonIn .4s cubic-bezier(.16, 1, .3, 1) both;
}
/* Calm mode (grown-ups' screen) */
body.calm .level-pass .ribbon, body.calm .pick-toast { animation: none; } 
.results-card { position: relative; }
.book-toast { animation: pop .5s cubic-bezier(.2, .9, .3, 1.4) both .4s, packWiggle 2.4s ease-in-out 1.2s infinite; }
@keyframes packWiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-4deg) scale(1.05); } 92% { transform: rotate(4deg) scale(1.05); } }

/* Fire-friendly glows: the pulsing ring is a pseudo-element that only changes opacity and
   scale, so the browser never repaints the shadow each frame (box-shadow loops were costly). */
body .pic.hint, body .tyre.hint, body .gb-gate.gb-hint, body .splash-start { position: relative; }
body .pic.hint, body .tyre.hint, body .gb-gate.gb-hint { animation: hintGrow 1.1s ease-in-out infinite; }
body .nitro.ready, body .stop.here { animation: none; }
body .splash-start { animation: hintGrow 1.4s ease-in-out infinite; }
body .pic.hint::after, body .tyre.hint::after, body .gb-gate.gb-hint::after, body .nitro.ready::after, body .splash-start::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 8px rgba(35, 160, 80, .45); opacity: 0; will-change: opacity, transform;
  animation: ringPulse 1.1s ease-in-out infinite;
}
body .nitro.ready::after { box-shadow: 0 0 0 10px rgba(255, 138, 31, .4); animation-duration: .9s; }
body .splash-start::after { box-shadow: 0 10px 22px rgba(20, 30, 50, .3); animation-duration: 1.4s; }
@keyframes hintGrow { 50% { transform: scale(1.04); } }
@keyframes ringPulse { 50% { opacity: 1; } }
/* Calm mode (grown-ups' screen) */
body.calm .pic.hint, body.calm .tyre.hint, body.calm .gb-gate.gb-hint, body.calm .splash-start { animation: none; }
body.calm .pic.hint::after, body.calm .tyre.hint::after, body.calm .gb-gate.gb-hint::after, body.calm .nitro.ready::after { animation: none; opacity: 1; }


/* ===== More life (transform and opacity only, kept light for the Fire tablet) ===== */

/* Race: short-lived bursts live in .fx-layer and remove themselves */
.fx-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.fx { position: absolute; display: block; pointer-events: none; font-style: normal; will-change: transform, opacity; }
.fx.dust {
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: rgba(255, 255, 255, .85);
  animation: dustOut .6s ease-out forwards;
}
.fx.spark {
  width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #ffd426; border-radius: 2px; rotate: 45deg;
  animation: sparkOut .55s ease-out forwards;
}
.fx.streamer {
  width: 7px; height: 16px; margin: -8px 0 0 -3px; background: var(--c); border-radius: 2px;
  animation: streamerFall 1.3s cubic-bezier(.25, .6, .4, 1) var(--d, 0ms) both;
}
.fx.flag-pop { font-size: clamp(1.4rem, 7dvh, 2.4rem); line-height: 1; animation: flagPop 1.3s ease-out both; }
.fx.twinkle {
  width: 10px; height: 10px; margin: -5px 0 0 -5px; background: #fff3a8; rotate: 45deg; border-radius: 2px;
  animation: twinkleOut .6s ease-out forwards;
}
.fx.fly-coin {
  position: fixed; z-index: 60; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1a0, #ffc928 60%, #d99a10); border: 2px solid #b87a00; box-sizing: border-box;
}
@keyframes dustOut { from { transform: translate(0, 0) scale(.4); opacity: .8; } to { transform: translate(var(--dx), var(--dy)) scale(1.6); opacity: 0; } }
@keyframes sparkOut { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
@keyframes streamerFall {
  from { transform: translate(0, 0) rotate(0); opacity: 1; }
  to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}
@keyframes flagPop { 0% { transform: scale(0) rotate(-30deg); } 25% { transform: scale(1.3) rotate(10deg); } 45%, 80% { transform: scale(1) rotate(-6deg); opacity: 1; } 100% { transform: scale(1) rotate(6deg); opacity: 0; } }
@keyframes twinkleOut { from { transform: translate(0, 0) scale(.3); opacity: 1; } 50% { opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(1.2); opacity: 0; } }

/* Car squashes and bounces on landing (on the svg, so the car's own transform stays alone) */
.racer svg { transform-origin: 55% 94%; }
.racer svg.landed { animation: landSquash .45s ease-out; }
@keyframes landSquash { 0% { transform: scale(1.12, .8); } 40% { transform: scale(.94, 1.1); } 70% { transform: scale(1.03, .97); } 100% { transform: none; } }

/* Camera nudge when nitro fires */
.road.shake { animation: roadShake .32s linear; }
@keyframes roadShake {
  0% { transform: translate(0, 0); } 15% { transform: translate(-4px, 2px); } 30% { transform: translate(4px, -2px); }
  50% { transform: translate(-3px, -1px); } 70% { transform: translate(2px, 1px); } 100% { transform: translate(0, 0); }
}

/* Speed lines while fast */
.road.speedy:not(.boosting)::before { opacity: .7; animation: streaks .45s linear infinite; }

/* Finish flag waves faster once a car arrives */
.finish.cheering::before { animation-duration: .35s; }

/* Start lights pop as each one lights */
.light.red, .lights.go .light { animation: lightPop .35s cubic-bezier(.2, .9, .3, 1.5); }
@keyframes lightPop { 0% { transform: scale(.7); } 60% { transform: scale(1.22); } 100% { transform: scale(1); } }

/* Buttons: squash on press, springy bounce back on release */
.btn { transition: transform .4s cubic-bezier(.3, 1.9, .5, 1), box-shadow .15s ease-out; }
.btn:active { transform: translateY(3px) scale(1.05, .93); transition-duration: .06s, .06s; }
.btn[disabled]:active { transform: none; }

/* Home */
#home { overflow: hidden; }
.sky-life { position: absolute; inset: 0 0 30% 0; pointer-events: none; overflow: hidden; z-index: 0; }
.sky-life .cloud {
  position: absolute; left: 0; width: 90px; height: 26px; border-radius: 999px; background: rgba(255, 255, 255, .85);
  box-shadow: 30px -12px 0 4px rgba(255, 255, 255, .85); will-change: transform; animation: skyDrift 70s linear infinite;
}
.sky-life .c1 { top: 18%; }
.sky-life .c2 { top: 36%; animation-duration: 95s; animation-delay: -40s; opacity: .8; }
.sky-life .c3 { top: 8%; animation-duration: 120s; animation-delay: -85s; opacity: .7; }
.sky-life .floater, .sky-life .bird {
  position: absolute; left: 0; font-style: normal; font-size: clamp(1.6rem, 6dvh, 2.6rem); line-height: 1; will-change: transform; opacity: 0;
}
.sky-life .floater { bottom: 0; animation: balloonUp 34s ease-in-out 6s infinite; }
.sky-life .bird { top: 22%; animation: birdBy 26s linear 15s infinite; }
@keyframes skyDrift { from { transform: translateX(-160px); } to { transform: translateX(105vw); } }
@keyframes balloonUp {
  0% { transform: translate(18vw, 0); opacity: 0; } 5% { opacity: 1; }
  45% { transform: translate(24vw, -48dvh) rotate(6deg); opacity: 1; } 50% { transform: translate(26vw, -52dvh) rotate(-6deg); opacity: 0; } 100% { opacity: 0; }
}
@keyframes birdBy {
  0% { transform: translate(-60px, 0); opacity: 0; } 3% { opacity: 1; } 8% { transform: translate(15vw, -14px); }
  14% { transform: translate(30vw, 6px); } 20% { transform: translate(45vw, -12px); } 27% { transform: translate(62vw, 4px); }
  34% { transform: translate(80vw, -10px); } 40%, 100% { transform: translate(105vw, 0); opacity: 0; }
}

/* His car idles with a tiny engine shake and a puff of exhaust now and then */
.showroom { position: relative; }
.showroom .car-slot svg { transform-origin: 50% 94%; animation: idle .24s steps(2) infinite; }
@keyframes idle { 50% { transform: translateY(-1.2px); } }
.showroom .puff {
  position: absolute; left: 2%; bottom: 24%; width: 16px; height: 16px; border-radius: 50%; background: rgba(240, 240, 240, .8);
  opacity: 0; will-change: transform, opacity; animation: exhaust 4.5s ease-out infinite;
}
.showroom .p2 { animation-delay: .15s; } .showroom .p3 { animation-delay: .3s; }
@keyframes exhaust {
  0% { transform: translate(0, 0) scale(.4); opacity: 0; } 4% { opacity: .8; }
  14%, 100% { transform: translate(-34px, -16px) scale(1.6); opacity: 0; }
}
/* Sparky waves now and then */
#home .home-mech.talk .spanner { animation: nod .6s ease-in-out 2, sparkyWave 9s ease-in-out 3s infinite; }
@keyframes sparkyWave {
  0%, 82%, 100% { transform: none; } 85% { transform: rotate(-9deg) translateY(-4px); } 88% { transform: rotate(8deg) translateY(-4px); }
  91% { transform: rotate(-8deg) translateY(-2px); } 94% { transform: rotate(5deg); }
}
/* Race! breathes */
#home .btn-go:not(:active) { animation: breathe 2.8s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.04); } }

/* Results */
.big-stars { position: relative; }
.big-stars .on { animation: starIn .6s cubic-bezier(.2, .9, .3, 1.5) backwards, starPulse .5s ease-out both; }
.big-stars .on:nth-child(1) { animation-delay: 0s, .6s; }
.big-stars .on:nth-child(2) { animation-delay: .25s, .85s; }
.big-stars .on:nth-child(3) { animation-delay: .5s, 1.1s; }
@keyframes starPulse { 40% { transform: scale(1.22) rotate(8deg); } }
.mech.hop .spanner { animation: nod .6s ease-in-out 2, victoryHop .7s cubic-bezier(.3, 0, .3, 1) 1.2s 3; }
@keyframes victoryHop { 40% { transform: translateY(-16px) rotate(-5deg); } 70% { transform: translateY(0) scaleY(.94); } }

/* Calm mode (grown-ups' screen) */
body.calm .fx-layer, body.calm .fx { display: none !important; }
body.calm .road.shake, body.calm .racer svg.landed, body.calm .light.red, body.calm .lights.go .light, body.calm .btn, body.calm .btn:active, body.calm .sky-life *, body.calm .showroom .car-slot svg, body.calm .showroom .puff, body.calm #home .btn-go:not(:active), body.calm .big-stars .on, body.calm .mech.hop .spanner, body.calm #home .home-mech.talk .spanner, body.calm .road.speedy::before { animation: none !important; }
body.calm .sky-life .floater, body.calm .sky-life .bird, body.calm .showroom .puff { display: none; }
body.calm .btn:active { transform: translateY(3px); }
body.calm .sky-life .cloud { transform: translateX(8vw); }


/* Room for the ribbon inside the card (the card scrolls, so it can't poke out above) */
body .results-card.has-pass { padding-top: clamp(58px, 10dvh, 72px); }

/* ===== Tap feedback and small celebrations (transform, scale, rotate and opacity only) ===== */
/* The individual scale and rotate properties stack on top of the transforms elements already have. */
@keyframes tapBounce { 0% { scale: 1; } 30% { scale: 1.15; } 60% { scale: .95; } 100% { scale: 1; } }
@keyframes selPop { 0% { scale: .82; } 50% { scale: 1.16; } 75% { scale: .97; } 100% { scale: 1; } }
@keyframes tapWiggle { 0%, 100% { rotate: 0deg; } 20% { rotate: -9deg; } 50% { rotate: 8deg; } 80% { rotate: -4deg; } }
@keyframes stamp { 0% { scale: 2.6; rotate: -28deg; opacity: 0; } 55% { scale: .85; rotate: 4deg; opacity: 1; } 75% { scale: 1.08; } 100% { scale: 1; rotate: 0deg; opacity: 1; } }
.tapped.tapped { animation: tapBounce .4s cubic-bezier(.3, 1.4, .5, 1); }
.sel-pop { animation: selPop .45s cubic-bezier(.3, 1.5, .5, 1); }
.wiggle { animation: tapWiggle .5s ease-in-out; }

/* the car: the home car's hop was hidden by its idle shake, and a purchase gets a bigger bounce */
.showroom .car-slot.pop svg { animation: carPop .45s cubic-bezier(.2, .9, .3, 1.3); }
[data-shop-car] { position: relative; }
.car-slot.pop.bought svg { transform-origin: 50% 94%; animation: carBuy .8s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes carBuy {
  0% { transform: none; } 20% { transform: translateY(2%) scale(1.05, .93); } 45% { transform: translateY(-9%) scale(.97, 1.06) rotate(-2deg); }
  65% { transform: translateY(0) scale(1.04, .96); } 82% { transform: translateY(-3%) rotate(1deg); } 100% { transform: none; }
}

/* missions: the tick is stamped on, the card flashes green, the bar fills up from the left */
.job.done .job-icon { animation: stamp .55s .2s cubic-bezier(.3, 1.2, .5, 1) backwards; }
.job.done::after { content: ""; position: absolute; inset: 0; border-radius: 16px; background: rgba(35, 160, 80, .35); pointer-events: none; animation: jobFlash .9s .3s ease-out both; }
@keyframes jobFlash { from { opacity: 1; } to { opacity: 0; } }
.gauge i { transform-origin: 0 50%; animation: gaugeGrow .9s .1s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes gaugeGrow { from { transform: scaleX(0); } }
.mission-toast p .i { animation: stamp .55s .5s cubic-bezier(.3, 1.2, .5, 1) backwards; }

/* first-time intro: each step's picture pops in and Sparky's words rise up */
.intro-pic > * { animation: introPic .6s cubic-bezier(.3, 1.5, .5, 1) backwards; }
@keyframes introPic { from { transform: scale(.3) rotate(-12deg); opacity: 0; } }
.intro-card .mech .bubble { animation: introSay .4s .15s ease-out backwards; }
@keyframes introSay { from { transform: translateY(14px); opacity: 0; } }

/* story: a page turn, answers that pop in, a right answer that bounces and a wrong one that shakes */
.story-card.turn { transform-origin: 0 50%; animation: pageTurn .55s cubic-bezier(.2, .8, .3, 1); }
@keyframes pageTurn { 0% { transform: perspective(1100px) rotateY(-75deg); opacity: .2; } 60% { opacity: 1; } 100% { transform: perspective(1100px) rotateY(0); opacity: 1; } }
.story-card.ask, .story-card.done { animation: askIn .45s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes askIn { from { transform: translateY(24px) scale(.96); opacity: 0; } }
.story-opt { animation: introPic .45s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.story-opt:nth-child(2) { animation-delay: .08s; } .story-opt:nth-child(3) { animation-delay: .16s; } .story-opt:nth-child(4) { animation-delay: .24s; }
.story-opt.right { animation: tapBounce .5s cubic-bezier(.3, 1.4, .5, 1); }
.story-opt.wrong { animation: wobble .4s ease-out; }
.choice.right { animation: pop .5s cubic-bezier(.2, .9, .3, 1.4); }

/* album badges pop in one after another, and wiggle when tapped */
[data-album] .sticker.got { animation: introPic .5s cubic-bezier(.3, 1.5, .5, 1) backwards; }
[data-album] .sticker.got:nth-child(2) { animation-delay: .04s; } [data-album] .sticker.got:nth-child(3) { animation-delay: .08s; }
[data-album] .sticker.got:nth-child(4) { animation-delay: .12s; } [data-album] .sticker.got:nth-child(5) { animation-delay: .16s; }
[data-album] .sticker.got:nth-child(6) { animation-delay: .2s; } [data-album] .sticker.got:nth-child(n+7) { animation-delay: .24s; }
[data-album] .sticker.got.wiggle { animation: tapWiggle .5s ease-in-out; }

body.calm .tapped, body.calm .sel-pop, body.calm .wiggle, body.calm .job.done .job-icon, body.calm .gauge i, body.calm .mission-toast p .i,
body.calm .intro-pic > *, body.calm .intro-card .mech .bubble, body.calm .story-card, body.calm .story-opt, body.calm [data-album] .sticker.got,
body.calm .car-slot.pop.bought svg, body.calm .showroom .car-slot.pop svg, body.calm .choice.right { animation: none !important; }
body.calm .job.done::after { display: none; }

/* Pit Stop: picture (if any) with a "Hear it" button beside it */
.spell-cue { display: flex; align-items: center; gap: 14px; }
.hear-again { min-height: 52px; padding: 8px 16px; font-size: 1.1rem; }
.hear-again:active .i { transform: scale(1.2); }

/* Tablet feel: no long-press callouts, image drags or double-tap zoom anywhere */
body { -webkit-touch-callout: none; touch-action: manipulation; }
img, svg { -webkit-user-drag: none; user-select: none; }

/* "Next: Pit Stop!" when a mixed race changes game */
.stage { position: relative; }
.game-switch {
  position: absolute; left: 50%; top: 4px; translate: -50% 0; z-index: 6; pointer-events: none;
  background: var(--ink); color: #fff; font-family: var(--display); font-size: clamp(1rem, 3.2vmin, 1.4rem);
  padding: 6px 18px; border-radius: 999px; box-shadow: var(--shadow);
  animation: switchIn 1.7s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes switchIn { 0% { opacity: 0; transform: translateY(-14px) scale(.9); } 12%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }
body.calm .game-switch { animation: none; }

/* Wrong answers: a clear red cross on the choice, and the right answer glows so a miss still teaches. */
.pic.wrong, .tyre.wrong { position: relative; opacity: .5; }
.pic.wrong::after, .tyre.wrong::after {
  content: "✕"; position: absolute; inset: 0; display: grid; place-items: center;
  font: 900 clamp(2.4rem, 8dvh, 3.6rem)/1 var(--display); color: #e2392c; text-shadow: 0 2px 0 #fff;
  animation: crossIn .3s cubic-bezier(.2, .9, .3, 1.4) both;
}
@keyframes crossIn { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.choice.missed, .rs-btn.missed { opacity: .5; }
.choice.show-right, .rs-btn.show-right { opacity: 1; box-shadow: 0 0 0 5px #ffd426, var(--shadow); animation: hintGlow 1s ease-in-out 2; }
@keyframes hintGlow { 50% { box-shadow: 0 0 0 10px rgba(255, 212, 38, .55), var(--shadow); } }
.reveal.oops { font-size: clamp(1.25rem, 4dvh, 1.7rem); }
body.calm .pic.wrong::after, body.calm .tyre.wrong::after, body.calm .choice.show-right, body.calm .rs-btn.show-right { animation: none; }

/* Results on a short screen (phone sideways): everything fits without an inner scroll. */
.results-card { max-width: 720px; }
.result-actions .btn { padding-inline: clamp(14px, 2.4vw, 24px); }
@media (max-height: 430px) {
  .results-card { padding: 8px 20px; gap: 4px; }
  body .results-card.has-pass { padding-top: 46px; }
  .results-card .mech.small { display: none; }
  .results-card h2 { font-size: 1.6rem; }
  .results-card .big-stars .i { width: 38px; height: 38px; }
  .results-card p { font-size: 1rem; }
  .result-actions { flex-wrap: nowrap; gap: 8px; }
  .result-actions .btn, .result-actions .btn-big { min-height: 48px; font-size: 1.1rem; }
}

/* Last answer: flags and sparkles burst out while the car races for the line. */
.finish-burst { position: relative; display: grid; place-items: center; gap: 6px; }
.fb-flag { font-size: clamp(3rem, 14dvh, 6rem); line-height: 1; animation: fbWave .5s ease-in-out infinite alternate; transform-origin: 20% 90%; }
.finish-burst .intro { font-size: clamp(1.4rem, 5dvh, 2.2rem); animation: fbPop .5s cubic-bezier(.2, .9, .3, 1.4) both; }
.fb-bits { position: absolute; left: 50%; top: 40%; width: 0; height: 0; }
.fb-bits i { position: absolute; width: 12px; height: 12px; border-radius: 3px; background: var(--c); animation: fbFly var(--d) cubic-bezier(.15, .7, .3, 1) both; }
@keyframes fbFly { from { transform: rotate(var(--a)) translateX(0) scale(.4); opacity: 1; } to { transform: rotate(var(--a)) translateX(clamp(120px, 30vw, 320px)) rotate(200deg); opacity: 0; } }
@keyframes fbWave { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes fbPop { from { transform: scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
body.calm .fb-flag, body.calm .finish-burst .intro, body.calm .fb-bits { animation: none; display: none; }
body.calm .finish-burst .intro { display: block; }