/* Marketing imagery (2026-09-10): generated stock photos and renders placed across the site.
   One stylesheet so the existing layout CSS stays untouched. Every image is same-origin
   (/assets/marketing/...), lazy below the fold, sized by aspect-ratio boxes so nothing shifts
   while it loads. Copy never lives inside an image. */

/* --- page heroes: art behind the text, composed with open space on the left ---------- */
.hero, .byo-hero, .fb-hero, .page-hero { position: relative; overflow: hidden; isolation: isolate; }
.hero-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; display: block; }
.hero-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--av-bg-canvas, #070B11) 0%, color-mix(in srgb, var(--av-bg-canvas, #070B11) 82%, transparent) 38%, color-mix(in srgb, var(--av-bg-canvas, #070B11) 18%, transparent) 70%, transparent 100%),
              linear-gradient(180deg, transparent 55%, var(--av-bg-canvas, #070B11) 100%);
}
.hero > .container, .byo-hero > .container, .fb-hero > .container, .page-hero > .container,
.hero > h1, .byo-hero > h1, .fb-hero > h1, .byo-hero > p, .fb-hero > p { position: relative; z-index: 1; }
@media (max-width: 820px) {
  .hero-art img { object-position: 60% center; opacity: 0.55; }
  .hero-art::after { background: linear-gradient(180deg, color-mix(in srgb, var(--av-bg-canvas, #070B11) 55%, transparent) 0%, var(--av-bg-canvas, #070B11) 100%); }
}

/* --- card art: features, asset kinds, rig archetypes ------------------------------------ */
.card-art { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center;
  border-radius: var(--av-radius-md, 10px); margin-bottom: var(--av-space-4, 0.9rem);
  background: var(--av-bg-surface-2, #141E29); }
.card-art--square { aspect-ratio: 1 / 1; }
.card-art--portrait { aspect-ratio: 4 / 5; }
.feature .card-art { aspect-ratio: 16 / 10; }
.kind-card .card-art { aspect-ratio: 1 / 1; }
.kind-card .kind-icon { display: none; }                 /* the render replaces the line icon */

/* --- plan art: a small tier thumbnail on each pricing card ------------------------------ */
.plan-art { display: block; width: 88px; height: 88px; object-fit: cover; border-radius: 50%;
  margin: 0 auto var(--av-space-3, 0.6rem); background: var(--av-bg-surface-2, #141E29);
  box-shadow: 0 0 0 2px var(--av-bg-surface-3, #1B2733); }
.plan.featured .plan-art { box-shadow: 0 0 0 2px var(--av-accent-cyan, #22D3EE); }

/* --- banners: full-width figures with rounded corners ----------------------------------- */
.banner-art { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--av-radius-lg, 14px); margin: 0 0 var(--av-space-6, 1.6rem);
  background: var(--av-bg-surface-2, #141E29); }
.banner-art--wide { aspect-ratio: 21 / 9; }
.banner-art--tall { aspect-ratio: 9 / 16; }
figure.banner { margin: 0 0 var(--av-space-6, 1.6rem); }
figure.banner figcaption { font-size: 0.85rem; color: var(--av-fg-tertiary, #8B9BB0); margin-top: var(--av-space-2, 0.4rem); }

/* --- marketplace teaser previews: renders instead of CSS placeholders -------------------- */
.mkt-card-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- sign-in side panel ------------------------------------------------------------------ */
.auth-side-art { display: none; }
@media (min-width: 980px) {
  .auth-wrap { display: grid; grid-template-columns: 1fr minmax(320px, 420px); gap: var(--av-space-7, 2.2rem); align-items: stretch; }
  .auth-side-art { display: block; border-radius: var(--av-radius-lg, 14px); overflow: hidden; background: var(--av-bg-surface-2, #141E29); }
  .auth-side-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
}

/* --- 404 --------------------------------------------------------------------------------- */
.notfound-art { display: block; width: min(320px, 70vw); aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--av-radius-lg, 14px); margin: 0 auto var(--av-space-6, 1.6rem); }

@media (prefers-reduced-motion: no-preference) {
  .card-art, .banner-art { transition: transform 240ms ease; }
  .feature:hover .card-art, .kind-card:hover .card-art { transform: translateY(-2px); }
}

/* --- side art beside prose (secondary pages) + rows of archetype cards ------------------ */
.side-art { float: right; width: min(320px, 42%); aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--av-radius-md, 10px); margin: 0 0 var(--av-space-4, 0.9rem) var(--av-space-6, 1.6rem);
  background: var(--av-bg-surface-2, #141E29); }
@media (max-width: 640px) { .side-art { float: none; width: 100%; aspect-ratio: 16 / 10; margin-left: 0; } }
.art-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--av-space-4, 0.9rem); margin: 0 0 var(--av-space-5, 1.2rem); }
.art-row figure { margin: 0; }
.art-row img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--av-radius-md, 10px); background: var(--av-bg-surface-2, #141E29); }
.art-row figcaption { font-size: 0.85rem; color: var(--av-fg-secondary, #AEBCCD); margin-top: var(--av-space-2, 0.4rem); text-align: center; }
@media (max-width: 640px) { .art-row { grid-template-columns: 1fr 1fr; } }

/* --- SPA page headers (1K art): a slimmer band; marketplace empty state ------------------ */
.banner-art--slim { aspect-ratio: 21 / 6; margin-bottom: var(--av-space-5, 1.2rem); }
.mkt-empty-art { display: block; width: min(240px, 60vw); aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--av-radius-lg, 14px); margin: 0 auto var(--av-space-4, 0.9rem); opacity: 0.9; }

/* centred heroes (feedback): the copy sits over the middle of the photo, so darken evenly */
.fb-hero .hero-art::after {
  background: linear-gradient(180deg, color-mix(in srgb, var(--av-bg-canvas, #070B11) 62%, transparent) 0%,
              color-mix(in srgb, var(--av-bg-canvas, #070B11) 58%, transparent) 60%, var(--av-bg-canvas, #070B11) 100%);
}

/* --- 2D->3D boomerangs: oversized, looping backgrounds behind the ad sections ------------ */
.section--ad { position: relative; overflow: hidden; isolation: isolate; }
.section--ad > .container, .section--ad > .wrap { position: relative; z-index: 1; }
/* landing-v2 sections carry their own padding and a .wrap container; the band sits between them */
.mesh-band { padding: 0; }
.ad-bg { position: absolute; inset: -10%; z-index: 0; pointer-events: none; opacity: 0.52; }
.ad-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; display: block; transform: scale(1.08); }
.section--ad::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--av-bg-canvas, #070B11) 0%, color-mix(in srgb, var(--av-bg-canvas, #070B11) 70%, transparent) 42%, color-mix(in srgb, var(--av-bg-canvas, #070B11) 12%, transparent) 100%),
              linear-gradient(180deg, var(--av-bg-canvas, #070B11) 0%, transparent 18%, transparent 82%, var(--av-bg-canvas, #070B11) 100%); }
.section--contrast.section--ad::after { background: linear-gradient(90deg, var(--av-bg-surface-1, #0D141D) 0%, color-mix(in srgb, var(--av-bg-surface-1, #0D141D) 72%, transparent) 46%, color-mix(in srgb, var(--av-bg-surface-1, #0D141D) 30%, transparent) 100%); }

/* On a phone the copy spans the whole column, so a left-to-right scrim protects nothing:
   darken from the top instead and let the subject sit under the lower half. */
@media (max-width: 820px) {
  .ad-bg { opacity: 0.38; }
  .ad-bg img { object-position: 62% 42%; }
  .section--ad::after,
  .section--contrast.section--ad::after {
    background: linear-gradient(180deg, var(--av-bg-canvas, #070B11) 0%, color-mix(in srgb, var(--av-bg-canvas, #070B11) 82%, transparent) 34%, color-mix(in srgb, var(--av-bg-canvas, #070B11) 55%, transparent) 72%, var(--av-bg-canvas, #070B11) 100%);
  }
}

/* --- showreel strip: background-free meshes drifting side to side at three levels --------- */
.mesh-band { position: relative; height: 340px; overflow: hidden; isolation: isolate;
  background: radial-gradient(60% 80% at 50% 60%, color-mix(in srgb, var(--av-accent-cyan, #18D2FF) 9%, transparent) 0%, transparent 70%),
              linear-gradient(180deg, var(--av-bg-canvas, #070B11) 0%, var(--av-bg-surface-1, #0D141D) 50%, var(--av-bg-canvas, #070B11) 100%); }
.mesh-rows { position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%); }
.mesh-row { position: absolute; left: 0; display: flex; align-items: center; gap: 6vw; width: max-content;
  will-change: transform; animation: mesh-drift var(--dur, 44s) linear infinite; }
.mesh-row--reverse { animation-direction: reverse; }
.mesh-row picture, .mesh-row img { display: block; width: var(--size, 160px); height: var(--size, 160px); object-fit: contain; }
.mesh-row img { filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.55)); }
.mesh-row--top { top: 2%; opacity: 0.7; }
.mesh-row--mid { top: 26%; z-index: 1; }
.mesh-row--low { top: 58%; opacity: 0.8; }
@keyframes mesh-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 820px) {
  .mesh-band { height: 220px; }
  .mesh-row { gap: 8vw; }
  .mesh-row--top { --size: 76px !important; }
  .mesh-row--mid { --size: 116px !important; }
  .mesh-row--low { --size: 90px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .mesh-row { animation: none; }
  .ad-bg { opacity: 0.3; }
}