/* ============================================================
   PASODOBLE, VIEWFINDER
   Real project micro-experiences. Each .mviz becomes a
   consistent viewfinder whose interior reconstructs one moment
   from real work. Palettes below are the ACTUAL project palettes.
   ============================================================ */

.vf { position: relative; overflow: hidden; --vf-pad: 0.9rem; }

/* ---------- persistent frame chrome (identical on every project) ---------- */

.vf .vf-bar {
  position: absolute; top: var(--vf-pad); left: var(--vf-pad); right: var(--vf-pad);
  display: flex; justify-content: space-between; gap: 0.75rem; z-index: 6;
  font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}
.vf .vf-bar b { color: var(--primary); font-weight: 400; }
.vf .vf-foot {
  position: absolute; bottom: var(--vf-pad); left: var(--vf-pad); right: var(--vf-pad);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 0.75rem; z-index: 6;
  font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}
.vf .corner { position: absolute; width: 11px; height: 11px; border: 1px solid rgba(249, 117, 47, 0.5); z-index: 7; pointer-events: none; }
.vf .corner.tl { top: 0.5rem; left: 0.5rem; border-width: 1px 0 0 1px; }
.vf .corner.tr { top: 0.5rem; right: 0.5rem; border-width: 1px 1px 0 0; }
.vf .corner.bl { bottom: 0.5rem; left: 0.5rem; border-width: 0 0 1px 1px; }
.vf .corner.br { bottom: 0.5rem; right: 0.5rem; border-width: 0 1px 1px 0; }

/* orange shutter, scene changes inside the viewfinder */
.vf .shutter { position: absolute; inset: 0; z-index: 8; pointer-events: none; display: grid; grid-template-columns: repeat(6, 1fr); }
.vf .shutter i { background: var(--primary); transform: scaleY(0); transform-origin: bottom; }
.vf.wiping .shutter i { animation: shutter-pass 0.6s var(--ease-swift) both; }
.vf.wiping .shutter i:nth-child(2) { animation-delay: 0.035s; }
.vf.wiping .shutter i:nth-child(3) { animation-delay: 0.07s; }
.vf.wiping .shutter i:nth-child(4) { animation-delay: 0.105s; }
.vf.wiping .shutter i:nth-child(5) { animation-delay: 0.14s; }
.vf.wiping .shutter i:nth-child(6) { animation-delay: 0.175s; }
@keyframes shutter-pass {
  0% { transform: scaleY(0); transform-origin: bottom; }
  45% { transform: scaleY(1); transform-origin: bottom; }
  55% { transform: scaleY(1); transform-origin: top; }
  100% { transform: scaleY(0); transform-origin: top; }
}

/* ============================================================
   001 · ENCESTANDO SUENOS, brand system
   Real palette from the project source.
   ============================================================ */

.vf-brand {
  --es-orange: #ff4b16; --es-orange-2: #ff6532; --es-blue: #1469d8;
  --es-navy: #061a33; --es-cream: #f3f0e8;
  background: var(--es-navy);
}
.vf-brand .es-grid {
  position: absolute; inset: 0; opacity: 0.55;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 34px 34px;
}
.vf-brand .es-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.14);
  transition: opacity 0.9s ease, transform 1.6s var(--ease-out);
}
.vf-brand.s4 .es-photo { opacity: 0.32; transform: scale(1); }

