/* ============================================================
 *  PHOTO ANIMATIONS CSS
 *  Animasi muncul + efek lampu disko + frame + speech bubble
 *
 *  Cara pakai:
 *    1. Include <link rel="stylesheet" href="~/tiktok-live/css/photo-animations.css" />
 *    2. Include <script src="~/tiktok-live/js/photo-animations.js"></script>
 *    3. Panggil: PhotoAnim.apply(photoElement);
 * ============================================================ */

/* ============================================================
 *  BASE
 * ============================================================ */

.photo-anim-target {
    position: absolute;
    contain: layout style paint;
    backface-visibility: hidden;
}

/* ============================================================
 *  ANIMASI MUNCUL - TRANSFORM ONLY (GPU ACCELERATED)
 * ============================================================ */

/* 1. FADE */
.photo-anim-fade {
    animation: photoFade 1s ease both;
}

@keyframes photoFade {
    from {
        opacity: 0;
        transform: translate(var(--x, 0), var(--y, 0)) scale(0.5);
    }

    to {
        opacity: 1;
        transform: translate(var(--x, 0), var(--y, 0)) scale(1);
    }
}

/* 2. ZOOM IN */
.photo-anim-zoom-in {
    animation: photoZoomIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes photoZoomIn {
    from {
        opacity: 0;
        transform: translate(var(--x, 0), var(--y, 0)) scale(0.2) rotate(-8deg);
    }

    to {
        opacity: 1;
        transform: translate(var(--x, 0), var(--y, 0)) scale(1) rotate(0deg);
    }
}

/* 3. ZOOM OUT */
.photo-anim-zoom-out {
    animation: photoZoomOut 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes photoZoomOut {
    from {
        opacity: 0;
        transform: translate(var(--x, 0), var(--y, 0)) scale(2.5);
    }

    to {
        opacity: 1;
        transform: translate(var(--x, 0), var(--y, 0)) scale(1);
    }
}

/* 4. JELLY */
.photo-anim-jelly {
    animation: photoJelly 2s ease both;
}

@keyframes photoJelly {
    0% {
        opacity: 0;
        transform: translate(var(--x, 0), var(--y, 0)) scale(0.2) skewX(-30deg);
    }

    15% {
        opacity: 1;
        transform: translate(var(--x, 0), var(--y, 0)) scale(1.25) skewX(25deg);
    }

    30% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(0.85) skewX(-20deg);
    }

    45% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(1.15) skewX(15deg);
    }

    60% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(0.92) skewX(-10deg);
    }

    75% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(1.08) skewX(8deg);
    }

    88% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(0.98) skewX(-4deg);
    }

    100% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(1) skewX(0);
    }
}

/* 5. WOBBLE */
.photo-anim-wobble {
    animation: photoWobble 2s ease both;
}

@keyframes photoWobble {
    0% {
        opacity: 0;
        transform: translate(var(--x, 0), var(--y, 0)) rotate(-45deg) scale(0.3);
    }

    20% {
        opacity: 1;
        transform: translate(var(--x, 0), var(--y, 0)) rotate(20deg) scale(1.15);
    }

    35% {
        transform: translate(var(--x, 0), var(--y, 0)) rotate(-15deg) scale(1.05);
    }

    50% {
        transform: translate(var(--x, 0), var(--y, 0)) rotate(10deg) scale(1.02);
    }

    65% {
        transform: translate(var(--x, 0), var(--y, 0)) rotate(-6deg);
    }

    80% {
        transform: translate(var(--x, 0), var(--y, 0)) rotate(3deg);
    }

    100% {
        transform: translate(var(--x, 0), var(--y, 0)) rotate(0) scale(1);
    }
}

/* 6. SHAKE */
.photo-anim-shake {
    animation: photoShake 1.8s ease both;
}

@keyframes photoShake {
    0% {
        opacity: 0;
        transform: translate(var(--x, 0), var(--y, 0)) scale(0.5);
    }

    10% {
        opacity: 1;
        transform: translate(calc(var(--x, 0) - 12px), calc(var(--y, 0) - 8px)) rotate(-5deg);
    }

    20% {
        transform: translate(calc(var(--x, 0) + 12px), calc(var(--y, 0) + 8px)) rotate(5deg);
    }

    30% {
        transform: translate(calc(var(--x, 0) - 10px), calc(var(--y, 0) + 6px)) rotate(-4deg);
    }

    40% {
        transform: translate(calc(var(--x, 0) + 10px), calc(var(--y, 0) - 6px)) rotate(4deg);
    }

    50% {
        transform: translate(calc(var(--x, 0) - 8px), calc(var(--y, 0) + 5px)) rotate(-3deg);
    }

    60% {
        transform: translate(calc(var(--x, 0) + 8px), calc(var(--y, 0) - 5px)) rotate(3deg);
    }

    70% {
        transform: translate(calc(var(--x, 0) - 5px), calc(var(--y, 0) + 3px)) rotate(-2deg);
    }

    80% {
        transform: translate(calc(var(--x, 0) + 5px), calc(var(--y, 0) - 3px)) rotate(2deg);
    }

    90% {
        transform: translate(calc(var(--x, 0) - 2px), calc(var(--y, 0) + 1px)) rotate(-1deg);
    }

    100% {
        transform: translate(var(--x, 0), var(--y, 0)) rotate(0) scale(1);
    }
}

/* 7. WIGGLE */
.photo-anim-wiggle {
    animation: photoWiggle 2.2s ease both;
}

