/* ============================================================
   HIX — animated ad-format mockups
   Pure CSS, transform/opacity only. Loop forever, feel alive.
   ============================================================ */

/* ---------- Shared browser chrome ---------- */
.browser {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 40px 120px -40px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.02) inset;
  width: 100%;
}
.browser-bar {
  height: 40px; display: flex; align-items: center; gap: 14px;
  padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--bg-3);
}
.browser-dots { display: flex; gap: 7px; }
.browser-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); display: block; }
.browser-url {
  flex: 1; height: 22px; border-radius: 6px; background: rgba(255,255,255,0.05);
  display: flex; align-items: center; padding: 0 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--fg-faint);
  letter-spacing: 0.02em;
}
.browser-view { position: relative; aspect-ratio: 16 / 10; background: var(--bg-1); overflow: hidden; }

/* skeleton content lines used inside mockups */
.skl { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.07); }
.skl.w-90 { width: 90%; } .skl.w-70 { width: 70%; } .skl.w-50 { width: 50%; } .skl.w-40 { width: 40%; }

/* ============================================================
   1. BRAND TAKEOVER & SKINS
   ============================================================ */
.mock-takeover .browser-view { display: grid; grid-template-columns: 1fr 2.1fr 1fr; gap: 0; }
.tk-skin {
  background:
    linear-gradient(180deg, var(--accent-glow), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 9px);
  border-inline: 1px solid var(--line);
  position: relative;
  transform: translateX(var(--from));
  animation: tkSkin 6s var(--ease) infinite;
}
.tk-skin.left  { --from: -110%; border-left: 0; }
.tk-skin.right { --from: 110%;  border-right: 0; }
.tk-skin::after {
  content: ""; position: absolute; inset: 14px; border: 1px dashed rgba(255,255,255,0.18); border-radius: 6px;
}
.tk-skin .tk-logo {
  position: absolute; top: 18px; left: 0; right: 0; margin: auto; width: 26px; height: 26px;
  border-radius: 7px; background: var(--accent); box-shadow: 0 0 18px var(--accent-glow);
  transform: rotate(45deg);
}
@keyframes tkSkin {
  0%, 12% { transform: translateX(var(--from)); opacity: 0; }
  26%, 82% { transform: translateX(0); opacity: 1; }
  96%, 100% { transform: translateX(var(--from)); opacity: 0; }
}
.tk-content { padding: 16px 18px; display: flex; flex-direction: column; gap: 11px; }
.tk-banner {
  height: 46px; border-radius: 8px; background: var(--accent); position: relative; overflow: hidden;
  display: flex; align-items: center; padding: 0 14px;
}
.tk-banner b { color: var(--accent-ink); font-size: 13px; font-weight: 800; letter-spacing: -0.01em; z-index: 1; }
.tk-banner::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  animation: shimmer 3.4s ease-in-out infinite;
}
@keyframes shimmer { 0%,40% { transform: translateX(-120%); } 70%,100% { transform: translateX(220%); } }

/* ============================================================
   2. INTERACTIVE VIDEO
   ============================================================ */
.mock-video .browser-view { background: radial-gradient(120% 120% at 70% 20%, var(--bg-3), var(--bg-1)); }
.vid-stage { position: absolute; inset: 14px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 30%, #0c0c10), #0c0c10);
  border: 1px solid var(--line);
}
.vid-stage::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 80% at 30% 30%, var(--accent-glow), transparent 70%);
  animation: vidBreathe 7s ease-in-out infinite;
}
@keyframes vidBreathe { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: .85; transform: scale(1.12); } }
.vid-play {
  position: absolute; top: 50%; left: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px;
  border-radius: 50%; background: rgba(255,255,255,0.12); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.4); display: grid; place-items: center;
}
.vid-play::after { content: ""; width: 0; height: 0; margin-left: 4px;
  border-left: 15px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.vid-play .ring { position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.6);
  animation: vidRing 2.6s var(--ease) infinite; }
