.skill-row { position:relative; isolation:isolate; overflow:hidden; }
.skill-row > :not(.card-spotlight) { position:relative; z-index:1; }
.card-spotlight { position:absolute; left:0; top:0; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.075),rgba(255,255,255,.025) 35%,transparent 68%); pointer-events:none; opacity:0; transition:opacity .3s ease; }
.skill-row.has-spotlight .card-spotlight { opacity:1; }
.hero-main { position:relative; isolation:isolate; }
.hero-copy, .hero-portrait { position:relative; z-index:1; }
.quiet-sparkles { position:absolute; inset:0; width:100%; height:100%; z-index:0; overflow:hidden; pointer-events:none; mask-image:radial-gradient(ellipse at center,#000 45%,transparent 100%); }
.quiet-sparkles i { position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; opacity:0; animation:quiet-sparkle var(--duration) ease-in-out var(--delay) infinite; animation-play-state:paused; }
.quiet-sparkles i:nth-child(3n) { width:2.5px; height:2.5px; }
.quiet-sparkles.is-running i { animation-play-state:running; }
@keyframes quiet-sparkle { 0%,100% { opacity:.1; transform:translate3d(0,4px,0) scale(.8); } 50% { opacity:.55; transform:translate3d(5px,-4px,0) scale(1); } }
@media (max-width:700px) { .quiet-sparkles i:nth-child(n+25) { display:none; } }
@media (hover:none), (pointer:coarse) { .card-spotlight { display:none; } }
@media (prefers-reduced-motion:reduce) { .quiet-sparkles, .card-spotlight { display:none; } .quiet-sparkles i { animation:none; } }
@media print { .quiet-sparkles, .card-spotlight { display:none; } }