@keyframes photoWiggle {
    0% {
        opacity: 0;
        transform: translate(var(--x, 0), var(--y, 0)) scale(0.4) rotate(-10deg);
    }

    10% {
        opacity: 1;
        transform: translate(var(--x, 0), var(--y, 0)) rotate(15deg) scale(1.1);
    }

    20% {
        transform: translate(var(--x, 0), var(--y, 0)) rotate(-12deg) scale(1.02);
    }

    30% {
        transform: translate(var(--x, 0), var(--y, 0)) rotate(10deg);
    }

    40% {
        transform: translate(var(--x, 0), var(--y, 0)) rotate(-8deg);
    }

    50% {
        transform: translate(var(--x, 0), var(--y, 0)) rotate(6deg);
    }

    60% {
        transform: translate(var(--x, 0), var(--y, 0)) rotate(-5deg);
    }

    70% {
        transform: translate(var(--x, 0), var(--y, 0)) rotate(4deg);
    }

    80% {
        transform: translate(var(--x, 0), var(--y, 0)) rotate(-3deg);
    }

    90% {
        transform: translate(var(--x, 0), var(--y, 0)) rotate(2deg);
    }

    100% {
        transform: translate(var(--x, 0), var(--y, 0)) rotate(0) scale(1);
    }
}

/* 8. PULSE */
.photo-anim-pulse {
    animation: photoPulse 1.8s ease both;
}

@keyframes photoPulse {
    0% {
        opacity: 0;
        transform: translate(var(--x, 0), var(--y, 0)) scale(0.5);
    }

    20% {
        opacity: 1;
        transform: translate(var(--x, 0), var(--y, 0)) scale(1.15);
    }

    35% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(1);
    }

    50% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(1.12);
    }

    65% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(1);
    }

    80% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(1.08);
    }

    100% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(1);
    }
}

/* 9. HEARTBEAT */
.photo-anim-heartbeat {
    animation: photoHeartbeat 2s ease both;
}

@keyframes photoHeartbeat {
    0% {
        opacity: 0;
        transform: translate(var(--x, 0), var(--y, 0)) scale(0.5);
    }

    14% {
        opacity: 1;
        transform: translate(var(--x, 0), var(--y, 0)) scale(1.2);
    }

    28% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(1);
    }

    42% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(1.25);
    }

    56% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(1);
    }

    70% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(1.15);
    }

    84% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(1);
    }

    100% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(1);
    }
}

/* 10. SQUISH */
.photo-anim-squish {
    animation: photoSquish 2s ease both;
}

@keyframes photoSquish {
    0% {
        opacity: 0;
        transform: translate(var(--x, 0), var(--y, 0)) scale(0, 0);
    }

    15% {
        opacity: 1;
        transform: translate(var(--x, 0), var(--y, 0)) scale(1.4, 0.6);
    }

    30% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(0.7, 1.3);
    }

    45% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(1.25, 0.8);
    }

    60% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(0.85, 1.15);
    }

    75% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(1.1, 0.92);
    }

    88% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(0.96, 1.04);
    }

    100% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(1, 1);
    }
}

/* 11. BOUNCE */
.photo-anim-bounce {
    animation: photoBounce 1.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes photoBounce {
    0% {
        opacity: 0;
        transform: translate(var(--x, 0), var(--y, 0)) scale(0.2);
    }

    40% {
        opacity: 1;
        transform: translate(var(--x, 0), var(--y, 0)) scale(1.15);
    }

    60% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(0.92);
    }

    80% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(1.05);
    }

    100% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(1);
    }
}

/* 12. DROP */
.photo-anim-drop {
    animation: photoDrop 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes photoDrop {
    0% {
        opacity: 0;
        transform: translate(var(--x, 0), calc(var(--y, 0) - 100vh)) scale(0.5);
    }

    60% {
        opacity: 1;
        transform: translate(var(--x, 0), var(--y, 0)) scale(1.05);
    }

    80% {
        transform: translate(var(--x, 0), calc(var(--y, 0) - 15px)) scale(0.98);
    }

    100% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(1);
    }
}

/* 13. SPIN */
.photo-anim-spin {
    animation: photoSpin 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes photoSpin {
    from {
        opacity: 0;
        transform: translate(var(--x, 0), var(--y, 0)) scale(2) rotate(-720deg);
    }

    to {
        opacity: 1;
        transform: translate(var(--x, 0), var(--y, 0)) scale(1) rotate(0deg);
    }
}

/* 14. ROTATE */
.photo-anim-rotate {
    animation: photoRotate 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes photoRotate {
    from {
        opacity: 0;
        transform: translate(var(--x, 0), var(--y, 0)) rotate(-180deg) scale(0.3);
    }

    to {
        opacity: 1;
        transform: translate(var(--x, 0), var(--y, 0)) rotate(0deg) scale(1);
    }
}

/* 15. RUBBER */
.photo-anim-rubber {
    animation: photoRubber 1.8s ease both;
}

@keyframes photoRubber {
    0% {
        opacity: 0;
        transform: translate(var(--x, 0), var(--y, 0)) scale(0.1);
    }

    40% {
        opacity: 1;
        transform: translate(var(--x, 0), var(--y, 0)) scale(1.3, 0.7);
    }

    60% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(0.85, 1.15);
    }

    75% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(1.08, 0.92);
    }

    90% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(0.98, 1.02);
    }

    100% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(1, 1);
    }
}

/* 16. SWIRL */
.photo-anim-swirl {
    animation: photoSwirl 1.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes photoSwirl {
    from {
        opacity: 0;
        transform: translate(var(--x, 0), var(--y, 0)) rotate(1080deg) scale(0.05);
    }

    to {
        opacity: 1;
        transform: translate(var(--x, 0), var(--y, 0)) rotate(0deg) scale(1);
    }
}

/* 17. POP */
.photo-anim-pop {
    animation: photoPop 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes photoPop {
    0% {
        opacity: 0;
        transform: translate(var(--x, 0), var(--y, 0)) scale(0);
    }

    50% {
        opacity: 1;
        transform: translate(var(--x, 0), var(--y, 0)) scale(1.3);
    }

    70% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(0.9);
    }

    85% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(1.05);
    }

    100% {
        transform: translate(var(--x, 0), var(--y, 0)) scale(1);
    }
}

