/* ==========================================================================
   VaUTI flagship showcase: porcelain turntable, orbiting chips, animated
   test cassette and a scroll-driven 3D turn. Idle motion runs while the
   section is on screen (.vu.is-live via flow.js).
   ========================================================================== */
.vu{position:relative;padding:clamp(4.5rem,3rem + 4vw,7.5rem) 0;overflow:clip;background:var(--base);isolation:isolate;--turn:0}
.vu::before{content:"";position:absolute;right:-10%;top:5%;width:70%;height:90%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(217,83,107,.10),rgba(29,185,194,.08) 55%,transparent)}
.vu-bg-grid{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(49,69,154,.12) 1px,transparent 1.5px);background-size:26px 26px;
  -webkit-mask:radial-gradient(60% 60% at 70% 50%,#000,transparent);mask:radial-gradient(60% 60% at 70% 50%,#000,transparent)}
.vu-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,1rem + 4vw,5rem);align-items:center}

/* ---------- Copy ---------- */
.vu-badge{display:inline-flex;align-items:center;gap:.55rem;padding:.5rem 1.1rem .5rem .55rem;border-radius:999px;font-size:.84rem;font-weight:700;color:var(--brand);background:var(--base);box-shadow:var(--press-sm)}
:root[data-theme="dark"] .vu-badge{color:var(--mint)}
.vu-badge-star{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:#fff;font-size:.8rem;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.6) 0 10%,transparent 32%),linear-gradient(135deg,#f0b23e,#e08e2a);box-shadow:0 6px 14px rgba(224,142,42,.35)}
.vu.is-live .vu-badge-star{animation:vuStar 3s ease-in-out infinite}
@keyframes vuStar{0%,100%{transform:none}10%{transform:rotate(-18deg) scale(1.15)}20%{transform:rotate(12deg)}30%{transform:none}}
.vu-title{display:grid;gap:.2rem;margin:1.1rem 0 1rem}
.vu-name{font-family:var(--font-head);font-weight:800;font-size:clamp(3rem,1.8rem + 5vw,5.6rem);line-height:.92;letter-spacing:-.05em;
  background:linear-gradient(100deg,#31459A 0%,#3a6fae 35%,#d9536b 50%,#3a6fae 65%,#1DB9C2 100%);background-size:250% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 14px rgba(49,69,154,.18))}
.vu.is-live .vu-name{animation:vuSheen 6s ease-in-out infinite}
@keyframes vuSheen{0%,20%{background-position:100% 0}60%,100%{background-position:0 0}}
.vu-sub{font-family:var(--font-head);font-weight:700;font-size:clamp(1.3rem,1rem + 1.2vw,2rem);letter-spacing:-.025em;color:var(--ink)}
.vu-lead{font-size:1.05rem;max-width:52ch;margin:0}

.vu-features{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:1.8rem 0 0;padding:0;list-style:none}
.vu-feature{position:relative;display:flex;align-items:flex-start;gap:.8rem;padding:1rem;border-radius:22px;background:var(--base);box-shadow:var(--raise-sm)}
.vu-feature:hover{box-shadow:var(--raise)}
.vu-feature strong{display:block;font-size:.95rem;line-height:1.25}
.vu-feature small{display:block;font-size:.8rem;line-height:1.4;color:var(--ink-faint);margin-top:.15rem}
.vu-dome{position:relative;flex-shrink:0;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--base);box-shadow:var(--press-sm);transform:translateZ(20px)}
.vu-dome::before{content:"";position:absolute;inset:5px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 8%,rgba(255,255,255,0) 30%),linear-gradient(145deg,#e46b80,#c9415a 40%,#31459A);
  box-shadow:0 6px 14px rgba(150,40,80,.3),inset 0 -3px 6px rgba(40,10,40,.3)}
.vu-feature:nth-child(even) .vu-dome::before{background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 8%,rgba(255,255,255,0) 30%),linear-gradient(145deg,#3f5bc4,#31459A 45%,#1DB9C2)}
.vu-ico{position:relative;width:20px;height:20px;color:#fff;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vu.is-live .vu-dome{animation:gpBounce 2.8s cubic-bezier(.45,0,.3,1) infinite;animation-delay:calc(var(--f) * -.7s)}

.vu-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;margin-top:2rem}
.vu-link{font-weight:700;color:#1f9e6a;border-bottom:2px solid rgba(31,158,106,.35);padding-bottom:2px}
.vu-link.muted{color:var(--brand);border-color:rgba(49,69,154,.3)}
:root[data-theme="dark"] .vu-link.muted{color:#c9d6ff}

/* ---------- Stage ---------- */
.vu-stage{position:relative;height:520px;perspective:1400px;transform-style:preserve-3d}
.vu-turntable{position:absolute;left:10%;right:10%;bottom:30px;height:140px;transform-style:preserve-3d;transform:rotateX(68deg)}
.vu-plate{position:absolute;inset:0;border-radius:50%;background:var(--base);
  box-shadow:inset 10px 10px 22px var(--sh-dark),inset -10px -10px 22px var(--sh-light),0 30px 50px rgba(20,40,110,.12)}
.vu-ticks{position:absolute;inset:14px;border-radius:50%;
  background:repeating-conic-gradient(from calc(var(--turn) * 1deg),rgba(49,69,154,.28) 0 1.2deg,transparent 1.2deg 10deg);
  -webkit-mask:radial-gradient(closest-side,transparent 82%,#000 84%,#000 92%,transparent 94%);mask:radial-gradient(closest-side,transparent 82%,#000 84%,#000 92%,transparent 94%)}
.vu-glow{position:absolute;inset:22% 18%;border-radius:50%;background:radial-gradient(closest-side,rgba(29,185,194,.55),rgba(217,83,107,.15) 60%,transparent);filter:blur(10px)}
.vu.is-live .vu-glow{animation:halo 4.5s ease-in-out infinite}

.vu-product{position:absolute;left:12%;right:12%;top:40px;transform-style:preserve-3d;
  transform:rotateY(calc(var(--turn) * 1deg + var(--ry,0deg))) rotateX(var(--rx,0deg));transition:transform .5s var(--soft)}
.vu-product.is-tilting{transition:transform .1s linear}
.vu-frame{position:relative;padding:12px;border-radius:34px;background:var(--base);box-shadow:var(--raise-lg);overflow:hidden}
.vu.is-live .vu-frame{animation:vuFloat 6s ease-in-out infinite}
@keyframes vuFloat{50%{translate:0 -14px}}
.vu-frame img{display:block;width:100%;aspect-ratio:1264/848;object-fit:cover;border-radius:24px;box-shadow:var(--press-sm)}
.vu-gloss{position:absolute;inset:12px;border-radius:24px;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 30%),radial-gradient(280px circle at var(--lx,30%) var(--ly,20%),rgba(255,255,255,.3),transparent 60%)}
.vu-scan{position:absolute;left:12px;right:12px;top:12px;height:30%;border-radius:24px 24px 0 0;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(29,185,194,0),rgba(29,185,194,.28) 85%,rgba(95,240,217,.9) 100%)}
.vu.is-live .vu-scan{animation:vuScan 5s var(--soft) infinite 1s}
@keyframes vuScan{0%{opacity:0;transform:translateY(-100%)}10%{opacity:1}55%{opacity:1;transform:translateY(240%)}65%,100%{opacity:0;transform:translateY(240%)}}

/* Orbiting chips around the product */
.vu-orbit{position:absolute;left:50%;top:44%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(-14deg)}
.vu-orb-chip{position:absolute;left:0;top:0;transform-style:preserve-3d;
  transform:rotateY(calc(var(--o) * 90deg)) translateZ(clamp(240px,22vw,300px)) rotateY(calc(var(--o) * -90deg))}
.vu-orb-chip span{display:block;transform:translate(-50%,-50%);white-space:nowrap;padding:.5rem .95rem;border-radius:999px;font-size:.8rem;font-weight:700;color:var(--ink);
  background:var(--glass-strong);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.vu-orbit{animation:vuOrbit 18s linear infinite;animation-play-state:paused}
.vu-orb-chip span{animation:vuCounter 18s linear infinite;animation-play-state:paused}
.vu.is-live .vu-orbit,.vu.is-live .vu-orb-chip span{animation-play-state:running}
@keyframes vuOrbit{from{transform:rotateX(-14deg) rotateY(0)}to{transform:rotateX(-14deg) rotateY(360deg)}}
@keyframes vuCounter{from{transform:translate(-50%,-50%) rotateY(0)}to{transform:translate(-50%,-50%) rotateY(-360deg)}}

/* Animated test cassette */
.vu-cassette{position:absolute;left:-2%;bottom:96px;z-index:5;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;width:250px;padding:14px 16px;border-radius:22px;
  background:var(--base);box-shadow:var(--raise);transform:translateZ(120px) rotate(-6deg)}
.vu.is-live .vu-cassette{animation:vuCas 7s ease-in-out infinite}
@keyframes vuCas{50%{transform:translateZ(120px) rotate(-3deg) translateY(-8px)}}
.vu-cas-label{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--font-head);font-weight:800;font-size:.72rem;letter-spacing:.06em;color:#c9415a}
.vu-cas-window{position:relative;height:30px;border-radius:10px;overflow:hidden;background:#f7f7fb;box-shadow:inset 2px 2px 5px rgba(140,156,186,.6),inset -2px -2px 5px #fff}
:root[data-theme="dark"] .vu-cas-window{background:#e9edf6}
.vu-flow{position:absolute;inset:0;background:linear-gradient(90deg,rgba(236,168,190,.0),rgba(236,168,190,.55) 40%,rgba(236,168,190,.15));transform:translateX(100%)}
.vu-line{position:absolute;top:5px;bottom:5px;width:5px;border-radius:3px;background:#c9415a;opacity:0;transform:scaleY(.2)}
.vu-line i{position:absolute;top:-2px;left:9px;font-style:normal;font-size:.6rem;font-weight:800;color:var(--ink-faint);opacity:1}
.vu-line.c{left:32%}
.vu-line.t{left:62%}
.vu-cas-well{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;box-shadow:inset 3px 3px 6px rgba(140,156,186,.6),inset -3px -3px 6px #fff;background:#f7f7fb}
.vu-drop{width:10px;height:10px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#eaa0b4;opacity:0}
.vu.is-live .vu-drop{animation:vuDrop 6s ease-in infinite}
.vu.is-live .vu-flow{animation:vuFlow 6s var(--soft) infinite}
.vu.is-live .vu-line.c{animation:vuLine 6s var(--soft) infinite}
.vu.is-live .vu-line.t{animation:vuLineT 6s var(--soft) infinite}
@keyframes vuDrop{0%{opacity:0;transform:translateY(-26px) rotate(-45deg)}8%{opacity:1}18%{opacity:1;transform:translateY(0) rotate(-45deg) scale(1)}24%,100%{opacity:0;transform:translateY(0) rotate(-45deg) scale(.4)}}
@keyframes vuFlow{0%,20%{transform:translateX(100%)}50%,88%{transform:translateX(0)}100%{transform:translateX(0);opacity:0}}
@keyframes vuLine{0%,40%{opacity:0;transform:scaleY(.2)}52%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes vuLineT{0%,55%{opacity:0;transform:scaleY(.2)}68%,90%{opacity:.85;transform:none}100%{opacity:0}}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .vu-grid{grid-template-columns:1fr}
  .vu-stage{height:520px;max-width:620px;width:100%;margin:0 auto}
}
@media (max-width:600px){
  .vu-features{grid-template-columns:1fr}
  .vu-stage{height:380px}
  .vu-product{left:6%;right:6%;top:40px}
  .vu-turntable{height:110px;bottom:14px}
  .vu-orb-chip{transform:rotateY(calc(var(--o) * 90deg)) translateZ(150px) rotateY(calc(var(--o) * -90deg))}
  .vu-orb-chip span{font-size:.7rem;padding:.4rem .7rem}
  .vu-cassette{width:190px;bottom:30px;left:8px;padding:10px 12px}
}
@media (prefers-reduced-motion:reduce){
  .vu *{animation:none!important}
  .vu-line{opacity:1;transform:none}
  .vu-product{transform:none}
}