/* Mealdill partner banners — shared layout + motion primitives.
   One HTML file per banner adapts to every IAB size it's framed at:
   "strip" (728x90, 970x250, 320x100), "box" (300x250, 336x280) and
   "tower" (160x600, 300x600). Each scene is drawn on a 240x240 artboard
   that banner.js scales into the stage. Scene animations only run under
   .run, so the markup's resting state is the finished frame (what
   reduced-motion users and no-JS hosts see). */

:root {
  --navy: #0F172A;
  --lime: #BEF264;
  --lime-d: #476800;
  --ink: #1A1C1E;
  --muted: #5B6B7F;
  --line: #E2E8F0;
  --surf: #F7F9FB;
  --e-out: cubic-bezier(.2, .8, .2, 1);
  --e-back: cubic-bezier(.3, 1.5, .5, 1);
  --e-move: cubic-bezier(.55, 0, .25, 1.15);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--navy); }
body { font: 500 12px/1.3 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; }

/* ------------------------------------------------------------ frame */

.b {
  position: absolute;
  inset: 0;
  display: grid;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .08) 1px, transparent 1.4px) 0 0 / 12px 12px,
    var(--navy);
  -webkit-tap-highlight-color: transparent;
}
.b::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(190, 242, 100, .22); pointer-events: none; }

.logo { grid-area: logo; display: flex; align-items: center; gap: .35em; font: 800 var(--logo, 12px)/1 Montserrat, sans-serif; letter-spacing: -.01em; white-space: nowrap; }
.logo svg { width: 1.15em; height: 1.15em; flex: none; }
.h { grid-area: h; font: 800 var(--h, 20px)/1.06 Montserrat, sans-serif; letter-spacing: -.025em; text-wrap: balance; }
.h em { font-style: normal; color: var(--lime); }
.sub { grid-area: sub; font-size: var(--sub, 13px); line-height: 1.35; color: rgba(255, 255, 255, .72); text-wrap: pretty; }