/* 18. FLIP H */
.photo-anim-flip-h {
    animation: photoFlipH 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes photoFlipH {
    from {
        opacity: 0;
        transform: translate(var(--x, 0), var(--y, 0)) perspective(1200px) rotateY(90deg) scale(0.7);
    }

    to {
        opacity: 1;
        transform: translate(var(--x, 0), var(--y, 0)) perspective(1200px) rotateY(0deg) scale(1);
    }
}

/* 19. FLIP V */
.photo-anim-flip-v {
    animation: photoFlipV 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes photoFlipV {
    from {
        opacity: 0;
        transform: translate(var(--x, 0), var(--y, 0)) perspective(1200px) rotateX(90deg) scale(0.7);
    }

    to {
        opacity: 1;
        transform: translate(var(--x, 0), var(--y, 0)) perspective(1200px) rotateX(0deg) scale(1);
    }
}

/* 20. EARTHQUAKE */
.photo-anim-earthquake {
    animation: photoEarthquake 2s ease both;
}

@keyframes photoEarthquake {
    0% {
        opacity: 0;
        transform: translate(var(--x, 0), var(--y, 0)) scale(1.3);
    }

    10% {
        opacity: 1;
        transform: translate(calc(var(--x, 0) + 10px), calc(var(--y, 0) + 7px)) scale(1);
    }

    18% {
        transform: translate(calc(var(--x, 0) - 13px), calc(var(--y, 0) - 9px));
    }

    26% {
        transform: translate(calc(var(--x, 0) + 15px), calc(var(--y, 0) + 10px));
    }

    34% {
        transform: translate(calc(var(--x, 0) - 17px), calc(var(--y, 0) - 7px));
    }

    42% {
        transform: translate(calc(var(--x, 0) + 13px), calc(var(--y, 0) + 8px));
    }

    50% {
        transform: translate(calc(var(--x, 0) - 10px), calc(var(--y, 0) - 5px));
    }

    58% {
        transform: translate(calc(var(--x, 0) + 8px), calc(var(--y, 0) + 6px));
    }

    66% {
        transform: translate(calc(var(--x, 0) - 6px), calc(var(--y, 0) - 4px));
    }

    74% {
        transform: translate(calc(var(--x, 0) + 4px), calc(var(--y, 0) + 3px));
    }

    82% {
        transform: translate(calc(var(--x, 0) - 2px), calc(var(--y, 0) - 2px));
    }

    90% {
        transform: translate(calc(var(--x, 0) + 1px), calc(var(--y, 0) + 1px));
    }

    100% {
        transform: translate(var(--x, 0), var(--y, 0));
    }
}

/* 21. TORNADO */
.photo-anim-tornado {
    animation: photoTornado 2.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes photoTornado {
    0% {
        opacity: 0;
        transform: translate(var(--x, 0), var(--y, 0)) scale(0.1) rotate(0deg);
    }

    20% {
        opacity: 1;
        transform: translate(calc(var(--x, 0) + 25px), var(--y, 0)) scale(0.7) rotate(720deg);
    }

    35% {
        transform: translate(calc(var(--x, 0) - 20px), var(--y, 0)) scale(1) rotate(1080deg);
    }

    50% {
        transform: translate(calc(var(--x, 0) + 12px), var(--y, 0)) rotate(1440deg);
    }

    65% {
        transform: translate(calc(var(--x, 0) - 8px), var(--y, 0)) rotate(1620deg);
    }

    80% {
        transform: translate(calc(var(--x, 0) + 4px), var(--y, 0)) rotate(1710deg);
    }

    100% {
        transform: translate(var(--x, 0), var(--y, 0)) rotate(1800deg);
    }
}

/* 22. DRUNKEN */
.photo-anim-drunken {
    animation: photoDrunken 2.4s ease both;
}

@keyframes photoDrunken {
    0% {
        opacity: 0;
        transform: translate(calc(var(--x, 0) - 40px), calc(var(--y, 0) + 25px)) rotate(-15deg);
    }

    15% {
        opacity: 1;
        transform: translate(calc(var(--x, 0) + 35px), calc(var(--y, 0) - 18px)) rotate(12deg);
    }

    30% {
        transform: translate(calc(var(--x, 0) - 30px), calc(var(--y, 0) + 20px)) rotate(-10deg);
    }

    45% {
        transform: translate(calc(var(--x, 0) + 25px), calc(var(--y, 0) - 15px)) rotate(8deg);
    }

    60% {
        transform: translate(calc(var(--x, 0) - 18px), calc(var(--y, 0) + 12px)) rotate(-6deg);
    }

    75% {
        transform: translate(calc(var(--x, 0) + 12px), calc(var(--y, 0) - 8px)) rotate(4deg);
    }

    88% {
        transform: translate(calc(var(--x, 0) - 6px), calc(var(--y, 0) + 4px)) rotate(-2deg);
    }

    100% {
        transform: translate(var(--x, 0), var(--y, 0)) rotate(0);
    }
}

/* 23. MORPH CIRCLE */
.photo-anim-morph {
    animation: photoMorph 1.5s ease both;
}

@keyframes photoMorph {
    0% {
        opacity: 0;
        clip-path: circle(0% at 50% 50%);
    }

    100% {
        opacity: 1;
        clip-path: circle(100% at 50% 50%);
    }
}

/* 24. DIAMOND */
.photo-anim-diamond {
    animation: photoDiamond 1.5s ease both;
}

@keyframes photoDiamond {
    0% {
        opacity: 0;
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    }

    100% {
        opacity: 1;
        clip-path: polygon(50% -100%, 200% 50%, 50% 200%, -100% 50%);
    }
}

/* 25. TV ON */
.photo-anim-tv-on {
    animation: photoTvOn 1.5s ease both;
}

@keyframes photoTvOn {
    0% {
        opacity: 0;
        transform: translate(var(--x, 0), var(--y, 0)) scaleY(0.001) scaleX(0.5);
    }

    40% {
        opacity: 1;
        transform: translate(var(--x, 0), var(--y, 0)) scaleY(0.05) scaleX(1);
    }

    70% {
        transform: translate(var(--x, 0), var(--y, 0)) scaleY(1) scaleX(1);
    }

    100% {
        transform: translate(var(--x, 0), var(--y, 0)) scaleY(1) scaleX(1);
    }
}

/* 26. HYPERSPACE */
.photo-anim-hyperspace {
    animation: photoHyperspace 1.6s ease both;
}

@keyframes photoHyperspace {
    0% {
        opacity: 0;
        transform: translate(var(--x, 0), var(--y, 0)) scale(0.1);
    }

    50% {
        opacity: 1;
        transform: translate(var(--x, 0), var(--y, 0)) scale(0.5);
    }

    100% {
        opacity: 1;
        transform: translate(var(--x, 0), var(--y, 0)) scale(1);
    }
}

/* 27. LIGHT SPEED */
.photo-anim-light-speed {
    animation: photoLightSpeed 1.3s ease both;
}

@keyframes photoLightSpeed {
    from {
        opacity: 0;
        transform: translate(calc(var(--x, 0) - 100vw), var(--y, 0)) skewX(50deg) scaleX(3);
    }

    to {
        opacity: 1;
        transform: translate(var(--x, 0), var(--y, 0)) skewX(0) scaleX(1);
    }
}

/* ============================================================
 *  EFEK LAMPU DISKO - BOX-SHADOW BASED
 * ============================================================ */

.photo-disco-1 {
    animation: discoRainbow 3s linear infinite;
}

@keyframes discoRainbow {
    0% {
        filter: hue-rotate(0deg) brightness(1.15) saturate(1.6);
    }

    25% {
        filter: hue-rotate(90deg) brightness(1.15) saturate(1.6);
    }

    50% {
        filter: hue-rotate(180deg) brightness(1.15) saturate(1.6);
    }

    75% {
        filter: hue-rotate(270deg) brightness(1.15) saturate(1.6);
    }

    100% {
        filter: hue-rotate(360deg) brightness(1.15) saturate(1.6);
    }
}

.photo-disco-2 {
    animation: discoBorder 2s linear infinite;
}

@keyframes discoBorder {
    0% {
        box-shadow: 0 0 20px 4px #ff0080, 0 0 40px 8px #ff008080;
    }

    25% {
        box-shadow: 0 0 20px 4px #ffcc00, 0 0 40px 8px #ffcc0080;
    }

    50% {
        box-shadow: 0 0 20px 4px #00ffff, 0 0 40px 8px #00ffff80;
    }

    75% {
        box-shadow: 0 0 20px 4px #00ff00, 0 0 40px 8px #00ff0080;
    }

    100% {
        box-shadow: 0 0 20px 4px #ff0080, 0 0 40px 8px #ff008080;
    }
}

.photo-disco-3 {
    animation: discoRGB 1.5s linear infinite;
}

@keyframes discoRGB {
    0% {
        box-shadow: 0 0 25px 5px #ff0000, 0 0 50px 10px #ff000080;
    }

    33% {
        box-shadow: 0 0 25px 5px #00ff00, 0 0 50px 10px #00ff0080;
    }

    66% {
        box-shadow: 0 0 25px 5px #0000ff, 0 0 50px 10px #0000ff80;
    }

    100% {
        box-shadow: 0 0 25px 5px #ff0000, 0 0 50px 10px #ff000080;
    }
}

.photo-disco-4 {
    animation: discoNeon 2.5s ease-in-out infinite;
}

@keyframes discoNeon {
    0% {
        box-shadow: 0 0 30px 6px #ff00ff, 0 0 60px 12px #00ffff80;
    }

    33% {
        box-shadow: 0 0 30px 6px #00ff00, 0 0 60px 12px #ff008080;
    }

    66% {
        box-shadow: 0 0 30px 6px #ff8000, 0 0 60px 12px #8000ff80;
    }

    100% {
        box-shadow: 0 0 30px 6px #ff00ff, 0 0 60px 12px #00ffff80;
    }
}

.photo-disco-5 {
    animation: discoBallSpin 4s linear infinite;
}

@keyframes discoBallSpin {
    0% {
        filter: hue-rotate(0deg) brightness(1.15);
        box-shadow: 0 0 25px 5px #ffffff80, 0 0 50px 10px #ff00ff80;
    }

    25% {
        filter: hue-rotate(90deg) brightness(1.15);
        box-shadow: 0 0 25px 5px #ffffff80, 0 0 50px 10px #ffff0080;
    }

    50% {
        filter: hue-rotate(180deg) brightness(1.15);
        box-shadow: 0 0 25px 5px #ffffff80, 0 0 50px 10px #00ffff80;
    }

    75% {
        filter: hue-rotate(270deg) brightness(1.15);
        box-shadow: 0 0 25px 5px #ffffff80, 0 0 50px 10px #ff008080;
    }

    100% {
        filter: hue-rotate(360deg) brightness(1.15);
        box-shadow: 0 0 25px 5px #ffffff80, 0 0 50px 10px #ff00ff80;
    }
}

.photo-disco-6 {
    animation: discoPulseGlow 1.8s ease-in-out infinite;
}

@keyframes discoPulseGlow {
    0%, 100% {
        box-shadow: 0 0 15px 3px #00ffff, 0 0 30px 6px #ff00ff80;
    }

    50% {
        box-shadow: 0 0 35px 8px #00ffff, 0 0 70px 15px #ff00ffff;
    }
}

.photo-disco-7 {
    animation: discoLaser 1.2s steps(6) infinite;
}

@keyframes discoLaser {
    0% {
        box-shadow: 0 0 25px 5px #ff0000, 0 0 50px 10px #ff000080;
    }

    16% {
        box-shadow: 0 0 25px 5px #ff8800, 0 0 50px 10px #ff880080;
    }

    33% {
        box-shadow: 0 0 25px 5px #ffff00, 0 0 50px 10px #ffff0080;
    }

    50% {
        box-shadow: 0 0 25px 5px #00ff00, 0 0 50px 10px #00ff0080;
    }

    66% {
        box-shadow: 0 0 25px 5px #0080ff, 0 0 50px 10px #0080ff80;
    }

    83% {
        box-shadow: 0 0 25px 5px #8000ff, 0 0 50px 10px #8000ff80;
    }

    100% {
        box-shadow: 0 0 25px 5px #ff0000, 0 0 50px 10px #ff000080;
    }
}

.photo-disco-8 {
    animation: discoClub 2.2s ease-in-out infinite;
}

@keyframes discoClub {
    0% {
        filter: brightness(1.1) saturate(1.5) hue-rotate(0deg);
        box-shadow: 0 0 25px 5px #ff0080, 0 0 50px 10px #ff008080;
    }

    25% {
        filter: brightness(1.2) saturate(1.7) hue-rotate(45deg);
        box-shadow: 0 0 30px 6px #ff8000, 0 0 60px 12px #ff800080;
    }

    50% {
        filter: brightness(1.1) saturate(1.5) hue-rotate(180deg);
        box-shadow: 0 0 25px 5px #00ffff, 0 0 50px 10px #00ffff80;
    }

    75% {
        filter: brightness(1.2) saturate(1.7) hue-rotate(270deg);
        box-shadow: 0 0 30px 6px #8000ff, 0 0 60px 12px #8000ff80;
    }

    100% {
        filter: brightness(1.1) saturate(1.5) hue-rotate(360deg);
        box-shadow: 0 0 25px 5px #ff0080, 0 0 50px 10px #ff008080;
    }
}

.photo-disco-9 {
    animation: discoFire 1.8s linear infinite;
}

@keyframes discoFire {
    0% {
        box-shadow: 0 0 25px 5px #ff0000, 0 0 50px 10px #ff440080;
    }

    33% {
        box-shadow: 0 0 25px 5px #ff4400, 0 0 50px 10px #ff880080;
    }

    66% {
        box-shadow: 0 0 25px 5px #ff8800, 0 0 50px 10px #ffcc0080;
    }

    100% {
        box-shadow: 0 0 25px 5px #ff0000, 0 0 50px 10px #ff440080;
    }
}

.photo-disco-10 {
    animation: discoIce 2s linear infinite;
}

@keyframes discoIce {
    0% {
        box-shadow: 0 0 25px 5px #0080ff, 0 0 50px 10px #00ffff80;
    }

    33% {
        box-shadow: 0 0 25px 5px #00ffff, 0 0 50px 10px #ffffff80;
    }

    66% {
        box-shadow: 0 0 25px 5px #00ffff, 0 0 50px 10px #8000ff80;
    }

    100% {
        box-shadow: 0 0 25px 5px #0080ff, 0 0 50px 10px #00ffff80;
    }
}

.photo-disco-11 {
    animation: discoSpotlight 3.5s linear infinite;
}

@keyframes discoSpotlight {
    0% {
        box-shadow: -15px -15px 30px 5px #ff0080, 15px 15px 30px 5px #00ffff;
    }

    25% {
        box-shadow: 15px -15px 30px 5px #ffff00, -15px 15px 30px 5px #8000ff;
    }

    50% {
        box-shadow: 15px 15px 30px 5px #00ff00, -15px -15px 30px 5px #ff4400;
    }

    75% {
        box-shadow: -15px 15px 30px 5px #0080ff, 15px -15px 30px 5px #ff0080;
    }

    100% {
        box-shadow: -15px -15px 30px 5px #ff0080, 15px 15px 30px 5px #00ffff;
    }
}

.photo-disco-12 {
    animation: discoStrobe 0.9s steps(3) infinite;
}

@keyframes discoStrobe {
    0% {
        box-shadow: 0 0 30px 6px #ff0080, 0 0 60px 12px #ff008080;
    }

    33% {
        box-shadow: 0 0 30px 6px #00ffff, 0 0 60px 12px #00ffff80;
    }

    66% {
        box-shadow: 0 0 30px 6px #ffff00, 0 0 60px 12px #ffff0080;
    }

    100% {
        box-shadow: 0 0 30px 6px #ff0080, 0 0 60px 12px #ff008080;
    }
}

/* ============================================================
 *  PARTIKEL & EFEK TAMBAHAN
 * ============================================================ */

.photo-spark {
    position: fixed;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px #fff;
    animation: photoSparkFly 1.2s ease-out forwards;
    pointer-events: none;
    z-index: 9998;
    will-change: transform, opacity;
}

@keyframes photoSparkFly {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(var(--tx, 0), var(--ty, 0)) scale(0);
    }
}

.photo-flower {
    position: fixed;
    top: -60px;
    font-size: 30px;
    pointer-events: none;
    z-index: 9997;
    animation: photoFlowerFall linear forwards;
    will-change: transform;
}

@keyframes photoFlowerFall {
    0% {
        opacity: 0;
        transform: translateY(0) rotate(0deg);
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(110vh) translateX(var(--drift, 0px)) rotate(var(--rot, 360deg));
    }
}

.photo-bird {
    position: fixed;
    font-size: 36px;
    pointer-events: none;
    z-index: 9997;
    animation: photoBirdFly linear forwards;
    will-change: transform;
}

@keyframes photoBirdFly {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.6);
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(var(--mx, 120vw), var(--my, -100px)) scale(0.7);
    }
}

