/* Ambient motion uses a few cached CSS planes, with no canvas or particle loop. */
.hero-chaos { position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none; }
.ambient-glow { position:absolute; width:min(76vw,1100px); aspect-ratio:1; left:22%; top:10%; background:radial-gradient(ellipse at 45% 38%,#8583711c,transparent 57%),radial-gradient(ellipse at 62% 62%,#933b261c,transparent 66%); animation:ambientBreath calc(21.7s * var(--motion-tempo,2)) ease-in-out calc(-6s * var(--motion-tempo,2)) infinite; }
@keyframes ambientBreath {
  0%,100% { transform:translate(-20px,12px) scale(.9); opacity:.55; }
  24% { transform:translate(28px,-25px) scale(1.04); opacity:.8; }
  48% { transform:translate(41px,21px) scale(.95); opacity:.62; }
  73% { transform:translate(-31px,32px) scale(1.06); opacity:.9; }
}
.ambient-rings { position:absolute; width:min(70vw,780px); height:min(70vw,780px); left:55%; top:39%; transform:translate(-50%,-50%); }
.ambient-rings i { position:absolute; inset:calc(var(--ring) * 9%); border:1px solid #b371413d; border-radius:50%; animation:ambientOrbit calc(calc(24s + var(--ring) * 7s) * var(--motion-tempo,2)) linear calc(calc(var(--ring) * -5s) * var(--motion-tempo,2)) infinite; }
.ambient-rings i:nth-child(even) { border-style:dashed; border-color:#d14b2638; animation-direction:reverse; }
@keyframes ambientOrbit { from { transform:rotateX(58deg) rotateZ(0deg); } to { transform:rotateX(58deg) rotateZ(360deg); } }
.particle-cloud { position:absolute; left:-80px; top:-80px; width:calc(100% + 160px); height:calc(100% + 160px); background-repeat:repeat; pointer-events:none; }
.particle-cloud-ash { opacity:.32; background-size:430px 370px; background-image:radial-gradient(circle at 17px 32px,#cca984 0 1px,transparent 1.5px),radial-gradient(circle at 217px 186px,#b9987a 0 1px,transparent 1.5px),radial-gradient(circle at 365px 80px,#d9b998 0 .7px,transparent 1.2px),radial-gradient(circle at 122px 297px,#d2b390 0 1.2px,transparent 1.8px); animation:ashCloud calc(24s * var(--motion-tempo,2)) ease-in-out calc(-8s * var(--motion-tempo,2)) infinite alternate; }
.particle-cloud-embers { opacity:.42; background-size:580px 480px; background-image:radial-gradient(ellipse 1px 4px at 114px 216px,#d25831 0 65%,transparent 100%),radial-gradient(ellipse 1px 3px at 415px 58px,#ed9460 0 60%,transparent 100%),radial-gradient(circle at 322px 396px,#b94720 0 1.2px,transparent 2px); animation:emberCloud calc(17s * var(--motion-tempo,2)) ease-in-out calc(-10s * var(--motion-tempo,2)) infinite alternate; }
@keyframes ashCloud {
  0%,100% { transform:translate(-24px,32px); }
  23% { transform:translate(8px,-39px); }
  47% { transform:translate(36px,-12px); }
  72% { transform:translate(-11px,48px); }
}
@keyframes emberCloud {
  0%,100% { transform:translate(30px,48px) rotate(-1deg); }
  18% { transform:translate(-32px,-52px) rotate(1deg); }
  43% { transform:translate(-47px,13px) rotate(-.5deg); }
  69% { transform:translate(21px,-18px) rotate(.7deg); }
  87% { transform:translate(48px,28px) rotate(-.3deg); }
}
@media(max-width:700px) { .ambient-rings { left:62%; width:90vw; height:90vw; } .particle-cloud-ash { background-size:510px 440px; } }