/* A layered red-light projection; animations run only while visible. */
@property --slice-gap{syntax:'<length>';inherits:false;initial-value:0px}
.hero-art{--tilt-x:0deg;--tilt-y:0deg;--holo-shift:0px}
.hero-art .software-window,.hero-art .glass-stack{transform:translateY(var(--art-y)) rotateX(calc(12deg + var(--tilt-x))) rotateY(calc(-20deg + var(--tilt-y))) rotateZ(-6deg);transition:transform .6s cubic-bezier(.18,.7,.2,1)}
.hero-art .software-window:not(.holo-shard){background:linear-gradient(135deg,#322025e8,#111012e8);border-color:#fda68a52;box-shadow:0 35px 60px #0008,inset 0 1px 0 #ffd0b452,0 0 25px #e8442822;animation:holo-float 7s ease-in-out infinite,holo-materialize 14s ease-in-out infinite;mask-image:repeating-linear-gradient(to bottom,#000 0 calc(20px - var(--slice-gap)),transparent calc(20px - var(--slice-gap)) 20px);-webkit-mask-image:repeating-linear-gradient(to bottom,#000 0 calc(20px - var(--slice-gap)),transparent calc(20px - var(--slice-gap)) 20px)}
.software-window:not(.holo-shard)::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;background:repeating-linear-gradient(0deg,transparent 0 3px,#f6845c10 3px 4px);mix-blend-mode:screen;opacity:.4}
.software-window:not(.holo-shard)::after{content:'';position:absolute;inset:-70% -30%;pointer-events:none;z-index:4;background:linear-gradient(165deg,transparent 45%,#ff9b7320 49%,#ffb4938c 50%,#ff603d14 51%,transparent 55%);mix-blend-mode:screen;animation:holo-scan 7s ease-in-out infinite}
.hero-art .holo-shard{pointer-events:none;opacity:0;background:linear-gradient(135deg,#632b3288,#27121555);border-color:#ff9b7370;mix-blend-mode:screen;box-shadow:0 0 20px #ec3f2b30;animation:holo-shard 14s ease-in-out infinite;z-index:1;will-change:transform,opacity;--split:0px;--lift:0px}
.holo-shard.shard-0{clip-path:polygon(0 0,100% 0,100% 31%,0 37%);--split:-32px;--lift:-20px}
.holo-shard.shard-1{clip-path:polygon(0 37%,100% 31%,100% 66%,0 70%);--split:36px;--lift:3px}
.holo-shard.shard-2{clip-path:polygon(0 70%,100% 66%,100% 100%,0 100%);--split:-20px;--lift:24px}
.holo-shard .chart-line{animation:none;stroke-dashoffset:0}.holo-shard .mini-content{color:#ffd4b9}
.hero-art .back-layer{border-color:#ed624b42;background:linear-gradient(140deg,#ed694b0d,#150e1244);box-shadow:0 0 35px #d5402822;animation:holo-back 14s ease-in-out infinite}
.hero-art .middle-layer{background:linear-gradient(140deg,#7a34231c,#22131744);border-color:#ef7a5c3d;animation:holo-middle 14s ease-in-out infinite}
.hero-art .floating-chip{animation:holo-chip 7s ease-in-out infinite}.hero-art .chip-status{animation-delay:-3.5s}
.holo-projector{position:absolute;top:70px;left:20px;width:500px;height:390px;pointer-events:none;z-index:-1;clip-path:polygon(4% 0,100% 0,61% 100%,49% 100%);background:linear-gradient(to top,#e74d2d23,transparent 88%);opacity:.5;animation:holo-projector 7s ease-in-out infinite;transform:rotate(-6deg)}
.holo-source{position:absolute;top:450px;left:250px;width:100px;height:12px;border-radius:50%;background:radial-gradient(ellipse,#ffd9bcaa,#ec402b40 35%,transparent 70%);filter:blur(2px);pointer-events:none;animation:holo-projector 7s ease-in-out infinite}
.holo-particles{position:absolute;inset:40px 0 15px;pointer-events:none;z-index:3;overflow:visible}.holo-particles i{width:2px;height:2px;position:absolute;left:calc(8% + var(--i)*6%);top:80%;background:#f8a17c;box-shadow:0 0 9px #ee704d;border-radius:50%;opacity:0;animation:holo-particle calc(5s + var(--i)*.17s) linear infinite;animation-delay:calc(var(--i)*-.8s)}
.holo-toggle{position:absolute;right:4px;bottom:-45px;z-index:5;color:#bca296;font:9px/1.5 var(--body);padding:6px 10px;border:1px solid #d27e5740;border-radius:20px;background:#150d0d99;display:inline-flex;align-items:center;gap:7px;min-height:28px}.holo-toggle:hover{color:#fff;border-color:#e58f6a99}.holo-toggle span{font-size:11px}.holo-toggle[hidden]{display:none}
.hero-art:not(.holo-running) :is(.software-window,.glass-stack,.floating-chip,.holo-projector,.holo-source,.holo-particles i),.hero-art:not(.holo-running) .software-window::after{animation-play-state:paused}
@keyframes holo-float{0%,100%{transform:translateY(var(--art-y)) rotateX(calc(12deg + var(--tilt-x))) rotateY(calc(-20deg + var(--tilt-y))) rotateZ(-6deg)}50%{transform:translateY(calc(var(--art-y) - 12px)) rotateX(calc(15deg + var(--tilt-x))) rotateY(calc(-15deg + var(--tilt-y))) rotateZ(-4deg)}}
@keyframes holo-materialize{0%,25%,85%,100%{opacity:1;--slice-gap:0px;filter:blur(0)}39%{opacity:.85;--slice-gap:3px;filter:blur(0)}52%{opacity:.23;--slice-gap:16px;filter:blur(.7px)}62%{opacity:.35;--slice-gap:12px;filter:blur(.4px)}74%{opacity:.85;--slice-gap:2px;filter:blur(0)}}
@keyframes holo-shard{0%,28%,82%,100%{opacity:0;transform:translateY(var(--art-y)) rotateX(calc(12deg + var(--tilt-x))) rotateY(calc(-20deg + var(--tilt-y))) rotateZ(-6deg)}42%{opacity:.12}54%,60%{opacity:.75;transform:translate(var(--split),calc(var(--art-y) + var(--lift))) rotateX(calc(16deg + var(--tilt-x))) rotateY(calc(-14deg + var(--tilt-y))) rotateZ(-4deg)}73%{opacity:.15;transform:translateY(var(--art-y)) rotateX(calc(12deg + var(--tilt-x))) rotateY(calc(-20deg + var(--tilt-y))) rotateZ(-6deg)}}
@keyframes holo-scan{0%,12%{transform:translateY(-27%);opacity:0}28%{opacity:.8}73%{opacity:.55}90%,100%{transform:translateY(30%);opacity:0}}
@keyframes holo-back{0%,25%,85%,100%{opacity:.65}54%{opacity:.2;transform:translate(24px,calc(var(--art-y) - 22px)) rotateX(calc(20deg + var(--tilt-x))) rotateY(calc(-9deg + var(--tilt-y))) rotateZ(-3deg)}}
@keyframes holo-middle{0%,25%,85%,100%{opacity:.8}54%{opacity:.3;transform:translate(-12px,calc(var(--art-y) + 16px)) rotateX(calc(14deg + var(--tilt-x))) rotateY(calc(-24deg + var(--tilt-y))) rotateZ(-8deg)}}
@keyframes holo-chip{0%,100%{translate:0 0;opacity:1}50%{translate:0 -10px;opacity:.72}}
@keyframes holo-projector{0%,100%{opacity:.3}50%{opacity:.85}}
@keyframes holo-particle{0%{transform:translate(0,0);opacity:0}20%{opacity:.6}80%{opacity:.3}100%{transform:translate(calc((var(--i) - 6)*3px),-280px);opacity:0}}
@media(max-width:620px){.holo-toggle{bottom:-20px;right:15px;font-size:14px;min-height:42px;padding:6px 12px}.hero-art .art-caption{left:10px;bottom:-48px}.holo-projector{top:20px}.holo-source{top:350px}.holo-particles{inset:0 0 0}.hero-art .holo-shard{--split:0px}.holo-shard.shard-0{--split:-16px}.holo-shard.shard-1{--split:18px}.holo-shard.shard-2{--split:-10px}}
@media(prefers-reduced-motion:reduce){.hero-art .software-window:not(.holo-shard){opacity:1;filter:none;mask-image:none;-webkit-mask-image:none}.hero-art .holo-shard,.holo-projector,.holo-source,.holo-particles,.holo-toggle{display:none}.hero-art .software-window::after{display:none}.hero-art .floating-chip{translate:none}}
@media(max-width:620px){.hero-art{margin-bottom:-60px}.hero-art .holo-toggle{bottom:-105px;right:20px}.hero-art .art-caption{bottom:-85px;left:5px;max-width:290px;font-size:8px;line-height:1.6}}
@media(max-width:370px){.hero-art{margin-bottom:-85px}}