.photo-fish {
    position: fixed;
    font-size: 38px;
    pointer-events: none;
    z-index: 9997;
    animation: photoFishSwim linear forwards;
    will-change: transform;
}

@keyframes photoFishSwim {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.7) rotate(0deg);
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(var(--mx, 120vw), var(--my, 0px)) scale(0.8) rotate(var(--tilt, 0deg));
    }
}

/* ============================================================
 *  PHOTO FRAME WRAP - Bingkai frame untuk bubble besar
 * ============================================================ */

.photo-frame-wrap {
    position: absolute;
    pointer-events: auto;
    transition: transform 5s ease-in-out, opacity 2s ease-in-out;
    contain: layout style paint;
    backface-visibility: hidden;
    will-change: transform, opacity, filter, box-shadow;
    background: transparent;
}

    .photo-frame-wrap .photo-inner {
        pointer-events: none;
        user-select: none;
        display: block;
        z-index: 1;
    }

    .photo-frame-wrap .photo-frame-overlay {
        pointer-events: none;
        user-select: none;
        display: block;
        z-index: 2;
    }
/* ============================================================
 *  SPEECH BUBBLE SHAPE - Untuk photo small & medium
 * ============================================================ */

.photo-shape-speech {
    position: absolute;
    pointer-events: auto;
    background: transparent;
    transition: transform 5s ease-in-out, opacity 2s ease-in-out;
    backface-visibility: hidden;
    overflow: visible;
}

    .photo-shape-speech .photo-speech-inner {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 16px;
        display: block;
        pointer-events: none;
        border: 3px solid #ffffff;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
        box-sizing: border-box;
        z-index: 2;
    }

