/**
 * Kaiyo Floating Illustrations - Frontend
 */

.kaiyo-particles-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
}

/* Floating item */
.kaiyo-floating-item {
    position: absolute;
    pointer-events: none;
    will-change: transform, opacity;
    opacity: 0;
    transform: scale(0.7) translateY(10px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Revealed state */
.kaiyo-floating-item.kaiyo-revealed {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Image */
.kaiyo-floating-item img {
    display: block;
    object-fit: contain;
}

/* Animation types on img element */
.kaiyo-floating-item.kaiyo-revealed img.kaiyo-anim-float {
    animation: kaiyoFloat var(--kaiyo-speed, 5s) cubic-bezier(0.45, 0.05, 0.55, 0.95) var(--kaiyo-delay, 0s) infinite;
}

.kaiyo-floating-item.kaiyo-revealed img.kaiyo-anim-sway {
    animation: kaiyoSway var(--kaiyo-speed, 5s) cubic-bezier(0.45, 0.05, 0.55, 0.95) var(--kaiyo-delay, 0s) infinite;
}

.kaiyo-floating-item.kaiyo-revealed img.kaiyo-anim-pulse {
    animation: kaiyoPulse var(--kaiyo-speed, 5s) cubic-bezier(0.45, 0.05, 0.55, 0.95) var(--kaiyo-delay, 0s) infinite;
}

/* Float - organic vertical movement with gentle rotation */
@keyframes kaiyoFloat {
    0%   { transform: translateY(0) rotate(0deg); }
    25%  { transform: translateY(calc(var(--kaiyo-amplitude, 10px) * -0.6)) rotate(0.5deg); }
    50%  { transform: translateY(calc(var(--kaiyo-amplitude, 10px) * -1)) rotate(0deg); }
    75%  { transform: translateY(calc(var(--kaiyo-amplitude, 10px) * -0.6)) rotate(-0.5deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

/* Sway - smooth figure-8-ish horizontal movement */
@keyframes kaiyoSway {
    0%   { transform: translate(0, 0) rotate(0deg); }
    25%  { transform: translate(calc(var(--kaiyo-amplitude, 10px) * -0.4), calc(var(--kaiyo-amplitude, 10px) * -0.2)) rotate(-0.5deg); }
    50%  { transform: translate(0, calc(var(--kaiyo-amplitude, 10px) * -0.1)) rotate(0deg); }
    75%  { transform: translate(calc(var(--kaiyo-amplitude, 10px) * 0.4), calc(var(--kaiyo-amplitude, 10px) * -0.2)) rotate(0.5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* Pulse - gentle breathe effect */
@keyframes kaiyoPulse {
    0%   { transform: scale(1) rotate(0deg); }
    50%  { transform: scale(var(--kaiyo-pulse-scale, 1.04)) rotate(0.3deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* Background mode */
.kaiyo-particles-bg {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    height: 100% !important;
    pointer-events: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .kaiyo-floating-item img {
        animation: none !important;
    }
}