.product-animated-frame {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.animation-scene {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.scene-vinyl .vinyl-ring {
    position: absolute;
    inset: 12%;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 50%;
    animation: som-spin 11s linear infinite;
}

.scene-vinyl .vinyl-ring.is-inner {
    inset: 26%;
    animation-duration: 7s;
    opacity: 0.45;
}

.scene-embers .ember {
    position: absolute;
    bottom: -8%;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 193, 95, 0.95), rgba(255, 82, 0, 0));
    animation: som-rise 5.5s linear infinite;
}

.scene-embers .ember-1 { left: 10%; animation-delay: 0s; }
.scene-embers .ember-2 { left: 18%; animation-delay: .8s; }
.scene-embers .ember-3 { left: 28%; animation-delay: 1.4s; }
.scene-embers .ember-4 { left: 37%; animation-delay: .4s; }
.scene-embers .ember-5 { left: 50%; animation-delay: 1.9s; }
.scene-embers .ember-6 { left: 61%; animation-delay: 1.2s; }
.scene-embers .ember-7 { left: 70%; animation-delay: .3s; }
.scene-embers .ember-8 { left: 80%; animation-delay: 1.5s; }
.scene-embers .ember-9 { left: 88%; animation-delay: .9s; }
.scene-embers .ember-10 { left: 94%; animation-delay: 2.1s; }

.scene-pulse .pulse-wave {
    position: absolute;
    inset: 18%;
    border-radius: 1.75rem;
    border: 1px solid rgba(95, 255, 229, 0.38);
    box-shadow: 0 0 30px rgba(95, 255, 229, 0.12);
    animation: som-pulse 3.4s ease-out infinite;
}

.scene-pulse .pulse-wave.is-delayed {
    animation-delay: 1.2s;
}

.scene-glitch .glitch-bar {
    position: absolute;
    inset-inline: 0;
    height: 14%;
    background: linear-gradient(90deg, rgba(255, 0, 89, 0), rgba(255, 0, 89, 0.3), rgba(0, 224, 255, 0.18), rgba(255, 0, 89, 0));
    mix-blend-mode: screen;
    animation: som-glitch 3.8s steps(2, end) infinite;
}

.scene-glitch .glitch-bar-top {
    top: 20%;
}

.scene-glitch .glitch-bar-bottom {
    top: 62%;
    animation-delay: .9s;
}

@keyframes som-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes som-rise {
    0% { transform: translate3d(0, 0, 0) scale(.7); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translate3d(-8px, -220px, 0) scale(1.2); opacity: 0; }
}

@keyframes som-pulse {
    0% { transform: scale(.86); opacity: .1; }
    50% { opacity: .48; }
    100% { transform: scale(1.08); opacity: 0; }
}

@keyframes som-glitch {
    0%, 100% { transform: translateX(0); opacity: 0; }
    8% { transform: translateX(-2%); opacity: .75; }
    12% { transform: translateX(2%); opacity: .25; }
    16% { transform: translateX(0); opacity: 0; }
}