/* Jang Card FX — presentation layer. Safe to remove: cards fall back to the previous templates. */
:root{--fx-t1:#9db3c1;--fx-t2:#55c9bd;--fx-t3:#e6b85f;--fx-t4:#ff7060}

.sc-card[data-fx]{
  --rx:0deg;--ry:0deg;--mx:50%;--my:30%;--ax:0;--ay:0;
  transform:perspective(780px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style:preserve-3d;
  transition:transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease;
  -webkit-tap-highlight-color:transparent;
}
.sc-card[data-fx].is-fx-hot{transition:transform .09s linear,box-shadow .3s ease,border-color .3s ease;will-change:transform;z-index:3}
.sc-card[data-fx]:active,.sc-card[data-fx].is-fx-press{transform:perspective(780px) rotateX(var(--rx)) rotateY(var(--ry)) scale(.972)}
@media (hover:hover) and (pointer:fine){.sc-card[data-fx].is-fx-hot:not(.is-fx-press){transform:perspective(780px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-3px) scale(1.012)}}

/* art parallax */
.sc-card[data-fx] .sc-card__art{transition:transform .5s cubic-bezier(.2,.8,.2,1);transform:scale(1.02)}
.sc-card[data-fx].is-fx-hot .sc-card__art{transform:translate(calc(var(--ax) * -9px),calc(var(--ay) * -6px)) scale(1.1);transition:transform .12s linear}

/* light layers */
.fx-glare,.fx-foil,.fx-edge,.fx-scan{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.fx-glare{z-index:6;opacity:0;transition:opacity .3s;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.34),rgba(255,255,255,.08) 28%,transparent 52%)}
.is-fx-hot>.fx-glare{opacity:1}
.fx-foil{z-index:5;opacity:0;transition:opacity .35s;mix-blend-mode:color-dodge;
  background:conic-gradient(from calc(var(--ax) * 540deg) at var(--mx) var(--my),#ff6a6a,#ffd66a,#6aff9d,#6ad2ff,#b46aff,#ff6a6a)}
.fx-t3.is-fx-hot>.fx-foil{opacity:.09}
.fx-t4.is-fx-hot>.fx-foil{opacity:.17}
.fx-edge{z-index:7;opacity:.0;transition:opacity .3s;--c:var(--eqg-frame,#75cbd2);
  background:
    linear-gradient(var(--c),var(--c)) top left/14px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) top left/1.5px 14px no-repeat,
    linear-gradient(var(--c),var(--c)) top right/14px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) top right/1.5px 14px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/14px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) bottom left/1.5px 14px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/14px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) bottom right/1.5px 14px no-repeat;
  margin:5px;inset:0;width:auto;height:auto}
.is-fx-hot>.fx-edge,.fx-t3>.fx-edge,.fx-t4>.fx-edge{opacity:.8}
.fx-t3>.fx-edge{opacity:.35}.fx-t4>.fx-edge{opacity:.55}
.is-fx-hot.fx-t3>.fx-edge,.is-fx-hot.fx-t4>.fx-edge{opacity:.95}

/* elite idle sweep (tier IV only; compositor-friendly) */
.fx-sweep{position:absolute;top:-20%;bottom:-20%;width:34%;left:-50%;z-index:6;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,206,160,.22),transparent);transform:skewX(-18deg);animation:fxSweep 6.5s ease-in-out infinite;animation-delay:calc(var(--i,0) * 220ms)}
@keyframes fxSweep{0%,62%{left:-50%}100%{left:130%}}

