/* =========================================================
   JUGIELEWICZ - effects layer
   Loaded last. Nothing structural lives in here.
   ========================================================= */

/* ---------- loader ---------- */
html.loading, html.loading body { overflow: hidden; }

/* The loader now sits in the HTML so it can paint in the first frame, which
   means it has to be hidden unless the head script asked for it. ".gone" keeps
   it displayed through its exit animation after "loading" has come off. */
.loader{display:none}
html.loading .loader, .loader.gone{display:grid;place-items:center}
.loader{
  position:fixed;inset:0;z-index:10010;background:var(--bg);
  transition:clip-path 1s var(--ease-out),opacity .5s .5s;
  clip-path:inset(0 0 0 0);
}
.loader.gone{clip-path:inset(0 0 100% 0);opacity:1;pointer-events:none}
.loader-in{text-align:center;display:grid;justify-items:center;gap:1.4rem}
.loader-gem{
  width:clamp(46px,6vw,72px);height:auto;overflow:visible;
  fill:none;stroke:var(--brass);stroke-width:2.5;stroke-linejoin:round;
  animation:gemTurn 2.6s var(--ease) infinite;
}
.loader-gem path{
  stroke-dasharray:340;stroke-dashoffset:340;
  animation:gemDraw 2.2s var(--ease-out) forwards;
}
.loader-gem path:nth-child(2){animation-delay:.25s}
.loader-gem path:nth-child(3){animation-delay:.4s}
.loader-gem path:nth-child(4){animation-delay:.55s}
@keyframes gemDraw{to{stroke-dashoffset:0}}
@keyframes gemTurn{0%,100%{transform:rotateY(0deg)}50%{transform:rotateY(180deg)}}
.loader-mark{
  font-family:var(--serif);font-size:clamp(1.4rem,4vw,2.4rem);
  letter-spacing:.32em;text-transform:uppercase;text-indent:.32em;
}
.loader-sub{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--fg-faint);
}
.loader-num{color:var(--brass)}

/* ---------- page curtain ---------- */
.curtain{
  position:fixed;inset:0;z-index:10005;pointer-events:none;
  display:grid;grid-template-columns:repeat(4,1fr);
}
.curtain i{
  background:var(--bg-2);transform:scaleY(0);transform-origin:bottom;
  border-right:1px solid var(--line);
}
body.page-out .curtain i{
  transform:scaleY(1);transform-origin:bottom;
  transition:transform .5s var(--ease-out);
}
body.page-out .curtain i:nth-child(2){transition-delay:.05s}
body.page-out .curtain i:nth-child(3){transition-delay:.1s}
body.page-out .curtain i:nth-child(4){transition-delay:.15s}
body.page-in .curtain i{
  transform:scaleY(0);transform-origin:top;
  transition:transform .6s var(--ease-out);
}
body.page-in .curtain i:nth-child(2){transition-delay:.05s}
body.page-in .curtain i:nth-child(3){transition-delay:.1s}
body.page-in .curtain i:nth-child(4){transition-delay:.15s}

/* ---------- velocity marquee ---------- */
.ticker .track,.announce .track{will-change:transform}

/* ---------- tilt ---------- */
.card-top,.edit,.quad a{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .7s var(--ease-out);
  transform-style:preserve-3d;
}
.card-top.tilting,.edit.tilting,.quad a.tilting{transition:transform .18s linear}

/* ---------- sparkles ---------- */
.spark{
  position:fixed;z-index:9996;pointer-events:none;
  width:var(--sz,8px);height:var(--sz,8px);margin:calc(var(--sz,8px) / -2);
  background:
    radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),
    conic-gradient(from 0deg,transparent 0 8%,var(--brass-hi) 12%,transparent 16% 33%,
                   var(--prism-a) 37%,transparent 41% 58%,var(--brass-hi) 62%,
                   transparent 66% 83%,var(--prism-c) 87%,transparent 91%);
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
  transform:rotate(var(--rot,0deg)) scale(0);
  animation:sparkPop .9s var(--ease-out) forwards;
}
@keyframes sparkPop{
  0%{transform:rotate(var(--rot,0deg)) scale(0);opacity:0}
  25%{transform:rotate(calc(var(--rot,0deg) + 40deg)) scale(1);opacity:.95}
  100%{transform:rotate(calc(var(--rot,0deg) + 120deg)) scale(.1);opacity:0}
}

