/* Animated hero for What's New: a new entry slides onto the top of the list
   of changes, and its New badge pops.
   Art is drawn at 1200x600; public/hero.js scales it via --wn-scale. */
.wn-hero{--wn-accent:#4f8cff;--wn-dur:6s;--wn-bg:#f3f5fa;--wn-line:rgba(22,33,58,0.22);--wn-scale:1;position:relative;width:100%;max-width:1200px;aspect-ratio:2/1;margin:0 auto;overflow:hidden;border-radius:16px;background:var(--wn-bg)}
.wn-hero.wn-dark{--wn-bg:#0e1626;--wn-line:rgba(255,255,255,0.22)}
.wn-hero > .wn-scn{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--wn-scale))}
/* The new entry opens a space at the top of the list, slides in, and its badge pops. */
.wn-scn .wn-slot{animation:wn-slot var(--wn-dur) cubic-bezier(.4,0,.2,1) infinite}
@keyframes wn-slot{0%,10%{height:0;margin-bottom:0}22%,90%{height:56px;margin-bottom:6px}100%{height:0;margin-bottom:0}}
.wn-scn .wn-newrow{animation:wn-row var(--wn-dur) cubic-bezier(.3,1.2,.5,1) infinite}
@keyframes wn-row{0%,18%{opacity:0;transform:translateX(-30px)}28%,86%{opacity:1;transform:none}92%,100%{opacity:0}}
.wn-scn .wn-badge{animation:wn-badge var(--wn-dur) cubic-bezier(.3,1.8,.5,1) infinite}
@keyframes wn-badge{0%,28%{transform:scale(0)}34%,86%{transform:scale(1)}92%,100%{transform:scale(0)}}
.wn-scn .wn-spark{opacity:0;animation:wn-spark var(--wn-dur) ease-out infinite}
@keyframes wn-spark{0%,30%{opacity:0;transform:scale(.4)}33%{opacity:1}46%,100%{opacity:0;transform:scale(1.8)}}
/* Site integration, matching the other guide heroes. */
.legal .wn-hero {
  margin: 0 auto 24px;
  aspect-ratio: 1200 / 560;
  --wn-bg: transparent;
  --wn-view-w: 1200;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent),
                      linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent),
              linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  mask-composite: intersect;
}
.legal .wn-hero > .wn-scn { transform: scale(var(--wn-scale)) translate(0, -20px); }
.js .wn-hero:not(.pt-ready) > .wn-scn { visibility: hidden; }
:root[data-theme="light"] .wn-hero { --wn-line: rgba(22, 33, 58, 0.22); }