@import '../tokens.css?v=349798aa';

/* ── Artpilot mark-loop card ───────────────────────────────────────
 * Opt-in page stylesheet — pair with js/page/artpilot-mark-loop.js,
 * which drives the loop by toggling data-bc-state. Include this
 * <link> only on pages that render the .ap-mark-loop card. */

/* ── Artpilot case card — looping mark construction ───────────────
 * Card-scale reuse of the badge-construct kinetic specimen from the
 * Artpilot case study. The mark zooms in from a blurred pull-focus
 * pose, the grid/diagonals/circles snap into place around it, holds,
 * then reverses. Driven by js/artpilot-mark-loop.js toggling
 * data-bc-state on the panel. Background is the Artpilot brand red
 * in both themes — same precedent as the badge-construct slide. */
.ap-mark-loop {
  --ap-mark: #DB3334;
  --ap-guide: var(--color-text-tertiary);
  /* Smooth in-out for synchronized transitions; the soft ease-out
   * is reserved for arrivals (outline, fill, zoom). */
  --ap-ease: cubic-bezier(0.45, 0, 0.55, 1);
  --ap-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--color-surface-tertiary);
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  transition: transform var(--duration-luxury) var(--ease-smooth);
}

/* Continuous very-slow breathe on the whole construction. Imperceptible
 * frame-to-frame — drives quiet engagement across the loop. Runs
 * independent of the data-bc-state choreography because it lives on the
 * outer SVG, not the inner master/badge groups. */
.ap-mark-loop-svg {
  display: block;
  width: 58%;
  max-width: 240px;
  height: auto;
  transform-origin: 50% 50%;
  animation: ap-mark-breathe 16s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
  will-change: transform;
}

@keyframes ap-mark-breathe {
  from { transform: scale(1); }
  to   { transform: scale(1.035); }
}

/* Cycle-synced overall zoom. Sits on top of the breathe (which lives
 * on the SVG) and the final mark zoom (which lives on the badge group)
 * — so the whole construction slowly scales up across each cycle, the
 * mark lifts a touch at the end, and the breathe pulses through it
 * all. Three subtle motions compounding into one quiet pull-in. */
.ap-mark-loop-master {
  transform-box: view-box;
  transform-origin: 50% 50%;
  transform: scale(1);
  /* Exit transition (state → "") — gentle return to rest. */
  transition: transform 1400ms var(--ap-ease);
}

.ap-mark-loop[data-bc-state="badge"] .ap-mark-loop-master {
  transform: scale(1.04);
  transition: transform 2400ms var(--ap-ease);
}

.ap-mark-loop[data-bc-state="filled"] .ap-mark-loop-master {
  transform: scale(1.085);
  transition: transform 2200ms var(--ap-ease);
}

/* ── Guide lines ─────────────────────────────────────────────────────
 * Choreography across three states:
 *   ""       → everything hidden
 *   "badge"  → guides cascade in (diagonals → horizontals → verticals
 *              & circles), then the mark outline appears
 *   "filled" → all guides fade out together as the mark fills in solid
 *
 * Default transition is the exit transition (used when state returns
 * to ""). Each state below overrides it to fit that phase. */
.ap-mark-loop-grid line,
.ap-mark-loop-diag line,
.ap-mark-loop-circ circle {
  fill: none;
  stroke: var(--ap-guide);
  stroke-opacity: 0.55;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 560ms var(--ap-ease);
}

.ap-mark-loop-grid line { stroke-dasharray: 1 5; }
.ap-mark-loop-diag line { stroke-dasharray: 1 5; }
.ap-mark-loop-circ circle { stroke-dasharray: 1 4; }

/* Entry stagger — diagonals first, then horizontals (top to bottom),
 * then verticals overlapping with circles ("verticals and radius"). */
.ap-mark-loop-diag line:nth-child(1)   { --d: 0ms; }
.ap-mark-loop-diag line:nth-child(2)   { --d: 80ms; }
.ap-mark-loop-grid-h line:nth-child(1) { --d: 280ms; }
.ap-mark-loop-grid-h line:nth-child(2) { --d: 340ms; }
.ap-mark-loop-grid-h line:nth-child(3) { --d: 400ms; }
.ap-mark-loop-grid-h line:nth-child(4) { --d: 460ms; }
.ap-mark-loop-grid-h line:nth-child(5) { --d: 520ms; }
.ap-mark-loop-grid-h line:nth-child(6) { --d: 580ms; }
.ap-mark-loop-grid-v line:nth-child(1) { --d: 680ms; }
.ap-mark-loop-grid-v line:nth-child(2) { --d: 740ms; }
.ap-mark-loop-grid-v line:nth-child(3) { --d: 800ms; }
.ap-mark-loop-grid-v line:nth-child(4) { --d: 860ms; }
.ap-mark-loop-grid-v line:nth-child(5) { --d: 920ms; }
.ap-mark-loop-circ circle:nth-child(1) { --d: 720ms; }
.ap-mark-loop-circ circle:nth-child(2) { --d: 800ms; }
.ap-mark-loop-circ circle:nth-child(3) { --d: 880ms; }

