/*
Theme Name: Reliable Paints Coming Soon
Theme URI: https://example.com/
Author: Grapes Media Ventures
Description: Custom animated coming-soon WordPress theme for Reliable Paints.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: reliable-paints
*/



        body {

            font-family: 'Plus Jakarta Sans', sans-serif;

            background-color: #000b58;

            color: #ffffff;

            overflow-x: hidden;

            transition: background-color 0.8s ease;

        }



        h1, h2, h3, .font-display {

            font-family: 'Outfit', sans-serif;

        }



        /\* Ambient Glow Background Bulbs \*/

        .ambient-glow {

            position: fixed;

            border-radius: 50%;

            filter: blur(120px);

            opacity: 0.4;

            pointer-events: none;

            z-index: 0;

            animation: floatGlow 14s infinite alternate ease-in-out;

            transition: background 0.8s ease;

        }



        .glow-1 {

            top: -10%;

            left: -5%;

            width: 45vw;

            height: 45vw;

            background: radial-gradient(circle, #E63946 0%, transparent 70%);

        }



        .glow-2 {

            bottom: -15%;

            right: -10%;

            width: 50vw;

            height: 50vw;

            background: radial-gradient(circle, #FFE600 0%, transparent 70%);

            animation-delay: -5s;

        }



        .glow-3 {

            top: 35%;

            right: 15%;

            width: 35vw;

            height: 35vw;

            background: radial-gradient(circle, #00D2FF 0%, transparent 70%);

            animation-delay: -9s;

        }



        @keyframes floatGlow {

            0% { transform: translate(0, 0) scale(1); opacity: 0.35; }

            100% { transform: translate(5%, 6%) scale(1.2); opacity: 0.55; }

        }



        /\* Glassmorphism Surface Container \*/

        .glass-card {

            background: rgba(4, 15, 80, 0.65);

            backdrop-filter: blur(20px);

            -webkit-backdrop-filter: blur(20px);

            border: 1px solid rgba(255, 255, 255, 0.15);

            box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6);

        }



        .glass-card-hover {

            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

        }

        .glass-card-hover:hover {

            transform: translateY(-4px);

            border-color: rgba(255, 230, 0, 0.4);

            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);

        }



        /\* Rainbow Shimmer Text Effect \*/

        .rainbow-text {

            background: linear-gradient(90deg, #E63946, #FF5722, #FFE600, #2ECC71, #00D2FF, #D800A6, #E63946);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            background-size: 200% auto;

            animation: rainbowShift 6s linear infinite;

        }



        @keyframes rainbowShift {

            0% { background-position: 0% center; }

            100% { background-position: 200% center; }

        }



        /\* Reliable Paints Logo Spectrum Colors \*/

        .paint-letter-r { color: #E63946; }

        .paint-letter-e { color: #FF5722; }

        .paint-letter-l { color: #FFE600; }

        .paint-letter-i { color: #D800A6; }

        .paint-letter-a { color: #00D2FF; }

        .paint-letter-b { color: #2ECC71; }



        /\* Status Dot Pulse \*/

        .status-dot {

            box-shadow: 0 0 0 0 rgba(255, 230, 0, 0.7);

            animation: dotPulse 2s infinite;

        }



        @keyframes dotPulse {

            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 230, 0, 0.7); }

            70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(255, 230, 0, 0); }

            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 230, 0, 0); }

        }



        #paintCanvas {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            pointer-events: none;

            z-index: 1;

        }



        /\* Interactive Swatch Ring Effect \*/

        .swatch-btn.active {

            ring-width: 4px;

            transform: scale(1.15);

        }