/* Living hero card (holo.js). Values tuned by Martina: tilt 10°, glare 100%, sheen 20%, wave lift 200%. */
.holo{--rx:0deg;--ry:0deg;--gx:50%;--gy:30%;perspective:1100px;max-width:100%}
.holo .holo-tilt{transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s cubic-bezier(.2,.7,.2,1);box-shadow:0 18px 40px -20px rgba(20,10,60,.6);will-change:transform;touch-action:pan-y;border-radius:8px}
.holo.holo-live .holo-tilt{transition:transform .12s linear}
.holo .holo-tilt>img{position:absolute;left:-4%;top:-4%;width:108%;height:108%;max-width:none;object-fit:cover;transform:translate(var(--ix,0px),var(--iy,0px))}
.holo-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 52%,rgba(8,6,22,.55) 100%)}
.holo-wave{position:absolute;left:4%;bottom:5%;width:92%;height:30%;overflow:visible;pointer-events:none;transform:translate(var(--wx,0px),var(--wy,0px));filter:drop-shadow(0 0 6px rgba(255,214,240,.55))}
.holo-wave path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.holo-wave .holo-trace{stroke:url(#holo-ink);stroke-width:2.2}
.holo-wave .holo-echo{stroke:#fff;stroke-width:1;opacity:.35}
.holo-glare{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,.75),rgba(255,255,255,0) 45%);mix-blend-mode:soft-light;opacity:1}
.holo-sheen{position:absolute;inset:-20%;pointer-events:none;background:linear-gradient(115deg,transparent 30%,#9fd3ff 40%,#e8b5ff 47%,#ffd6a5 54%,transparent 64%);background-size:220% 220%;background-position:var(--sx,50%) 50%;mix-blend-mode:color-dodge;opacity:.2}
.holo-edge{position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
/* the strip under the card keeps caption + pause button; the line itself now lives on the card */
.hero-art.has-holo .waveform-panel .waveform-svg{visibility:hidden}
@media(prefers-reduced-motion:reduce){.holo .holo-tilt{transition:none;transform:none}}