.vf-brand .es-mark {
  position: absolute; left: 50%; top: 50%; width: 33%; max-width: 128px; aspect-ratio: 1;
  transform: translate(-50%, -50%) translate(var(--px, 0px), var(--py, 0px));
  color: var(--es-orange); z-index: 3;
  transition: transform 0.5s var(--ease-out), width 0.8s var(--ease-swift),
              left 0.8s var(--ease-swift), top 0.8s var(--ease-swift);
}
.vf-brand .es-mark svg { width: 100%; height: 100%; }
.vf-brand .es-mark svg circle, .vf-brand .es-mark svg path {
  stroke-dasharray: 320; stroke-dashoffset: 320;
  transition: stroke-dashoffset 1.15s var(--ease-out);
}
.vf-brand.s1 .es-mark svg circle, .vf-brand.s1 .es-mark svg path,
.vf-brand.s2 .es-mark svg circle, .vf-brand.s2 .es-mark svg path,
.vf-brand.s3 .es-mark svg circle, .vf-brand.s3 .es-mark svg path,
.vf-brand.s4 .es-mark svg circle, .vf-brand.s4 .es-mark svg path { stroke-dashoffset: 0; }
/* mark retires to the lower right as a signature so the claim owns the frame */
.vf-brand.s3 .es-mark, .vf-brand.s4 .es-mark { left: 86%; top: 70%; width: 13%; }

.vf-brand .es-swatches { position: absolute; left: 8%; bottom: 22%; display: flex; gap: 5px; z-index: 3; }
.vf-brand .es-swatches i {
  width: 24px; height: 32px; opacity: 0; transform: translateY(12px) scaleY(0.25);
  transform-origin: bottom;
  transition: transform 0.5s var(--ease-swift), opacity 0.4s ease;
}
.vf-brand.s2 .es-swatches i, .vf-brand.s3 .es-swatches i { opacity: 1; transform: none; }
.vf-brand .es-swatches i:nth-child(2) { transition-delay: 0.06s; }
.vf-brand .es-swatches i:nth-child(3) { transition-delay: 0.12s; }
.vf-brand .es-swatches i:nth-child(4) { transition-delay: 0.18s; }
.vf-brand .es-swatches i:nth-child(5) { transition-delay: 0.24s; }

.vf-brand .es-word {
  position: absolute; left: 8%; right: 8%; top: 46%; z-index: 3;
  transform: translateY(-50%) translate(var(--px2, 0px), var(--py2, 0px));
  font-family: "Barlow Condensed", "Arial Narrow", var(--font-sans);
  font-weight: 700; text-transform: uppercase; line-height: 0.86; letter-spacing: 0.01em;
  font-size: clamp(1.4rem, 5vw, 2.7rem); color: var(--es-cream);
  opacity: 0; transition: opacity 0.5s ease, transform 0.5s var(--ease-out);
}
.vf-brand .es-word em { font-style: normal; color: var(--es-orange); display: block; }
.vf-brand.s3 .es-word { opacity: 1; }
/* the final composition clears the type and palette so the claim can land alone */
.vf-brand.s4 .es-word { opacity: 0; }
.vf-brand.s4 .es-swatches i { opacity: 0; transform: translateY(10px) scaleY(0.25); }

.vf-brand .es-claim {
  position: absolute; left: 8%; right: 8%; top: 26%; z-index: 3;
  font-family: "Barlow Condensed", "Arial Narrow", var(--font-sans);
  font-weight: 700; text-transform: uppercase; line-height: 0.9;
  font-size: clamp(1.6rem, 5.6vw, 3rem); color: #fff;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s var(--ease-out);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.55);
}
.vf-brand.s4 .es-claim { opacity: 1; transform: none; }
.vf-brand .es-stat {
  position: absolute; left: 8%; right: 8%; top: 60%; z-index: 3;
  display: flex; gap: 1.1rem; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.75);
  opacity: 0; transition: opacity 0.6s ease 0.2s;
}
.vf-brand.s4 .es-stat { opacity: 1; }

/* ============================================================
   002 · MARKGOESPUBLIC, the Telegram approval loop
   Real product palette + real copy from the project source.
   ============================================================ */

.vf-tg {
  --mk-cream: #FBF7EF; --mk-ink: #1A1714; --mk-soft: #6E665B;
  --mk-accent: #FF4326; --mk-deep: #D52E0E; --mk-tg: #2AABEE; --mk-ok: #1FA463;
  background: var(--mk-cream);
}
.vf-tg .vf-bar { color: rgba(26, 23, 20, 0.45); }
.vf-tg .vf-bar b { color: var(--mk-deep); }
.vf-tg .vf-foot { color: rgba(26, 23, 20, 0.4); }
.vf-tg .corner { border-color: rgba(213, 46, 14, 0.4); }