.photo-speech-tail {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #ffffff;
    z-index: 3;
    pointer-events: none;
}

    .photo-speech-tail.tail-right-bottom {
        right: 20px;
        bottom: -12px;
        border-radius: 0 0 8px 0;
        transform: rotate(45deg);
        box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);
    }

    .photo-speech-tail.tail-left-bottom {
        left: 20px;
        bottom: -12px;
        border-radius: 0 0 0 8px;
        transform: rotate(45deg);
        box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);
    }

    .photo-speech-tail.tail-right-top {
        right: 20px;
        top: -12px;
        border-radius: 8px 0 0 0;
        transform: rotate(45deg);
        box-shadow: -4px -4px 6px rgba(0, 0, 0, 0.2);
    }

/* Warna */
.photo-shape-speech.color-1 .photo-speech-inner {
    border-color: #ff69b4;
    box-shadow: 0 6px 20px rgba(255, 105, 180, 0.55);
}

.photo-shape-speech.color-1 .photo-speech-tail {
    background: #ff69b4;
}

.photo-shape-speech.color-2 .photo-speech-inner {
    border-color: #667eea;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.55);
}

.photo-shape-speech.color-2 .photo-speech-tail {
    background: #667eea;
}

.photo-shape-speech.color-3 .photo-speech-inner {
    border-color: #ffd700;
    box-shadow: 0 6px 20px rgba(255, 200, 0, 0.55);
}

