/* ============================================================
   ABM "The Asset" — DARK / MODERN set. Hundreds of landing
   pages + the 4 brand colors carried from the first animation
   (magenta · cyan · green · indigo). Prefix: .ad-*
   Builds on abmp3.css tokens.
   ============================================================ */

:root {
  --ad-bg:    #07131D;
  --ad-bg2:   #0B1A24;
  --ad-bg3:   #0F222E;
  --ad-line:  rgba(255,255,255,0.10);
  --ad-line2: rgba(255,255,255,0.20);
  --ad-ink:   #F4F1EA;
  --ad-dim:   rgba(244,241,234,0.58);
  --ad-faint: rgba(244,241,234,0.34);
  /* the four */
  --c-mag:  #E0379E;
  --c-cyan: #37D6D6;
  --c-grn:  #52C964;
  --c-ind:  #6E7BE6;
  --ad-paper: #ECE7E1;
  --ad-display: "Archivo Black", "Familjen Grotesk", sans-serif;
  --ad-mono: "Kumbh Sans", sans-serif;
}

.ad {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background: var(--ad-bg); color: var(--ad-ink);
  font-family: var(--abm-sans);
  -webkit-font-smoothing: antialiased;
}
.ad * { box-sizing: border-box; }
.ad-pad { position: relative; z-index: 5; padding: 50px 56px; height: 100%; display: flex; flex-direction: column; pointer-events: none; }
.ad-pad > * { pointer-events: auto; }