/* Entry to "badge" — staggered fade-in per line. */
.ap-mark-loop[data-bc-state="badge"] .ap-mark-loop-grid line,
.ap-mark-loop[data-bc-state="badge"] .ap-mark-loop-diag line,
.ap-mark-loop[data-bc-state="badge"] .ap-mark-loop-circ circle {
  opacity: 1;
  transition: opacity 520ms var(--ap-ease) var(--d, 0ms);
}

/* Transition to "filled" — every guide fades out together. */
.ap-mark-loop[data-bc-state="filled"] .ap-mark-loop-grid line,
.ap-mark-loop[data-bc-state="filled"] .ap-mark-loop-diag line,
.ap-mark-loop[data-bc-state="filled"] .ap-mark-loop-circ circle {
  opacity: 0;
  transition: opacity 720ms var(--ap-ease);
}

/* ── Mark — outline then fill, then a small zoom before exit ────────
 * Outline starts as a light grey inside-only border in the same key as
 * the construction dashes (clip-path on the path keeps the stroke
 * inside the silhouette). Once the guides fade out, the stroke colour
 * transitions to brand red and the fill comes in solid. Mark sits at
 * scale(1) through the whole construction so the outline lines up with
 * the grid; only once the guides are gone does it zoom in a touch. */
.ap-mark-loop-badge {
  transform-box: view-box;
  transform-origin: 50% 50%;
  transform: scale(1);
  transition: transform 720ms var(--ap-ease);
}

.ap-mark-loop-frame,
.ap-mark-loop-wing {
  fill: var(--ap-mark);
  fill-opacity: 0;
  stroke: var(--ap-guide);
  stroke-width: 3;
  stroke-opacity: 0;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  /* Default/exit transition — used when returning to state "" */
  transition:
    fill-opacity   560ms var(--ap-ease),
    stroke-opacity 560ms var(--ap-ease),
    stroke         560ms var(--ap-ease);
}

/* "badge" — light grey inside-border appears once the guides have
 * settled. Same stroke colour as the dashes for visual continuity. */
.ap-mark-loop[data-bc-state="badge"] .ap-mark-loop-frame,
.ap-mark-loop[data-bc-state="badge"] .ap-mark-loop-wing {
  stroke: var(--ap-guide);
  stroke-opacity: 0.55;
  fill-opacity: 0;
  transition:
    stroke-opacity 720ms var(--ap-ease-out) 1440ms,
    stroke         720ms var(--ap-ease-out) 1440ms,
    fill-opacity   560ms var(--ap-ease);
}

/* "filled" — guides fade out, the inside-border warms from grey to
 * red and the fill comes in solid behind it. */
.ap-mark-loop[data-bc-state="filled"] .ap-mark-loop-frame,
.ap-mark-loop[data-bc-state="filled"] .ap-mark-loop-wing {
  fill-opacity: 1;
  stroke: var(--ap-mark);
  stroke-opacity: 1;
  transition:
    fill-opacity   760ms var(--ap-ease-out),
    stroke         600ms var(--ap-ease),
    stroke-opacity 600ms var(--ap-ease);
}

/* Barely-perceptible final lift — most of the cycle's zoom now lives
 * on the master group above; this just nudges the mark a hair after
 * the fill settles so the moment doesn't go entirely still. */
.ap-mark-loop[data-bc-state="filled"] .ap-mark-loop-badge {
  transform: scale(1.008);
  transition: transform 880ms var(--ap-ease-out) 1200ms;
}

/* Reduced motion — park on the final state, no looping construction
 * and no continuous breathe. */
@media (prefers-reduced-motion: reduce) {
  .ap-mark-loop-svg {
    animation: none;
  }
  .ap-mark-loop-master,
  .ap-mark-loop-badge,
  .ap-mark-loop-frame,
  .ap-mark-loop-wing,
  .ap-mark-loop-grid line,
  .ap-mark-loop-diag line,
  .ap-mark-loop-circ circle {
    transition: none;
  }
}

/* Opt the card's media surface into the shared card-hover scale
 * (the base .case-card hover system lives in styles.css). */
.case-card:hover .case-media > .ap-mark-loop {
  transform: scale(1.02);
}