/* Sample ad units for /advertise/. Pure CSS/SVG, no ad scripts.
   Each unit runs a 12s, 3-frame story twice (24s, under the 30s IAB/Google cap) and rests on the CTA frame.
   ponytail: timeline sync is by shared 12s duration; per-element offsets use animation-delay. */
@property --n { syntax: '<integer>'; initial-value: 0; inherits: false; }
@property --spin { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.ad-gallery { display: grid; gap: 28px; margin: 18px 0 8px; }
.ad-sample { margin: 0; container-type: inline-size; }
.ad-sample figcaption { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-top: 10px; font-size: 15px; }
.ad-sample figcaption strong { font-size: 16px; }
.ad-sample figcaption .num { font-family: var(--mono); }
.ad-sample figcaption a { font-weight: 700; }
.ad-replay { margin-left: auto; background: none; border: 1px solid var(--line); color: var(--muted); font: 600 13px var(--body); padding: 4px 10px; min-height: 32px; cursor: pointer; }
.ad-replay:hover { border-color: var(--ink); color: var(--ink); }
.ad-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; align-items: start; }

/* shared unit chrome */
.ad { position: relative; overflow: hidden; display: block; color: #f5f2e9; text-decoration: none; background: #151715; isolation: isolate; }
.ad * { box-sizing: border-box; }
.ad-tag { position: absolute; z-index: 5; top: 0; right: 0; padding: 2px 6px; background: rgba(245,242,233,.9); color: #151715; font: 600 10px/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.ad-brand { font: 700 1em/1 var(--display); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.ad-brand b { color: var(--amber); }
.ad-cta { position: relative; overflow: hidden; display: inline-block; background: var(--amber); color: #151715; font: 700 1em/1 var(--body); padding: .6em 1em; white-space: nowrap; }
.ad-cta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.85) 50%, transparent 70%); transform: translateX(-130%); }
.ad .fr { position: absolute; opacity: 0; }
/* before .play (or with no JS) every unit shows its resting CTA frame */
.ad .fr3 { opacity: 1; }

/* everything waits for .play (set by IntersectionObserver), runs 2 loops, holds last frame */
.ad.play *, .ad.play *::before, .ad.play *::after { animation-duration: 12s; animation-iteration-count: 2; animation-fill-mode: both; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
.ad.play .ad-cta::after { animation-name: shine; }
@keyframes shine { 0%, 78% { transform: translateX(-130%); } 90%, 100% { transform: translateX(130%); } }
@keyframes fr1 { 0% { opacity: 0; transform: translateY(35%); } 5%, 29% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; transform: translateY(-35%); } }
@keyframes fr2 { 0%, 32% { opacity: 0; transform: translateY(35%); } 37%, 62% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; transform: translateY(-35%); } }
@keyframes fr3 { 0%, 65% { opacity: 0; transform: scale(.85); } 71%, 100% { opacity: 1; transform: none; } }
.ad.play .fr1 { animation-name: fr1; }
.ad.play .fr2 { animation-name: fr2; }
.ad.play .fr3 { animation-name: fr3; }

