/* ============================================================
   MEDIAPATH — "Creative that runs" : six living ad units
   Pure-CSS looping mock ads for the homepage creative panel.
   Each .ad is a self-contained, infinitely-looping format demo.
   ============================================================ */

.adgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(40px,6vh,68px);text-align:left;}
@media(max-width:900px){.adgrid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.adgrid{grid-template-columns:1fr;}}

.ad{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:#100d18;
  border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 40px rgba(0,0,0,.35);margin:0;
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s,border-color .3s;}
.ad:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.16);box-shadow:0 26px 60px rgba(0,0,0,.5);}
.ad__tag{position:absolute;top:12px;left:12px;z-index:6;font-size:10.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:#fff;background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:5px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.16);}

/* 1 ── Carousel ─────────────────────────────────────────── */
.ad--carousel{background:linear-gradient(160deg,#16121f,#0b0912);}
.car{position:absolute;inset:0;overflow:hidden;}
.car__track{display:flex;height:100%;width:300%;animation:carSlide 9s cubic-bezier(.7,0,.25,1) infinite;}
.car__slide{width:33.333%;flex:none;display:flex;align-items:center;justify-content:center;padding:16px 22px;}
.car__card{position:relative;width:100%;height:100%;border-radius:14px;display:flex;align-items:flex-end;padding:13px;box-shadow:0 16px 32px rgba(0,0,0,.45);}
.car__card.c1{background:linear-gradient(140deg,#7C3FE6,#2AC5E0);}
.car__card.c2{background:linear-gradient(140deg,#FAA474,#E64FB8);}
.car__card.c3{background:linear-gradient(140deg,#6030C0,#AA84E6);}
.car__price{font-size:12px;font-weight:700;color:#0A0A0A;background:#fff;border-radius:999px;padding:5px 11px;}
.car__dots{position:absolute;bottom:13px;left:0;right:0;display:flex;gap:6px;justify-content:center;z-index:4;}
.car__dots i{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.28);}
.car__dots i:nth-child(1){animation:carDot 9s infinite;}
.car__dots i:nth-child(2){animation:carDot 9s infinite 3s;}
.car__dots i:nth-child(3){animation:carDot 9s infinite 6s;}
@keyframes carSlide{0%,28%{transform:translateX(0)}36%,61%{transform:translateX(-33.333%)}69%,94%{transform:translateX(-66.666%)}100%{transform:translateX(0)}}
@keyframes carDot{0%,2%{background:rgba(255,255,255,.28)}4%,30%{background:var(--accent,#FAA474)}34%,100%{background:rgba(255,255,255,.28)}}

/* 2 ── CTV spot ─────────────────────────────────────────── */
.ad--ctv{background:#07060c;}
.ctv__scene{position:absolute;inset:0;background:linear-gradient(120deg,#3a1d6e,#0c0a14 55%,#2A6FDB);background-size:220% 220%;animation:ctvPan 8s ease-in-out infinite;}
/* no play-button glyphs anywhere (user 2026-06-12) — the mock scene reads as a still */
.ctv__scene::after{content:none;}
.ctv__ad{position:absolute;top:12px;right:12px;z-index:6;font-size:10px;font-weight:700;letter-spacing:.06em;color:#fff;background:rgba(0,0,0,.5);padding:4px 8px;border-radius:6px;}
.ctv__lower{position:absolute;left:14px;bottom:24px;z-index:5;font-size:12.5px;font-weight:600;color:#fff;
  background:linear-gradient(90deg,rgba(96,48,192,.9),rgba(96,48,192,0));padding:6px 26px 6px 11px;border-left:3px solid var(--accent,#FAA474);animation:ctvLower 8s ease-in-out infinite;}
.ctv__bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.16);z-index:6;}
.ctv__bar i{display:block;height:100%;background:var(--accent,#FAA474);animation:ctvBar 8s linear infinite;}
@keyframes ctvPan{0%,100%{background-position:0 0}50%{background-position:100% 100%}}
@keyframes ctvPulse{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
@keyframes ctvLower{0%,52%{opacity:0;transform:translateY(12px)}64%,92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
@keyframes ctvBar{0%{width:0}100%{width:100%}}

/* 3 ── DOOH billboard ───────────────────────────────────── */
.ad--dooh{background:radial-gradient(120% 90% at 50% 0%,#1c1533,#07060c);}
.dooh__screen{position:absolute;left:0;right:0;top:28%;height:1.4em;z-index:3;text-align:center;}
.dooh__msg{position:absolute;left:0;right:0;font-family:var(--font-display,sans-serif);font-weight:700;font-size:clamp(17px,2.3vw,25px);letter-spacing:-.02em;
  background:var(--iri,linear-gradient(90deg,#FAA474,#7C3FE6));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;animation:doohMsg 9s infinite;padding:.14em .08em;margin:-.14em -.08em;}
.dooh__msg.m2{animation-delay:3s;}
.dooh__msg.m3{animation-delay:6s;}
.dooh__city{position:absolute;left:0;right:0;bottom:0;height:36%;display:flex;align-items:flex-end;gap:6px;padding:0 12px;z-index:4;}
.dooh__city i{flex:1;background:linear-gradient(#221a3a,#0a0812);border-radius:3px 3px 0 0;box-shadow:0 0 16px rgba(124,63,230,.3);}
.dooh__city i:nth-child(1){height:48%}.dooh__city i:nth-child(2){height:78%}.dooh__city i:nth-child(3){height:60%}
.dooh__city i:nth-child(4){height:92%}.dooh__city i:nth-child(5){height:54%}.dooh__city i:nth-child(6){height:72%}
@keyframes doohMsg{0%,1%{opacity:0;transform:translateY(8px)}7%,27%{opacity:1;transform:none}33%,100%{opacity:0;transform:translateY(-8px)}}

/* 4 ── Display banner (assembling) ──────────────────────── */
.ad--banner{background:linear-gradient(150deg,#151124,#0a0813);}
.bn{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:11px;padding:26px;}
.bn__logo{width:30px;height:30px;border-radius:9px;background:var(--iri,linear-gradient(120deg,#FAA474,#7C3FE6));background-size:200% 100%;animation:bnLogo 6s infinite, carDotPan 8s linear infinite;}
.bn__hd{font-family:var(--font-display,sans-serif);font-weight:700;font-size:clamp(18px,2.3vw,25px);line-height:1.04;color:#fff;letter-spacing:-.02em;opacity:0;animation:bnHd 6s infinite;}
.bn__cta{align-self:flex-start;font-size:12px;font-weight:600;color:#fff;background:var(--accent,#FAA474);padding:8px 15px;border-radius:999px;opacity:0;animation:bnCta 6s infinite;}
@keyframes bnLogo{0%{opacity:0;transform:translateY(-12px) scale(.5)}11%,88%{opacity:1;transform:none}100%{opacity:0}}
@keyframes bnHd{0%,12%{opacity:0;transform:translateX(-16px)}24%,88%{opacity:1;transform:none}100%{opacity:0}}
@keyframes bnCta{0%,32%{opacity:0;transform:translateY(10px)}44%,70%{opacity:1;transform:none}76%,82%{transform:scale(1.07)}88%{opacity:1;transform:none}100%{opacity:0}}
@keyframes carDotPan{to{background-position:200% 50%}}

/* 5 ── Playable ─────────────────────────────────────────── */
.ad--play{background:radial-gradient(100% 100% at 50% 42%,#1d1640,#08070e);}
.pl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.pl__target{width:52px;height:52px;border-radius:999px;background:var(--iri,linear-gradient(120deg,#FAA474,#7C3FE6));background-size:200% 100%;
  box-shadow:0 0 32px rgba(124,63,230,.55);animation:plPulse 1.7s ease-in-out infinite, carDotPan 7s linear infinite;}
.pl__ring{position:absolute;width:52px;height:52px;border-radius:999px;border:2px solid var(--accent,#FAA474);animation:plRing 1.7s ease-out infinite;}
.pl__hint{position:absolute;transform:translateY(52px);font-size:10.5px;font-weight:700;letter-spacing:.12em;color:#fff;animation:plHint 1.7s ease-in-out infinite;}
.pl__score{position:absolute;top:14px;right:14px;width:58px;height:6px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden;}
.pl__score i{display:block;height:100%;background:var(--accent,#FAA474);animation:plScore 5s cubic-bezier(.6,0,.4,1) infinite;}
@keyframes plPulse{0%,100%{transform:scale(.9)}50%{transform:scale(1.06)}}
@keyframes plRing{0%{transform:scale(.85);opacity:.85}100%{transform:scale(2.2);opacity:0}}
@keyframes plHint{0%,100%{opacity:.35}50%{opacity:.9}}
@keyframes plScore{0%{width:6%}100%{width:100%}}

/* 6 ── Social story ─────────────────────────────────────── */
.ad--story{background:#0a0813;}
.st__bars{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:5px;z-index:6;}
.st__bars b{flex:1;height:3px;border-radius:999px;background:rgba(255,255,255,.25);overflow:hidden;}
.st__bars b::after{content:"";display:block;height:100%;width:0;background:#fff;}
.st__bars b:nth-child(1)::after{animation:stF1 9s linear infinite;}
.st__bars b:nth-child(2)::after{animation:stF2 9s linear infinite;}
.st__bars b:nth-child(3)::after{animation:stF3 9s linear infinite;}
.st__frame{position:absolute;inset:0;opacity:0;}
.st__frame.f1{background:linear-gradient(160deg,#7C3FE6,#2AC5E0);animation:stShow1 9s infinite;}
.st__frame.f2{background:linear-gradient(160deg,#FAA474,#E64FB8);animation:stShow2 9s infinite;}
.st__frame.f3{background:linear-gradient(160deg,#6030C0,#AA84E6);animation:stShow3 9s infinite;}
.st__heart{position:absolute;right:16px;bottom:16px;z-index:6;color:#fff;font-size:22px;opacity:0;animation:stHeart 9s infinite;}
@keyframes stF1{0%{width:0}33%{width:100%}100%{width:100%}}
@keyframes stF2{0%,33%{width:0}66%{width:100%}100%{width:100%}}
@keyframes stF3{0%,66%{width:0}100%{width:100%}}
@keyframes stShow1{0%,30%{opacity:1}34%,100%{opacity:0}}
@keyframes stShow2{0%,33%{opacity:0}37%,63%{opacity:1}67%,100%{opacity:0}}
@keyframes stShow3{0%,66%{opacity:0}70%,97%{opacity:1}100%{opacity:0}}
@keyframes stHeart{0%,72%{opacity:0;transform:scale(.4)}76%{opacity:1;transform:scale(1.35)}80%,93%{opacity:1;transform:scale(1)}100%{opacity:0}}

/* ── live ad wall (real units, marquee) ─────────────────── */
.adwall{position:relative;margin-top:clamp(4px,1vh,14px);overflow:hidden;display:flex;flex-direction:column;gap:12px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
.adwall__row{display:flex;gap:14px;width:max-content;will-change:transform;}
.adwall__row.r1{animation:wallPan 66s linear infinite;}
.adwall__row.r2{animation:wallPan 82s linear infinite reverse;}
.adwall:hover .adwall__row{animation-play-state:paused;}
@keyframes wallPan{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.adtile{flex:none;width:140px;aspect-ratio:560/980;position:relative;border-radius:18px;overflow:hidden;
  background:#0e0b16;border:1px solid rgba(255,255,255,.09);box-shadow:0 16px 34px rgba(0,0,0,.4);}
.adtile__poster{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;padding:14px;transition:opacity .5s ease;}
.adtile__poster::after{content:none;} /* no play-button glyphs anywhere (user 2026-06-12) */
.adtile.mounted .adtile__poster{opacity:0;pointer-events:none;}
.adtile__live{position:absolute;top:11px;left:12px;display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.05em;color:#fff;}
.adtile__live i{width:6px;height:6px;border-radius:999px;background:#36d399;animation:wallLive 2s ease-in-out infinite;}
.adtile__fam{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.9);}
.adtile__title{font-size:12.5px;font-weight:500;line-height:1.2;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.4);}
.adtile iframe{position:absolute;top:50%;left:50%;width:560px;height:980px;border:0;background:#0e0b16;transform:translate(-50%,-50%) scale(.25);}
.adwall__note{margin-top:18px;font-size:13px;font-weight:400;color:var(--ink-faint,rgba(255,255,255,.34));}
@keyframes wallLive{0%,100%{box-shadow:0 0 0 0 rgba(54,211,153,.5)}50%{box-shadow:0 0 0 5px rgba(54,211,153,0)}}
@media (prefers-reduced-motion: reduce){.adwall__row{animation:none !important;}}

/* ---- device-crop geometry (canvas px) ----
   Each showcase unit renders a "stage": label on top, device in the middle, caption below.
   These classes describe where the device sits per stage family; mp-adwall.js and
   mp-cap-ads.js attach the right one per unit. --dw/--dh device size, --dcy device
   center-y, --ch2 = half the iframe viewport height (980/2 portrait, 640/2 landscape). */
.crop-phone  {--dw:392;  --dh:800; --dcy:489;   --ch2:490;}  /* device center measured 488-490 across the std family */
.crop-tv     {--dw:760;  --dh:428; --dcy:304;   --ch2:320;}  /* screen only (x170-930, y90-518) — stage chrome cropped; we draw the bezel */
.crop-browser{--dw:1000; --dh:516; --dcy:325;   --ch2:320;}
.crop-console{--dw:880;  --dh:495; --dcy:323.5; --ch2:320;}
.crop-scene  {--dw:860;  --dh:560; --dcy:355;   --ch2:320;}
.crop-display{--dw:1100; --dh:880; --dcy:440;   --ch2:440;}   /* banner-set artboard: no device — show full canvas */
.crop-duo    {--dw:880;  --dh:436; --dcy:292;   --ch2:320;}   /* TV + companion phone framed together (ctv_shoppable; ctv_interactive overrides via GEO) */
.crop-push   {--dw:880;  --dh:420; --dcy:284;   --ch2:320;}   /* hi_pushdown: full browser frame (x110-990, y74-494) */
.crop-vplayer{--dw:860;  --dh:484; --dcy:318;   --ch2:320;}   /* video_bumper: bare 16:9 player (x120-980, y76-560) */

/* tv-family: the unit's stage is cropped to the bare screen, so we supply a clean TV frame —
   shadow-ring bezel (no layout shift) + ambient drop. */
.adcr.crop-tv,.adtile.crop-tv,.adcr.crop-vplayer,.adtile.crop-vplayer{border-radius:14px;background:#0B0B0E;
  box-shadow:0 0 0 6px #101013, 0 0 0 7px rgba(255,255,255,.13), 0 34px 70px -28px rgba(0,0,0,.7);}
.crop-display iframe{height:880px !important;}

/* ---- creative scroller: device-cropped frames — just the device, nothing else ---- */
.adcr{flex:none;position:relative;overflow:hidden;}
.adcr.adcr--std {--un:280;height:calc(var(--un) * 1px);width:calc(var(--un) * 1px * var(--dw,392) / var(--dh,800));}
.adcr.adcr--w880{--un:280;height:calc(var(--un) * 1px);width:calc(var(--un) * 1px * var(--dw,848) / var(--dh,525));}
.adcr.adcr--w760{--un:280;height:calc(var(--un) * 1px);width:calc(var(--un) * 1px * var(--dw,1000) / var(--dh,516));}
.adcr iframe{position:absolute;top:50%;left:50%;border:0;opacity:0;transition:opacity .55s ease;}
.adcr.mounted iframe{opacity:1;}
.adcr.adcr--std  iframe{width:560px;height:980px;transform:translate(-50%,-50%) scale(calc(var(--un) / var(--dh,800))) translate(0px, calc((var(--ch2,490) - var(--dcy,474)) * 1px));}
.adcr.adcr--w880 iframe{width:1100px;height:640px;transform:translate(-50%,-50%) scale(calc(var(--un) / var(--dh,525))) translate(0px, calc((var(--ch2,320) - var(--dcy,337.5)) * 1px));}
.adcr.adcr--w760 iframe{width:1100px;height:640px;transform:translate(-50%,-50%) scale(calc(var(--un) / var(--dh,516))) translate(0px, calc((var(--ch2,320) - var(--dcy,325)) * 1px));}
@media (max-width:760px){
  /* phones: same auto-drift marquee as desktop (user 2026-06-12 — swipe-only felt dead),
     just slimmer tiles so the strip doesn't dominate the screen */
  .adcr.adcr--std,.adcr.adcr--w880,.adcr.adcr--w760{--un:230;}
}

/* reduced motion → freeze on a sensible composed frame */
@media (prefers-reduced-motion: reduce){
  .ad *{animation:none !important;}
  .ctv__bar i{width:62%;}
  .ctv__lower,.dooh__msg.m1,.bn__hd,.bn__cta,.bn__logo,.st__frame.f1{opacity:1 !important;transform:none !important;}
  .dooh__msg.m2,.dooh__msg.m3,.st__frame.f2,.st__frame.f3{opacity:0 !important;}
  .pl__score i{width:60%;}
  .st__bars b:nth-child(1)::after{width:100%;}
}


/* ── Frameless creative units ────────────────────────────────────────────────
   No card behind the device — the unit floats. Strips our container chrome
   (background / shadow / border) everywhere units appear. The dark "stage"
   some showcase units render is inside their own (cross-origin) page. */
.adtile, .adcr,
.spot__strip .adtile, .hero__ad .adtile{
  background:transparent !important; box-shadow:none !important; border:0 !important; border-radius:0 !important;
}
.adtile iframe, .adcr iframe{ background:transparent !important; }
.adtile__poster{ background:transparent !important; }


/* ── Loading whisper ─────────────────────────────────────────────────────────
   A faint device silhouette + slow shimmer holds the space until the live unit
   paints; if a unit never loads (offline / blocked), the quiet outline remains
   instead of a hole. Fades the moment the iframe mounts. */
.adcr::after, .adtile.cv-std::after, .adtile.cv-w760::after, .adtile.cv-w880::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  border:1px solid rgba(255,255,255,.08);border-radius:18px;
  background:linear-gradient(120deg, rgba(255,255,255,.03), rgba(255,255,255,0) 38%, rgba(255,255,255,.03) 76%);
  background-size:220% 100%;animation:unitShimmer 2.8s linear infinite;
  opacity:1;transition:opacity .5s ease;}
.adcr.mounted::after, .adtile.mounted::after{opacity:0;animation:none;}
@keyframes unitShimmer{to{background-position:-220% 0;}}
@media(prefers-reduced-motion:reduce){.adcr::after,.adtile.cv-std::after,.adtile.cv-w760::after,.adtile.cv-w880::after{animation:none;}}