/* ---------- ✨ What's new: one card per release since this iPad last looked (js/whatsnew.js) ----------
   The pictures are SVGs in js/whatsnew-data.js. They animate with the wn-* classes below; each
   picture replays from the start every few seconds, so one-shot animations (wn-in, wn-draw...) loop. */
.wn-overlay {
  --ink: #1d2233;
  --f-display: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --f-body: "Nunito", -apple-system, "PingFang SC", "Segoe UI", system-ui, sans-serif;
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(29, 34, 51, .45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: var(--f-body); color: var(--ink);
  animation: wn-fade-in .25s ease-out;
}
.wn-overlay[hidden] { display: none; }
.wn-card {
  position: relative;
  width: min(600px, 100%); max-height: calc(100vh - 40px); overflow-y: auto;
  background: #fff; border-radius: 30px;
  box-shadow: 0 6px 0 rgba(29, 34, 51, .18), 0 24px 60px rgba(29, 34, 51, .3);
  padding: 18px 18px 22px;
  animation: wn-card-in .45s cubic-bezier(.2, 1.4, .4, 1);
}
.wn-card.out { animation: wn-card-out .22s ease-in forwards; }
.wn-badge {
  display: inline-block; margin: 2px 0 10px 6px;
  font: 15px/1 var(--f-display); letter-spacing: .5px; color: #fff;
  background: #ff3d7f; border-radius: 99px; padding: 7px 14px 6px;
}
.wn-art {
  border-radius: 22px; overflow: hidden;
  aspect-ratio: 400 / 240;
  background: var(--wn-bg, linear-gradient(160deg, #e9f7ff, #fff3e3));
}
.wn-art svg { display: block; width: 100%; height: 100%; }
.wn-title { font: 36px/1.1 var(--f-display); margin: 18px 8px 6px; letter-spacing: .3px; }
.wn-text { font-size: 22px; line-height: 1.35; font-weight: 800; margin: 0 8px; color: #3b4157; }
.wn-say {
  position: absolute; top: 14px; right: 14px;
  width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: #fff3c4; font-size: 24px; cursor: pointer;
}
.wn-foot { display: flex; align-items: center; gap: 12px; margin: 20px 6px 0; }
.wn-dots { display: flex; gap: 7px; flex: 1; }
.wn-dots i { width: 11px; height: 11px; border-radius: 50%; background: #dfe2ea; }
.wn-dots i.on { background: #ff3d7f; transform: scale(1.25); }
.wn-btn {
  font: 22px/1 var(--f-display); letter-spacing: .4px;
  border: 0; border-radius: 18px; padding: 15px 26px 13px; cursor: pointer;
  color: #fff; background: #19b6d6; box-shadow: 0 5px 0 #0f8aa3;
}
.wn-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #0f8aa3; }
.wn-btn.skip { color: #6b7185; background: #eef0f5; box-shadow: 0 5px 0 #d3d7e2; }
.wn-btn.skip:active { box-shadow: 0 2px 0 #d3d7e2; }

@keyframes wn-fade-in { from { opacity: 0; } }
@keyframes wn-card-in { from { opacity: 0; transform: scale(.7) translateY(40px) rotate(-3deg); } }
@keyframes wn-card-out { to { opacity: 0; transform: translateX(-120px) rotate(-6deg); } }

/* ---- picture animations. --d = delay, --t = duration. One-shots hold their end state. ---- */
.wn-art * { transform-box: fill-box; transform-origin: center; }
.wn-in    { animation: wn-in    var(--t, .5s) cubic-bezier(.2, 1.6, .4, 1) var(--d, 0s) both; }   /* pops in */
.wn-fade  { animation: wn-fade  var(--t, .5s) ease-out var(--d, 0s) both; }                         /* fades in */
.wn-drop  { animation: wn-drop  var(--t, .6s) cubic-bezier(.5, 0, 1, .6) var(--d, 0s) both; }       /* falls from above */
.wn-rise  { animation: wn-rise  var(--t, .6s) cubic-bezier(.2, 1.4, .4, 1) var(--d, 0s) both; }     /* springs up from below */
.wn-fly   { animation: wn-fly   var(--t, 1s) ease-in-out var(--d, 0s) both; }                       /* moves from (--x, --y) to where it is */
.wn-away  { animation: wn-away  var(--t, 1s) ease-in var(--d, 0s) both; }                           /* moves to (--x, --y) and fades */
.wn-grow  { animation: wn-grow  var(--t, 1.5s) ease-in-out var(--d, 0s) both; transform-origin: left center; } /* bar fills left to right */
.wn-draw  { stroke-dasharray: 1; animation: wn-draw var(--t, .5s) ease-in-out var(--d, 0s) both; }  /* a stroke draws itself: needs pathLength="1" */
.wn-out   { animation: wn-out   var(--t, .3s) ease-in var(--d, 0s) both; }                          /* disappears */
.wn-stamp { animation: wn-stamp var(--t, .4s) cubic-bezier(.2, 1.6, .4, 1) var(--d, 0s) both; }     /* slams down */
/* forever */
.wn-bob    { animation: wn-bob    var(--t, 2.4s) ease-in-out var(--d, 0s) infinite; }
.wn-blink  { animation: wn-blink  var(--t, 3.6s) var(--d, 0s) infinite; }
.wn-wiggle { animation: wn-wiggle var(--t, 1.2s) ease-in-out var(--d, 0s) infinite; }
.wn-pulse  { animation: wn-pulse  var(--t, 1.4s) ease-in-out var(--d, 0s) infinite; }
.wn-twinkle{ animation: wn-twinkle var(--t, 1.6s) ease-in-out var(--d, 0s) infinite; }
.wn-bounce { animation: wn-bounce var(--t, .9s) cubic-bezier(.3, 0, .7, 1) var(--d, 0s) infinite alternate; }
.wn-fall   { animation: wn-fall   var(--t, 1s) linear var(--d, 0s) infinite; }                      /* rain */
.wn-spin   { animation: wn-spin   var(--t, 6s) linear var(--d, 0s) infinite; }

@keyframes wn-in    { from { opacity: 0; transform: scale(.2); } }
@keyframes wn-fade  { from { opacity: 0; } }
@keyframes wn-drop  { from { opacity: 0; transform: translateY(-160px); } 20% { opacity: 1; } }
@keyframes wn-rise  { from { opacity: 0; transform: translateY(60px) scale(.6); } }
@keyframes wn-fly   { from { transform: translate(var(--x, 0px), var(--y, 0px)); } }
@keyframes wn-away  { to { opacity: 0; transform: translate(var(--x, 0px), var(--y, 0px)) scale(.6); } }
@keyframes wn-grow  { from { transform: scaleX(0); } }
@keyframes wn-draw  { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes wn-out   { to { opacity: 0; transform: scale(.4); } }
@keyframes wn-stamp { from { opacity: 0; transform: scale(2.4) rotate(-12deg); } }
@keyframes wn-bob    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes wn-blink  { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes wn-wiggle { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes wn-pulse  { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes wn-twinkle{ 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes wn-bounce { from { transform: translateY(0); } to { transform: translateY(-34px); } }
@keyframes wn-fall   { from { transform: translateY(-30px); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(70px); opacity: 0; } }
@keyframes wn-spin   { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .wn-art *, .wn-card, .wn-overlay { animation-duration: .01s !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
}
@media (max-height: 640px) {
  .wn-title { font-size: 28px; margin-top: 12px; }
  .wn-text { font-size: 19px; }
  .wn-art { aspect-ratio: 400 / 190; }
}

/* ---- the ✨ What's new pill on Home: every card, newest first (WhatsNew.open) ---- */
.wn-card.back { animation: wn-card-back .22s ease-in forwards; }
@keyframes wn-card-back { to { opacity: 0; transform: translateX(120px) rotate(6deg); } }
.wn-list { display: flex; flex-direction: column; padding: 14px 14px 10px; }
.wn-list-head { display: flex; align-items: center; gap: 12px; padding: 0 4px 10px; }
.wn-list-head .wn-title { flex: 1; margin: 4px; }
.wn-x {
  width: 48px; height: 48px; border-radius: 50%; border: 0; flex: none;
  background: #eef0f5; color: #6b7185; font: 22px/1 var(--f-display); cursor: pointer;
}
.wn-rows { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; }
.wn-row {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: #f7f8fb; border: 0; border-radius: 20px; padding: 10px 14px 10px 10px;
  font-family: var(--f-body); color: var(--ink); cursor: pointer;
}
.wn-row:active { background: #eef0f5; }
.wn-row-v {
  flex: none; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(160deg, #e9f7ff, #fff3e3);
  box-shadow: inset 0 0 0 2px rgba(29, 34, 51, .1);
}
/* the number sits on a white chip, so it reads on dark pictures too */
.wn-row-v i { font: 15px/1 var(--f-display); font-style: normal; color: var(--ink); background: rgba(255, 255, 255, .9); border-radius: 8px; padding: 4px 5px 3px; }
.wn-row-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wn-row-words b { font: 21px/1.15 var(--f-display); letter-spacing: .2px; }
.wn-row-words small {
  font-size: 15px; font-weight: 700; color: #6b7185; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wn-row-go { flex: none; font: 28px/1 var(--f-display); color: #b8bdcc; }
.wn-btn.newer { padding-left: 20px; padding-right: 20px; }
@media (max-width: 520px) {
  .wn-overlay { padding: 12px; }
  .wn-card { max-height: calc(100vh - 24px); }
  .wn-title { font-size: 28px; }
  .wn-text { font-size: 19px; }
  .wn-foot { gap: 8px; }
  .wn-btn { font-size: 19px; padding: 13px 16px 11px; }
}
.pill .wn-pill-icon { font-size: 24px; line-height: 1; }