@keyframes vidRing { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }
.vid-bar { position: absolute; left: 24px; right: 24px; bottom: 24px; height: 4px; border-radius: 3px; background: rgba(255,255,255,0.18); overflow: hidden; }
.vid-bar i { display: block; height: 100%; width: 0; background: var(--accent); animation: vidProg 6s linear infinite; }
@keyframes vidProg { 0% { width: 0; } 92%,100% { width: 100%; } }
.vid-chip {
  position: absolute; right: 24px; bottom: 40px;
  background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 800;
  padding: 8px 13px; border-radius: 100px; letter-spacing: 0.02em;
  transform: translateY(20px); opacity: 0; animation: vidChip 6s var(--ease) infinite;
}
@keyframes vidChip { 0%,34% { transform: translateY(20px); opacity: 0; } 46%,86% { transform: translateY(0); opacity: 1; } 96%,100% { transform: translateY(20px); opacity: 0; } }
.vid-hot { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow); }
.vid-hot.h1 { top: 30%; left: 32%; animation: hot 2.4s ease-out infinite; }
.vid-hot.h2 { top: 60%; left: 64%; animation: hot 2.4s ease-out .9s infinite; }
@keyframes hot { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 100% { box-shadow: 0 0 0 14px transparent; } }

/* ============================================================
   3. CUSTOM RICH MEDIA
   ============================================================ */
.mock-rich .browser-view { background: radial-gradient(130% 110% at 50% 120%, var(--bg-3), var(--bg-1)); perspective: 900px; }
.rich-stack { position: absolute; inset: 0; display: grid; place-items: center; transform-style: preserve-3d; }
.rich-card {
  position: absolute; width: 46%; aspect-ratio: 4/3; border-radius: 12px;
  border: 1px solid var(--line-2); background: var(--bg-2);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7);
}
.rich-card.c1 { background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 40%, #0c0c10)); border-color: transparent; animation: floatA 6s var(--ease-in-out) infinite; z-index: 3; }
.rich-card.c2 { animation: floatB 6s var(--ease-in-out) infinite; z-index: 2; }
.rich-card.c3 { animation: floatC 6s var(--ease-in-out) infinite; z-index: 1; }
@keyframes floatA { 0%,100% { transform: translate(-4%, -2%) rotateX(8deg) rotateY(-14deg) translateZ(60px); } 50% { transform: translate(-4%, -10%) rotateX(8deg) rotateY(-14deg) translateZ(60px); } }
@keyframes floatB { 0%,100% { transform: translate(10%, 10%) rotateX(8deg) rotateY(-14deg) translateZ(10px); } 50% { transform: translate(10%, 4%) rotateX(8deg) rotateY(-14deg) translateZ(10px); } }
@keyframes floatC { 0%,100% { transform: translate(18%, 22%) rotateX(8deg) rotateY(-14deg) translateZ(-40px); opacity: .6; } 50% { transform: translate(18%, 18%) rotateX(8deg) rotateY(-14deg) translateZ(-40px); opacity: .6; } }
.rich-card.c1 .rich-emblem {
  position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; border-radius: 9px;
  background: rgba(255,255,255,0.9); transform: rotate(45deg);
}
.rich-cursor {
  position: absolute; width: 22px; height: 22px; z-index: 5; left: 56%; top: 52%;
  animation: cursorMove 6s var(--ease-in-out) infinite;
}
.rich-cursor svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
.rich-cursor::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--accent);
  opacity: 0; animation: cursorTap 6s var(--ease) infinite;
}
@keyframes cursorMove { 0%,100% { transform: translate(0,0); } 45% { transform: translate(-30px,-26px); } 55% { transform: translate(-30px,-26px); } }
@keyframes cursorTap { 0%,42% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1); } 64%,100% { opacity: 0; transform: scale(1.4); } }