/* ---------- 1. Presenting sponsor: 728x90 leaderboard ---------- */
.ad-lb { aspect-ratio: 728 / 90; max-width: 728px; font-size: min(3cqw, 22px); background:
  radial-gradient(120% 160% at 0% 100%, rgba(255,181,71,.28), transparent 55%), #151715; }
.ad-lb .stage { position: absolute; left: 2%; bottom: 10%; width: 15%; height: 80%; }
.ad-lb .pallet { position: absolute; left: 0; right: 0; bottom: 0; height: 16%; background:
  linear-gradient(90deg, #c89b62 0 18%, transparent 18% 41%, #c89b62 41% 59%, transparent 59% 82%, #c89b62 82%) bottom / 100% 45% no-repeat,
  linear-gradient(#c89b62, #c89b62) top / 100% 50% no-repeat; }
.ad-lb .box { position: absolute; bottom: 16%; width: 46%; height: 38%; background: #e0b98a; border: 1px solid #8a6a3f;
  box-shadow: inset 0 -.25em 0 rgba(0,0,0,.12); }
.ad-lb .box::after { content: ''; position: absolute; left: 44%; width: 12%; top: 0; bottom: 0; background: rgba(255,255,255,.35); }
.ad-lb .box:nth-child(2) { left: 2%; --i: 0; }
.ad-lb .box:nth-child(3) { right: 2%; --i: 1; }
.ad-lb .box:nth-child(4) { left: 27%; bottom: 54%; --i: 2; }
.ad.play.ad-lb .box { animation-name: drop; animation-delay: calc(var(--i) * .35s); }
@keyframes drop { 0% { transform: translateY(-260%); opacity: 0; } 4% { opacity: 1; } 8% { transform: translateY(8%); } 10%, 100% { transform: none; opacity: 1; } }
.ad-lb .copy { position: absolute; left: 20%; right: 27%; top: 0; bottom: 0; }
.ad-lb .fr { inset: 0; display: flex; flex-direction: column; justify-content: center; }
.ad-lb .kicker { font: 600 .55em/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #b5b3a8; }
.ad-lb .big { font: 700 1.55em/1 var(--display); text-transform: uppercase; }
.ad-lb .count { --n: 26; font-family: var(--mono); color: var(--amber); counter-reset: n var(--n); }
.ad-lb .count::before { content: counter(n); }
.ad.play.ad-lb .count { animation-name: count; }
@keyframes count { 0%, 35% { --n: 0; } 52%, 100% { --n: 26; } }
.ad-lb .end { position: absolute; right: 2.5%; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: .35em; }
.ad-lb .end .ad-brand { font-size: 1.1em; }
.ad-lb .ad-tag { right: auto; left: 0; }

/* ---------- 2. Page sponsor: 300x250 medium rectangle ---------- */
.ad-mr { aspect-ratio: 300 / 250; max-width: 300px; font-size: min(5.6cqw, 17px); background: linear-gradient(#20231f, #151715 70%); }
.ad-mr .road { position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: #2b2d29; }
.ad-mr .road::after { content: ''; position: absolute; left: 0; right: 0; top: 46%; height: 6%; background: repeating-linear-gradient(90deg, #ffb547 0 8%, transparent 8% 16%); background-size: 50% 100%; }
.ad.play.ad-mr .road::after { animation-name: road; animation-timing-function: linear; }
@keyframes road { 0% { background-position: 0 0; } 30%, 100% { background-position: -150% 0; } }
.ad-mr .truck { position: absolute; bottom: 14%; left: 4%; width: 62%; }
.ad.play.ad-mr .truck { animation-name: truck; }
@keyframes truck { 0% { transform: translateX(-120%); } 22%, 100% { transform: none; } }
.ad-mr .truck .wheel { transform-box: fill-box; transform-origin: center; }
.ad.play.ad-mr .truck .wheel { animation-name: roll; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
@keyframes roll { 0% { transform: rotate(-720deg); } 22%, 100% { transform: none; } }
.ad-mr .stack { position: absolute; bottom: 18%; right: 6%; width: 24%; }
.ad.play.ad-mr .stack { animation-name: unload; }
@keyframes unload { 0%, 24% { transform: translateX(-140%); opacity: 0; } 34%, 100% { transform: none; opacity: 1; } }
.ad-mr .copy { position: absolute; left: 7%; right: 7%; top: 9%; height: 46%; }
.ad-mr .fr { inset: 0; }
.ad-mr .big { font: 700 1.45em/1 var(--display); text-transform: uppercase; }
.ad-mr .big em { font-style: normal; color: var(--amber); }
.ad-mr .chips { display: flex; flex-wrap: wrap; gap: .3em; margin-top: .45em; }
.ad-mr .chips span { font: 600 .52em/1 var(--body); padding: .45em .6em; border: 1px solid #55574f; }
.ad-mr .fr3 { display: flex; flex-direction: column; gap: .45em; align-items: flex-start; }
.ad-mr .stamp { position: absolute; z-index: 3; right: 6%; top: 50%; font: 700 .8em/1 var(--display); letter-spacing: .06em; color: #1f7a3f; background: #f5f2e9; border: .15em solid #1f7a3f; padding: .25em .45em; transform: rotate(-12deg); }
.ad.play.ad-mr .stamp { animation-name: stamp; animation-timing-function: ease-out; }
@keyframes stamp { 0%, 70% { opacity: 0; transform: rotate(-12deg) scale(2.6); } 74% { opacity: 1; transform: rotate(-12deg) scale(.92); } 77%, 100% { opacity: 1; transform: rotate(-12deg) scale(1); } }

/* ---------- 3. Featured directory listing ---------- */
.ad-dir { max-width: 460px; padding: 3px; font-size: 16px; color: var(--ink); background: conic-gradient(from var(--spin), #ffb547, #c89b62, #151715, #ffb547); }
.ad.play.ad-dir { animation: spin 6s linear 4; }
@keyframes spin { to { --spin: 360deg; } }
.ad-dir .in { position: relative; display: grid; grid-template-columns: 74px 1fr; gap: 14px; padding: 16px 16px 14px; background: var(--panel); }
.ad-dir .feat { position: relative; overflow: hidden; display: inline-block; font: 700 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; background: var(--amber); padding: 4px 7px; margin-bottom: 6px; }
.ad-dir .feat::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.9) 50%, transparent 70%); transform: translateX(-130%); }
.ad.play.ad-dir .feat::after { animation-name: shine; }
.ad-dir .map { position: relative; width: 74px; height: 74px; background:
  linear-gradient(#d9d4c7 1px, transparent 1px) 0 0 / 12px 12px, linear-gradient(90deg, #d9d4c7 1px, transparent 1px) 0 0 / 12px 12px, #ede8dc; }
.ad-dir .pin { position: absolute; left: 50%; top: 46%; width: 22px; height: 22px; margin: -22px 0 0 -11px; background: #151715; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.ad-dir .pin::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--amber); }
.ad.play.ad-dir .pin { animation-name: pin; animation-timing-function: cubic-bezier(.3,1.6,.5,1); }
@keyframes pin { 0% { transform: translateY(-60px) rotate(-45deg); opacity: 0; } 8%, 100% { transform: rotate(-45deg); opacity: 1; } }
.ad-dir .ring { position: absolute; left: 50%; top: 46%; width: 50px; height: 18px; margin: -9px 0 0 -25px; border: 2px solid #ffb547; border-radius: 50%; opacity: 0; }
.ad.play.ad-dir .ring { animation-name: ring; animation-timing-function: ease-out; }
.ad.play.ad-dir .ring + .ring { animation-delay: .6s; }
@keyframes ring { 0%, 8% { transform: scale(.2); opacity: 0; } 9% { opacity: 1; } 24%, 100% { transform: scale(1.5); opacity: 0; } }
.ad-dir .name { display: block; margin: 0; font: 700 22px/1.05 var(--display); text-transform: uppercase; }
.ad-dir .loc { display: block; font-size: 14px; color: var(--muted); margin: 2px 0 8px; }
.ad-dir .chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ad-dir .chips span { font: 600 12px/1 var(--body); padding: 5px 7px; background: #ede8dc; border: 1px solid var(--line); }
.ad.play.ad-dir .chips span { animation-name: chip; }
.ad.play.ad-dir .chips span:nth-child(2) { animation-delay: 0.15s; }
.ad.play.ad-dir .chips span:nth-child(3) { animation-delay: 0.30s; }
.ad.play.ad-dir .chips span:nth-child(4) { animation-delay: 0.45s; }
.ad.play.ad-dir .chips span:nth-child(5) { animation-delay: 0.60s; }
@keyframes chip { 0%, 10% { opacity: 0; transform: translateY(8px); } 15%, 100% { opacity: 1; transform: none; } }
.ad-dir .row { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding-top: 10px; font-size: 14px; }
.ad-dir .ad-cta { font-size: 14px; }
.ad-dir .ad-tag { top: 3px; right: 3px; }

/* ---------- 4. Printable chart sponsor ---------- */
.ad-chart { max-width: 300px; aspect-ratio: 300 / 250; font-size: min(5cqw, 15px); background: #4a4338 linear-gradient(135deg, rgba(255,255,255,.06), transparent); display: grid; place-items: center; }
.ad-chart .sheet { position: relative; width: 50%; aspect-ratio: 8.5 / 11; background: #fdfbf5; color: #151715; padding: 7% 7% 0; box-shadow: 0 .4em 1em rgba(0,0,0,.45); transform: rotate(-3deg); transform-origin: 50% 0; }
.ad-chart .sheet::before { content: ''; position: absolute; top: -5%; left: 35%; width: 30%; height: 9%; background: rgba(255,230,170,.75); transform: rotate(3deg); }
.ad.play.ad-chart .sheet { animation-name: sway; animation-timing-function: ease-in-out; }
@keyframes sway { 0% { transform: translateY(-130%) rotate(-12deg); } 12% { transform: rotate(2deg); } 17% { transform: rotate(-4deg); } 22%, 100% { transform: rotate(-3deg); } }
.ad-chart .t { font: 700 .62em/1 var(--display); text-transform: uppercase; margin-bottom: .4em; }
.ad-chart .rows { display: grid; gap: .28em; }
.ad-chart .rows i { display: grid; grid-template-columns: 1fr 1.4fr; gap: .3em; height: .42em; }
.ad-chart .rows i::before, .ad-chart .rows i::after { content: ''; background: #d9d4c7; }
.ad-chart .rows i:nth-child(odd)::before { background: #c89b62; }
.ad.play.ad-chart .rows { animation-name: print; animation-timing-function: linear; }
@keyframes print { 0%, 22% { clip-path: inset(0 0 100% 0); } 50%, 100% { clip-path: inset(0); } }
.ad-chart .scan { position: absolute; left: 0; right: 0; height: 3%; background: linear-gradient(90deg, transparent, #ffb547, transparent); top: 12%; opacity: 0; }
.ad.play.ad-chart .scan { animation-name: scan; animation-timing-function: linear; }
@keyframes scan { 0%, 22% { top: 12%; opacity: 0; } 23% { opacity: 1; } 50% { top: 70%; opacity: 1; } 52%, 100% { top: 70%; opacity: 0; } }
.ad-chart .spon { position: absolute; left: 0; right: 0; bottom: 0; padding: .45em 7%; background: #151715; color: #f5f2e9; font-size: .5em; display: flex; justify-content: space-between; align-items: center; gap: .4em; }
.ad-chart .spon .ad-brand { font-size: 1.25em; }
.ad.play.ad-chart .spon { animation-name: spon; }
@keyframes spon { 0%, 55% { clip-path: inset(0 100% 0 0); } 65%, 100% { clip-path: inset(0); } }
.ad-chart .callout { position: absolute; left: 6%; top: 6%; font: 700 .85em/1 var(--display); text-transform: uppercase; color: var(--amber); text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.ad.play.ad-chart .callout { animation-name: fr3; }

/* Reduced motion: no animation, units sit on their resting frame. */
@media (prefers-reduced-motion: reduce) { .ad, .ad *, .ad *::before, .ad *::after { animation: none !important; } }