/* fx/services.css (lane 8: services pages). Prefix .fxsv- */

/* ── Ink-draw icons: JS adds .fxsv-ink below the fold; without JS the icons are simply there ── */
.fxsv-ink path,.fxsv-ink circle,.fxsv-ink rect,.fxsv-ink line{stroke-dasharray:1;stroke-dashoffset:1}
.fxsv-ink{filter:blur(.4px)}
.fxsv-ink.fxsv-drawn{filter:none;transition:filter 1.6s var(--fx-ease-out) calc(var(--fxsv-i,0)*90ms + 500ms)}
.fxsv-ink.fxsv-drawn path,.fxsv-ink.fxsv-drawn circle,.fxsv-ink.fxsv-drawn rect,.fxsv-ink.fxsv-drawn line{
  stroke-dashoffset:0;transition:stroke-dashoffset 1.25s var(--fx-ease-out) calc(var(--fxsv-i,0)*90ms + 120ms)}
.fxsv-tile{transform:scale(.84);opacity:.55}
.fxsv-tile.fxsv-drawn{transform:none;opacity:1;transition:transform .7s var(--fx-ease-out) calc(var(--fxsv-i,0)*90ms),opacity .7s ease calc(var(--fxsv-i,0)*90ms)}

/* ── Heat: an ember glow that follows the pointer across a card ── */
.fxsv-heat{position:relative;isolation:isolate;overflow:hidden}
.fxsv-heat::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .45s ease;
  background:radial-gradient(280px circle at var(--fxsv-x,50%) var(--fxsv-y,40%),rgba(249,115,82,.24),rgba(230,73,37,.08) 42%,transparent 72%)}
.fxsv-heat:hover::after,.fxsv-heat:focus-visible::after{opacity:1}

/* ── Ensō: a brush circle around each process number ── */
.fxsv-enso-cell{position:relative}
.fxsv-enso{position:absolute;inset:-7px;width:calc(100% + 14px);height:calc(100% + 14px);pointer-events:none;overflow:visible;
  transform:rotate(calc(var(--fxsv-i,0)*67deg - 100deg))}
.fxsv-enso path{fill:none;stroke:var(--fx-ember);stroke-linecap:round;stroke-width:2.4;stroke-dasharray:.9 1;stroke-dashoffset:0;
  transition:stroke-dasharray 1.1s var(--fx-ease-out)}
.fxsv-enso path+path{stroke-width:1.1;opacity:.45;stroke-dasharray:.62 1}
.fxsv-enso-pre .fxsv-enso path{stroke-dashoffset:.9}
.fxsv-enso-pre.fxsv-drawn .fxsv-enso path{stroke-dashoffset:0;transition:stroke-dashoffset 1.3s var(--fx-ease-out) calc(var(--fxsv-i,0)*160ms + 150ms),stroke-dasharray 1.1s var(--fx-ease-out)}
/* hidden: rest the pointer on a step and its circle closes */
.fxsv-enso-cell:hover .fxsv-enso path:first-child{stroke-dasharray:1 0;transition-delay:.9s}

/* ── Forged vs WordPress: rows settle, each Forged cell glows like quenched iron ── */
.fxsv-settle .fvw-cmp-row{opacity:0;transform:translateY(12px)}
.fxsv-settle.fxsv-on .fvw-cmp-row{opacity:1;transform:none;
  transition:opacity .6s var(--fx-ease-out),transform .75s var(--fx-ease-out);transition-delay:calc(var(--fxsv-i,0)*85ms)}
.fxsv-settle .fvw-cmp-f{position:relative}
.fxsv-settle .fvw-cmp-f::before{content:"";position:absolute;left:-4px;top:0;bottom:0;width:4px;opacity:0;pointer-events:none;
  background:linear-gradient(var(--fx-gold),var(--fx-spark));box-shadow:0 0 14px 2px rgba(249,115,82,.65)}
.fxsv-settle.fxsv-on .fvw-cmp-f::before{animation:fxsv-quench 1.5s ease-out both;animation-delay:calc(var(--fxsv-i,0)*85ms + 280ms)}
@keyframes fxsv-quench{0%{opacity:0}16%{opacity:1}100%{opacity:0}}

/* ── Blueprint toggle (hero) ── */
.fxsv-bp-row{margin-top:1.4rem}
html:not(.fx-js) .fxsv-bp-row{visibility:hidden}
.fxsv-bp-toggle{display:inline-flex;align-items:center;gap:.55rem;background:none;border:1px dashed rgba(249,221,154,.55);color:var(--fx-gold);
  font:500 .8125rem/1 var(--fx-sans);letter-spacing:.04em;padding:.6rem 1rem;border-radius:999px;cursor:pointer;
  transition:border-color var(--fx-fast),background-color var(--fx-fast)}
.fxsv-bp-toggle:hover{border-color:var(--fx-gold);background:rgba(249,221,154,.08)}
.fxsv-bp-toggle:focus-visible{outline:2px solid var(--fx-gold);outline-offset:3px}
.fxsv-bp-toggle svg{width:16px;height:16px;flex:none}
.fxsv-bp-toggle[data-on] {border-style:solid;background:rgba(249,221,154,.12)}

/* ── Blueprint overlay ── */
.fxsv-bp{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:45;overflow:hidden}
.fxsv-bp-base{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(230,73,37,.10) 0 1px,transparent 1px var(--fxsv-rh,8px))}
.fxsv-bp-cols{position:absolute;top:0;bottom:0;display:grid}
.fxsv-bp-cols i{background:rgba(230,73,37,.075);border-left:1px solid rgba(230,73,37,.32);border-right:1px solid rgba(230,73,37,.32);transform-origin:top}
.fxsv-bp-on .fxsv-bp-cols i{animation:fxsv-sweep .8s var(--fx-ease-out) both;animation-delay:calc(var(--fxsv-i,0)*35ms)}
@keyframes fxsv-sweep{from{transform:scaleY(0)}to{transform:none}}
.fxsv-bp-m{position:absolute;width:0;border-left:1px solid var(--fx-flame)}
.fxsv-bp-m::before,.fxsv-bp-m::after{content:"";position:absolute;left:-5px;width:9px;border-top:1px solid var(--fx-flame)}
.fxsv-bp-m::before{top:0}.fxsv-bp-m::after{bottom:0}
.fxsv-bp-tag{position:absolute;white-space:nowrap;font:500 11px/1 var(--fx-sans);letter-spacing:.03em;color:var(--fx-gold);
  background:var(--fx-navy);border:1px solid rgba(249,221,154,.45);border-radius:4px;padding:4px 6px}
.fxsv-bp-m .fxsv-bp-tag{left:8px;top:50%;transform:translateY(-50%)}
.fxsv-bp-box{position:absolute;outline:1px dashed rgba(249,221,154,.7);background:rgba(249,221,154,.06)}
.fxsv-bp-box .fxsv-bp-tag{right:-1px;bottom:100%;margin-bottom:3px}
.fxsv-bp-p .fxsv-bp-tag{bottom:auto;top:100%;margin:3px 0 0}
.fxsv-bp-on .fxsv-bp-tag,.fxsv-bp-on .fxsv-bp-box{animation:fxsv-fade .5s ease both .35s}
@keyframes fxsv-fade{from{opacity:0}to{opacity:1}}
.fxsv-bp-legend{position:fixed;right:16px;bottom:16px;z-index:61;pointer-events:auto;max-width:min(300px,calc(100vw - 32px));
  background:rgba(20,17,66,.96);color:#fff;border:1px solid rgba(249,221,154,.5);border-radius:10px;padding:.85rem 1rem .9rem;
  font:300 12.5px/1.55 var(--fx-sans);box-shadow:0 10px 30px rgba(12,10,46,.45)}
.fxsv-bp-legend b{display:block;font:600 11px/1 var(--fx-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--fx-gold);margin-bottom:.55rem}
.fxsv-bp-legend dl{display:grid;grid-template-columns:auto 1fr;gap:.1rem .8rem;margin:0}
.fxsv-bp-legend dt{color:var(--fx-smoke)}.fxsv-bp-legend dd{margin:0;font-weight:500}
.fxsv-bp-legend small{display:block;margin-top:.55rem;color:var(--fx-smoke);font-style:italic}
.fxsv-bp-legend button{position:absolute;top:.45rem;right:.45rem;width:28px;height:28px;border:0;border-radius:6px;background:none;color:var(--fx-gold);font-size:18px;line-height:1;cursor:pointer}
.fxsv-bp-legend button:hover{background:rgba(249,221,154,.12)}
.fxsv-bp-legend button:focus-visible{outline:2px solid var(--fx-gold);outline-offset:1px}

/* ── Hidden: type "anvil" ── */
.fxsv-anvil{position:fixed;left:50%;top:38%;z-index:70;pointer-events:none;display:flex;align-items:center;gap:.7rem;
  transform:translate(-50%,-50%);background:var(--fx-navy);color:var(--fx-gold);border:1px solid rgba(249,221,154,.5);
  border-radius:999px;padding:.6rem 1.15rem .6rem .8rem;box-shadow:0 14px 40px rgba(12,10,46,.5)}
.fxsv-anvil svg{width:40px;height:26px;fill:var(--fx-gold)}
.fxsv-anvil span{font:italic 400 1.35rem/1 var(--fx-serif)}
.fxsv-anvil small{display:block;font:300 .75rem/1.3 var(--fx-sans);color:var(--fx-smoke);font-style:normal;margin-top:.2rem}
.fxsv-spark{position:fixed;width:5px;height:5px;border-radius:50%;z-index:71;pointer-events:none;
  background:radial-gradient(circle,#fff6d8 0,var(--fx-gold) 40%,var(--fx-spark) 100%);box-shadow:0 0 6px 1px rgba(249,115,82,.8);animation:fxsv-fly 1s cubic-bezier(.2,.7,.4,1) both}
.fxsv-anvil{animation:fxsv-drop .52s cubic-bezier(.5,0,.75,0) both,fxsv-out 2.6s ease .52s forwards}
.fxsv-anvil.fxsv-still{animation:fxsv-still 2.4s ease both}
@keyframes fxsv-drop{from{transform:translate(-50%,-160%);opacity:0}55%{transform:translate(-50%,-50%);opacity:1}70%{transform:translate(-50%,-44%)}to{transform:translate(-50%,-50%);opacity:1}}
@keyframes fxsv-out{80%{opacity:1}to{opacity:0}}
@keyframes fxsv-still{from{opacity:0}15%{opacity:1}80%{opacity:1}to{opacity:0}}
@keyframes fxsv-fly{55%{transform:translate(calc(var(--dx) * .7),var(--dy));opacity:1}to{transform:translate(var(--dx),calc(var(--dy) + 70px));opacity:0}}

@media (prefers-reduced-motion: reduce){
  .fxsv-bp-on .fxsv-bp-cols i,.fxsv-bp-on .fxsv-bp-tag,.fxsv-bp-on .fxsv-bp-box{animation:none}
  .fxsv-enso path{transition:none!important}
}
@media print{
  .fxsv-settle .fvw-cmp-row,.fxsv-tile{opacity:1!important;transform:none!important}
  .fxsv-ink path,.fxsv-ink circle,.fxsv-ink rect,.fxsv-ink line,.fxsv-enso path{stroke-dashoffset:0!important}
  .fxsv-bp,.fxsv-bp-legend,.fxsv-bp-row,.fxsv-anvil{display:none!important}
}