/* "What's new" page, 20 Sep 2026 — a Chrome-whats-new-style tour of what
   pixeltrees does. Loaded after /styles.css, so it reuses that file's
   tokens, fonts and button classes rather than inventing new ones.

   LIGHT, matching the rest of the site (21 Sep 2026 — the owner: this page
   "should map to our core theme" — it used to re-pin --bg/--ink/--panel/
   --line/--muted to dark values here, a Chrome-style dark tour completely
   out of step with every other page). No re-pin now: the page simply
   inherits styles.css's own light tokens, same as everywhere else. The
   illustration colours below (the little animated SVGs) are adjusted to
   read correctly against that light background — see each numbered
   section for what changed from its original dark-panel palette. */

/* ---------- title bar (below the standard 52px .topnav, 21 Sep 2026) ---------- */
.wn-top {
  position: sticky; top: 52px; z-index: 49;
  display: flex; align-items: center; gap: 16px;
  padding: 14px max(20px, calc((100% - var(--wrap)) / 2));
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.wn-brand { display: flex; flex: none; }
.wn-brand img { height: 30px; width: 30px; border-radius: 50%; display: block; }
.wn-heading { flex: 1; min-width: 0; }
.wn-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -.01em; }
.wn-strap { margin: 2px 0 0; font-size: .8rem; color: var(--muted); font-weight: 500; letter-spacing: .01em; }
.wn-cta { flex: none; padding: 9px 18px; font-size: .92rem; white-space: nowrap; }
.wn-autoplay-toggle { flex: none; display: flex; align-items: center; gap: 6px; padding: 9px 14px; font-size: .82rem; white-space: nowrap; }

/* ---------- main: one feature at a time ---------- */
.wn-main { flex: 1; padding: 40px max(20px, calc((100% - var(--wrap)) / 2)) 32px; max-width: var(--wrap); margin: 0 auto; width: 100%; }

