/* ============================================================
   PIVITT MODEL SYSTEM v1
   The sitewide standard for interactive model scenes.
   Grammar: one scene container, staged entrance choreography,
   pointer-reactive depth, glass chips, gradient light, a live
   caption. Every model on the site speaks this language.
   Easing: cubic-bezier(.22,1,.36,1). Stage step: 140ms.
   ============================================================ */

.pv-scene{position:relative;border:1px solid var(--bdr);border-radius:22px;overflow:hidden;
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(51,102,255,.10), transparent 55%),
    radial-gradient(110% 90% at 88% 100%, rgba(6,182,212,.08), transparent 55%),
    rgba(255,255,255,.015);
  padding:clamp(18px,2.6vw,40px)}
.pv-scene::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.pv-scene svg{width:100%;height:auto;display:block}
.pv-scene .pv-inner{transition:transform .6s cubic-bezier(.22,1,.36,1);will-change:transform}

/* Typography inside scenes */
.pv-scene .t-eyebrow{font:600 10px 'Inter Tight',sans-serif;letter-spacing:.2em;fill:#A7AAB4;text-transform:uppercase}
.pv-scene .t-label{font:300 14px 'Inter Tight',sans-serif;fill:#EDEEF2;letter-spacing:-.01em}
.pv-scene .t-small{font:300 11px 'Inter Tight',sans-serif;fill:#A7AAB4}
.pv-scene .t-num{font:200 34px 'Inter Tight',sans-serif;fill:#EDEEF2;letter-spacing:-.03em}

/* Strokes and fills */
.pv-scene .ln-dim{stroke:rgba(167,170,180,.22);stroke-width:1}
.pv-scene .ln-ref{stroke:rgba(167,170,180,.3);stroke-width:1;stroke-dasharray:2 6;fill:none}
.pv-scene .ln-grad{stroke:url(#pvGrad);fill:none}
.pv-scene .glowline{filter:url(#pvGlow)}

/* Glass node chips */
.pv-node{cursor:pointer;outline:none}
.pv-node .chip{fill:rgba(13,14,22,.72);stroke:rgba(255,255,255,.14);stroke-width:1;
  transition:stroke .35s,filter .35s,transform .5s cubic-bezier(.22,1,.36,1);transform-box:fill-box;transform-origin:center}
.pv-node:hover .chip,.pv-node:focus-visible .chip,.pv-node.on .chip{stroke:url(#pvGrad);filter:url(#pvGlow)}
.pv-node:hover,.pv-node.on{--lift:1}
.pv-node .dot{transition:r .35s,filter .35s}
.pv-node:hover .dot,.pv-node.on .dot{filter:url(#pvGlow)}

/* Staged entrance: elements carry data-stage="n"; scene .on releases them */
.pv-scene [data-stage]{opacity:0;transform:translateY(10px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.pv-scene.on [data-stage]{opacity:1;transform:none}
.pv-scene.on [data-stage="1"]{transition-delay:.05s}.pv-scene.on [data-stage="2"]{transition-delay:.19s}
.pv-scene.on [data-stage="3"]{transition-delay:.33s}.pv-scene.on [data-stage="4"]{transition-delay:.47s}
.pv-scene.on [data-stage="5"]{transition-delay:.61s}.pv-scene.on [data-stage="6"]{transition-delay:.75s}
.pv-scene.on [data-stage="7"]{transition-delay:.89s}
.pv-scene [data-draw]{stroke-dasharray:var(--len,1400);stroke-dashoffset:var(--len,1400)}
.pv-scene.on [data-draw]{transition:stroke-dashoffset 1.7s cubic-bezier(.22,1,.36,1) .35s;stroke-dashoffset:0}

/* Live caption bar under every scene */
.pv-caption{display:flex;align-items:baseline;gap:14px;margin-top:14px;min-height:44px}
.pv-caption .k{flex:none;font:600 10px 'Inter Tight',sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:transparent;background:linear-gradient(90deg,#3366FF,#06B6D4);-webkit-background-clip:text;background-clip:text;padding-top:2px}
.pv-caption p{margin:0;font:300 13.5px/1.55 'Inter Tight',sans-serif;color:#A7AAB4;transition:opacity .35s}
.pv-caption.swap p{opacity:0}

/* Scan readout chip (gap model) */
.pv-chip{fill:rgba(13,14,22,.85);stroke:rgba(255,255,255,.16)}
.pv-scan{opacity:0;transition:opacity .3s}
.pv-scene:hover .pv-scan{opacity:1}

@media (prefers-reduced-motion: reduce){
  .pv-scene [data-stage]{opacity:1;transform:none;transition:none}
  .pv-scene [data-draw]{stroke-dashoffset:0;transition:none}
  .pv-scene .pv-inner{transition:none}
  .pv-comet,.pv-flow{display:none}
  .pv-scan{display:none}
}


/* ---------- v2: mobile + interaction value ---------- */
.pv-hint{position:absolute;top:14px;right:14px;z-index:3;font:600 10px 'Inter Tight',sans-serif;
  letter-spacing:.18em;text-transform:uppercase;color:#EDEEF2;background:rgba(13,14,22,.72);
  border:1px solid rgba(255,255,255,.16);border-radius:100px;padding:8px 14px;pointer-events:none;
  transition:opacity .5s;display:flex;align-items:center;gap:8px}
.pv-hint::before{content:"";width:6px;height:6px;border-radius:50%;background:linear-gradient(90deg,#3366FF,#06B6D4);animation:pvPulse 2s ease-in-out infinite}
@keyframes pvPulse{0%,100%{opacity:.4}50%{opacity:1}}
.pv-scene.touched .pv-hint{opacity:0}

.pv-handle{cursor:grab;touch-action:none}
.pv-handle:active{cursor:grabbing}
.pv-handle .grip{fill:rgba(13,14,22,.9);stroke:url(#pvGrad);stroke-width:1.4;filter:url(#pvGlow)}
.pv-handle .griplines{stroke:rgba(237,238,242,.7);stroke-width:1.2}

.pv-caption a{color:#EDEEF2;text-decoration:none;border-bottom:1px solid rgba(6,182,212,.6)}
.pv-caption a:hover{border-bottom-color:#06B6D4}
.pv-lap{font:600 10px 'Inter Tight',sans-serif;letter-spacing:.2em;text-transform:uppercase;fill:#A7AAB4}

@media (pointer:coarse){
  .pv-scene .pv-inner{transform:none !important}
}
@media (max-width:640px){
  .pv-scene{padding:14px 8px}
  .pv-scene svg{min-height:280px}
  .pv-caption{min-height:64px;align-items:flex-start}
  .pv-caption p{font-size:13px}
}
@media (prefers-reduced-motion: reduce){
  .pv-hint::before{animation:none}
}