/* Lane 1 · Home (/) · 2026-09-24 design pass. Prefix .fxhome-  Loaded only by pages/home.html. */

/* ---- Hero: living embers (canvas sits above the navy gradient, below the headline) ---- */
.fxhome-sparks{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.fxhome-flame{transition:box-shadow .9s ease}
.fxhome-flame.fxhome-lit{box-shadow:0 0 0 6px rgba(249,221,154,.22),0 0 30px 8px rgba(230,73,37,.6)}

/* ---- Trust stats: iron heats white, then quenches back to its colour ---- */
.fxhome-star{display:inline-block}
.fxhome-stats.fxhome-go .fxhome-stat{animation:fxhome-quench 2.4s cubic-bezier(.3,.6,.3,1) both;animation-delay:calc(var(--i,0) * 170ms)}
.fxhome-stats.fxhome-go .fxhome-star{animation:fxhome-ignite .7s var(--fx-ease-out) both;animation-delay:calc(520ms + var(--s,0) * 120ms)}
@keyframes fxhome-quench{
  28%{color:#ffae45;text-shadow:0 0 6px rgba(255,214,140,.95),0 0 20px rgba(249,115,82,.7),0 0 40px rgba(230,73,37,.4)}
  55%{color:#f27838;text-shadow:0 0 8px rgba(249,115,82,.55),0 0 24px rgba(230,73,37,.3),0 0 0 rgba(0,0,0,0)}
  100%{text-shadow:0 0 0 rgba(230,73,37,0),0 0 0 rgba(230,73,37,0),0 0 0 rgba(0,0,0,0)}
}
@keyframes fxhome-ignite{0%{opacity:.25;transform:scale(.55)}55%{opacity:1;transform:scale(1.28);text-shadow:0 0 12px rgba(249,221,154,.95)}100%{transform:none}}

/* ---- Forged card: live steam over the teacup, leaning toward the cursor ---- */
.fxhome-steam{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
@media (min-width:1024px){
  /* mirror .fsx-art img exactly so the 1600x600 viewBox lands on the artwork's pixels */
  .fxhome-steam{inset:auto;left:0;top:50%;width:200%;height:auto;aspect-ratio:8/3;transform:translateY(-50%)}
}
.fxhome-wisps{transform-box:view-box;transform-origin:305px 296px;transform:skewX(var(--fxhome-lean,0deg));transition:transform .7s var(--fx-ease-out)}
.fxhome-wisp,.fxhome-heart{fill:none;stroke-linecap:round;stroke-linejoin:round}
.fxhome-wisp{stroke:rgba(249,221,154,.6);stroke-width:4;stroke-dasharray:22 122;stroke-dashoffset:22;opacity:0}
.fxhome-live .fxhome-wisp{animation:fxhome-rise 4.6s linear infinite}
.fxhome-live .fxhome-wisp:nth-child(2){animation-duration:5.3s;animation-delay:-1.7s}
.fxhome-live .fxhome-wisp:nth-child(3){animation-duration:4.1s;animation-delay:-3.1s}
@keyframes fxhome-rise{0%{stroke-dashoffset:22;opacity:0}22%{opacity:.85}100%{stroke-dashoffset:-100;opacity:0}}
.fxhome-heart{stroke:rgba(249,221,154,.9);stroke-width:3.5;stroke-dasharray:100 100;stroke-dashoffset:100;opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.fxhome-heart.fxhome-go{animation:fxhome-heart 3.4s var(--fx-ease-out) both}
@keyframes fxhome-heart{
  0%{stroke-dashoffset:100;opacity:0;transform:none}
  12%{opacity:.95}
  55%{stroke-dashoffset:0;opacity:.9;transform:translateY(-16px)}
  100%{stroke-dashoffset:0;opacity:0;transform:translateY(-64px) scale(1.1)}
}
.fxhome-heart.fxhome-still{stroke-dashoffset:0;animation:fxhome-fade 3s ease both}
@keyframes fxhome-fade{0%,100%{opacity:0}25%,60%{opacity:.9}}
.fxhome-cuphit{fill:transparent;pointer-events:all}

/* ---- Service cards: ink brushed onto the paper, then the artist's seal comes down ---- */
.fx-js .fxhome-wait .fxhome-ink{
  -webkit-mask:var(--fxhome-brush) 100% 0/300% 100% no-repeat;
          mask:var(--fxhome-brush) 100% 0/300% 100% no-repeat}
.fx-js .fxhome-wait.fxhome-painted .fxhome-ink{
  -webkit-mask-position:0 0;mask-position:0 0;
  transition:-webkit-mask-position 1.5s var(--fx-ease-forge),mask-position 1.5s var(--fx-ease-forge)}
.fx-js .fxhome-wait.fxhome-done .fxhome-ink{-webkit-mask:none;mask:none}
.fxhome-art{
  --fxhome-brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-opacity='.55'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='104' height='100'/%3E%3Cpath d='M100 0H112L118 6L109 12L121 19L113 27L126 33L116 41L130 48L119 56L128 63L114 71L124 79L111 86L120 93L108 100H100Z'/%3E%3Crect x='104' width='70' height='100' fill='url(%23g)'/%3E%3Cpath fill-opacity='.6' d='M120 9h34v1.6h-34zM126 37h40v1.4h-40zM118 61h30v1.8h-30zM124 84h44v1.3h-44z'/%3E%3C/svg%3E");
  --sx:89.5%;--sy:81.6%;--sw:7.9%;--sh:14.4%}
.fxhome-seal,.fxhome-ghost{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;pointer-events:none;opacity:0;
  clip-path:inset(var(--sy) calc(100% - var(--sx) - var(--sw)) calc(100% - var(--sy) - var(--sh)) var(--sx));
  transform-origin:calc(var(--sx) + var(--sw) / 2) calc(var(--sy) + var(--sh) / 2)}
.fxhome-seal{filter:saturate(1.35)}
.fxhome-seal.fxhome-go{animation:fxhome-stamp .95s var(--fx-ease-forge) both}
@keyframes fxhome-stamp{0%{opacity:0;transform:scale(1.7) rotate(-7deg)}42%{opacity:1;transform:scale(.93) rotate(0)}56%{opacity:1;transform:scale(1.02)}100%{opacity:0;transform:none}}
.fxhome-ghost{mix-blend-mode:multiply;transform:translate(4px,-3px) rotate(-7deg);transition:opacity .8s ease}
.fxhome-ghost.fxhome-on{opacity:.6}
.fxhome-ring{position:absolute;left:calc(var(--sx) + var(--sw) / 2);top:calc(var(--sy) + var(--sh) / 2);width:calc(var(--sw) * 1.8);aspect-ratio:1;border-radius:50%;pointer-events:none;opacity:0;
  transform:translate(-50%,-50%) scale(.35);
  background:radial-gradient(circle,rgba(201,56,18,0) 44%,rgba(201,56,18,.42) 60%,rgba(201,56,18,0) 72%)}
.fxhome-ring.fxhome-go{animation:fxhome-ring .8s ease-out .36s both}
@keyframes fxhome-ring{0%{opacity:.9;transform:translate(-50%,-50%) scale(.35)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}
.fxhome-art.fxhome-thud{animation:fxhome-thud .95s both}
@keyframes fxhome-thud{0%,38%{transform:none}45%{transform:scale(.992)}58%,100%{transform:none}}
.fxhome-sealhit{position:absolute;left:var(--sx);top:var(--sy);width:var(--sw);height:var(--sh);z-index:2}

/* ---- AI section compass turns with the scroll ---- */
.fxhome-compass{will-change:transform}

@media (prefers-reduced-motion: reduce){
  .fxhome-sparks{display:none}
  .fxhome-stats .fxhome-stat,.fxhome-stats .fxhome-star,.fxhome-seal,.fxhome-ring,.fxhome-art,.fxhome-wisp{animation:none!important}
  .fxhome-wisps{transition:none;transform:none}
  .fx-js .fxhome-wait .fxhome-ink{-webkit-mask:none;mask:none}
  .fxhome-ghost{transition:none}
}