/* JACS Media motion layer (owner feedback 2026-11-14), loaded after styles.css.
   Every loop sits behind `prefers-reduced-motion: no-preference`; without it the page shows the finished, still state. */

/* ── Purple accent words: heavier, a thin outline so the serif hairlines stay readable, and a slow shine ── */
.hl {
  font-weight: 700;
  -webkit-text-stroke: 0.012em oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.55);
  background-image: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 45%, oklch(0.7 0.19 calc(var(--accent-h) - 40)) 60%, var(--accent) 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
}
.work-cta .hl {
  -webkit-text-stroke: 0.012em oklch(0.85 0.1 var(--accent-h) / 0.5);
  background-image: linear-gradient(100deg, oklch(0.82 0.14 var(--accent-h)), oklch(0.86 0.13 calc(var(--accent-h) + 48)) 50%, oklch(0.82 0.14 var(--accent-h)));
  background-size: 220% 100%;
}

/* ── Service cards: what each one says comes true on screen ── */
.service-get {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; padding-top: 14px;
  border-top: 1px dashed rgba(255, 255, 255, 0.14); font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, 0.82);
}
.service-get svg { flex: none; margin-top: 2px; color: oklch(0.75 0.15 145); }
.service-get b { color: #fff; font-weight: 600; }

/* ── Build story (Process): one website that grows week by week ── */
.process-visual { grid-template-columns: minmax(0, 1fr); }
.process-visual > .build-story { grid-area: 1 / 1; margin-bottom: 26px; min-width: 0; }
.process-visual > .pv-stage { grid-area: 2 / 1; }
.build-story { display: grid; grid-template-columns: 1fr; gap: 12px; }
.bs-browser { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); box-shadow: 0 18px 40px -28px rgba(20, 10, 40, 0.45); }
.bs-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.bs-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.bs-url { margin-left: 8px; font: 500 11.5px var(--font-mono); color: var(--ink-3); }
.bs-live { margin-left: auto; padding: 2px 9px; border-radius: 99px; font: 600 11px var(--font-mono); letter-spacing: 0.04em; color: #fff; background: oklch(0.62 0.16 145); opacity: 0; transform: scale(0.6); transition: opacity 0.4s, transform 0.5s var(--ease); }
.bs-page { display: grid; gap: 10px; padding: 14px; height: 168px; }
.bs-nav { display: flex; align-items: center; gap: 8px; }
.bs-nav b { width: 26px; height: 8px; border-radius: 3px; margin-right: auto; }
.bs-nav i { width: 30px; height: 6px; border-radius: 3px; }
.bs-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; }
.bs-copy { display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 12px; border-radius: 9px; }
.bs-copy b { display: block; height: 9px; width: 85%; border-radius: 3px; }
.bs-copy b.s { width: 58%; }
.bs-copy span { width: 64px; height: 16px; margin-top: 4px; border-radius: 99px; }
.bs-photo { border-radius: 9px; }
.bs-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bs-cards i { height: 34px; border-radius: 7px; }
/* Week 1: wireframe only (dashed outlines). */
.bs-nav b, .bs-nav i, .bs-copy, .bs-copy b, .bs-copy span, .bs-photo, .bs-cards i {
  background: transparent; outline: 1.5px dashed var(--line); outline-offset: -1.5px;
  transition: background 0.7s var(--ease), outline-color 0.5s, transform 0.6s var(--ease), opacity 0.6s;
}
/* Week 2: colour and type. */
.build-story[data-step="1"] .bs-nav b, .build-story[data-step="2"] .bs-nav b, .build-story[data-step="3"] .bs-nav b,
.build-story[data-step="1"] .bs-copy b, .build-story[data-step="2"] .bs-copy b, .build-story[data-step="3"] .bs-copy b { background: var(--ink); outline-color: transparent; }
.build-story[data-step="1"] .bs-copy span, .build-story[data-step="2"] .bs-copy span, .build-story[data-step="3"] .bs-copy span { background: var(--accent); outline-color: transparent; }
.build-story[data-step="1"] .bs-copy, .build-story[data-step="2"] .bs-copy, .build-story[data-step="3"] .bs-copy { background: var(--accent-tint); outline-color: transparent; }
.build-story[data-step="1"] .bs-nav i, .build-story[data-step="2"] .bs-nav i, .build-story[data-step="3"] .bs-nav i { background: var(--line); outline-color: transparent; }
/* Week 3: real photos and content. */
.build-story[data-step="2"] .bs-photo, .build-story[data-step="3"] .bs-photo {
  background: url("work/renterprizes-hero.jpg") center / cover; outline-color: transparent;
}
.build-story[data-step="2"] .bs-cards i, .build-story[data-step="3"] .bs-cards i { background: var(--accent-soft); outline-color: transparent; }
.build-story[data-step="2"] .bs-cards i:nth-child(2), .build-story[data-step="3"] .bs-cards i:nth-child(2) { background: var(--accent-tint); }
/* Week 4: live. */
.build-story[data-step="3"] .bs-live { opacity: 1; transform: scale(1); }
.build-story[data-step="3"] .bs-browser { border-color: oklch(0.62 0.16 145 / 0.6); box-shadow: 0 0 0 4px oklch(0.62 0.16 145 / 0.12), 0 18px 40px -28px rgba(20, 10, 40, 0.45); }
.bs-caption { display: flex; align-items: baseline; gap: 10px; font-size: 15px; color: var(--ink-2); }
.bs-week { flex: none; white-space: nowrap; font: 600 12px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.bs-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.bs-steps i { height: 4px; border-radius: 99px; background: var(--line); transition: background 0.6s var(--ease); }
.bs-steps i.on { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

/* ── Work carousel: an arrow you notice ── */
.work-controls button[aria-label="Next project"]:not(:disabled) { position: relative; border-color: var(--accent); color: var(--accent); }
.work-controls button[aria-label="Next project"]:not(:disabled)::after {
  content: ""; position: absolute; inset: -5px; border-radius: inherit; border: 2px solid var(--accent); opacity: 0; pointer-events: none;
}

/* ── "Your business could be next" card: living background and a button you can't miss ── */
.work-cta { position: relative; isolation: isolate; overflow: hidden; }
.work-cta::after {
  content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(30% 45% at 30% 70%, oklch(0.55 0.22 var(--accent-h) / 0.7), transparent 70%),
    radial-gradient(24% 36% at 70% 40%, oklch(0.62 0.2 calc(var(--accent-h) + 45) / 0.4), transparent 70%),
    radial-gradient(20% 30% at 55% 85%, oklch(0.6 0.18 calc(var(--accent-h) - 50) / 0.35), transparent 70%);
}
.work-cta .btn, .work-cta a[href="#contact"] { position: relative; }
.work-cta a[href="#contact"]::after {
  content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid rgba(255, 255, 255, 0.75); opacity: 0; pointer-events: none;
}

/* ── Care plan: a calm hospital-style monitor ── */
.health-monitor {
  margin-top: 28px; max-width: 420px; padding: 16px 18px 14px; border-radius: 16px;
  background: #07130f; color: #d7f5e6; border: 1px solid oklch(0.62 0.16 150 / 0.35);
  box-shadow: inset 0 0 30px oklch(0.6 0.16 150 / 0.12), 0 22px 44px -28px rgba(0, 30, 20, 0.6);
}
.hm-head { display: flex; align-items: center; gap: 10px; font: 600 13px var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; }
.hm-plus { position: relative; width: 18px; height: 18px; border-radius: 5px; background: oklch(0.62 0.16 150); }
.hm-plus::before, .hm-plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: #07130f; border-radius: 1px; transform: translate(-50%, -50%); }
.hm-plus::before { width: 10px; height: 3px; }
.hm-plus::after { width: 3px; height: 10px; }
.hm-status { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: oklch(0.82 0.14 150); font-weight: 500; }
.hm-ecg { display: block; width: 100%; height: 64px; margin: 10px 0 8px; }
.hm-ecg-grid { fill: none; stroke: oklch(0.62 0.16 150 / 0.14); stroke-width: 1; }
.hm-ecg-line { fill: none; stroke: oklch(0.8 0.17 150); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px oklch(0.8 0.17 150 / 0.7)); }
.hm-vitals { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hm-vitals li { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid oklch(0.62 0.16 150 / 0.16); font-size: 13.5px; }
.hm-k { font: 600 11.5px var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: oklch(0.82 0.14 150); }
.hm-v { color: #c6e9d7; }
.hm-vitals svg { color: oklch(0.8 0.17 150); }
.care-list .why-num { position: relative; }
@media (max-width: 980px) { .health-monitor { max-width: none; } }

/* ── Cursor glow (fx.js adds the elements; fine pointers only) ── */
.fx-cursor, .fx-cursor-dot { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity 0.35s, width 0.25s var(--ease), height 0.25s var(--ease), margin 0.25s var(--ease), border-color 0.25s, background 0.25s; will-change: transform; }
.fx-cursor { width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 1.5px solid oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.55); background: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.06); }
.fx-cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--accent); }
.fx-cursor.on, .fx-cursor-dot.on { opacity: 1; }
.fx-cursor.hover { width: 46px; height: 46px; margin: -23px 0 0 -23px; border-color: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.8); background: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.1); }
.fx-ripple { position: fixed; z-index: 9998; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; pointer-events: none; border: 2px solid var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  .hl { animation: hl-shine 7s ease-in-out infinite; }
  .work-cta .hl { animation: hl-shine 7s ease-in-out infinite; }

  /* Web design: the page assembles, the brand system cycles. */
  .ad-hero b { transform-origin: left; animation: ad-build 5.5s var(--ease) infinite; }
  .ad-hero b.s { animation-delay: 0.25s; }
  .ad-hero span { animation: ad-pop 5.5s var(--ease) 0.5s infinite; }
  .ad-cols i { animation: ad-pop 5.5s var(--ease) infinite; }
  .ad-cols i:nth-child(1) { animation-delay: 0.8s; }
  .ad-cols i:nth-child(2) { animation-delay: 1s; }
  .ad-cols i:nth-child(3) { animation-delay: 1.2s; }
  .ad-swatches i { animation: swatch-hop 5.5s var(--ease) infinite; }
  .ad-swatches i:nth-child(2) { animation-delay: 0.15s; }
  .ad-swatches i:nth-child(3) { animation-delay: 0.3s; }
  .ad-swatches i:nth-child(4) { animation-delay: 0.45s; }

  /* Web development: the code types itself, line by line. */
  .ac-line i { transform-origin: left; animation: code-type 6s steps(6) infinite; }
  .ac-line:nth-child(2) i { animation-delay: 0.45s; }
  .ac-line:nth-child(3) i { animation-delay: 0.9s; }
  .ac-line:nth-child(4) i { animation-delay: 1.35s; }
  .ac-line:nth-child(5) i { animation-delay: 1.8s; }
  .ac-line:nth-child(6) i { animation-delay: 2.25s; }

  /* E-commerce: an order walks from product to cart to paid. */
  .art-flow .af-node:not(.ok) .af-dot { animation: flow-step 4.5s var(--ease) infinite; }
  .art-flow .af-node:nth-of-type(2):not(.ok) .af-dot { animation-delay: 1s; }
  .art-flow .af-node.ok .af-dot { animation: flow-paid 4.5s var(--ease) infinite; }

  /* SEO: your business climbs to the top result. */
  .art-seo .as-result.top { animation: seo-climb 6s var(--ease) infinite; position: relative; z-index: 1; }
  .art-seo .as-result:not(.top) { animation: seo-drop 6s var(--ease) infinite; }

  /* Build story: a gentle shimmer while the week is being built. */
  .build-story:not([data-step="3"]) .bs-browser { background-image: linear-gradient(100deg, transparent 30%, oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.07) 50%, transparent 70%); background-size: 250% 100%; animation: bs-shimmer 2.6s linear infinite; }
  .build-story[data-step="3"] .bs-live { animation: live-beat 2s ease-in-out infinite; }

  /* Carousel arrow and CTA button: a soft ring that keeps inviting a click. */
  .work-controls button[aria-label="Next project"]:not(:disabled)::after { animation: ring-out 2.4s ease-out infinite; }
  .work-controls button[aria-label="Next project"]:not(:disabled) svg { animation: nudge-x 2.4s ease-in-out infinite; }
  .work-cta::after { animation: cta-aurora 14s ease-in-out infinite alternate; }
  .work-cta a[href="#contact"] { animation: cta-float 3.2s ease-in-out infinite; }
  .work-cta a[href="#contact"]::after { animation: ring-out 2.4s ease-out infinite; }
  .work-cta a[href="#contact"] svg { animation: nudge-x 2.4s ease-in-out infinite; }

  /* Care plan: the heartbeat sweeps, vitals check in one by one. */
  .hm-ecg-line { stroke-dasharray: 26 74; animation: ecg-sweep 2.8s linear infinite; }
  .hm-plus { animation: plus-beat 1.4s ease-in-out infinite; }
  .hm-vitals li svg { animation: vital-check 5.6s ease-out infinite; animation-delay: calc(var(--i) * 0.35s); }
}

