/* The changelog's release section (TODO 64): a hero, highlight cards, then
   the complete list. Tokens come from style.css; day and night follow it.
   The hero's motion is CSS only and stops for reduced motion. */

.release { margin: 8px 0 56px; }
.release .hero {
  position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 18px;
  padding: 34px 30px 30px; background: linear-gradient(160deg, var(--soft), var(--bg) 70%);
}
.release .hero h2 { margin: 0 0 6px; font-size: clamp(26px, 4vw, 38px); letter-spacing: -.02em; }
.release .hero p { margin: 0; max-width: 56ch; color: var(--muted); font-size: 18px; }
.release .hero .stamp { display: inline-block; margin-bottom: 12px; padding: 3px 12px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.release .confetti { position: absolute; inset: 0; pointer-events: none; }
.release .confetti i { position: absolute; top: -14px; width: 9px; height: 14px; border-radius: 2px; opacity: .9;
  background: var(--sun); left: calc(var(--x) * 1%); transform: rotate(var(--r));
  animation: confetti-fall var(--d) linear var(--w) infinite; }
.release .confetti i:nth-child(4n+1) { background: var(--coral); }
.release .confetti i:nth-child(4n+2) { background: var(--sea); }
.release .confetti i:nth-child(4n+3) { background: var(--leaf); }
@keyframes confetti-fall {
  from { transform: translateY(0) rotate(var(--r)); }
  to   { transform: translateY(360px) rotate(calc(var(--r) + 300deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .release .confetti i { animation: none; top: calc(var(--y) * 1%); }
}

.release h3.group { margin: 40px 0 14px; font-size: 20px; letter-spacing: -.01em; }

.cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); padding: 0; margin: 0; list-style: none; }
.cards > li { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); overflow: hidden; }
.cards .art { display: grid; place-items: center; min-height: 120px; padding: 18px;
  background: color-mix(in srgb, var(--accent) 10%, var(--card)); border-bottom: 1px solid var(--line); }
.cards .art svg { width: 56px; height: 56px; stroke: var(--accent); fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.cards .art picture, .cards .art img { display: block; width: 100%; height: auto; border-radius: 10px; }
/* Real pictures of the app (tools/changelog_images.py): light and dark follow the page's theme. */
.cards .art.shot { display: block; min-height: 0; margin: 0; padding: 0; } /* (the picture at the card's full width; style.css .shot has a margin) */
.cards .art.shot img { border-radius: 0; filter: none; }
.cards .art.shot picture.when-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cards .art.shot picture.when-dark { display: block; }
  :root:not([data-theme="light"]) .cards .art.shot picture.when-light { display: none; }
}
:root[data-theme="dark"] .cards .art.shot picture.when-dark { display: block; }
:root[data-theme="dark"] .cards .art.shot picture.when-light { display: none; }
.cards .art.shot picture.when-dark ~ picture.when-light { margin-top: 0; }
.cards .body { padding: 16px 18px 18px; }
.cards h4 { margin: 0 0 6px; font-size: 17px; }
.cards p { margin: 0; color: var(--fg); font-size: 15.5px; line-height: 1.55; }
.cards .tag { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--pro); }

.alsonew { columns: 2 340px; column-gap: 36px; }
.alsonew section { break-inside: avoid; margin: 0 0 22px; }
.alsonew h4 { margin: 0 0 6px; font-size: 16px; }
.alsonew ul { margin: 0; padding-left: 20px; }
.alsonew li { margin: 0 0 6px; }

.thanks { margin-top: 36px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.thanks p { margin: 0; }

/* The summer scene: its own bright sky at the bottom of the release hero,
   children with kites, a dog, two cats, a sun and clouds. CSS animation only,
   stopped for reduced motion. It keeps daylight colours in both themes. */
.release .hero { padding-bottom: 0; }
.release .hero .scene { position: relative; display: block; width: calc(100% + 60px); margin: 26px -30px 0;
  height: auto; aspect-ratio: 1200 / 320; max-height: 340px; pointer-events: none; }
.release .hero > .scene { z-index: 0; }
.scene .run { animation: scene-run var(--dur) linear var(--delay) infinite; }
.scene .hop { animation: scene-hop .7s ease-in-out infinite; }
.scene .hop.quick { animation-duration: .36s; }
.scene .kite { animation: scene-sway 3.7s ease-in-out var(--ph, 0s) infinite alternate, scene-bob 5.3s ease-in-out var(--ph, 0s) infinite alternate; transform-origin: -24px -72px; }
.scene .pitch { animation: scene-pitch 2.3s ease-in-out var(--ph, 0s) infinite alternate; transform-box: fill-box; transform-origin: 50% 50%; }
.scene .rib { animation: scene-rib 1.05s ease-in-out var(--d, 0s) infinite alternate; transform-box: fill-box; transform-origin: 50% 0%; }
.scene .leg { animation: scene-leg .7s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 0%; }
.scene .leg.b { animation-direction: alternate-reverse; }
.scene .hop.quick .leg { animation-duration: .18s; }
.scene .wag { animation: scene-wag .22s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 100% 100%; }
.scene .tailcat { animation: scene-wag 1.7s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 100% 100%; }
.scene .cloud { animation: scene-cloud 70s ease-in-out infinite alternate; }
.scene .cloud.slow { animation-duration: 110s; }
.scene .cloud.mid { animation-duration: 90s; animation-direction: alternate-reverse; }
.scene .rays { animation: scene-spin 120s linear infinite; }
.scene .bird { animation: scene-bird 6s ease-in-out infinite alternate; }
.scene .bird.b { animation-duration: 8s; }
@keyframes scene-run { from { transform: translateX(-140px); } to { transform: translateX(1000px); } }
@keyframes scene-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes scene-sway { from { transform: rotate(-7deg); } to { transform: rotate(6deg); } }
@keyframes scene-bob { from { translate: 0 -5px; } to { translate: 2px 6px; } }
@keyframes scene-pitch { from { transform: rotate(-14deg); } to { transform: rotate(12deg); } }
@keyframes scene-rib { from { transform: rotate(-20deg); } to { transform: rotate(22deg); } }
@keyframes scene-leg { from { transform: rotate(calc(var(--a, 28deg) * -1)); } to { transform: rotate(var(--a, 28deg)); } }
@keyframes scene-wag { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes scene-cloud { from { transform: translateX(-70px); } to { transform: translateX(90px); } }
@keyframes scene-spin { to { transform: rotate(360deg); } }
@keyframes scene-bird { from { transform: translate(0, 0); } to { transform: translate(40px, -10px); } }
@media (prefers-reduced-motion: reduce) {
  .scene * { animation: none !important; }
  .scene .run { transform: translateX(300px); }
}
@media (max-width: 640px) { .release .hero .scene { width: calc(100% + 36px); margin: 18px -18px 0; } }