.cta {
  grid-area: cta;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  white-space: nowrap;
  padding: .8em 1.15em;
  border-radius: 6px;
  background: var(--lime);
  color: var(--ink);
  font: 800 var(--cta, 12px)/1 Montserrat, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 0 #fff;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.cta svg { width: 1.1em; height: 1.1em; flex: none; }
.b:hover .cta { background: #CFF78A; }
.b:active .cta { transform: translate(3px, 3px); box-shadow: 0 0 0 0 #fff; }
/* A press-in nudge once the scene has made its point. */
.run .cta { animation: nudge .7s ease var(--nudge, 4s) both; }
@keyframes nudge { 0%, 100% { transform: none; box-shadow: 3px 3px 0 0 #fff; } 40% { transform: translate(3px, 3px); box-shadow: 0 0 0 0 #fff; } }

/* Optional partner offer (?offer=…): banner.js wraps the CTA in .act and
   adds a coupon tag under it. Numbers like "40%" are emphasised. */
.act { grid-area: cta; display: flex; flex-direction: column; align-items: center; gap: .6em; min-width: 0; }
.offer { display: block; max-width: 15em; padding: .4em .7em; border: 1.5px dashed var(--lime); border-radius: 4px; color: var(--lime); font: 700 var(--offer, 10px)/1.2 Montserrat, sans-serif; text-align: center; text-wrap: balance; overflow-wrap: anywhere; }
.offer b { font-weight: 800; color: #fff; }
.run .offer { animation: pop .45s var(--e-back) .35s both; }

.stage { grid-area: stage; position: relative; min-width: 0; min-height: 0; }
.scene { position: absolute; left: 50%; top: 50%; width: 240px; height: 240px; margin: -120px 0 0 -120px; transform: scale(var(--s, .5)); transition: opacity .35s; }
.scene.out { opacity: 0; }
.scene > * { position: absolute; }

/* ------------------------------------------------------------ layouts */

/* box — 300x250, 336x280 */
.b {
  grid-template: "h h" auto "stage stage" 1fr "logo cta" auto / 1fr auto;
  gap: 6px 8px;
  padding: 12px 14px 14px;
  --h: min(7vw, 8.2vh);
  --logo: min(4.4vw, 14px);
  --cta: min(3.7vw, 12px);
  --offer: min(3.3vw, 11px);
}
.b .sub { display: none; }
.act { align-items: stretch; align-self: end; }
.logo { align-self: end; }

/* tower — 160x600, 300x600 */
@media (max-aspect-ratio: 3/4) {
  .b {
    grid-template: "logo" auto "h" auto "sub" auto "stage" 1fr "cta" auto / 1fr;
    gap: 10px;
    padding: 18px 14px 20px;
    --h: min(12.6vw, 34px);
    --sub: min(7.6vw, 16px);
    --logo: min(8.6vw, 17px);
    --cta: min(7vw, 14px);
  }
  .b .sub { display: block; }
  .cta { padding: .95em .8em; }
  .act { align-items: stretch; }
  .offer { max-width: none; --offer: min(6.4vw, 13px); }
}

/* strip — 728x90, 970x250 */
@media (min-aspect-ratio: 13/5) {
  .b {
    grid-template: "stage logo cta" 1fr "stage h cta" auto "stage sub cta" 1fr / calc(100vh * 1.2) 1fr auto;
    gap: 0 max(12px, 5vh);
    padding: 0 max(16px, 7vh) 0 0;
    --h: min(26vh, 3.5vw);
    --logo: min(11vh, 17px);
    --sub: min(7vh, 17px);
    --cta: min(13vh, 16px);
  }
  .logo { align-self: end; margin-bottom: .55em; }
  .b .sub { display: block; align-self: start; margin-top: .6em; max-width: 34em; }
  .cta, .act { align-self: center; }
  .offer { max-width: 14em; --offer: max(9px, min(8.5vh, 13px)); }
}
@media (min-aspect-ratio: 13/5) and (max-height: 150px) {
  .b .sub { display: none; }
  .b { grid-template: "stage logo cta" 1fr "stage h cta" auto "stage . cta" 1fr / calc(100vh * 1.2) 1fr auto; }
}
/* narrow strip — 320x100 */
@media (min-aspect-ratio: 13/5) and (max-width: 480px) {
  .b {
    grid-template: "stage logo" 1fr "stage h" auto "stage cta" 1fr / calc(100vh * 1.1) 1fr;
    gap: 0 10px;
    padding: 0 10px 0 0;
    --h: min(14vh, 4.6vw);
    --logo: 10px;
    --cta: 9px;
  }
  .logo { margin-bottom: .45em; }
  .cta { align-self: start; justify-self: start; margin-top: 7px; padding: .7em .9em; box-shadow: 2px 2px 0 0 #fff; }
  .act { flex-direction: row; align-self: start; justify-self: start; gap: 8px; margin-top: 7px; }
  .act .cta { margin: 0; align-self: center; }
  .offer { max-width: 11em; padding: .3em .5em; --offer: 8px; text-align: left; }
}

/* micro strip — 320x50 mobile sticky bar (stretches to the phone's width).
   With an offer, the offer replaces the headline so the deal stays visible. */
@media (min-aspect-ratio: 13/5) and (max-height: 70px) {
  .b {
    grid-template: "stage logo cta" auto "stage h cta" auto / calc(100vh * 1.1) 1fr auto;
    align-content: center;
    gap: 3px 8px;
    padding: 0 8px 0 0;
    --h: 11.5px;
    --logo: 9px;
    --cta: 8.5px;
  }
  .logo { margin: 0; align-self: end; }
  .cta, .act { grid-row: 1 / 3; align-self: center; justify-self: end; margin: 0; }
  .cta { padding: .8em .8em; box-shadow: 2px 2px 0 0 #fff; }
  .act { flex-direction: row; align-items: center; gap: 6px; }
  .b.has-offer { grid-template: "stage logo act" auto / calc(100vh * 1.1) auto 1fr; }
  .has-offer .h { display: none; }
  .has-offer .logo { align-self: center; }
  .has-offer .act { grid-row: auto; justify-self: end; }
  .offer { order: -1; max-width: none; padding: .3em .5em; text-align: left; --offer: 9px; }
}

/* ------------------------------------------------------------ scene kit */

/* White app card with the system's hard lime offset shadow. */
.card { background: #fff; color: var(--ink); border-radius: 8px; box-shadow: 3px 3px 0 0 var(--lime); }
.ph { object-fit: cover; border-radius: 5px; background: var(--line); }
.t-title { font: 800 11px/1.1 Montserrat, sans-serif; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.t-meta { font: 600 8.5px/1 Inter, sans-serif; color: var(--muted); white-space: nowrap; }
.chip { display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 99px; background: var(--lime); color: var(--ink); font: 800 9px/1 Montserrat, sans-serif; white-space: nowrap; box-shadow: 2px 2px 0 0 var(--ink); }
.chip svg { width: 9px; height: 9px; }

/* Touch indicator: a fingertip that presses, then a lime ripple. Place it
   with left/top at the tap point and set --t to the tap time. */
.fg { width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 3px rgba(190, 242, 100, .55), 0 3px 8px rgba(0, 0, 0, .35); opacity: 0; z-index: 20; }
.fg::after { content: ""; position: absolute; inset: -6px; border: 2px solid var(--lime); border-radius: 50%; opacity: 0; }
.run .fg { animation: touch .9s ease var(--t, 0s) both; }
.run .fg::after { animation: ripple .6s ease-out calc(var(--t, 0s) + .3s) both; }
@keyframes touch { 0% { opacity: 0; transform: scale(1.5); } 30% { opacity: 1; transform: scale(1); } 45% { transform: scale(.8); } 65% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes ripple { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.9); } }

/* Generic entrances — set --t for the start time. */
.run .pop { animation: pop .45s var(--e-back) var(--t, 0s) both; }
.run .rise { animation: rise .45s var(--e-out) var(--t, 0s) both; }
.run .fade { animation: fade .35s ease var(--t, 0s) both; }
.run .slide { animation: slide .4s var(--e-out) var(--t, 0s) both; }
@keyframes pop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

/* Hold the first frame until the banner scrolls into view. */
.wait *, .wait *::after, .wait *::before { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }
}