@keyframes hl-shine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes ad-build { 0%, 8% { transform: scaleX(0); } 22%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes ad-pop { 0%, 10% { opacity: 0; transform: translateY(6px) scale(0.9); } 24%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes swatch-hop { 0%, 40%, 100% { transform: none; } 48% { transform: translateY(-8px); } 56% { transform: none; } }
@keyframes code-type { 0%, 6% { transform: scaleX(0); } 26%, 86% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes flow-step { 0%, 100% { transform: none; box-shadow: none; } 10% { transform: scale(1.12); box-shadow: 0 0 0 6px oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.3); border-color: var(--accent); } 24% { transform: none; box-shadow: none; } }
@keyframes flow-paid { 0%, 40% { transform: scale(0.85); opacity: 0.45; } 52% { transform: scale(1.15); opacity: 1; } 62%, 92% { transform: none; opacity: 1; } 100% { transform: scale(0.85); opacity: 0.45; } }
@keyframes seo-climb { 0%, 12% { transform: translateY(124px); box-shadow: none; } 40%, 88% { transform: none; box-shadow: 0 10px 26px -10px oklch(0.55 0.2 295 / 0.7); } 100% { transform: translateY(124px); } }
@keyframes seo-drop { 0%, 12% { transform: translateY(-62px); } 40%, 88% { transform: none; } 100% { transform: translateY(-62px); } }
@keyframes bs-shimmer { to { background-position: -150% 0; } }
@keyframes live-beat { 0%, 100% { box-shadow: 0 0 0 0 oklch(0.62 0.16 145 / 0.5); } 50% { box-shadow: 0 0 0 6px oklch(0.62 0.16 145 / 0); } }
@keyframes ring-out { 0% { opacity: 0.8; transform: scale(0.92); } 70%, 100% { opacity: 0; transform: scale(1.25); } }
@keyframes nudge-x { 0%, 60%, 100% { transform: none; } 75% { transform: translateX(4px); } }
@keyframes cta-aurora { 0% { transform: translate(-6%, 3%) rotate(0deg); } 100% { transform: translate(6%, -4%) rotate(8deg); } }
@keyframes cta-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes ecg-sweep { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes plus-beat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.18); } 28% { transform: scale(1); } 42% { transform: scale(1.1); } }
@keyframes vital-check { 0%, 4% { opacity: 0; transform: scale(0.4); } 12%, 90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

/* ── Higgsfield loops (fx.js adds the <video> elements) ── */
.fx-loop { pointer-events: none; transition: opacity 0.45s ease; }
.work-cta .cta-video { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }
.services-band .band-video {
  position: absolute; z-index: -1; left: 0; top: 0; width: 100%; height: 460px; object-fit: cover; opacity: 0.45;
  -webkit-mask-image: linear-gradient(#000 45%, transparent 100%); mask-image: linear-gradient(#000 45%, transparent 100%);
}
.fx-loop.dip { opacity: 0.15 !important; }

/* ── Web design card: brand system that changes per client (fx.js sets --sw1..4, --brand-hero, --brand-btn) ── */
.art-design.cycling .ad-swatches i:nth-child(1) { background: var(--sw1); }
.art-design.cycling .ad-swatches i:nth-child(2) { background: var(--sw2); }
.art-design.cycling .ad-swatches i:nth-child(3) { background: var(--sw3); }
.art-design.cycling .ad-swatches i:nth-child(4) { background: var(--sw4); }
.art-design.cycling .ad-swatches i { transition: background 0.5s var(--ease); }
.art-design.cycling .ad-hero { background: var(--brand-hero); transition: background 0.5s var(--ease); }
.art-design.cycling .ad-hero span { background: var(--brand-btn); transition: background 0.5s var(--ease); }
.art-design .ad-type { min-width: 2.4em; min-height: 1em; }
.ad-label[data-brand]::after { content: attr(data-brand); display: block; margin-top: 5px; font-size: 13px; letter-spacing: 0.04em; color: #fff; }
.art-design.swap .ad-type { animation: type-swap 0.42s var(--ease); }
.art-design.swap .ad-swatches { animation: swatch-swap 0.5s var(--ease); }
@keyframes type-swap { 0% { opacity: 1; transform: none; filter: none; } 40% { opacity: 0; transform: translateY(-10px) scale(0.92); filter: blur(4px); } 60% { opacity: 0; transform: translateY(10px) scale(0.92); filter: blur(4px); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes swatch-swap { 0%, 100% { transform: none; } 45% { transform: translateY(-6px) rotate(-6deg); } }

/* ── Web development card: live code (fx.js types it) ── */
.art-code.live .ac-line, .art-code.live .ac-caret { display: none; }
.ac-live { font: 11.5px/1.7 var(--font-mono); color: rgba(255, 255, 255, 0.82); white-space: pre; overflow: hidden; min-height: 120px; }
.ac-live .ac-l { overflow: hidden; text-overflow: clip; }
.ac-live .k { color: oklch(0.78 0.14 295); }
.ac-live .a { color: oklch(0.82 0.12 190); }
.ac-live .s { color: oklch(0.84 0.13 85); }
.ac-live .c { color: rgba(255, 255, 255, 0.42); }
.ac-live .ok { color: oklch(0.8 0.16 150); font-weight: 600; }
.ac-cur { display: inline-block; width: 7px; height: 1.05em; margin-left: 1px; vertical-align: -0.15em; background: var(--accent); animation: blink 1s steps(1) infinite; }

/* Contact form trap field: off screen, never seen by people. */
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }