/* fx/pricing.css — lane 9 (pricing + estimate). Prefix .fxpr-
   Signature: prices arrive with a hanko-stamp press. Living: edge heat that follows the hand,
   ink ticks, coal-glow focus, a submit button that warms as the form fills.
   Hidden: type "fair" (or triple-tap a stamped price). */

/* ── Edge heat: iron at rest, ember where the hand is ─────────────────── */
.fxpr-heat{position:relative;isolation:isolate;--fxpr-x:50%;--fxpr-y:100%}
.fxpr-heat::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;z-index:2;
  background:radial-gradient(260px circle at var(--fxpr-x) var(--fxpr-y),var(--fx-gold) 0%,var(--fx-spark) 18%,var(--fx-ember) 34%,rgba(51,51,51,.28) 62%,rgba(51,51,51,.12) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:0;transition:opacity var(--fx-med) var(--fx-ease-out);
}
.fxpr-heat::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:radial-gradient(420px circle at var(--fxpr-x) var(--fxpr-y),rgba(230,73,37,.05),rgba(230,73,37,0) 60%);
  box-shadow:inset 0 0 22px rgba(230,73,37,.11);
  opacity:0;transition:opacity var(--fx-med) var(--fx-ease-out);
}
.fxpr-heat:hover::before,.fxpr-heat:focus-within::before,.fxpr-heat:focus-visible::before,
.fxpr-heat:hover::after,.fxpr-heat:focus-within::after,.fxpr-heat:focus-visible::after{opacity:1}
.fxpr-heat--dark::after{background:radial-gradient(420px circle at var(--fxpr-x) var(--fxpr-y),rgba(249,221,154,.10),rgba(249,221,154,0) 60%);box-shadow:inset 0 0 30px rgba(230,73,37,.30)}
.fxpr-heat:focus-visible{outline:3px solid var(--fx-ember-deep);outline-offset:4px}
.fxpr-heat > *{position:relative;z-index:3}
.fxpr-heat > .absolute{position:absolute}

/* A single spark that leaves a card you have rested on */
.fxpr-spark{position:absolute;z-index:4;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;pointer-events:none;
  background:var(--fx-gold);box-shadow:0 0 6px 2px rgba(249,115,82,.85),0 0 14px 4px rgba(230,73,37,.45);
  animation:fxpr-spark 1.6s var(--fx-ease-out) forwards}
@keyframes fxpr-spark{
  0%{transform:translate(0,0) scale(1);opacity:1}
  60%{opacity:.9}
  100%{transform:translate(var(--fxpr-dx,18px),-90px) scale(.2);opacity:0}
}

/* ── Hanko stamp press on prices (text is readable at every frame) ──── */
.fxpr-stamp{position:relative;display:inline-block;align-self:flex-start;transform-origin:30% 70%}
.fxpr-stamp::after{
  content:"";position:absolute;top:50%;right:-2.7rem;width:1.85rem;height:1.85rem;margin-top:-1rem;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3Cfilter id='r' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='2.2'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23r)'%3E%3Crect x='3' y='3' width='34' height='34' rx='3.5' fill='%23d4302a'/%3E%3Crect x='6.6' y='6.6' width='26.8' height='26.8' rx='1.6' fill='none' stroke='%23fff' stroke-width='1.1' opacity='.85'/%3E%3Cpath fill='%23fff' d='M20 9.2c-2.7 3.5-5.8 6.3-5.8 11 0 3.8 2.6 6.9 5.8 6.9s5.8-3.1 5.8-6.9c0-1.9-.8-3.5-1.7-4.9-.3 1.9-1.2 3.1-2.5 3.7.7-3.5-.2-6.5-1.6-9.8z'/%3E%3Cpath fill='%23fff' d='M12.4 29.2h15.2v1.9H12.4z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  mix-blend-mode:multiply;opacity:.72;transform:rotate(-6deg);
}
.fxpr-armed .fxpr-stamp::after,.fxpr-armed.fxpr-stamp::after{opacity:0;transform:rotate(-14deg) scale(1.9)}
.fxpr-pressed .fxpr-stamp,.fxpr-pressed.fxpr-stamp{animation:fxpr-press .52s var(--fx-ease-forge) both}
.fxpr-pressed .fxpr-stamp::after,.fxpr-pressed.fxpr-stamp::after{animation:fxpr-seal .7s var(--fx-ease-forge) both}
@keyframes fxpr-press{0%{transform:none}38%{transform:scale(.955) translateY(1px)}70%{transform:scale(1.02)}100%{transform:none}}
@keyframes fxpr-seal{
  0%{opacity:0;transform:rotate(-14deg) scale(1.9)}
  45%{opacity:.95;transform:rotate(-6deg) scale(.93)}
  70%{opacity:.85;transform:rotate(-6deg) scale(1.03)}
  100%{opacity:.72;transform:rotate(-6deg) scale(1)}
}

