/* PREVIEW v2 2026-09-16 · site-wide motion layer, loaded on every page.
 * transform + opacity only. JS off or reduced motion: everything visible, nothing moves.
 */

/* ---------- page transitions (View Transitions API; browsers without it just navigate) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 160ms ease both; }
::view-transition-new(root) { animation: vt-in 240ms cubic-bezier(0.16,1,0.3,1) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }

/* sticky menu offset for every anchored block */
section[id], div[id], .qa-set { scroll-margin-top: 96px; }

/* ---------- hero load choreography ---------- */
.js-enh .hero .eyebrow, .js-enh .hero .hero-sub, .js-enh .hero .hero-ctas {
  animation: rise 0.9s cubic-bezier(0.16,1,0.3,1) both;
}
.js-enh .hero .eyebrow { animation-delay: 0.05s; }
.js-enh .hero .hero-sub { animation-delay: 0.45s; }
.js-enh .hero .hero-sub + .hero-sub { animation-delay: 0.55s; }
.js-enh .hero .hero-ctas { animation-delay: 0.6s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

.js-enh .hero h1.enh-split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.js-enh .hero h1.enh-split .w > span { display: inline-block; animation: maskup 1s cubic-bezier(0.16,1,0.3,1) both; animation-delay: calc(var(--i) * 65ms + 120ms); }
@keyframes maskup { from { transform: translateY(105%); } }
.js-enh .hero h1.enh-split.rv { opacity: 1; transform: none; }

/* soft ember glow on sub-page heroes, drifts with scroll */
.hero .enh-glow {
  position: absolute; pointer-events: none; z-index: 0;
  width: 620px; height: 460px; right: -80px; top: 10px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(214,95,53,0.20), rgba(214,95,53,0));
  will-change: transform;
}
.hero .wrap { position: relative; z-index: 1; }
.hero { overflow: hidden; }

/* ---------- ember lines that draw in over hairlines ---------- */
.sys, .qa, .step, .fact { position: relative; }
.js-enh .sys::before, .js-enh .qa::before, .js-enh .step::before, .js-enh .fact::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1.5px; height: 1.5px;
  background: var(--ember); transform: scaleX(0); transform-origin: left center;
  transition: transform 1.1s cubic-bezier(0.16,1,0.3,1), opacity 1.2s ease 1.2s;
  transition-delay: var(--d, 0s), calc(var(--d, 0s) + 1.1s);
}
.js-enh .sys.in::before, .js-enh .qa.in::before, .js-enh .fact.in::before { transform: scaleX(1); opacity: 0.35; }

/* ---------- how it works: a connected timeline ---------- */
.js-enh .steps .step::before { opacity: 1; transition: transform 0.9s cubic-bezier(0.16,1,0.3,1); transition-delay: calc(var(--k, 0) * 0.35s + 0.1s); }
.js-enh .steps.lit .step::before { transform: scaleX(1); }
.steps .step .sno { position: relative; }
.js-enh .steps .step::after {
  content: ""; position: absolute; left: 0; top: -5.5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--ember); box-shadow: 0 0 0 4px rgba(193,78,43,0.14);
  transform: scale(0); transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
  transition-delay: calc(var(--k, 0) * 0.35s);
}
.js-enh .steps.lit .step::after { transform: scale(1); }

/* ---------- line-drawing icons on numbered rows ---------- */
.sys .s-title { align-items: center; }
.sys .ico { flex: none; width: 30px; height: 30px; color: var(--ember); }
.sys .ico * { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.js-enh .sys .ico * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s cubic-bezier(0.65,0,0.35,1); transition-delay: calc(var(--d, 0s) + 0.25s); }
.js-enh .sys.in .ico * { stroke-dashoffset: 0; }

/* ---------- forms: fields settle in; submit gives feedback ---------- */
.js-enh .form-card .form-grid > div { opacity: 0; transform: translateY(12px); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1); transition-delay: calc(var(--k, 0) * 55ms); }
.js-enh .form-card.in .form-grid > div { opacity: 1; transform: none; }
.form-card input, .form-card select, .form-card textarea { transition: border-color 0.25s ease, box-shadow 0.25s ease; }
.form-card input:focus, .form-card select:focus, .form-card textarea:focus { box-shadow: 0 0 0 4px rgba(193,78,43,0.12); }
.btn.sending { pointer-events: none; }
.btn.sending::after {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 10px; vertical-align: -2px;
  border: 2px solid rgba(246,240,228,0.45); border-top-color: var(--cream); border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* thanks page: a check that draws itself */
.enh-check { display: block; width: 64px; height: 64px; margin-bottom: 22px; }
.enh-check circle, .enh-check path { fill: none; stroke: var(--ember); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.js-enh .enh-check circle { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 0.9s cubic-bezier(0.65,0,0.35,1) 0.1s forwards; }
.js-enh .enh-check path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 0.5s cubic-bezier(0.65,0,0.35,1) 0.85s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- scroll progress ember on long pages ---------- */
.enh-progress {
  position: fixed; left: 0; right: 0; top: 0; height: 2.5px; z-index: 150; pointer-events: none;
  background: linear-gradient(90deg, var(--ember-soft), var(--ember));
  transform: scaleX(0); transform-origin: left center;
}

/* ---------- hover: magnetic buttons and lifting cards (fine pointers only) ---------- */
@media (hover: hover) and (pointer: fine) {
  .btn { will-change: transform; }
  .btn.mag { transition: background 0.25s ease, box-shadow 0.3s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1); }
  .f-src, .build { transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.45s ease; }
  .f-src:hover, .build:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(41,34,25,0.10); }
}
/* touch: press feedback */
@media (hover: none) {
  .btn:active, .door:active, .jump a:active, .reel .snd:active { transform: scale(0.97); transition: transform 0.12s ease; }
}

/* ---------- phones: shorter, lighter ---------- */
@media (max-width: 600px) {
  .hero .enh-glow { width: 340px; height: 280px; right: -150px; top: 40px; opacity: 0.8; }
  .js-enh .hero h1.enh-split .w > span { animation-duration: 0.8s; animation-delay: calc(var(--i) * 45ms + 80ms); }
  .js-enh .steps .step::before { transition-delay: calc(var(--k, 0) * 0.2s); }
  .js-enh .steps .step::after { transition-delay: calc(var(--k, 0) * 0.2s); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .js-enh .hero .eyebrow, .js-enh .hero .hero-sub, .js-enh .hero .hero-ctas,
  .js-enh .hero h1.enh-split .w > span { animation: none !important; }
  .enh-progress, .hero .enh-glow { display: none; }
  .js-enh .sys .ico *, .js-enh .enh-check circle, .js-enh .enh-check path { stroke-dashoffset: 0 !important; animation: none !important; transition: none !important; }
  .js-enh .form-card .form-grid > div { opacity: 1; transform: none; transition: none; }
  .js-enh .sys::before, .js-enh .qa::before, .js-enh .step::before, .js-enh .fact::before, .js-enh .steps .step::after { display: none; }
  .btn.sending::after { animation: none; }
}

/* headline waits for its split (one frame), with a timed backstop if the script never runs */
.js-enh .hero h1:not(.enh-split):not(.split) { opacity: 0; animation: failsafe 0s linear 1.2s forwards; }
@keyframes failsafe { to { opacity: 1; } }