.vf-tg .tg-head {
  position: absolute; top: 2.5rem; left: 1rem; right: 1rem; height: 30px;
  display: flex; align-items: center; gap: 0.5rem;
  border-bottom: 1px solid rgba(26, 23, 20, 0.1); z-index: 3;
}
.vf-tg .tg-avatar { width: 21px; height: 21px; border-radius: 50%; background: var(--mk-ink); display: grid; place-items: center; flex: none; }
.vf-tg .tg-avatar img { width: 13px; height: 13px; filter: invert(1); }
.vf-tg .tg-who { font-size: 0.66rem; font-weight: 700; color: var(--mk-ink); letter-spacing: -0.01em; line-height: 1.15; }
.vf-tg .tg-who span { display: block; font-weight: 400; font-size: 0.52rem; color: var(--mk-ok); }
.vf-tg .tg-chan { margin-left: auto; font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.18em; color: var(--mk-tg); }

.vf-tg .tg-body {
  position: absolute; top: 4.4rem; left: 1rem; right: 1rem; bottom: 3.5rem; z-index: 3;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0.35rem; overflow: hidden;
}
.vf-tg .bub {
  max-width: 86%; padding: 0.45rem 0.65rem; border-radius: 12px;
  font-size: 0.68rem; line-height: 1.35; color: var(--mk-ink);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s var(--ease-out);
}
.vf-tg .bub.on { opacity: 1; transform: none; }
.vf-tg .bub.me { align-self: flex-end; background: #DCF3FF; border-bottom-right-radius: 3px; }
.vf-tg .bub.bot { align-self: flex-start; background: #fff; border: 1px solid rgba(26, 23, 20, 0.09); border-bottom-left-radius: 3px; }

.vf-tg .draft {
  border: 1px solid rgba(255, 67, 38, 0.3); background: #fff; border-radius: 10px;
  padding: 0.55rem 0.65rem; font-size: 0.64rem; line-height: 1.4; color: var(--mk-ink);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s var(--ease-out);
}
.vf-tg .draft.on { opacity: 1; transform: none; }
.vf-tg .draft .d-tag {
  font-family: var(--font-mono); font-size: 0.46rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--mk-deep); display: block; margin-bottom: 0.3rem;
}
.vf-tg .draft .d-meta {
  display: flex; gap: 0.8rem; margin-top: 0.4rem; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 0.44rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mk-soft);
}
.vf-tg .tg-actions { display: flex; gap: 0.3rem; margin-top: 0.1rem; flex-wrap: wrap; opacity: 0; transition: opacity 0.35s ease; }
.vf-tg .tg-actions.on { opacity: 1; }
.vf-tg .tg-actions button {
  font-size: 0.58rem; font-weight: 600; padding: 0.35rem 0.55rem; border-radius: 999px;
  background: var(--mk-accent); color: #fff; transition: background 0.2s, transform 0.2s;
}
.vf-tg .tg-actions button.alt { background: transparent; color: var(--mk-ink); border: 1px solid rgba(26, 23, 20, 0.3); }
.vf-tg .tg-actions button:hover { transform: translateY(-1px); background: var(--mk-deep); }
.vf-tg .tg-actions button.alt:hover { background: rgba(26, 23, 20, 0.05); transform: translateY(-1px); }
.vf-tg .tg-note {
  position: absolute; bottom: 2.1rem; left: 1rem; right: 1rem; z-index: 3;
  font-family: var(--font-mono); font-size: 0.44rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--mk-soft); text-align: center;
}
.vf-tg .tg-done {
  position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 0.5rem;
  background: var(--mk-cream); opacity: 0; pointer-events: none; text-align: center; padding: 1.5rem;
  transition: opacity 0.45s ease;
}
.vf-tg .tg-done.on { opacity: 1; }
.vf-tg .tg-done .ok { width: 32px; height: 32px; border-radius: 50%; background: var(--mk-ok); display: grid; place-items: center; color: #fff; font-size: 0.95rem; }
.vf-tg .tg-done b { font-size: 0.9rem; color: var(--mk-ink); letter-spacing: -0.02em; }
.vf-tg .tg-done span { font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mk-soft); }

/* ============================================================
   003 · TERRA ROBOTICS, investor deck, real slide language
   ============================================================ */

.vf-deck { --tr-bg: #0a0a0a; --tr-ink: #f4f1ea; --tr-dim: #a8a39a; --tr-accent: #ff5b1f; background: var(--tr-bg); }
.vf-deck .slide {
  position: absolute; inset: 2.5rem 1rem 3.7rem; z-index: 3;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateY(16px) scale(0.985);
  /* the orange shutter IS the transition: cut instantly underneath it so two
     slide titles are never cross-fading in the open */
  transition: opacity 0.12s linear, transform 0.12s linear;
}
.vf-deck .slide.on { opacity: 1; transform: none; }
.vf-deck .slide.past { opacity: 0; transform: translateY(-16px) scale(0.985); }
.vf-deck .s-eyebrow {
  font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--tr-accent); margin-bottom: 0.65rem;
}
.vf-deck .s-title {
  font-size: clamp(0.95rem, 2.5vw, 1.55rem); font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.07; color: var(--tr-ink); max-width: 20ch;
}
.vf-deck .s-fig { margin-top: 0.65rem; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.vf-deck .s-fig b { font-size: clamp(1.3rem, 3.6vw, 2.2rem); font-weight: 800; letter-spacing: -0.04em; color: var(--tr-accent); }
.vf-deck .s-fig span { font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tr-dim); }
.vf-deck .deck-ticks { position: absolute; bottom: 2.2rem; left: 1rem; display: flex; gap: 5px; z-index: 6; }
.vf-deck .deck-ticks i { width: 15px; height: 2px; background: rgba(244, 241, 234, 0.22); transition: background 0.3s; }
.vf-deck .deck-ticks i.on { background: var(--tr-accent); }

/* ============================================================
   004 · MONDO, padel club lead-generation automation (Labs)
   Real six-stage AI sales agent flow from the project source.
   ============================================================ */

.vf-flow { --mo-blue: #0878b8; background: #0a0f14; }
.vf-flow .fl-logo { position: absolute; top: 2.4rem; left: 1rem; height: 12px; z-index: 4; opacity: 0.9; }
.vf-flow .fl-logo img { height: 100%; width: auto; }
.vf-flow .fl-net { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.vf-flow .fl-net path { fill: none; stroke: rgba(249, 117, 47, 0.22); stroke-width: 1; stroke-dasharray: 4 4; }
.vf-flow .fl-nodes {
  position: absolute; left: 1rem; right: 1rem; top: 4.2rem; bottom: 3.9rem; z-index: 2;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 0.4rem;
}
.vf-flow .fnode {
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; background: rgba(255, 255, 255, 0.02);
  padding: 0.4rem 0.45rem; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between; gap: 0.25rem;
  transition: border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease, transform 0.35s var(--ease-out);
}
.vf-flow .fnode .fn-id { font-family: var(--font-mono); font-size: 0.44rem; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.35); transition: color 0.35s ease; }
.vf-flow .fnode .fn-label { font-size: 0.6rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; color: rgba(255, 255, 255, 0.6); transition: color 0.35s ease; }
.vf-flow .fnode.done { border-color: rgba(249, 117, 47, 0.3); }
.vf-flow .fnode.live {
  border-color: var(--primary); background: rgba(249, 117, 47, 0.1);
  box-shadow: 0 0 20px -6px var(--primary); transform: translateY(-2px);
}
.vf-flow .fnode.live .fn-label { color: #fff; }
.vf-flow .fnode.live .fn-id { color: var(--primary); }
.vf-flow .fl-stat {
  position: absolute; bottom: 2.2rem; left: 1rem; right: 1rem; z-index: 4;
  display: flex; justify-content: space-between; gap: 0.75rem;
  font-family: var(--font-mono); font-size: 0.44rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.4);
}
.vf-flow .fl-stat b { color: var(--primary); font-weight: 400; }

/* ============================================================
   ARCHIVE + CONCEPTS, real logo artwork
   Logos arrive in wildly different shapes: wide wordmarks, square
   marks, artwork with a baked-in light or dark plate, and dark
   artwork on transparency. Two fit modes plus a lift flag normalise
   them without ever stretching anything.
   ============================================================ */

.proof-cell { position: relative; overflow: hidden; }

/* the logo box: generous, consistent breathing room in every cell */
.proof-cell .pc-logo {
  position: absolute; inset: 2.1rem 1.5rem 2.5rem;
  /* block, not grid: an auto-sized grid row makes the image height:100%
     resolve against an indefinite height and fall back to intrinsic size */
  display: block;
  filter: grayscale(1) contrast(0.92);
  opacity: 0.55;
  transition: opacity 0.4s var(--ease-out), filter 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.proof-cell:hover .pc-logo,
.proof-cell:focus-within .pc-logo { opacity: 1; filter: none; transform: scale(1.03); }

/* Size by the BOX and let object-fit do the scaling. A percentage
   max-height on the image does not reliably bind here, it gets stretched
   to the box width and scales straight past the frame. */
.proof-cell .pc-logo img, .proof-cell .pc-logo svg {
  display: block; width: 100%; height: 100%; object-fit: contain;
}
/* artwork delivered on its own plate reads as a framed work sample */
.logo-plate { padding: 3%; }
.logo-plate img { border-radius: 2px; }
/* transparent marks float, so they get more air */
.logo-free { padding: 8% 12%; }
/* dark artwork on transparency has to be lifted off a near-black ground */
.logo-lift img, .logo-lift svg { filter: invert(1); }

/* a slow orange scan passes through on hover, Level 2 motion, restrained */
.proof-cell .pc-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--primary), transparent);
  opacity: 0; transform: translateY(0);
  pointer-events: none;
}
@media (hover: hover) {
  .proof-cell:hover .pc-scan { animation: pc-scan 1.1s var(--ease-swift); }
}
@keyframes pc-scan {
  0% { opacity: 0; transform: translateY(0); }
  20% { opacity: 0.9; }
  80% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(var(--cell-h, 200px)); }
}