/* shared float helper for hero mock */
.float-soft { animation: floatSoft 9s var(--ease-in-out) infinite; }
@keyframes floatSoft { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ============================================================
   COMBINED HERO MOCKUP — a real publisher page with ad placements
   takeover skins + in-content video unit + rich-media unit
   ============================================================ */
.mock-combo .browser-view.combo-view {
  display: grid; grid-template-columns: 1.05fr 3.3fr; gap: 0; align-items: stretch;
}

/* the page content column */
.combo-page {
  position: relative; min-width: 0; background: var(--bg-1);
  padding: 15px clamp(14px, 2.2vw, 26px); overflow: hidden;
  display: flex; flex-direction: column; gap: clamp(7px, 1.1vh, 11px);
}
/* fixed-height units; the video unit absorbs the leftover space so all three always fit */
.combo-page > * { flex: none; }

/* fake site header */
.cp-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 4px; }
.cp-logo { width: 18px; height: 18px; border-radius: 5px; background: var(--accent); }
.cp-navs { display: flex; gap: 10px; }
.cp-navs span { height: 6px; width: 30px; border-radius: 3px; background: rgba(255,255,255,0.12); display: block; }

/* article text */
.cp-title { height: 16px; width: 80%; border-radius: 5px; background: rgba(255,255,255,0.20); }
.cp-byline { height: 7px; width: 36%; border-radius: 4px; background: rgba(255,255,255,0.10); margin-bottom: 2px; }

/* shared ad-placement label */
.ad-tag {
  position: absolute; z-index: 6; top: 8px; left: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 500;
  letter-spacing: 0.14em; color: rgba(255,255,255,0.78);
  background: rgba(0,0,0,0.42); padding: 3px 6px; border-radius: 4px; backdrop-filter: blur(4px);
}

/* leaderboard takeover banner */
.ad-banner {
  position: relative; height: 46px; flex: none; border-radius: 8px; overflow: hidden;
  background: var(--accent); display: flex; align-items: center; justify-content: center;
}
.ad-banner b { color: var(--accent-ink); font-size: 13px; font-weight: 800; letter-spacing: 0.02em; z-index: 1; }
.ad-banner::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  animation: shimmer 3.4s ease-in-out infinite;
}

/* in-content interactive video unit (contained, proportionate) */
.ad-video {
  position: relative; border-radius: 10px; overflow: hidden;
  flex: none; height: 0; padding-top: 42%;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 26%, #0c0c10), #0b0b0e);
}
.ad-video::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(58% 80% at 32% 36%, var(--accent-glow), transparent 70%);
  animation: vidBreathe 7s ease-in-out infinite;
}
.ad-video .vid-play { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
.ad-video .vid-play::after { border-left-width: 13px; border-top-width: 8px; border-bottom-width: 8px; }
.ad-video .vid-bar { left: 16px; right: 16px; bottom: 14px; }
.ad-video .vid-chip { right: 16px; bottom: 28px; }
.ad-video .vid-hot.h1 { top: 30%; left: 30%; }
.ad-video .vid-hot.h2 { top: 62%; left: 66%; }

/* rich-media unit (straight, contained banner) */
.ad-rich {
  position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--line);
  background: var(--bg-2); padding: 14px 16px; height: clamp(74px, 12vh, 104px);
  display: grid; grid-template-columns: 1fr 0.82fr; gap: 16px; align-items: center;
}
.ar-copy { display: flex; flex-direction: column; gap: 9px; }
.ar-copy .skl { height: 8px; }
.ar-panel {
  position: relative; align-self: stretch; min-height: 64px; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 45%, #0c0c10));
  display: grid; place-items: center;
}
.ar-panel .emblem { width: 24px; height: 24px; border-radius: 6px; background: rgba(255,255,255,0.92); transform: rotate(45deg); }
.ar-cta {
  position: absolute; bottom: 8px; right: 8px; font-size: 9px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--accent-ink); background: rgba(255,255,255,0.22); padding: 4px 9px; border-radius: 100px;
}
.ar-cursor { position: absolute; width: 20px; height: 20px; z-index: 6; right: 12%; bottom: 14px; animation: arCursor 4.6s var(--ease-in-out) infinite; }
.ar-cursor svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
.ar-cursor::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid #fff; opacity: 0; animation: cursorTap 4.6s var(--ease) infinite; }
@keyframes arCursor { 0%,100% { transform: translate(8px, 8px); } 44%,56% { transform: translate(0, 0); } }