/* ---- header ---- */
.ad-kick { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.ad-kick .bar { width: 26px; height: 1px; background: var(--c-grn); }
.ad-kick .num { font-family: var(--ad-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--ad-faint); font-variant-numeric: tabular-nums; }
.ad-kick .tag { font-family: var(--ad-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-grn); }
.ad-h2 { font-family: var(--ad-display); font-weight: 400; font-size: 46px; line-height: 0.98; letter-spacing: -0.02em; margin: 0; max-width: 16ch; text-transform: none; }
.ad-h2 .em { color: var(--c-cyan); }
.ad-h2 .mag { color: var(--c-mag); }
.ad-lede { font-family: var(--abm-sans); font-size: 16px; line-height: 1.5; color: var(--ad-dim); margin: 16px 0 0; max-width: 46ch; text-wrap: pretty; }

/* counter chip (dark) */
.ad-counter { display: inline-flex; align-items: center; gap: 13px; padding: 12px 16px; background: rgba(10,22,31,0.92); border: 1px solid var(--ad-line2); }
.ad-counter .big { font-family: var(--ad-display); font-size: 32px; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.ad-counter .lbl { font-family: var(--ad-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ad-faint); line-height: 1.35; }

.ad-replay { position: absolute; right: 14px; bottom: 12px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--ad-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ad-dim); background: rgba(255,255,255,0.05); border: 1px solid var(--ad-line2); padding: 7px 11px; }
.ad-replay:hover { background: rgba(255,255,255,0.1); color: var(--ad-ink); }

/* ============================================================
   PAGE TILE — a tiny landing page seen from far (glows on dark)
   ============================================================ */
.ad-tile { background: var(--ad-paper); overflow: hidden; display: flex; flex-direction: column; flex: 0 0 auto; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
.ad-tile .bandwrap { padding: 9% 9% 0; }
.ad-tile .nav { height: 7%; min-height: 2px; background: #C7BFB5; width: 46%; margin-bottom: 7%; }
.ad-tile .hero { height: 34%; background: #B9C2C9; position: relative; }
.ad-tile .hero.c { /* accent set inline */ }
.ad-tile .ln { height: 5%; min-height: 1px; background: #CFC8BF; margin: 6% 9% 0; }
.ad-tile .ln.s { width: 52%; }
.ad-tile .cta { height: 8%; min-height: 2px; width: 30%; margin: 7% 9% 0; }

/* the big field of tiles */
.ad-field { position: absolute; inset: 0; z-index: 1; }
.ad-grid { display: grid; gap: 10px; }
.ad-tilein { opacity: 1; }
.ad-field.run .ad-tilein { animation: ad-tin .5s ease both; }
@keyframes ad-tin { from { opacity: 0; transform: translateY(8px) scale(.92); } to { opacity: 1; transform: none; } }

/* dark scrims to seat the headline + fade the field */
.ad-scrim-l { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(100deg, var(--ad-bg) 26%, rgba(7,19,29,0.82) 42%, rgba(7,19,29,0.0) 66%); }
.ad-scrim-v { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 40%, rgba(7,19,29,0) 40%, rgba(7,19,29,0.55) 78%, var(--ad-bg) 100%); }
.ad-scrim-b { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(0deg, var(--ad-bg) 4%, rgba(7,19,29,0) 34%), linear-gradient(180deg, rgba(7,19,29,0.6) 0%, rgba(7,19,29,0) 26%); }

/* ============================================================
   FOCAL page wrapper (reuses .aa-page white card) + glow + pins
   ============================================================ */
.ad-focal { position: relative; box-shadow: 0 40px 90px -30px rgba(0,0,0,0.8); }
.ad-focal::after { content: ""; position: absolute; inset: -2px; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 0 60px -6px rgba(55,214,214,0.35); }
.ad-pin { position: absolute; display: inline-flex; align-items: center; gap: 7px; background: #0B1A24; border: 1px solid var(--ad-line2); color: var(--ad-ink); font-family: var(--ad-mono); font-size: 10px; letter-spacing: 0.04em; padding: 6px 9px; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(0,0,0,0.7); }
.ad-pin .pd { width: 7px; height: 7px; flex: 0 0 auto; }
.ad-pin .k { color: var(--ad-faint); text-transform: uppercase; letter-spacing: 0.08em; }

/* ============================================================
   N1 — MARQUEE WALL (rows of pages scrolling)
   ============================================================ */
.ad-marq { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; z-index: 1; }
.ad-row { display: flex; gap: 12px; width: max-content; will-change: transform; }
.ad-field.run .ad-row { animation: ad-scrollA var(--dur, 60s) linear infinite; }
.ad-field.run .ad-row.rev { animation-name: ad-scrollB; }
@keyframes ad-scrollA { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ad-scrollB { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ============================================================
   N2 — SWARM GRID → ONE
   ============================================================ */
.ad-swarm { position: absolute; inset: -4% ; z-index: 1; display: grid; gap: 8px; }

/* ============================================================
   N3 — PERSPECTIVE TUNNEL
   ============================================================ */
.ad-tunnel { position: absolute; inset: 0; z-index: 1; perspective: 900px; overflow: hidden; }
.ad-tunnel-plane { position: absolute; left: 50%; bottom: -8%; width: 1500px; margin-left: -750px; transform-style: preserve-3d; transform: rotateX(64deg); transform-origin: bottom center; }
.ad-tunnel-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.ad-field.run .ad-tunnel-grid { animation: ad-fly 9s linear infinite; }
@keyframes ad-fly { from { transform: translateY(0); } to { transform: translateY(170px); } }
.ad-tunnel-fade { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(0deg, rgba(7,19,29,0) 28%, rgba(7,19,29,0.6) 62%, var(--ad-bg) 88%); }

/* ============================================================
   N4 — DOSSIER ↔ WALL (research depth)
   ============================================================ */
.ad-n4 { position: relative; z-index: 5; display: grid; grid-template-columns: 384px 1fr; gap: 36px; flex: 1; min-height: 0; align-items: center; }
.ad-dossier { background: rgba(9,20,28,0.9); border: 1px solid var(--ad-line2); padding: 22px 22px 18px; }
.ad-dossier .dh { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--ad-line); margin-bottom: 6px; }
.ad-dossier .dh .nm { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.ad-dossier .dh .mono { margin-left: auto; font-family: var(--ad-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--ad-faint); text-transform: uppercase; }
.ad-drow { padding: 13px 0; border-bottom: 1px solid var(--ad-line); }
.ad-drow:last-child { border-bottom: 0; }
.ad-drow .top { display: flex; align-items: center; gap: 10px; }
.ad-drow .dot { width: 9px; height: 9px; flex: 0 0 auto; }
.ad-drow .cat { font-family: var(--ad-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.ad-drow .ct { margin-left: auto; font-family: var(--ad-mono); font-size: 11px; color: var(--ad-faint); font-variant-numeric: tabular-nums; }
.ad-drow .chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.ad-chip { font-family: var(--ad-mono); font-size: 9.5px; letter-spacing: 0.03em; color: var(--ad-dim); background: rgba(255,255,255,0.05); border: 1px solid var(--ad-line); padding: 3px 7px; }
.ad-n4-wall { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; }

/* ============================================================
   N5 — EDITORIAL MOSAIC + BIG STAT
   ============================================================ */
.ad-mosaic { position: absolute; inset: 0; z-index: 1; display: grid; gap: 4px; }
.ad-mosaic .ad-tile { box-shadow: none; }
.ad-bigwrap { position: relative; z-index: 5; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ad-bignum-frame { position: relative; padding: 30px 46px; }
.ad-bignum-frame .corner { position: absolute; width: 18px; height: 18px; }
.ad-bignum-frame .corner.tl { left: 0; top: 0; background: var(--c-mag); }
.ad-bignum-frame .corner.tr { right: 0; top: 0; background: var(--c-cyan); }
.ad-bignum-frame .corner.bl { left: 0; bottom: 0; background: var(--c-grn); }
.ad-bignum-frame .corner.br { right: 0; bottom: 0; background: var(--c-ind); }
.ad-bignum { font-family: "Anton", var(--ad-display); font-weight: 400; font-size: 132px; line-height: 0.9; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.ad-bigsub { font-family: var(--ad-display); font-size: 30px; line-height: 1.02; letter-spacing: -0.02em; margin-top: 18px; text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
  .ad-field.run .ad-row, .ad-field.run .ad-tunnel-grid, .ad-field.run .ad-tilein { animation: none !important; }
  .ad-field.run .ad-tilein { opacity: 1 !important; transform: none !important; }
}