.proof-cell .pc-wordmark {
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
  font-size: clamp(0.9rem, 1.7vw, 1.15rem);
  color: rgba(255, 255, 255, 0.55); text-align: center; padding-inline: 1.2rem;
  transition: color 0.4s ease;
}
.proof-cell:hover .pc-wordmark { color: #fff; }

.proof-cell .pc-kind {
  position: absolute; bottom: 0.8rem; left: 1rem; z-index: 3;
  font-family: var(--font-mono); font-size: 0.46rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--dim-fg); transition: color 0.35s ease;
}
.proof-cell:hover .pc-kind { color: var(--primary); }
.proof-cell .pc-name-sm {
  position: absolute; bottom: 0.8rem; right: 2rem; z-index: 3;
  font-family: var(--font-mono); font-size: 0.46rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: transparent;
  transition: color 0.35s ease;
  max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.proof-cell:hover .pc-name-sm { color: var(--muted-fg); }

/* concepts share the archive system so the two read as one family */
.proof-wall.concepts .pc-kind { color: rgba(255, 255, 255, 0.28); }
.proof-wall.concepts .proof-cell:hover .pc-kind { color: var(--primary); }

/* ---------- mobile: translate each experience, never remove it ---------- */

@media (max-width: 640px) {
  /* the frame turns portrait on phones so each scene keeps its full content
     instead of being clipped into a letterbox */
  .mcard .mviz { aspect-ratio: 4 / 5; }
  .vf .vf-bar, .vf .vf-foot { font-size: 0.44rem; letter-spacing: 0.14em; }
  .vf-flow .fl-nodes { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
  .vf-tg .bub, .vf-tg .draft { font-size: 0.6rem; }
  .vf-tg .tg-actions button { font-size: 0.54rem; }
  .vf-brand .es-swatches i { width: 17px; height: 23px; }
}

/* ---------- reduced motion: composed final state, no cycling ---------- */

html.rm .vf .bub, html.rm .vf .draft, html.rm .vf .tg-actions { opacity: 1; transform: none; }
html.rm .vf-brand .es-mark svg circle, html.rm .vf-brand .es-mark svg path { stroke-dashoffset: 0; }
html.rm .vf-brand .es-swatches i { opacity: 1; transform: none; }
html.rm .vf-deck .slide:first-child { opacity: 1; transform: none; }
html.rm .vf-flow .fnode { border-color: rgba(249, 117, 47, 0.3); }
html.rm .vf .shutter { display: none; }

/* ============================================================
   Fallback still, a viewfinder must never render as an empty
   frame if JS is slow, blocked, or the scene is off-screen.
   ============================================================ */
.vf-brand:not(.vf-live) .es-mark svg circle,
.vf-brand:not(.vf-live) .es-mark svg path { stroke-dashoffset: 0; }
.vf-brand:not(.vf-live) .es-word { opacity: 1; }
/* park the mark where the composed step puts it, clear of the wordmark */
.vf-brand:not(.vf-live) .es-mark { left: 86%; top: 70%; width: 13%; }
.vf-brand:not(.vf-live) .es-swatches i { opacity: 1; transform: none; }
.vf-tg:not(.vf-live) .bub,
.vf-tg:not(.vf-live) .draft { opacity: 1; transform: none; }
.vf-tg:not(.vf-live) .tg-actions { opacity: 1; }
.vf-deck:not(.vf-live) .slide:first-child { opacity: 1; transform: none; }
.vf-deck:not(.vf-live) .deck-ticks i:first-child { background: var(--tr-accent); }
.vf-flow:not(.vf-live) .fnode { border-color: rgba(249, 117, 47, 0.3); }

/* Mowr's real mark, sitting quietly in the deck frame */
.vf-deck .dk-logo {
  position: absolute; top: 2.3rem; left: 1rem; z-index: 4;
  height: 26px; opacity: 0.8;
  transition: opacity 0.4s ease;
}
.vf-deck .dk-logo img { height: 100%; width: auto; object-fit: contain; }
.vf-deck:hover .dk-logo { opacity: 1; }
@media (max-width: 640px) { .vf-deck .dk-logo { height: 20px; } }

/* ---------- archive on small screens ----------
   The desktop insets (2.1rem + 2.5rem) eat almost the whole cell once the
   16/9 box is only ~96px tall, leaving the logo a few pixels. Taller cells
   and tighter chrome give the artwork room. */
@media (max-width: 640px) {
  .proof-cell { aspect-ratio: 4 / 3; }
  .proof-cell .pc-logo { inset: 1.5rem 0.85rem 1.7rem; }
  .proof-cell .pc-id { font-size: 0.42rem; }
  .proof-cell .pc-kind { font-size: 0.42rem; bottom: 0.6rem; left: 0.7rem; }
  .proof-cell .pc-name-sm { display: none; }
  .logo-free { padding: 4% 6%; }
  .logo-plate { padding: 2%; }
}

/* Touch devices have no hover, so a permanently restrained logo would never
   resolve. The work is the proof, show it. */
@media (hover: none) {
  .proof-cell .pc-logo { opacity: 0.95; filter: none; }
  .proof-cell .pc-kind { color: var(--muted-fg); }
}

/* ============================================================
   005 · LOGO CONCEPTS, a slow rotating reel of unbuilt marks
   Real artwork in its real colours; the shutter does the cut.
   ============================================================ */
.vf-logos { background: #0b0b0b; }
.vf-logos .lg-slide {
  position: absolute; inset: 3.2rem 2rem 3.6rem;
  margin: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.9rem;
  opacity: 0; pointer-events: none;
  transition: opacity 0.12s linear;
}
.vf-logos .lg-slide.on { opacity: 1; }
.vf-logos .lg-slide img {
  max-width: 100%; max-height: 74%; width: auto; height: auto; object-fit: contain;
}
.vf-logos .lg-slide figcaption {
  font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted-fg); text-align: center;
}
.vf-logos .lg-ticks {
  position: absolute; bottom: 2.2rem; left: 1rem; display: flex; gap: 5px; z-index: 6;
}
.vf-logos .lg-ticks i { width: 14px; height: 2px; background: rgba(255, 255, 255, 0.2); transition: background 0.3s; }
.vf-logos .lg-ticks i.on { background: var(--primary); }
@media (max-width: 640px) {
  .vf-logos .lg-slide { inset: 3rem 1.2rem 3.4rem; }
  .vf-logos .lg-slide img { max-height: 68%; }
}
/* without JS, show the first mark rather than an empty frame */
.vf-logos:not(.vf-live) .lg-slide:first-of-type { opacity: 1; }
.vf-logos:not(.vf-live) .lg-ticks i:first-child { background: var(--primary); }

/* ============================================================
   ARCHIVE, monochrome silhouettes derived from the real artwork.
   They are already white-on-transparent, so tone is pure opacity:
   grey at rest, brighter on hover, like the MarkGoesPublic cell.
   ============================================================ */
.proof-cell .pc-logo.logo-mono { filter: none; opacity: 0.45; }
.proof-cell:hover .pc-logo.logo-mono,
.proof-cell:focus-within .pc-logo.logo-mono { filter: none; opacity: 0.95; transform: scale(1.03); }
.logo-mono img { width: 100%; height: 100%; object-fit: contain; }
.logo-mono { padding: 7% 10%; }
/* the Mark mark ships as black vector, so it is inverted to match the masks */
.logo-mono.logo-lift img { filter: invert(1); }
@media (hover: none) { .proof-cell .pc-logo.logo-mono { opacity: 0.7; } }

/* ============================================================
   TREND ANTICIPATION, Labs capability component
   A schematic of how the Trend Analysis Agent works: sources feed
   a signal, the agent marks the deviation while the curve is still
   climbing, and projects where it is heading. Illustrative of the
   mechanism, not a record of any client result.
   ============================================================ */
.trend-shell { border: 1px solid var(--border); border-radius: 0.75rem; overflow: hidden; }
.vf-trend {
  position: relative; background: linear-gradient(165deg, #101010, #0a0a0a);
  padding: 1rem; min-height: 20rem;
  display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem;
}
@media (max-width: 720px) { .vf-trend { grid-template-columns: 1fr; min-height: 24rem; } }

/* incoming sources */
.tr-sources { display: flex; flex-direction: column; gap: 0.55rem; align-content: start; }
.tr-sources .tr-head { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim-fg); margin-bottom: 0.2rem; }
.tr-src {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.38);
  transition: color 0.35s ease;
}
.tr-src i {
  width: 6px; height: 6px; background: var(--border-strong); flex: none;
  transition: background 0.35s ease, box-shadow 0.35s ease, transform 0.35s var(--ease-out);
}
.tr-src.on { color: rgba(255, 255, 255, 0.9); }
.tr-src.on i { background: var(--primary); box-shadow: 0 0 10px 1px rgba(249, 117, 47, 0.6); transform: scale(1.25); }

/* chart */
.tr-chart { position: relative; min-width: 0; display: flex; flex-direction: column; }
.tr-svg { width: 100%; height: auto; display: block; flex: 1; }
.tr-grid line { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.tr-band { fill: rgba(255, 255, 255, 0.035); }
.tr-baseline { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; stroke-dasharray: 3 4; }
.tr-signal {
  fill: none; stroke: var(--primary); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len, 900); stroke-dashoffset: var(--len, 900);
  transition: stroke-dashoffset 1.5s var(--ease-swift);
}
.vf-trend.drawing .tr-signal { stroke-dashoffset: 0; }
.tr-proj {
  fill: none; stroke: var(--primary); stroke-width: 1.5; stroke-dasharray: 4 4;
  opacity: 0; transition: opacity 0.5s ease;
}
.vf-trend.projecting .tr-proj { opacity: 0.7; }
.tr-marker { opacity: 0; transition: opacity 0.45s ease; }
.vf-trend.detected .tr-marker { opacity: 1; }
.tr-marker line { stroke: var(--primary); stroke-width: 1; stroke-dasharray: 2 3; }
.tr-marker circle { fill: var(--primary); }
.tr-marker text { font-family: var(--font-mono); font-size: 7px; letter-spacing: 1.4px; fill: var(--primary); text-transform: uppercase; }
.tr-peak { opacity: 0; transition: opacity 0.45s ease; }
.vf-trend.projecting .tr-peak { opacity: 1; }
.tr-peak line { stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; stroke-dasharray: 2 3; }
.tr-peak text { font-family: var(--font-mono); font-size: 7px; letter-spacing: 1.4px; fill: rgba(255, 255, 255, 0.5); text-transform: uppercase; }
.tr-lead { opacity: 0; transition: opacity 0.5s ease; }
.vf-trend.projecting .tr-lead { opacity: 1; }
.tr-lead path { stroke: rgba(249, 117, 47, 0.5); stroke-width: 1; fill: none; }
.tr-lead text { font-family: var(--font-mono); font-size: 7px; letter-spacing: 1.4px; fill: var(--primary); text-transform: uppercase; }
.tr-axis { font-family: var(--font-mono); font-size: 6.5px; letter-spacing: 1.2px; fill: var(--dim-fg); text-transform: uppercase; }

/* stage readout */
.tr-stages { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.6rem; }
.tr-stage {
  font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dim-fg);
  border: 1px solid var(--border); border-radius: 3px; padding: 0.25rem 0.45rem;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.tr-stage.on { color: var(--primary); border-color: rgba(249, 117, 47, 0.5); background: rgba(249, 117, 47, 0.08); }
.tr-note {
  font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dim-fg); margin-top: 0.55rem;
}
.tr-note b { color: var(--muted-fg); font-weight: 400; }