@media (max-width: 640px) {
  .mock-combo .browser-view.combo-view { grid-template-columns: 0.7fr 3.6fr; }
  .cp-byline { width: 50%; }
}

/* ============================================================
   VALUE-CARD ANIMATED ART (creative / delivery / resonance)
   ============================================================ */
.vart {
  display: block; width: 100%; height: 116px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--line); margin-bottom: 22px; overflow: hidden;
}
.vart .stroke { stroke: var(--fg-faint); }
.vart .fill-acc { fill: var(--accent); }
.vart .stroke-acc { stroke: var(--accent); }
.vart .fill-ink { fill: var(--accent-ink); }
.vart .fill-dim { fill: rgba(255,255,255,0.10); }

/* 1 — CREATIVE: feed scrolls, an unignorable block pops in */
.vart-creative .feed { animation: vcFeed 4.5s linear infinite; }
@keyframes vcFeed { from { transform: translateY(0); } to { transform: translateY(-26px); } }
.vart-creative .pop { transform-box: fill-box; transform-origin: center; animation: vcPop 4.5s var(--ease) infinite; }
@keyframes vcPop { 0%,30% { transform: scale(0); opacity: 0; } 44%,86% { transform: scale(1); opacity: 1; } 96%,100% { transform: scale(0); opacity: 0; } }
.vart-creative .pop-tri { animation: vcPop 4.5s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }

/* 2 — DELIVERY: precision crosshair locks on target */
.vart-delivery .brk { transform-box: fill-box; transform-origin: center; animation: vcBrk 4s var(--ease) infinite; }
@keyframes vcBrk { 0% { transform: scale(1.6); opacity: 0; } 30%,80% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.vart-delivery .dot { transform-box: fill-box; transform-origin: center; animation: vcDot 4s var(--ease) infinite; }
@keyframes vcDot { 0%,18% { transform: translateY(-20px); opacity: 0; } 40%,100% { transform: translateY(0); opacity: 1; } }
.vart-delivery .ring { transform-box: fill-box; transform-origin: center; animation: vcRing 4s var(--ease) infinite; }
@keyframes vcRing { 0%,40% { transform: scale(.5); opacity: 0; } 52% { opacity: .9; } 80%,100% { transform: scale(1.7); opacity: 0; } }

/* 3 — RESONANCE: bars rise, pulse radiates (attention + lift) */
.vart-resonance .bar { transform-box: fill-box; transform-origin: bottom; animation: vcBar 3.6s var(--ease-in-out) infinite; }
.vart-resonance .bar.b2 { animation-delay: .12s; } .vart-resonance .bar.b3 { animation-delay: .24s; }
.vart-resonance .bar.b4 { animation-delay: .36s; } .vart-resonance .bar.b5 { animation-delay: .48s; }
@keyframes vcBar { 0%,100% { transform: scaleY(.28); } 50% { transform: scaleY(1); } }
.vart-resonance .pulse { transform-box: fill-box; transform-origin: center; animation: vcPulse 3.6s var(--ease) infinite; }
@keyframes vcPulse { 0% { transform: scale(.4); opacity: .9; } 70%,100% { transform: scale(2.2); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .tk-skin, .tk-banner::after, .vid-bar i, .vid-chip, .vid-play .ring, .vid-hot,
  .rich-card, .rich-cursor, .float-soft, .vid-stage::before,
  .combo-banner::after, .combo-stage::before, .combo-float, .combo-cursor,
  .vart * { animation: none !important; }
  .tk-skin { transform: none; opacity: 1; }
  .vid-chip { opacity: 1; transform: none; }
  .vid-bar i { width: 66%; }
  .vart-creative .pop, .vart-creative .pop-tri, .vart-delivery .brk, .vart-delivery .dot { opacity: 1; transform: none; }
}

/* ---------- Off-screen pause (perf) — see site.js. Loops run unlimited while visible. ---------- */
.anim-paused, .anim-paused *,
.anim-paused::before, .anim-paused::after,
.anim-paused *::before, .anim-paused *::after { animation-play-state: paused !important; }