.wn-feature { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 44px; align-items: center; min-height: 420px; }
.wn-copy .eyebrow { color: var(--sage); text-transform: uppercase; letter-spacing: .07em; font-size: .78rem; font-weight: 700; }
.wn-copy h2 { font-family: var(--font-display); color: var(--ink); font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.12; margin: .35em 0 .5em; letter-spacing: -.02em; }
.wn-desc { color: var(--muted); font-size: 1.05rem; line-height: 1.5; max-width: 46ch; margin: 0; }
.wn-actions { display: flex; align-items: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.wn-actions .btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.wn-actions .btn-ghost:hover { border-color: var(--ink); }

/* ---------- preview panel ---------- */
.wn-preview {
  position: relative; padding: 8px; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: linear-gradient(155deg, #fafafa, #f0f0ee); box-shadow: var(--shadow);
}
svg.wn-anim { width: 100%; height: auto; display: block; border-radius: calc(var(--r-lg) - 8px); color: var(--ink); }
.wn-preview.paused .wn-anim, .wn-preview.paused .wn-anim * { animation-play-state: paused !important; }

.wn-round {
  width: 38px; height: 38px; border-radius: 50%; padding: 0;
  border: 1px solid rgba(0, 0, 0, .12); background: rgba(255, 255, 255, .85); color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
}
.wn-round:hover { background: #fff; border-color: var(--ink); }
.wn-round svg { width: 16px; height: 16px; display: block; }
.ic-pause rect, .ic-play path { fill: currentColor; }
.wn-pause { position: absolute; top: 20px; left: 20px; }
.wn-expand { position: absolute; bottom: 20px; right: 20px; text-decoration: none; }
.wn-expand svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wn-round:focus-visible, .wn-card:focus-visible, .wn-next:focus-visible, .wn-explain:focus-visible { outline: 2px solid #8ecae6; outline-offset: 2px; }

/* ---------- "More to explore": a 3-column grid, like Chrome's second screen ---------- */
.wn-explore-head { text-align: center; margin-bottom: 34px; }
.wn-explore-head h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: var(--ink); margin-top: .2em; }
.wn-explore-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.wn-explain {
  display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: var(--r);
  background: var(--panel); border: 1px solid var(--line); color: inherit; text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.wn-explain:hover { border-color: var(--ink); transform: translateY(-2px); text-decoration: none; }
.wn-explain-icon { font-size: 1.8rem; }
.wn-explain h3 { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); margin: 0; }
.wn-explain p { color: var(--muted); font-size: .92rem; line-height: 1.45; margin: 0; flex: 1; }
.wn-explain-go { color: #8ecae6; font-weight: 600; font-size: .9rem; }

/* ---------- bottom rail: one pastel-tinted card per feature ---------- */
.wn-rail { border-top: 1px solid var(--line); background: var(--bg); padding: 20px max(20px, calc((100% - var(--wrap)) / 2)) 26px; display: flex; align-items: center; gap: 14px; }
.wn-cards { display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 2px; flex: 1; }
.wn-cards::-webkit-scrollbar { display: none; }
.wn-card {
  flex: none; width: 148px; display: flex; flex-direction: column; gap: 8px; padding: 10px;
  border-radius: 14px; border: 2px solid transparent; cursor: pointer; text-align: left; font: inherit; color: var(--ink);
  background: color-mix(in srgb, var(--c, #e8e8ed) 35%, #ffffff);
}
.wn-card svg { width: 100%; height: 42px; border-radius: 8px; background: color-mix(in srgb, var(--c, #e8e8ed) 65%, #ffffff); }
.wn-card span { font-size: .8rem; font-weight: 600; line-height: 1.25; }
.wn-card.current { border-color: var(--ink); }
.wn-rail-btns { flex: none; display: flex; gap: 8px; }

/* ---------- footer ---------- */
.wn-foot { padding: 24px max(20px, calc((100% - var(--wrap)) / 2)) 40px; text-align: center; font-size: .82rem; color: var(--muted); border-top: 1px solid var(--line); }
.wn-foot a { color: var(--muted); }
.wn-foot .copyright { margin-top: 10px; }

/* ================================================================
   Illustration base — shared by every preview's SVG. Numbers that
   appear inside a preview (a pixel number, a count) are stand-ins,
   never a real wall's payload; each preview also carries an
   "Illustration" caption or an equivalent aria-label saying so.
   ================================================================ */
.wn-anim text { font-family: var(--font); fill: currentColor; }
.t-big { font-size: 26px; font-weight: 700; }
.t-strong { font-size: 15px; font-weight: 600; }
.t-small { font-size: 12.5px; }
.t-tiny { font-size: 9.5px; }
.muted { opacity: .6; }
.onblk { fill: #fff; font-weight: 700; }
.label { fill: #6e6e73; font-size: 10.5px; }
.link { fill: #8ecae6; text-decoration: underline; }

.blk { fill: #d2d2d7; }
.board, .tag, .field, .pill, .gifbox { fill: #f5f5f7; stroke: #d2d2d7; stroke-width: 1; }
.board { stroke-width: 1.5; }
.divider, .soil, .lead, .stem, .dashed, .tick, .tickmark, .ring, .ringpulse, .stamp-ring { fill: none; }
.divider, .soil { stroke: #d2d2d7; stroke-width: 2; }
.dashed { stroke: #a8a8ad; stroke-width: 2; stroke-dasharray: 6 6; }

/* generated grid rects — see whats-new.js buildBlocks()/buildTiles() */
.gblk { opacity: .55; }
.dim .gblk { opacity: .35; }
.gblk-fill { opacity: 0; transform-box: fill-box; transform-origin: center; animation: wnPop 5s ease-in-out infinite; animation-delay: calc(var(--i) * .045s); }
.gtile { fill: #d2d2d7; transform-box: fill-box; transform-origin: center; animation: wnUncover 6s ease-in-out infinite; animation-delay: calc(var(--i) * .035s); }

@keyframes wnPop {
  0%, 4% { opacity: 0; transform: scale(.4); }
  14%, 78% { opacity: 1; transform: scale(1); }
  90%, 100% { opacity: 0; transform: scale(.4); }
}
@keyframes wnFadeHold {
  0%, 4% { opacity: 0; transform: translateY(8px); }
  16%, 80% { opacity: 1; transform: translateY(0); }
  92%, 100% { opacity: 0; transform: translateY(8px); }
}
@keyframes wnPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes wnUncover {
  0%, 8% { opacity: 1; transform: scale(1); }
  42%, 70% { opacity: 0; transform: scale(.85); }
  94%, 100% { opacity: 1; transform: scale(1); }
}

/* ---- 1. Your blocks, live on a wall for 12 months ---- */
.blk.yours { fill: #e2b93b; stroke: #fff; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: wnPulse 2.2s ease-in-out infinite; }
.yours-tag { opacity: 0; animation: wnFadeHold 5s ease-in-out infinite; animation-delay: 2.2s; }
.lead { stroke: #e2b93b; stroke-width: 2; opacity: 0; animation: wnFadeHold 5s ease-in-out infinite; animation-delay: 2.1s; }
.linkicon { stroke: #e2b93b; opacity: 0; transform-box: fill-box; transform-origin: center; animation: wnPop 5s ease-in-out infinite; animation-delay: 2.6s; }

/* ---- 2. Every 10 blocks fund one sapling ---- */
.ten rect { fill: #3f9c63; transform-box: fill-box; transform-origin: center; animation: wnPop 5.5s ease-in-out infinite; animation-delay: calc(var(--i) * .12s); }
.cnt { opacity: 0; animation: wnDigit 5.5s steps(1, end) infinite; animation-delay: calc(var(--i) * .12s); }
.cnt.last { font-weight: 800; fill: #e2b93b; }
@keyframes wnDigit { 0%, 2% { opacity: 0; } 3%, 10% { opacity: 1; } 11%, 100% { opacity: 0; } }
.stem { stroke: #8a5a2b; stroke-width: 4; stroke-dasharray: 90; stroke-dashoffset: 90; animation: wnDrawStem 5.5s ease-in-out infinite; animation-delay: 1.4s; }
@keyframes wnDrawStem { 0%, 26% { stroke-dashoffset: 90; } 46%, 80% { stroke-dashoffset: 0; } 92%, 100% { stroke-dashoffset: 90; } }
.leaf { fill: #3f9c63; opacity: 0; transform-box: view-box; transform-origin: var(--ox, center) var(--oy, center); animation: wnLeafGrow 5.5s ease-in-out infinite; animation-delay: calc(1.6s + var(--d, 0s)); }
@keyframes wnLeafGrow { 0%, 4% { opacity: 0; transform: scale(0); } 14%, 80% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; transform: scale(0); } }
.grown { opacity: 0; fill: #f5f5f7; animation: wnFadeHold 5.5s ease-in-out infinite; animation-delay: 2.6s; }

/* ---- 3. A hidden picture, revealed block by block ---- */
.toggle .track { fill: #232b26; animation: wnTrackFill 6s ease-in-out infinite; }
@keyframes wnTrackFill { 0%, 12% { fill: #232b26; } 46%, 68% { fill: #2e7d4f; } 96%, 100% { fill: #232b26; } }
.toggle .knob { fill: #f5f5f7; transform-box: fill-box; transform-origin: center; animation: wnKnob 6s ease-in-out infinite; }
@keyframes wnKnob { 0%, 12% { transform: translateX(0); } 46%, 68% { transform: translateX(22px); } 96%, 100% { transform: translateX(0); } }

/* ---- 4. One wall for every trade ---- */
.ring { stroke: #e2b93b; stroke-width: 2; transform-box: fill-box; animation: wnRingMove 8s steps(1, end) infinite; }
@keyframes wnRingMove {
  0%, 10% { transform: translateY(0); }
  12.5%, 22.5% { transform: translateY(30px); }
  25%, 35% { transform: translateY(60px); }
  37.5%, 47.5% { transform: translateY(90px); }
  50%, 60% { transform: translateY(120px); }
  62.5%, 72.5% { transform: translateY(150px); }
  75%, 85% { transform: translateY(180px); }
  87.5%, 97.5% { transform: translateY(210px); }
  100% { transform: translateY(0); }
}

/* ---- 5. Find any business by city or name ---- */
.cover { fill: #f5f5f7; transform-box: fill-box; transform-origin: 100% 50%; animation: wnTypeCover 6s steps(18, end) infinite; }
@keyframes wnTypeCover { 0%, 6% { transform: scaleX(1); opacity: 1; } 46%, 80% { transform: scaleX(0); opacity: 1; } 90%, 96% { opacity: 0; transform: scaleX(0); } 100% { opacity: 1; transform: scaleX(1); } }
.blk.found { fill: #e2b93b; }
.ringpulse { stroke: #e2b93b; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: wnRingPulse 6s ease-in-out infinite; animation-delay: 2.6s; }
@keyframes wnRingPulse { 0% { opacity: 0; transform: scale(.7); } 8% { opacity: 1; transform: scale(1.15); } 16%, 70% { opacity: 1; transform: scale(1); } 84%, 100% { opacity: 0; transform: scale(.7); } }
.found-tag { opacity: 0; animation: wnFadeHold 6s ease-in-out infinite; animation-delay: 2.8s; }

/* ---- 6. Claim next to me, and share on WhatsApp ---- */
.bubble { fill: #f5f5f7; opacity: 0; animation: wnFadeHold 6s ease-in-out infinite; }
.sendicon { opacity: 0; transform-box: fill-box; transform-origin: center; animation: wnSendMove 6s ease-in-out infinite; animation-delay: 2s; }
@keyframes wnSendMove { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 6% { opacity: 1; transform: translate(0, 0) scale(1); } 26% { opacity: 1; transform: translate(70px, -40px) scale(.5); } 34%, 100% { opacity: 0; transform: translate(70px, -40px) scale(.5); } }
.send { fill: #2e7d4f; }
.friend { opacity: 0; transform-box: fill-box; transform-origin: center; animation: wnPop 6s ease-in-out infinite; animation-delay: 2.6s; }
.blk.you { fill: #e2b93b; }

/* ---- 7. Gift a pixel ---- */
.card { opacity: 0; animation: wnFadeHold 6s ease-in-out infinite; animation-delay: 1.6s; }
.lid { transform-box: view-box; transform-origin: 42px 158px; animation: wnLidOpen 6s ease-in-out infinite; }
@keyframes wnLidOpen { 0%, 10% { transform: rotate(0deg); } 24%, 70% { transform: rotate(-32deg); } 88%, 100% { transform: rotate(0deg); } }
.photo { opacity: 0; animation: wnFadeHold 6s ease-in-out infinite; animation-delay: 3.4s; }

/* ---- 8. Your free digital pack (fans out from the purchased block) ---- */
.fanitem { transform-box: fill-box; transform-origin: center; animation: wnFan 7s ease-in-out infinite; animation-delay: calc(var(--i) * .12s); }
@keyframes wnFan {
  0%, 4% { transform: translate(var(--bx), var(--by)) scale(.25); opacity: 0; }
  20%, 82% { transform: translate(0, 0) scale(1); opacity: 1; }
  96%, 100% { transform: translate(var(--bx), var(--by)) scale(.25); opacity: 0; }
}
.medal-ring { fill: #e2b93b; }
.medal { fill: #2e7d4f; }
.medal-ribbon { fill: #e2b93b; }
.soc-avatar { fill: #7c9a6d; }
.soc-line { fill: #3a4a42; }
.soc-photo { fill: #8ecae6; }
.qr rect { fill: #4fb0c6; }
.gifcells rect { fill: #3f9c63; opacity: .35; animation: wnFlicker 2.4s steps(2, jump-none) infinite; animation-delay: calc(var(--i) * .3s); }
@keyframes wnFlicker { 0%, 49% { opacity: .35; } 50%, 100% { opacity: 1; } }
.cert { fill: #f2ede0; stroke: #d8cfb0; }
.cert-line { stroke: #c9c2a8; stroke-width: 2; }
.cert-text { fill: #3a3a3c; }
.blk.source { fill: #e2b93b; transform-box: fill-box; transform-origin: center; animation: wnPulse 2.2s ease-in-out infinite; }

/* ---- 9. Free tagline contest ---- */
.check { opacity: 0; transform-box: fill-box; transform-origin: left center; animation: wnFadeHold 6s ease-in-out infinite; animation-delay: calc(2.4s + var(--i) * .3s); }
.tick { stroke: #3f9c63; stroke-width: 2; }
.tickmark { stroke: #3f9c63; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stamp { opacity: 0; transform-box: fill-box; transform-origin: center; animation: wnStamp 6s ease-in-out infinite; animation-delay: 3.6s; }
@keyframes wnStamp { 0% { opacity: 0; transform: scale(2.2) rotate(-14deg); } 8% { opacity: 1; transform: scale(.9) rotate(-14deg); } 14%, 80% { opacity: 1; transform: scale(1) rotate(-14deg); } 92%, 100% { opacity: 0; transform: scale(2.2) rotate(-14deg); } }
.stamp-ring { stroke: #c0392b; stroke-width: 4; }
.stamp text { fill: #c0392b; font-weight: 800; }

/* ---- 10. Diwali introductory offer ---- */
.blk.one { fill: #e2b93b; opacity: 0; transform-box: fill-box; transform-origin: center; animation: wnPop 6s ease-in-out infinite; }
.plus { opacity: 0; fill: var(--ink); animation: wnFadeHold 6s ease-in-out infinite; animation-delay: 1.4s; }
.free { opacity: 0; transform-box: fill-box; transform-origin: center; animation: wnPop 6s ease-in-out infinite; animation-delay: 2s; }
.freetag { fill: #c0392b; }
.ribbon { opacity: 0; animation: wnFadeHold 6s ease-in-out infinite; animation-delay: 3.2s; }

/* ================================================================
   Responsive — 390px stacks the preview above the text and keeps the
   card rail scrolling; 1440px uses the two-column layout above.
   ================================================================ */
@media (max-width: 760px) {
  .wn-top { padding: 12px 16px; gap: 10px; }
  .wn-title { font-size: 1.02rem; }
  .wn-strap { font-size: .72rem; }
  .wn-cta { padding: 8px 14px; font-size: .85rem; }
  .wn-autoplay-toggle { padding: 8px 10px; }
  .wn-autoplay-label { display: none; }
  .wn-main { padding: 24px 16px 20px; }
  .wn-feature { grid-template-columns: 1fr; gap: 22px; min-height: 0; }
  .wn-preview { order: -1; }
  .wn-copy h2 { font-size: 1.5rem; }
  .wn-desc { max-width: none; }
  .wn-explore-grid { grid-template-columns: 1fr; }
  .wn-rail { padding: 16px 16px 20px; }
  .wn-card { width: 126px; }
}