/* =====================================================================
 * VAT: the return builds itself from the invoices
 * (template-parts/stages/vat.php). Loaded on /odoo-accounting-vat/ only.
 *
 * An upright VAT 201 return stands on a lit floor between two fanned piles:
 * sales invoices (blue) and purchase bills (red). Documents lift off the
 * piles and arc into the return (offset-path for the arc, transform for the
 * lift and the turn upright). Everything is printed finished; with script
 * (html.js) the values start empty and fill in as the engine plays.
 *
 * Geometry (stage pixels): the return is 360 wide at x 160, y 48 to 452.
 * Box 1b is centred on (340,150), box 9 on (340,236). The piles are centred
 * on (96,434) and (584,434); their top documents sit at (96,415) and
 * (584,415), 73px forward. The flight paths below join those points.
 * ===================================================================== */
.stage-vat .stage-3d{width:680px;height:520px}
.stage-vat .sp>div{transform-style:preserve-3d}
.stage-vat .sp.vt-still>div{animation:none}

/* Two periods: only the shown one's figures. No script shows the first. */
.stage-vat .stage-3d:not([data-on="q2"]) [data-in="q2"],
.stage-vat .stage-3d[data-on="q2"] [data-in="q3"]{display:none}

/* ---------- Floor: graph paper under a soft light ---------- */
.vt-floor{position:absolute;left:-30px;top:220px;width:740px;height:440px;border-radius:50%;pointer-events:none;
  transform:translateZ(-40px) rotateX(74deg);
  background:radial-gradient(closest-side,rgba(47,125,246,.36),rgba(47,125,246,.1) 52%,transparent 74%)}