/* ---------- odometer ---------- */
[data-usd].rolling{
  animation:roll .5s var(--ease-out);
  display:inline-block;
}
@keyframes roll{
  0%{transform:translateY(-70%);opacity:0;filter:blur(3px)}
  55%{opacity:1;filter:blur(0)}
  100%{transform:none}
}

/* ---------- ripple ---------- */
.btn,.opt,.chip,.card-quick,.tool{position:relative;overflow:hidden}
.ripple{
  position:absolute;width:8px;height:8px;margin:-4px;border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.9),rgba(224,200,145,.5) 45%,transparent 70%);
  animation:rip .65s var(--ease-out) forwards;
}
@keyframes rip{to{transform:scale(34);opacity:0}}

/* ---------- request page ---------- */
.req{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);
  padding-block:clamp(1.6rem,3vw,2.6rem) clamp(4rem,8vw,7rem);align-items:start}
.req-form .fset{border:0;padding:0;margin:0 0 clamp(1.6rem,3vw,2.4rem)}
.req-form legend{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-faint);padding:0 0 1rem;display:flex;gap:.7em;align-items:baseline;
}
.req-form legend .n{color:var(--brass)}

.req-side{position:sticky;top:96px;border:1px solid var(--line);background:var(--bg-2);padding:clamp(1.3rem,2.4vw,2rem)}
.req-side h3{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:400;margin-bottom:1.2rem}
.req-line{display:grid;grid-template-columns:56px 1fr auto;gap:.9rem;padding-block:.9rem;border-top:1px solid var(--line);align-items:start}
.req-line img{width:56px;height:70px;object-fit:cover;border:1px solid var(--line)}
.req-line .nm{font-size:.86rem;line-height:1.3}
.req-line .mt{font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);margin-top:.25rem}
.req-line .pr{font-family:var(--mono);font-size:.76rem}
.req-tot{border-top:1px solid var(--line-hard);margin-top:1rem;padding-top:1rem;display:grid;gap:.5rem}
.req-tot .r{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim)}
.req-tot .r.big{align-items:baseline}
.req-tot .r.big span:last-child{font-family:var(--serif);font-size:1.7rem;color:var(--fg);letter-spacing:0;text-transform:none}
.req-note{
  border:1px solid var(--line);padding:1rem;margin-top:1.4rem;
  font-size:.82rem;color:var(--fg-dim);font-weight:300;line-height:1.65;
}
.req-note b{color:var(--fg);font-weight:500}

/* confirmation */
.req-done{max-width:640px;padding-block:clamp(3rem,8vw,7rem)}
.ref-badge{
  display:inline-flex;align-items:center;gap:.8em;border:1px solid var(--brass);
  padding:.7em 1.1em;font-family:var(--mono);font-size:.8rem;letter-spacing:.18em;color:var(--brass);
  margin-block:1.6rem;
}
.steps{border-top:1px solid var(--line);margin-top:2rem}
.steps li{display:grid;grid-template-columns:26px 1fr;gap:1rem;padding-block:1.1rem;border-bottom:1px solid var(--line);align-items:start}
.steps .n{font-family:var(--mono);font-size:.66rem;color:var(--brass)}
.steps p{font-size:.9rem;color:var(--fg-dim);font-weight:300}
.steps b{color:var(--fg);font-weight:500;display:block;margin-bottom:.25rem;font-size:.95rem}

@media (max-width:1024px){
  .req{grid-template-columns:1fr}
  .req-side{position:static}
}