.photo-shape-speech.color-3 .photo-speech-tail {
    background: #ffd700;
}

.photo-shape-speech.color-4 .photo-speech-inner {
    border-color: #00dcb4;
    box-shadow: 0 6px 20px rgba(0, 220, 180, 0.55);
}

.photo-shape-speech.color-4 .photo-speech-tail {
    background: #00dcb4;
}

.photo-shape-speech.color-5 .photo-speech-inner {
    border-color: #ff6464;
    box-shadow: 0 6px 20px rgba(255, 100, 100, 0.55);
}

.photo-shape-speech.color-5 .photo-speech-tail {
    background: #ff6464;
}

/* ============================================================
 *  LOVE BUBBLE SHAPE - Untuk photo small & medium
 *  Bentuk hati SVG dengan border tebal + foto profil di dalam
 * ============================================================ */

.photo-shape-love {
    position: absolute;
    pointer-events: auto;
    background: transparent !important;
    box-shadow: none !important;
    transition: transform 5s ease-in-out, opacity 2s ease-in-out;
    backface-visibility: hidden;
    overflow: visible;
    /* Hapus border-radius karena kita pakai SVG */
    border-radius: 0 !important;
    border: none !important;
    padding: 0 !important;
}

    .photo-shape-love .photo-love-svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        pointer-events: none;
        overflow: visible;
    }
/* ============================================================
 *  LOVE BUBBLE — Efek disko untuk SVG
 *  SVG element tidak semua properti CSS support.
 *  Kita pakai `filter` + `opacity` saja (yang didukung SVG).
 * ============================================================ */

/* Foto profil di dalam hati — SVG image */
.photo-love-image {
    transition: filter 0.3s ease;
}

/* Border hati — SVG path */
.photo-love-border-path {
    transition: filter 0.3s ease, stroke 0.3s ease;
}

    /* Efek disko versi SVG — pakai filter brightness/hue-rotate */
    .photo-love-image.photo-disco-1,
    .photo-love-border-path.photo-disco-1 {
        animation: svgDiscoRainbow 3s linear infinite;
    }