.vt-floor i{position:absolute;inset:0;border-radius:50%;
  background-image:linear-gradient(rgba(150,190,255,.17) 1px,transparent 1px),linear-gradient(90deg,rgba(150,190,255,.17) 1px,transparent 1px);
  background-size:28px 28px;background-position:center;
  -webkit-mask-image:radial-gradient(closest-side,#000 18%,transparent 76%);mask-image:radial-gradient(closest-side,#000 18%,transparent 76%)}

/* ---------- The piles ---------- */
.vt-pp{width:110px;height:140px}
.vt-pp>div{position:relative;width:100%;height:100%}
.vt-pp-s{--rz:16deg;--fz:-1;--ink:#5AA0FF;--lit:rgba(150,200,255,.8);--glow:rgba(90,160,255,.55)}
.vt-pp-p{--rz:-16deg;--fz:1;--ink:#FF6B70;--lit:rgba(255,160,164,.8);--glow:rgba(255,90,95,.5)}
.vt-shadow{position:absolute;left:-20px;right:-20px;top:-6px;bottom:-30px;border-radius:50%;pointer-events:none;
  transform:rotateX(56deg) rotateZ(var(--rz)) translateZ(-4px);background:radial-gradient(closest-side,rgba(0,0,0,.62),rgba(0,0,0,.25) 60%,transparent)}
.vt-pile{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(56deg) rotateZ(var(--rz));pointer-events:auto}
.vt-sh{position:absolute;inset:0;border-radius:7px;background:linear-gradient(165deg,#22304B,#121A2B);border:1px solid rgba(160,195,255,.2);
  transform:translate3d(calc(var(--k,0) * .7px * var(--fz)),calc(var(--k,0) * -.5px),calc(var(--k,0) * 2.6px));transition:border-color .25s,opacity .25s}
.vt-f1{transform-origin:50% 92%;transform:translateZ(18.5px) rotateZ(calc(var(--fz) * 13deg))}
.vt-f2{transform-origin:50% 92%;transform:translateZ(20.5px) rotateZ(calc(var(--fz) * 6.5deg))}
.vt-top{position:absolute;inset:0;transform:translateZ(22.5px);transition:opacity .25s}
.vt-doc{position:absolute;inset:0;padding:0 10px;border-radius:7px;overflow:hidden;font:8px/1.25 var(--f-body);color:rgba(234,241,255,.66);
  background:linear-gradient(170deg,#283857,#152036);border:1px solid rgba(170,205,255,.3);transition:box-shadow .25s,border-color .25s}
.vt-doc::before{content:"";display:block;height:5px;margin:0 -10px 8px;background:var(--ink);opacity:.85}
.vt-dh b{display:block;font:600 10px/1.15 var(--f-disp);color:#fff}
.vt-dh small{display:block;margin-top:1px;font:500 7.5px/1.2 var(--f-mono);color:rgba(234,241,255,.62)}
.vt-dm{display:flex;justify-content:space-between;margin:5px 0 7px;font:500 7px/1 var(--f-mono);color:rgba(234,241,255,.5)}
.vt-ln{display:block;height:4px;margin:0 0 5px;border-radius:2px;background:rgba(255,255,255,.1)}
.vt-ln:nth-of-type(2){width:74%}
.vt-ln:nth-of-type(3){width:52%;margin-bottom:6px}
.vt-dr{display:flex;justify-content:space-between;padding:1.5px 0}
.vt-dr b{font:600 8px/1.25 var(--f-mono);color:#fff}
.vt-dt{margin-top:3px;padding-top:4px;border-top:1px solid rgba(255,255,255,.14);color:#fff}
.vt-mark{display:none}

/* ---------- Tags over the piles ---------- */
.vt-tag{display:flex;align-items:flex-start;gap:9px;width:140px;padding:10px 11px;border-radius:12px;pointer-events:auto;
  background:linear-gradient(160deg,rgba(31,45,74,.92),rgba(12,18,31,.94));border:1px solid rgba(140,180,255,.22);
  box-shadow:0 26px 44px -24px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.07);transition:border-color .25s,background .25s,opacity .25s}
.vt-tag b{display:block;font:600 12.5px/1.2 var(--f-disp);color:#fff;white-space:nowrap}
.vt-tag small{display:block;margin-top:3px;font:500 10px/1.35 var(--f-mono);color:rgba(234,241,255,.62);white-space:nowrap}
.vt-tag small+small{margin-top:1px;color:#fff}
.vt-key{flex:none;width:9px;height:9px;margin-top:4px;border-radius:3px;background:#5AA0FF;box-shadow:0 0 10px #5AA0FF}
.vt-tag-p .vt-key{background:#FF6B70;box-shadow:0 0 10px #FF6B70}

/* ---------- The return ---------- */
.vt-fp{width:360px}
.vt-side{position:absolute;left:359px;top:18px;bottom:18px;width:14px;transform-origin:0 50%;transform:rotateY(90deg);
  border-radius:0 4px 4px 0;background:linear-gradient(180deg,#2B3D61,#101828)}
.vt-form{position:relative;width:360px;padding-bottom:10px;border-radius:16px;color:#EAF1FF;font:12px/1.3 var(--f-body);
  background:linear-gradient(180deg,rgba(25,35,57,.97),rgba(11,16,28,.98));border:1px solid rgba(140,180,255,.24);
  box-shadow:0 60px 90px -44px rgba(0,0,0,.95),0 0 90px -34px rgba(47,125,246,.6),inset 0 1px 0 rgba(255,255,255,.09)}
.vt-tabs{position:absolute;left:18px;bottom:calc(100% - 1px);display:flex;gap:4px}
.vt-tab{font:500 10.5px/1 var(--f-mono);letter-spacing:.02em;color:rgba(234,241,255,.55);padding:8px 11px 9px;border-radius:9px 9px 0 0;cursor:pointer;pointer-events:auto;
  background:rgba(12,18,31,.9);border:1px solid rgba(140,180,255,.16);border-bottom:0;transition:color .25s,background .25s,border-color .25s}
.vt-tab:hover{color:#fff;border-color:rgba(140,180,255,.4)}
.vt-tab.cur,.vt-tabs:not(:has(.cur)) .vt-tab:first-child{color:#fff;background:rgb(25,35,57);border-color:rgba(140,180,255,.3)}
.vt-fh{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.vt-badge{flex:none;font:600 10px/1 var(--f-mono);letter-spacing:.05em;padding:6px 7px;border-radius:7px;color:#CFE1FF;background:rgba(47,125,246,.2);box-shadow:inset 0 0 0 1px rgba(90,160,255,.4)}
.vt-ft{min-width:0}
.vt-ft b{display:block;font:600 13.5px/1.1 var(--f-disp);letter-spacing:-.01em;color:#fff}
.vt-ft small{display:block;margin-top:3px;font:500 9px/1 var(--f-mono);letter-spacing:.02em;color:rgba(234,241,255,.5);white-space:nowrap}
.vt-due{margin-left:auto;flex:none;font:500 10px/1 var(--f-mono);color:#FEC85A;padding:6px 8px;border-radius:99px;background:rgba(254,188,46,.1);border:1px solid rgba(254,188,46,.28)}
.vt-sec{height:24px;display:flex;align-items:flex-end;padding:0 16px 6px;font:500 9px/1 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:rgba(234,241,255,.45);transition:opacity .25s}

.vt-box{position:relative;height:62px;margin:0 10px;padding:7px 8px;border-radius:11px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);pointer-events:auto;transition:opacity .25s,border-color .25s,background .25s}
.vt-box::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;box-shadow:0 0 0 1px rgba(110,175,255,.7),0 0 26px -4px rgba(90,160,255,.8)}
.vt-box.in:not(.ok)::after{animation:vt-rx 1.1s ease-in-out infinite}
@keyframes vt-rx{0%,100%{opacity:.3}50%{opacity:1}}
.vt-bl{display:flex;align-items:center;gap:8px;height:18px;font-size:12px;color:#fff;white-space:nowrap}
.vt-bl em,.vt-row em{flex:none;min-width:46px;text-align:center;font:600 9.5px/1 var(--f-mono);font-style:normal;padding:4px 5px;border-radius:5px;color:#CFE1FF;background:rgba(47,125,246,.18)}
.vt-tk{flex:none;margin-left:auto;width:15px;height:15px;border-radius:50%;transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1);
  background:#1F9D63 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") no-repeat center/9px}
.vt-bv{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:5px}
.vt-fd{display:flex;justify-content:space-between;align-items:center;gap:6px;height:23px;padding:0 8px;border-radius:7px;background:rgba(3,7,15,.6);box-shadow:inset 0 0 0 1px rgba(140,180,255,.14)}
.vt-fd small{font-size:9px;color:rgba(234,241,255,.5);white-space:nowrap}
.vt-fd b{font:600 12px/1 var(--f-mono);color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}

.vt-row{position:relative;display:flex;align-items:center;gap:8px;height:28px;margin:0 10px;padding:0 8px;border-radius:9px;border:1px solid transparent;pointer-events:auto;transition:opacity .25s,border-color .25s,background .25s}
.vt-row>span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(234,241,255,.78)}
.vt-row>b{font:600 12px/1 var(--f-mono);color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.vt-pay{height:36px;margin-top:4px;background:rgba(62,213,152,.1);border-color:rgba(62,213,152,.42)}
.vt-pay>span{color:#fff;font-weight:600}
.vt-pay>b{font:700 15px/1 var(--f-disp);letter-spacing:-.01em}
.vt-pay em{color:#BFF3DA;background:rgba(62,213,152,.2)}

.vt-st{display:grid;align-items:center;height:46px;margin:8px 10px 0;padding:0 12px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.vt-st>span{grid-area:1/1;display:flex;align-items:center;gap:9px;min-width:0;white-space:nowrap;font-size:12px;transition:opacity .3s,transform .3s}
.vt-s0{color:rgba(234,241,255,.66)}
.vt-s1 b{display:block;font-weight:600;color:#6EE7B7}
.vt-s1 small{display:block;margin-top:2px;font-size:10.5px;color:rgba(234,241,255,.6)}
.vt-cap{opacity:0;color:#D6E6FF}
.vt-cap.hot{opacity:1}
.vt-spin{flex:none;width:12px;height:12px;border-radius:50%;border:2px solid rgba(110,175,255,.75);border-top-color:transparent;animation:spin .8s linear infinite}
.vt-ok{flex:none;width:18px;height:18px;border-radius:50%;box-shadow:0 0 12px rgba(62,213,152,.5);
  background:#1F9D63 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") no-repeat center/11px}
.vt-form{transition:box-shadow .5s,border-color .5s}
.vt-form:has(.vt-s1.on){border-color:rgba(62,213,152,.45);box-shadow:0 60px 90px -44px rgba(0,0,0,.95),0 0 90px -30px rgba(62,213,152,.55),inset 0 1px 0 rgba(255,255,255,.09)}

/* ---------- Documents in flight ---------- */
.vt-flights{position:absolute;left:0;top:0;width:680px;height:520px;transform-style:preserve-3d;pointer-events:none}
.vt-fly{position:absolute;left:0;top:0;width:88px;height:112px;border-radius:7px;opacity:0;offset-rotate:0deg;offset-anchor:50% 50%;
  border:1px solid rgba(170,210,255,.6);box-shadow:0 0 26px rgba(90,160,255,.55);
  background:
    linear-gradient(var(--ink),var(--ink)) 0 0/100% 5px no-repeat,
    linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)) 10px 14px/42px 5px no-repeat,
    linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.2)) 10px 30px/66px 4px no-repeat,
    linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.2)) 10px 40px/50px 4px no-repeat,
    linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.2)) 10px 50px/38px 4px no-repeat,
    linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)) 42px 92px/36px 5px no-repeat,
    linear-gradient(165deg,#2C3F64,#16213A)}
.vt-fly-s{--ink:#5AA0FF;offset-path:path("M96 415 Q104 152 340 150")}
.vt-fly-p{--ink:#FF6B70;offset-path:path("M584 415 Q576 172 340 236");border-color:rgba(255,170,174,.6);box-shadow:0 0 26px rgba(255,90,95,.45)}
.vt-fly-s.on{animation:vt-go 1.25s cubic-bezier(.45,.05,.3,1) forwards,vt-lift-s 1.25s linear forwards}
.vt-fly-p.on{animation:vt-go 1.25s cubic-bezier(.45,.05,.3,1) forwards,vt-lift-p 1.25s linear forwards}
@keyframes vt-go{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes vt-lift-s{
  0%{opacity:0;transform:translateZ(73px) rotateX(56deg) rotateZ(16deg) scale(1);animation-timing-function:cubic-bezier(.3,.7,.6,1)}
  10%{opacity:1}
  50%{transform:translateZ(190px) rotateX(26deg) rotateZ(6deg) scale(.92);animation-timing-function:cubic-bezier(.4,0,.7,.3)}
  80%{opacity:1}
  100%{opacity:0;transform:translateZ(6px) rotateX(0deg) rotateZ(0deg) scale(.4)}
}
@keyframes vt-lift-p{
  0%{opacity:0;transform:translateZ(73px) rotateX(56deg) rotateZ(-16deg) scale(1);animation-timing-function:cubic-bezier(.3,.7,.6,1)}
  10%{opacity:1}
  50%{transform:translateZ(190px) rotateX(26deg) rotateZ(-6deg) scale(.92);animation-timing-function:cubic-bezier(.4,0,.7,.3)}
  80%{opacity:1}
  100%{opacity:0;transform:translateZ(6px) rotateX(0deg) rotateZ(0deg) scale(.4)}
}

/* ---------- Script running: start empty, fill in ---------- */
.vt-num{transition:opacity .3s}
.js .vt-num:not(.on){opacity:0}
.js .vt-box:not(.ok) .vt-tk{opacity:0;transform:translateY(3px)}
.js .vt-pay:not(.ok){background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08)}
.js .vt-pay:not(.ok) em{color:#CFE1FF;background:rgba(47,125,246,.18)}
html:not(.js) .vt-s0{opacity:0}
.vt-st:has(.vt-s1.on) .vt-s0{opacity:0}
.js .vt-s1:not(.on){opacity:0;transform:translateY(5px)}

/* ---------- Hover: a box lights the documents that feed it ---------- */
.vt-box.hot,.vt-row.hot,.vt-row:has(.vt-mark.hot){background:rgba(90,160,255,.13);border-color:rgba(150,195,255,.6)}
.vt-pay.hot{background:rgba(62,213,152,.17);border-color:rgba(62,213,152,.75)}
.stage-3d.hovering .vt-box:not(.hot),.stage-3d.hovering .vt-row:not(.hot):not(:has(.hot)),.stage-3d.hovering .vt-sec{opacity:.36}
.stage-3d.hovering .vt-s0,.stage-3d.hovering .vt-s1{opacity:0}
.vt-pile.hot .vt-sh,.vt-pile:has(.vt-mark.hot) .vt-sh{border-color:var(--lit)}
.vt-pile.hot .vt-doc,.vt-pile:has(.vt-mark.hot) .vt-doc{border-color:var(--lit);box-shadow:0 0 0 1px var(--lit),0 0 34px var(--glow)}
.stage-3d.hovering .vt-pile:not(.hot):not(:has(.hot))>*{opacity:.3}
.vt-tag.hot,.vt-tag:has(.vt-mark.hot){border-color:rgba(160,200,255,.7);background:linear-gradient(160deg,rgba(42,70,118,.95),rgba(14,22,40,.95))}
.vt-tag-p.hot,.vt-tag-p:has(.vt-mark.hot){border-color:rgba(255,160,164,.7);background:linear-gradient(160deg,rgba(96,40,52,.95),rgba(30,14,22,.95))}
.stage-3d.hovering .vt-tag:not(.hot):not(:has(.hot)){opacity:.35}

/* ---------- Phones ---------- */
@media (max-width:899px){
  .stage-vat .stage-3d{scale:.56;translate:0 -18px}
  .vt-tp{display:none}
}
@media (max-width:420px){
  .stage-vat .stage-3d{scale:.5}
}

@media (prefers-reduced-motion:reduce){
  .vt-fly{display:none}
  .vt-box.in:not(.ok)::after,.vt-spin{animation:none}
}