/* rank crest */
.fx-rank{position:absolute;z-index:8;top:8px;left:8px;display:flex;flex-direction:column;align-items:center;gap:4px;
  min-width:30px;padding:5px 6px 5px;border-radius:9px 9px 14px 14px;color:var(--rc,var(--fx-t1));
  background:linear-gradient(180deg,rgba(7,14,20,.82),rgba(7,14,20,.94));border:1px solid color-mix(in srgb,var(--rc,var(--fx-t1)) 55%,transparent);
  box-shadow:0 4px 12px #0008,0 0 12px -2px color-mix(in srgb,var(--rc,var(--fx-t1)) 50%,transparent);backdrop-filter:none}
.fx-rank b{font:800 12px/1 'Georgia','Times New Roman',serif;letter-spacing:.6px;direction:ltr}
.fx-pips{display:flex;gap:2px}.fx-pips i{width:4px;height:4px;border-radius:50%;background:#ffffff1f}.fx-pips i.on{background:var(--rc,var(--fx-t1));box-shadow:0 0 5px var(--rc,var(--fx-t1))}
[data-tier="1"]{--rc:var(--fx-t1)}[data-tier="2"]{--rc:var(--fx-t2)}[data-tier="3"]{--rc:var(--fx-t3)}[data-tier="4"]{--rc:var(--fx-t4)}
.fx-serial{position:absolute;z-index:8;top:10px;right:9px;font:700 9px/1 ui-monospace,'SF Mono',Menlo,monospace;letter-spacing:1.6px;color:#cfe3e8;
  padding:4px 6px;border-radius:5px;background:rgba(6,12,18,.66);border:1px solid #9fc4cf33;direction:ltr}
.fx-serial::before{content:'';display:inline-block;width:5px;height:5px;margin-inline-end:5px;border-radius:50%;background:var(--eqg-frame,#75cbd2);box-shadow:0 0 6px var(--eqg-frame,#75cbd2);vertical-align:1px}

/* power meter */
.fx-meter{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:7px;font-size:9px;color:#9bb3bd;margin:1px 0 2px}
.fx-meter em{font-style:normal;font-weight:700;letter-spacing:.2px}
.fx-meter b{font-variant-numeric:tabular-nums;color:#e9f3f1;font-size:10px}
.fx-track{position:relative;height:5px;border-radius:9px;background:#07101a;box-shadow:inset 0 1px 2px #000a;overflow:hidden}
.fx-track::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(0,0,0,.45) 9px 10px);pointer-events:none}
.fx-track i{display:block;height:100%;width:calc(var(--p,0) * 1%);border-radius:9px;transform-origin:right center;
  background:linear-gradient(90deg,color-mix(in srgb,var(--rc,var(--eqg-frame,#75cbd2)) 40%,#04101a),var(--rc,var(--eqg-frame,#75cbd2)));
  box-shadow:0 0 10px color-mix(in srgb,var(--rc,var(--eqg-frame,#75cbd2)) 60%,transparent);animation:fxFill .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 32ms + 180ms)}
@keyframes fxFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.fx-t1 .fx-meter,.fx-t1 .fx-track i{--rc:var(--fx-t1)}.fx-t2 .fx-track i{--rc:var(--fx-t2)}.fx-t3 .fx-track i{--rc:var(--fx-t3)}.fx-t4 .fx-track i{--rc:var(--fx-t4)}
.eqg-results .eqg-equipment-card.fx-t4{border-color:color-mix(in srgb,var(--fx-t4) 52%,var(--eqg-frame));box-shadow:0 10px 26px rgba(0,0,0,.4),0 0 22px -6px var(--fx-t4),inset 0 1px rgba(255,255,255,.1)}
.eqg-results .eqg-equipment-card.fx-t3{box-shadow:0 9px 24px rgba(0,0,0,.36),0 0 16px -7px var(--fx-t3),inset 0 1px rgba(255,255,255,.09)}

/* dossier detail sheet */
.eqd[data-fx] .eqd-cover{position:relative;overflow:hidden;border-radius:16px;isolation:isolate;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .45s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 14px 34px #000a,inset 0 0 0 1px #ffffff12}
.eqd[data-fx] .eqd-cover.is-fx-hot{transition:transform .1s linear}
.eqd[data-fx] .eqd-cover img{transform:scale(1.04) translate(calc(var(--ax,0) * -8px),calc(var(--ay,0) * -6px));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.eqd[data-fx] .eqd-cover.is-fx-hot img{transition:transform .12s linear;transform:scale(1.1) translate(calc(var(--ax,0) * -10px),calc(var(--ay,0) * -7px))}
.eqd[data-fx] .eqd-cover::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 40%,rgba(5,10,15,.78));z-index:1}
.eqd[data-fx] .eqd-cover>*{z-index:2}
.eqd[data-fx] .eqd-cover .fx-glare{z-index:3}
.fx-rank--lg{top:12px;left:12px;padding:7px 9px;min-width:38px}.fx-rank--lg b{font-size:15px}
.fx-serial--lg{top:auto;bottom:14px;right:auto;left:14px;font-size:10px;padding:5px 8px}
.fx-scan{z-index:4;background:linear-gradient(180deg,transparent 0,rgba(140,230,240,.22) 50%,transparent 100%);height:34%;inset:auto 0 auto 0;top:-40%;animation:fxScan 1.3s .15s cubic-bezier(.4,0,.2,1) 1 both}
@keyframes fxScan{from{top:-40%;opacity:1}to{top:110%;opacity:0}}
.eqd[data-fx] .eqd-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.eqd[data-fx] .eqd-metric{position:relative;border-radius:12px;overflow:hidden;animation:fxRise .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k,0) * 70ms + 120ms)}
.eqd[data-fx] .eqd-metric::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:2px;background:var(--rc,#75cbd2);opacity:.8}
.eqd[data-fx] .fx-meter--metric{display:block;margin-top:7px}
.eqd[data-fx] .eqd-stat{animation:fxRise .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k,0) * 45ms + 320ms)}
@keyframes fxRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .sc-card[data-fx],.sc-card[data-fx] .sc-card__art,.eqd[data-fx] .eqd-cover,.eqd[data-fx] .eqd-cover img{transition:none!important;transform:none!important}
  .fx-sweep,.fx-scan,.fx-track i,.eqd[data-fx] .eqd-metric,.eqd[data-fx] .eqd-stat{animation:none!important}
  .fx-foil{display:none}
}