/* Small inline amounts inside list items */
.fxpr-amt{display:inline-block;font-weight:500;color:var(--fx-navy);background:linear-gradient(rgba(239,56,58,.15),rgba(239,56,58,.15)) 0 92%/0 42% no-repeat;padding:0 .12em;margin:0 -.12em;transition:background-size var(--fx-slow) var(--fx-ease-out)}
.fxpr-pressed .fxpr-amt{animation:fxpr-press .5s var(--fx-ease-forge) both;background-size:100% 42%}
.fxpr-pressed li:nth-child(2) .fxpr-amt{animation-delay:.09s;transition-delay:.09s}
.fxpr-pressed li:nth-child(3) .fxpr-amt{animation-delay:.18s;transition-delay:.18s}
.fxpr-pressed li:nth-child(4) .fxpr-amt{animation-delay:.27s;transition-delay:.27s}

/* ── Ink ticks ──────────────────────────────────────────────────────── */
.fxpr-item{display:flex;align-items:flex-start;gap:.5rem}
.fxpr-tick{flex:0 0 auto;width:.95rem;height:.95rem;margin-top:.05rem;color:var(--fx-ember-deep);overflow:visible}
.fxpr-tick--lg{width:1.25rem;height:1.25rem;margin-top:.125rem}
.fxpr-tick path{stroke-dasharray:1;stroke-dashoffset:0}
.fxpr-armed .fxpr-tick path{stroke-dashoffset:1}
.fxpr-pressed .fxpr-tick path{stroke-dashoffset:0;transition:stroke-dashoffset .55s cubic-bezier(.6,0,.2,1)}
.fxpr-pressed li:nth-child(2) .fxpr-tick path{transition-delay:.12s}
.fxpr-pressed li:nth-child(3) .fxpr-tick path{transition-delay:.24s}
.fxpr-pressed li:nth-child(4) .fxpr-tick path{transition-delay:.36s}

/* ── Estimate form: coal focus, warming submit ───────────────────────── */
.fxpr-form input:focus,.fxpr-form select:focus,.fxpr-form textarea:focus{
  outline:none;border-color:var(--fx-ember-deep);
  box-shadow:0 0 0 2px var(--fx-ember-deep),0 0 0 5px rgba(230,73,37,.16),0 6px 22px -8px rgba(230,73,37,.55);
  animation:fxpr-coal 2.8s ease-in-out infinite;
}
@keyframes fxpr-coal{
  0%,100%{box-shadow:0 0 0 2px var(--fx-ember-deep),0 0 0 5px rgba(230,73,37,.14),0 6px 22px -8px rgba(230,73,37,.45)}
  50%{box-shadow:0 0 0 2px var(--fx-ember),0 0 0 6px rgba(249,115,82,.22),0 8px 28px -8px rgba(239,56,58,.65)}
}
.fxpr-form label{transition:color var(--fx-fast) ease}
.fxpr-form div:focus-within > label{color:var(--fx-ember-deep)}

.fxpr-submit{position:relative;isolation:isolate;overflow:hidden;--fxpr-heat:0}
.fxpr-submit::before{ /* cool iron cover that recedes as the form fills */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:#2c2a3d;
  transform-origin:100% 50%;transform:scaleX(calc(1 - (.14 + .86 * var(--fxpr-heat))));
  transition:transform .7s var(--fx-ease-out);
}
.fxpr-submit::after{ /* the molten seam at the edge of the heat */
  content:"";position:absolute;top:0;bottom:0;left:0;width:3px;z-index:-1;pointer-events:none;
  background:linear-gradient(var(--fx-gold),var(--fx-spark));box-shadow:0 0 10px 2px rgba(249,115,82,.7);
  transform:translateX(calc((.14 + .86 * var(--fxpr-heat)) * var(--fxpr-w,240px) - 2px));
  transition:transform .7s var(--fx-ease-out),opacity .4s ease;
}
.fxpr-submit.fxpr-hot::after{opacity:0}
.fxpr-submit.fxpr-hot{box-shadow:0 0 0 0 rgba(230,73,37,.5);animation:fxpr-ready 2.4s ease-in-out infinite}
@keyframes fxpr-ready{0%,100%{box-shadow:0 8px 24px -10px rgba(230,73,37,.55)}50%{box-shadow:0 10px 34px -8px rgba(239,56,58,.85)}}
.fxpr-submit:focus-visible{outline:3px solid var(--fx-navy);outline-offset:3px}

