DieteticRodri/ruby-bloom-studios

1/* Custom Animations */2@keyframes float {3    0%, 100% { transform: translateY(0px); }4    50% { transform: translateY(-20px); }5}6 7@keyframes float-slow {8    0%, 100% { transform: translateY(0px); }9    50% { transform: translateY(-10px); }10}11 12@keyframes gradient-shift {13    0% { background-position: 0% 50%; }14    50% { background-position: 100% 50%; }15    100% { background-position: 0% 50%; }16}17 18@keyframes pulse-ring {19    0% { transform: scale(0.8); opacity: 1; }20    100% { transform: scale(1.3); opacity: 0; }21}22 23@keyframes slide-up {24    from { opacity: 0; transform: translateY(30px); }25    to { opacity: 1; transform: translateY(0); }26}27 28.animate-float {29    animation: float 4s ease-in-out infinite;30}31 32.animate-float-slow {33    animation: float-slow 6s ease-in-out infinite;34}35 36.animate-gradient {37    background-size: 200% 200%;38    animation: gradient-shift 8s ease infinite;39}40 41/* Smooth Scrolling */42html {43    scroll-behavior: smooth;44}45 46/* Custom Scrollbar */47::-webkit-scrollbar {48    width: 10px;49}50 51::-webkit-scrollbar-track {52    background: #f1f1f1;53}54 55.dark ::-webkit-scrollbar-track {56    background: #1f2937;57}58 59::-webkit-scrollbar-thumb {60    background: #ef4444;61    border-radius: 5px;62}63 64::-webkit-scrollbar-thumb:hover {65    background: #dc2626;66}67 68/* Testimonial Slider */69.testimonial-slide {70    display: none;71    opacity: 0;72    transform: translateX(50px);73    transition: all 0.5s ease;74}75 76.testimonial-slide.active {77    display: block;78    opacity: 1;79    transform: translateX(0);80}81 82/* Navigation Active State */83.nav-link.active {84    color: #ef4444;85}86 87/* Service Card Glow Effect */88.service-card::before {89    content: '';90    position: absolute;91    top: 0;92    left: 0;93    right: 0;94    bottom: 0;95    border-radius: 1rem;96    padding: 2px;97    background: linear-gradient(135deg, #ef4444, #f97316);98    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);99    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);100    -webkit-mask-composite: xor;101    mask-composite: exclude;102    opacity: 0;103    transition: opacity 0.3s ease;104}105 106.service-card:hover::before {107    opacity: 1;108}109 110/* Portfolio Item Animation */111.portfolio-item {112    opacity: 1;113    transform: scale(1);114    transition: all 0.4s ease;115}116 117.portfolio-item.hidden {118    opacity: 0;119    transform: scale(0.9);120    position: absolute;121    pointer-events: none;122}123 124/* Image Hover Zoom */125.img-zoom {126    overflow: hidden;127}128 129.img-zoom img {130    transition: transform 0.5s ease;131}132 133.img-zoom:hover img {134    transform: scale(1.1);135}136 137/* Glass Morphism Effect */138.glass {139    background: rgba(255, 255, 255, 0.1);140    backdrop-filter: blur(10px);141    -webkit-backdrop-filter: blur(10px);142    border: 1px solid rgba(255, 255, 255, 0.2);143}144 145/* Dark Mode Glass */146.dark .glass {147    background: rgba(31, 41, 55, 0.8);148    border: 1px solid rgba(75, 85, 99, 0.4);149}150 151/* Button Ripple Effect */152.btn-ripple {153    position: relative;154    overflow: hidden;155}156 157.btn-ripple::after {158    content: '';159    position: absolute;160    top: 50%;161    left: 50%;162    width: 0;163    height: 0;164    border-radius: 50%;165    background: rgba(255, 255, 255, 0.3);166    transform: translate(-50%, -50%);167    transition: width 0.4s ease, height 0.4s ease;168}169 170.btn-ripple:active::after {171    width: 300px;172    height: 300px;173}174 175/* Loading Animation */176.loading-pulse {177    animation: pulse 1.5s ease-in-out infinite;178}179 180@keyframes pulse {181    0%, 100% { opacity: 1; }182    50% { opacity: 0.5; }183}184 185/* Focus States */186button:focus-visible,187a:focus-visible {188    outline: 2px solid #ef4444;189    outline-offset: 2px;190}191 192/* Scroll Reveal Animation */193.reveal {194    opacity: 0;195    transform: translateY(30px);196    transition: all 0.6s ease;197}198 199.reveal.active {200    opacity: 1;201    transform: translateY(0);202}203 204/* Stagger Animation Delays */205.stagger-1 { transition-delay: 0.1s; }206.stagger-2 { transition-delay: 0.2s; }207.stagger-3 { transition-delay: 0.3s; }208.stagger-4 { transition-delay: 0.4s; }209.stagger-5 { transition-delay: 0.5s; }