GLM 5.3 Flash

The user wants a "like" button in pure CSS, no JavaScript, with a crazy animation on click. I should build a self-contained HTML file with CSS-only animation using checkbox hack (:checked). Make it visually striking — heart burst, particles, confetti, shockwave ring, button shake, etc.

Requirements: single code block, HTML with inline CSS, no JS at all. Must look good at 1280x800 and adapt down to 375px. Something visible on first paint — the button itself. No keyboard needed.

Design: dark background, centered card with a like button. Checkbox hack: label wraps everything. When checked, heart fills red, particles fly out (multiple spans positioned, animated with different angles via CSS custom properties set inline per particle... but no JS — inline styles with --x --y custom properties per particle are fine, that's still pure CSS).

Crazy animation ideas:
- Heart scales, bursts
- Shockwave rings expanding
- Particles (sparks) flying outward in all directions — generate ~20 spans with inline style setting --a (angle) and --d (distance)
- Confetti bits
- Button does a jelly wobble
- Screen flash / background pulse
- Floating "+1" counter
- Emoji reaction emojis (❤️ 🔥 👍 🎉 ✨) popping up and floating away
- Screen shake of the whole card

Also an unlike animation when clicking again (unchecking) — maybe reverse / heart deflates with "broken" particles.

Use CSS animations triggered via :checked ~ selectors. Keep animation-fill-mode forwards so after first burst things settle.

Particles: I'll write them with nth-child to vary angle, or inline custom properties. Inline style="--a:0deg" is simplest.

Let me plan structure:

```html
<input type="checkbox" id="like" hidden>
<label for="like" class="btn">
  <span class="ring r1"></span>
  <span class="ring r2"></span>
  <span class="sparks">... 24 <i style="--a:15deg; --d:130px; --s:1"></i></span>
  <span class="hearts">... few small hearts floating up</span>
  <svg heart>
  <span class="count">...</span>? 
```

Count: pure CSS can't count, but can use a stack of numbers... Actually can do with counter and CSS counters? Checkbox :checked can't increment a real counter shown dynamically... Actually CSS counters can: use `#like:checked` — you can't increment based on checked without repeated elements. Could fake a "+1" floating text that appears. Simpler: label text changes "Like" → "Liked!" via sibling selectors.

Also emojis: hearts/emojis popping up.

Screen flash: a full-viewport div sibling after checkbox that flashes when checked.

Also the whole card shakes via :checked ~ .card? Checkbox must be sibling-ancestor relationship. Put checkbox as first child of body, then card, then flash overlay.

Heart inside label: can select with `#like:checked + .card .heart` etc. But label inside card... Use general sibling `~`.

Let me write it.

Structure:
```
<input type="checkbox" id="like">
<div class="flash"></div>
<main class="stage">
  <div class="card">
    <h1>...</h1>
    <label class="btn" for="like">
      ... everything
    </label>
    <p class="hint">Tap it. Again. Again.</p>
  </div>
</main>
```

Selectors: `#like:checked ~ .flash` works. `#like:checked ~ .stage .btn` works (descendant of general sibling — allowed).

Button design: pill with "Like" text + heart icon. On check:
- Heart scales up with bounce, turns red, then stays big.
- Rings: two expanding circles fading.
- Sparks: 24 dots fly out along --a angle translating rotate(--a) translateX(--d), scale down, fade.
- Emojis: ❤️🔥✨🎉👍 pop above button and float up with rotation, disappear.
- Button jelly: keyframes squish.
- Card shake: keyframes small translate/rotate.
- Flash: white->transparent radial flash covering viewport, pointer-events none.
- Background: subtle animated gradient? Could animate body background hue slowly for life. Add floating ambient blobs for first-paint interest.

Also add a persistent "Liked!" state: button turns red, text "Liked ♥".

Also unlike: when unchecked, heart does quick shrink; maybe reverse animations just snap back. Add a small transition for unchecking (heart deflates with wobble).

Add hint text and title styling. Make it responsive with clamp.

Sparks generation: 24 <i> elements each with inline `--a`. I'll write them out. Distances vary: use nth-child even/odd for distance/speed/size, plus inline angle.

Let me define spark CSS:

```css
.sparks i {
  position:absolute; left:50%; top:50%;
  width:10px; height:10px; border-radius:2px;
  background: var(--c, gold);
  transform: rotate(var(--a)) translateX(0) scale(0);
  opacity:0;
}
#like:checked ~ .stage .sparks i {
  animation: fly .9s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay: var(--dl, 0s);
}
@keyframes fly {
  0% { transform: rotate(var(--a)) translateX(12px) scale(0); opacity:1 }
  15% { opacity:1 }
  100% { transform: rotate(var(--a)) translateX(var(--d,140px)) scale(0); opacity:0 }
}
```

Colors per spark via inline --c.

Emojis float:

```css
.emojis span { position:absolute; bottom:100%; font-size:26px; opacity:0; }
#like:checked ~ .stage .emojis span { animation: pop 1.6s ease-out forwards; animation-delay: var(--dl) }
@keyframes pop {
 0% {opacity:0; transform: translateY(10px) scale(.3) rotate(0)}
 20% {opacity:1; transform: translateY(-10px) scale(1.2) rotate(var(--r))}
 100% {opacity:0; transform: translateY(-140px) scale(1) rotate(var(--r))}
}
```

Place emojis absolutely relative to button, near center top.

Heart: use an SVG heart or CSS heart? SVG easier. Heart icon inside button that on checked gets fill red + scale bounce:

```css
#like:checked ~ .stage .heart-ic { animation: heartburst .7s ...; fill:red }
```

Actually the main heart: big heart on button. When checked: scales 0→1.4→1, fill goes from gray outline to red gradient.

Big standalone heart? Maybe make the button itself a big circular button with a big heart — more dramatic. I'll do a big pill: "♥ Like" pill width ~220px, height ~90px? Or a big circular heart button 140px. Circular with heart icon, plus label text below ("Like"). Hmm, pill with text is more recognizable as a like button. Go pill: heart icon + "Like".

Jelly animation on the whole button when checked:

```css
#like:checked ~ .stage .btn { animation: jelly .6s; background: red gradient; }
```

Careful: animation on the label re-triggers only when checked changes. Fine.

Shockwave rings: two absolutely positioned circles inside button, border white, scale from 0.6 to 3, fade.

Flash overlay: fixed, inset 0, background radial-gradient white, opacity 0; on checked animation flash .5s forwards. pointer-events:none. z-index high.

Card shake on check.

Also maybe the background hue shifts on like: body ::before blob colors change when checked — transition.

Ambient: two blurred gradient blobs floating with slow keyframes, always animating — gives life at first paint.

Also add "counter" of likes: static numbers stacked that flip? Skip; instead show text under button that swaps "Be honest. You love it." Keep simple.

Also on unchecked, do a little "pop-out" — heart drops with squash: 

```css
#like:not(:checked) ~ .stage .heart-ic { animation: unheart .5s; }
```

That triggers on load too (initial not-checked). Hmm — animations without :checked will run on page load. To avoid initial run, gate: `#like:checked ~ ... ` runs when checked. For unchecked animation, it'd run at load. Use transition instead for unchecked state so no initial animation. Transitions: heart fill/color transition; scale transition with springy cubic-bezier for pop-back. Good enough.

But checked animations: `#like:checked ~ .stage .sparks i {animation: ...}` — runs once when checked, forwards fill. When unchecked, animation removed → returns to base (opacity 0). Good.

For the heart on checked: keep persistent red via `#like:checked ~ .stage .heart { fill:red }` plus a one-time animation for burst. Also add persistent glow.

Text change: `.txt::after`? Have two spans .t1 "Like" and .t2 "Liked!" toggle opacity/transform. Simple: 

```css
.t2 { position:absolute; opacity:0; }
#like:checked ~ .stage .t1 {opacity:0}
#like:checked ~ .stage .t2 {opacity:1}
```

Transition nicely.

Also maybe the "crazy" factor: add screen shake including html? Body animation on checked: `#like:checked ~ .stage { animation: shake .5s }`. Flash + shake + confetti = crazy.

Add a burst of "1" "+1" text? Emojis cover it.

Extra: ring of small hearts around? Fine as is.

Write sparks inline: 26 sparks, angles every ~14° with jitter, colors: gold, pink, cyan, orange, white, purple. I'll handwrite with increasing angles and vary --d, --dl, --c, sizes via nth-child? Inline everything for clarity: style="--a:0deg; --d:150px; --dl:0s; --c:#ffd166". Spark shapes: mix of circles and rectangles? Keep one shape, border-radius 2px, some taller via nth-child(odd){width:6px;height:12px}? I can add nth-child rules for variety.

Emoji spans: 8 emojis with inline --r rotation and left offsets and --dl.

Let me also ensure responsive: button uses clamp sizes; emojis sizes fine.

First paint visible: big title "PRESS LIKE", button, hint, ambient blobs. Good.

Also add subtle idle pulse animation to button so it invites clicking (heart gently pulses). That's always running — nice.

Cursor pointer on label.

Accessibility: hidden checkbox attribute — use class .sr style: position:fixed; opacity:0; pointer-events:none? If opacity 0 and focusable, fine. Use `appearance:none; position:fixed; opacity:0`.

Now write the code carefully.

Keyframes:

heartburst: 0% scale(1) ; 30% scale(1.6) rotate(-8deg); 60% scale(.85); 100% scale(1.15). Keep persistent scale 1.15 when checked via transform on the icon container? If animation ends at 100% with fill forwards? Set fill-mode forwards and final scale 1.15, plus base transition. But when unchecked we want back to 1 with transition — removing animation snaps, transition handles from computed... when animation removed, computed becomes base value, transition animates from current? Transitions don't animate from animated value reliably — actually when animation is removed, style change triggers transition from the last rendered value in Chrome? It does transition from the "before-change style" which includes animation effects? Per spec, before-change style includes animations. So it should transition smoothly. Even if it snaps, fine.

Simpler: wrap heart in .heart-w that scales; inner svg handles fill color transition.

ring keyframes:
```css
@keyframes ring { 0%{transform:scale(.4);opacity:.9} 100%{transform:scale(3.2);opacity:0} }
```

jelly:
```css
@keyframes jelly {
 0%{transform:scale(1,1)}
 25%{transform:scale(1.25,.75)}
 40%{transform:scale(.8,1.2)}
 55%{transform:scale(1.15,.9)}
 70%{transform:scale(.95,1.05)}
 100%{transform:scale(1)}
}
```

shake card:
```css
@keyframes shake {
 0%,100%{transform:translate(0,0) rotate(0)}
 20%{transform:translate(-6px,3px) rotate(-1deg)}
 40%{transform:translate(5px,-4px) rotate(1deg)}
 60%{transform:translate(-4px,2px) rotate(-.5deg)}
 80%{transform:translate(3px,-2px) rotate(.5deg)}
}
```

flash:
```css
@keyframes flash { 0%{opacity:.55} 100%{opacity:0} }
```

Emoji pop as above.

Idle pulse on heart: `@keyframes beat {0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}` applied to heart-w always; but checked burst animation also on heart-w — conflict; put beat on inner svg, burst on wrapper. Good.

Colors: dark bg #0f1020, blobs pink/purple/cyan. Card glassmorphism.

Font: system stack, maybe use a bold rounded look via font-weight 800.

Also add small "double-tap" hint changes? Keep.

Write the sparks: I'll do 26. Let me list angles: 0, 14, 28, ... 360 minus last → 25 sparks at 13.8°? Just use 24 at 15° increments, jitter via alternating --d.

Sparks inline styles — I'll write each: `<i style="--a:15deg"></i>` and let --d vary via nth-child rules:

```css
.sparks i:nth-child(3n) { --d:170px; --dl:.04s }
.sparks i:nth-child(3n+1){ --d:110px; --dl:.02s }
.sparks i:nth-child(3n+2){ --d:145px; --dl:0s; width:14px;height:5px }
```

And colors via nth-child(4n) etc:
```css
.sparks i:nth-child(4n){background:#ffd166}
... #ff5d8f, #4cc9f0, #ffffff
```

But inline --c overrides... just use nth-child for colors, no inline --c. Shapes: default 9px circle; some elongated.

Also add gravity feel: flies then drops? Keyframe with two translate steps: use rotate(a) translateX(d1) then rotate(a) translateX(d2) translateY(dy)? Transform composition: `rotate(var(--a)) translate(var(--dx), var(--dy))` where dy grows. Simpler: keyframe from translateX(14px) to translate(var(--dx), var(--dy)) with --dx/--dy inline? I'll just do radial with scale fade — looks fine with rings + emojis.

Actually nicer: sparks rotate slightly during flight: add rotate(calc(var(--a) + 120deg)) at end — spark spins. Include rotation: `transform: rotate(var(--a)) translateX(var(--d)) rotate(160deg) scale(0)`.

Emoji list: ❤️ 💖 🔥 ✨ 🎉 👍 💥 🌟. positions left: 10%,30%,50%,70%,85%... give each inline left and --dl and --r.

OK also add a second row of tiny hearts rising from button? Emojis suffice.

The "count" bubble: a floating "+1" — add one span "+1" popping up. Emojis include enough.

Let me also handle :active squish on button: `.btn:active { transform: scale(.94) }` — but animation jelly overrides transform when checked... fine, active only matters before checked; when checked and clicking again (uncheck) jelly removed. OK.

Unchecked state visuals: heart gray outline, button dark, border subtle; checked: red gradient bg, white text, glow shadow, heart white fill. Good contrast.

Hint text under: "Click it. Trust me." and after checked maybe change to "You monster. Click again to undo." via .h2 swap like t1/t2.

Flash z-index above everything.

Body: overflow hidden? Need no horizontal scrollbar; use min-height 100svh flex center. Blobs fixed with overflow hidden on a .bg wrapper.

Title: "THE LIKE BUTTON" with gradient text. Subtitle small.

Let me write final HTML. Also ensure reduced motion? Not required; skip or add media query — nice touch but optional; I'll add prefers-reduced-motion to shorten animations. Keep brief.

Write code now.

Spark count 24 with angles 0,15,...345. I'll write them compactly each on one line.

Also the heart SVG path: use a standard heart path: `M12 21s-6.7-4.3-9.3-8C.6 10 2 6 5.5 5.2 7.7 4.7 10 5.6 12 8c2-2.4 4.3-3.3 6.5-2.8C22 6 23.4 10 21.3 13c-2.6 3.7-9.3 8-9.3 8z` roughly. I'll use viewBox "0 0 24 24" with a known heart path:

`M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z` (Material heart). Good.

Heart fill: default currentColor gray? Use fill transitions: `.heart svg { fill:#8b8fa3 }` checked → fill #fff. And beat animation.

Button size: padding clamp; font-size clamp(18px, 3vw, 24px).

Emoji positioning: .emojis spans absolute; container absolute inset with bottom anchored at button top.

Let me assemble.

Also add small floating hearts permanently around background? Blobs enough.

Edge: label contains input? No, input separate before stage; label for=like.

Card shake: apply to .card not stage to avoid moving whole layout — fine either way; apply to .card.

Also "crazy": add a quick chromatic aberration? Skip.

Count of code manageable. Write it.

One more: after checked, keep button glowing with pulsing shadow animation:
```css
#like:checked ~ .stage .btn { animation: jelly .55s cubic-bezier(.3,1.4,.4,1), glow 2s 1s infinite alternate; }
```
Multiple animations fine.

glow: box-shadow pulsating — animating box-shadow ok.

Now the uncheck: heart fill transitions back, background transitions, sparks disappear instantly (they're finished anyway).

Alright, write final answer.