/* 
  Shared UI Elements & Animations
  For backgrounds, repeated shapes, and global motion effects.
*/

/* Animated Geometric Background */
.bg-shapes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.shape {
    position: absolute;
    background: rgba(56, 189, 248, 0.04);
    border: 1px solid rgba(56, 189, 248, 0.08);
    backdrop-filter: blur(1px);
}

.shape-circle { border-radius: 50%; }
.shape-square { border-radius: 4px; }
.shape-triangle { 
    background: rgba(56, 189, 248, 0.04); 
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%); 
}
.shape-line {
    background: rgba(56, 189, 248, 0.1);
    width: 2px;
}
.shape-outline { background: transparent !important; border-width: 1.5px; }

/* Global Animations */
@keyframes float-1 {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(60px, -80px) rotate(360deg); }
}
@keyframes float-2 {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(-70px, -40px) rotate(-180deg); }
}
@keyframes float-3 {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }
    100% { transform: translate(40px, 50px) scale(1.15) rotate(90deg); }
}
@keyframes float-4 {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(-30px, 100px) rotate(45deg); }
}
@keyframes pulse-soft {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.5; }
}

/* Reveal Animations System */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}