/* without JS, show the composed end state instead of an empty chart */
.vf-trend:not(.vf-live) .tr-signal { stroke-dashoffset: 0; }
.vf-trend:not(.vf-live) .tr-marker,
.vf-trend:not(.vf-live) .tr-peak,
.vf-trend:not(.vf-live) .tr-lead { opacity: 1; }
.vf-trend:not(.vf-live) .tr-proj { opacity: 0.7; }
.vf-trend:not(.vf-live) .tr-src { color: rgba(255, 255, 255, 0.7); }

/* the trend schematic sitting inside a Work viewfinder: leave room for the
   frame chrome top and bottom, and let the chart take the space that is left */
.sp-viz.vf-trend {
  aspect-ratio: 4 / 3;
  min-height: 0;
  padding: 2.6rem 1rem 2.9rem;
  gap: 0.9rem;
}
.sp-viz.vf-trend .tr-sources { gap: 0.45rem; }
.sp-viz.vf-trend .tr-note { margin-top: 0.45rem; }
@media (max-width: 720px) {
  .sp-viz.vf-trend { aspect-ratio: 4 / 5; grid-template-columns: 1fr; }
  .sp-viz.vf-trend .tr-sources { flex-direction: row; flex-wrap: wrap; gap: 0.4rem 0.7rem; }
  .sp-viz.vf-trend .tr-sources .tr-head { width: 100%; margin: 0; }
}

/* let the schematic actually fill its viewfinder rather than floating small */
.sp-viz.vf-trend { grid-template-columns: 7.5rem 1fr; }
.sp-viz.vf-trend .tr-svg { flex: 1; min-height: 0; height: 100%; width: 100%; }
.sp-viz.vf-trend .tr-chart { justify-content: space-between; }
@media (max-width: 720px) {
  .sp-viz.vf-trend { grid-template-columns: 1fr; }
  .sp-viz.vf-trend .tr-svg { height: auto; flex: 0 0 auto; }
}