/* ── Hidden: "fair" ────────────────────────────────────────────────── */
.fxpr-fair .fxpr-stamp::after{filter:hue-rotate(28deg) saturate(1.4) brightness(1.15)}
.fxpr-fair .fxpr-amt{background-image:linear-gradient(rgba(249,221,154,.85),rgba(249,221,154,.85));background-size:100% 42%}
.fxpr-scale{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;align-items:center;gap:.75rem;max-width:min(360px,calc(100vw - 36px));
  padding:.8rem 1.1rem .8rem .8rem;border-radius:14px;background:rgba(20,17,66,.94);color:#fff;
  box-shadow:0 18px 40px -16px rgba(12,10,46,.7);font:400 .9rem/1.35 var(--fx-sans);
  opacity:0;transform:translateY(10px);transition:opacity .45s var(--fx-ease-out),transform .45s var(--fx-ease-out);pointer-events:none}
.fxpr-scale.fxpr-show{opacity:1;transform:none}
.fxpr-scale svg{flex:0 0 auto;width:54px;height:44px;overflow:visible}
.fxpr-scale .fxpr-beam{transform-origin:27px 13px;animation:fxpr-tip 2.2s var(--fx-ease-out) both}
.fxpr-scale .fxpr-pan-l{animation:fxpr-pan-l 2.2s var(--fx-ease-out) both}
.fxpr-scale .fxpr-pan-r{animation:fxpr-pan-r 2.2s var(--fx-ease-out) both}
.fxpr-scale em{font-family:var(--fx-serif);font-style:italic;color:var(--fx-gold)}
@keyframes fxpr-tip{0%{transform:rotate(-12deg)}35%{transform:rotate(7deg)}60%{transform:rotate(-3deg)}80%{transform:rotate(1deg)}100%{transform:rotate(0)}}
@keyframes fxpr-pan-l{0%{transform:translateY(5.6px)}35%{transform:translateY(-3.3px)}60%{transform:translateY(1.4px)}80%{transform:translateY(-.5px)}100%{transform:none}}
@keyframes fxpr-pan-r{0%{transform:translateY(-5.6px)}35%{transform:translateY(3.3px)}60%{transform:translateY(-1.4px)}80%{transform:translateY(.5px)}100%{transform:none}}

@media (max-width:640px){
  .fxpr-stamp::after{right:-2.35rem;width:1.6rem;height:1.6rem;margin-top:-.85rem}
}

/* Still, but still beautiful: seals already pressed, ticks drawn, coals lit */
@media (prefers-reduced-motion: reduce){
  .fxpr-heat::before,.fxpr-heat::after,.fxpr-submit::before,.fxpr-submit::after,.fxpr-scale,.fxpr-amt{transition:none!important}
  .fxpr-armed .fxpr-stamp::after,.fxpr-armed.fxpr-stamp::after{opacity:.72;transform:rotate(-6deg)}
  .fxpr-armed .fxpr-tick path{stroke-dashoffset:0}
  .fxpr-pressed .fxpr-stamp,.fxpr-pressed.fxpr-stamp,.fxpr-pressed .fxpr-stamp::after,.fxpr-pressed.fxpr-stamp::after,
  .fxpr-pressed .fxpr-amt,.fxpr-form input:focus,.fxpr-form select:focus,.fxpr-form textarea:focus,
  .fxpr-submit.fxpr-hot,.fxpr-scale .fxpr-beam,.fxpr-scale .fxpr-pan-l,.fxpr-scale .fxpr-pan-r,.fxpr-spark{animation:none!important}
  .fxpr-pressed .fxpr-tick path{transition:none!important}
  .fxpr-spark{display:none}
}