@keyframes svgDiscoRainbow {
    0% {
        filter: hue-rotate(0deg) brightness(1.15) saturate(1.6) drop-shadow(0 0 12px #ff0080);
    }

    25% {
        filter: hue-rotate(90deg) brightness(1.15) saturate(1.6) drop-shadow(0 0 12px #ffcc00);
    }

    50% {
        filter: hue-rotate(180deg) brightness(1.15) saturate(1.6) drop-shadow(0 0 12px #00ffff);
    }

    75% {
        filter: hue-rotate(270deg) brightness(1.15) saturate(1.6) drop-shadow(0 0 12px #00ff00);
    }

    100% {
        filter: hue-rotate(360deg) brightness(1.15) saturate(1.6) drop-shadow(0 0 12px #ff0080);
    }
}

.photo-love-image.photo-disco-2,
.photo-love-border-path.photo-disco-2 {
    animation: svgDiscoBorder 2s linear infinite;
}

@keyframes svgDiscoBorder {
    0% {
        filter: drop-shadow(0 0 10px #ff0080) drop-shadow(0 0 20px #ff0080);
    }

    25% {
        filter: drop-shadow(0 0 10px #ffcc00) drop-shadow(0 0 20px #ffcc00);
    }

    50% {
        filter: drop-shadow(0 0 10px #00ffff) drop-shadow(0 0 20px #00ffff);
    }

    75% {
        filter: drop-shadow(0 0 10px #00ff00) drop-shadow(0 0 20px #00ff00);
    }

    100% {
        filter: drop-shadow(0 0 10px #ff0080) drop-shadow(0 0 20px #ff0080);
    }
}

.photo-love-image.photo-disco-3,
.photo-love-border-path.photo-disco-3 {
    animation: svgDiscoRGB 1.5s linear infinite;
}

@keyframes svgDiscoRGB {
    0% {
        filter: brightness(1.2) drop-shadow(0 0 15px #ff0000);
    }

    33% {
        filter: brightness(1.2) drop-shadow(0 0 15px #00ff00);
    }

    66% {
        filter: brightness(1.2) drop-shadow(0 0 15px #0000ff);
    }

    100% {
        filter: brightness(1.2) drop-shadow(0 0 15px #ff0000);
    }
}

.photo-love-image.photo-disco-4,
.photo-love-border-path.photo-disco-4 {
    animation: svgDiscoNeon 2.5s ease-in-out infinite;
}

@keyframes svgDiscoNeon {
    0% {
        filter: brightness(1.2) drop-shadow(0 0 15px #ff00ff);
    }

    33% {
        filter: brightness(1.2) drop-shadow(0 0 15px #00ff00);
    }

    66% {
        filter: brightness(1.2) drop-shadow(0 0 15px #ff8000);
    }

    100% {
        filter: brightness(1.2) drop-shadow(0 0 15px #ff00ff);
    }
}

.photo-love-image.photo-disco-5,
.photo-love-border-path.photo-disco-5 {
    animation: svgDiscoBallSpin 4s linear infinite;
}

@keyframes svgDiscoBallSpin {
    0% {
        filter: hue-rotate(0deg) brightness(1.2) drop-shadow(0 0 15px #ffffff);
    }

    25% {
        filter: hue-rotate(90deg) brightness(1.2) drop-shadow(0 0 15px #ffff00);
    }

    50% {
        filter: hue-rotate(180deg) brightness(1.2) drop-shadow(0 0 15px #00ffff);
    }

    75% {
        filter: hue-rotate(270deg) brightness(1.2) drop-shadow(0 0 15px #ff0080);
    }

    100% {
        filter: hue-rotate(360deg) brightness(1.2) drop-shadow(0 0 15px #ffffff);
    }
}

.photo-love-image.photo-disco-6,
.photo-love-border-path.photo-disco-6 {
    animation: svgDiscoPulseGlow 1.8s ease-in-out infinite;
}

@keyframes svgDiscoPulseGlow {
    0%, 100% {
        filter: brightness(1.2) drop-shadow(0 0 10px #00ffff);
    }

    50% {
        filter: brightness(1.6) drop-shadow(0 0 25px #ff00ff);
    }
}

.photo-love-image.photo-disco-7,
.photo-love-border-path.photo-disco-7 {
    animation: svgDiscoLaser 1.2s steps(6) infinite;
}

@keyframes svgDiscoLaser {
    0% {
        filter: drop-shadow(0 0 15px #ff0000);
    }

    16% {
        filter: drop-shadow(0 0 15px #ff8800);
    }

    33% {
        filter: drop-shadow(0 0 15px #ffff00);
    }

    50% {
        filter: drop-shadow(0 0 15px #00ff00);
    }

    66% {
        filter: drop-shadow(0 0 15px #0080ff);
    }

    83% {
        filter: drop-shadow(0 0 15px #8000ff);
    }

    100% {
        filter: drop-shadow(0 0 15px #ff0000);
    }
}

.photo-love-image.photo-disco-8,
.photo-love-border-path.photo-disco-8 {
    animation: svgDiscoClub 2.2s ease-in-out infinite;
}

@keyframes svgDiscoClub {
    0% {
        filter: brightness(1.1) hue-rotate(0deg) drop-shadow(0 0 12px #ff0080);
    }

    25% {
        filter: brightness(1.3) hue-rotate(45deg) drop-shadow(0 0 15px #ff8000);
    }

    50% {
        filter: brightness(1.1) hue-rotate(180deg) drop-shadow(0 0 12px #00ffff);
    }

    75% {
        filter: brightness(1.3) hue-rotate(270deg) drop-shadow(0 0 15px #8000ff);
    }

    100% {
        filter: brightness(1.1) hue-rotate(360deg) drop-shadow(0 0 12px #ff0080);
    }
}

.photo-love-image.photo-disco-9,
.photo-love-border-path.photo-disco-9 {
    animation: svgDiscoFire 1.8s linear infinite;
}

@keyframes svgDiscoFire {
    0% {
        filter: brightness(1.3) drop-shadow(0 0 15px #ff0000);
    }

    33% {
        filter: brightness(1.3) drop-shadow(0 0 15px #ff4400);
    }

    66% {
        filter: brightness(1.3) drop-shadow(0 0 15px #ff8800);
    }

    100% {
        filter: brightness(1.3) drop-shadow(0 0 15px #ff0000);
    }
}

.photo-love-image.photo-disco-10,
.photo-love-border-path.photo-disco-10 {
    animation: svgDiscoIce 2s linear infinite;
}

@keyframes svgDiscoIce {
    0% {
        filter: brightness(1.3) drop-shadow(0 0 15px #0080ff);
    }

    33% {
        filter: brightness(1.3) drop-shadow(0 0 15px #00ffff);
    }

    66% {
        filter: brightness(1.3) drop-shadow(0 0 15px #8000ff);
    }

    100% {
        filter: brightness(1.3) drop-shadow(0 0 15px #0080ff);
    }
}

.photo-love-image.photo-disco-11,
.photo-love-border-path.photo-disco-11 {
    animation: svgDiscoSpotlight 3.5s linear infinite;
}

@keyframes svgDiscoSpotlight {
    0% {
        filter: drop-shadow(-6px -6px 15px #ff0080) drop-shadow(6px 6px 15px #00ffff);
    }

    25% {
        filter: drop-shadow(6px -6px 15px #ffff00) drop-shadow(-6px 6px 15px #8000ff);
    }

    50% {
        filter: drop-shadow(6px 6px 15px #00ff00) drop-shadow(-6px -6px 15px #ff4400);
    }

    75% {
        filter: drop-shadow(-6px 6px 15px #0080ff) drop-shadow(6px -6px 15px #ff0080);
    }

    100% {
        filter: drop-shadow(-6px -6px 15px #ff0080) drop-shadow(6px 6px 15px #00ffff);
    }
}

.photo-love-image.photo-disco-12,
.photo-love-border-path.photo-disco-12 {
    animation: svgDiscoStrobe 0.9s steps(3) infinite;
}

@keyframes svgDiscoStrobe {
    0% {
        filter: brightness(1.5) drop-shadow(0 0 20px #ff0080);
    }

    33% {
        filter: brightness(1.5) drop-shadow(0 0 20px #00ffff);
    }

    66% {
        filter: brightness(1.5) drop-shadow(0 0 20px #ffff00);
    }

    100% {
        filter: brightness(1.5) drop-shadow(0 0 20px #ff0080);
    }
}

/* ============================================================
 *  BALLOON BUBBLE SHAPE - Untuk photo small & medium
 *  Foto profil di dalam balon dengan tali bergoyang
 * ============================================================ */

.photo-shape-balloon {
    position: absolute;
    pointer-events: auto;
    background: transparent;
    transition: transform 5s ease-in-out, opacity 2s ease-in-out;
    backface-visibility: hidden;
    overflow: visible;
}

    /* ===== Badan balon (oval) ===== */
    .photo-shape-balloon .photo-balloon-body {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        height: 85%;
        border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%;
        overflow: hidden;
        border: 3px solid #ffffff;
        box-shadow: inset -8px -8px 20px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.3);
        z-index: 2;
        /* Highlight kaca di sisi kiri atas */
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 40%);
    }

    /* Foto profil di dalam balon */
    .photo-shape-balloon .photo-balloon-inner {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        pointer-events: none;
        z-index: 1;
    }

    /* Highlight kilap di atas foto (supaya tampak seperti balon kaca) */
    .photo-shape-balloon .photo-balloon-shine {
        position: absolute;
        top: 5%;
        left: 12%;
        width: 30%;
        height: 20%;
        background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.9) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
        z-index: 3;
        transform: rotate(-25deg);
    }

    /* ===== Simpul kecil di bawah balon ===== */
    .photo-shape-balloon .photo-balloon-knot {
        position: absolute;
        bottom: 8%;
        left: 50%;
        transform: translateX(-50%);
        width: 14px;
        height: 12px;
        background: rgba(255, 255, 255, 0.95);
        border: 2px solid rgba(0, 0, 0, 0.1);
        clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
        z-index: 3;
    }

    /* ===== Tali balon ===== */
    .photo-shape-balloon .photo-balloon-string {
        position: absolute;
        bottom: -40px;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 40px;
        background: linear-gradient(to bottom, #ffffff 0%, #dddddd 100%);
        z-index: 1;
        transform-origin: top center;
        /* Animasi goyang seperti tali tertiup angin */
        animation: balloonStringSway 2.5s ease-in-out infinite alternate;
    }

@keyframes balloonStringSway {
    0% {
        transform: translateX(-50%) rotate(-6deg);
    }

    100% {
        transform: translateX(-50%) rotate(6deg);
    }
}

/* Variasi warna balon */
.photo-shape-balloon.balloon-color-1 .photo-balloon-body {
    border-color: #ff69b4;
    box-shadow: inset -8px -8px 20px rgba(255, 105, 180, 0.3), 0 4px 15px rgba(255, 105, 180, 0.5);
}

.photo-shape-balloon.balloon-color-1 .photo-balloon-knot {
    background: #ff69b4;
}

.photo-shape-balloon.balloon-color-2 .photo-balloon-body {
    border-color: #667eea;
    box-shadow: inset -8px -8px 20px rgba(102, 126, 234, 0.3), 0 4px 15px rgba(102, 126, 234, 0.5);
}

.photo-shape-balloon.balloon-color-2 .photo-balloon-knot {
    background: #667eea;
}

.photo-shape-balloon.balloon-color-3 .photo-balloon-body {
    border-color: #ffd700;
    box-shadow: inset -8px -8px 20px rgba(255, 215, 0, 0.3), 0 4px 15px rgba(255, 200, 0, 0.5);
}

.photo-shape-balloon.balloon-color-3 .photo-balloon-knot {
    background: #ffd700;
}

.photo-shape-balloon.balloon-color-4 .photo-balloon-body {
    border-color: #00dcb4;
    box-shadow: inset -8px -8px 20px rgba(0, 220, 180, 0.3), 0 4px 15px rgba(0, 220, 180, 0.5);
}

.photo-shape-balloon.balloon-color-4 .photo-balloon-knot {
    background: #00dcb4;
}

.photo-shape-balloon.balloon-color-5 .photo-balloon-body {
    border-color: #ff4444;
    box-shadow: inset -8px -8px 20px rgba(255, 68, 68, 0.3), 0 4px 15px rgba(255, 100, 100, 0.5);
}

.photo-shape-balloon.balloon-color-5 .photo-balloon-knot {
    background: #ff4444;
}

.photo-shape-balloon.balloon-color-6 .photo-balloon-body {
    border-color: #a855f7;
    box-shadow: inset -8px -8px 20px rgba(168, 85, 247, 0.3), 0 4px 15px rgba(168, 85, 247, 0.5);
}

.photo-shape-balloon.balloon-color-6 .photo-balloon-knot {
    background: #a855f7;
}