/* Base Styles and Variables */
:root {
    --primary-color: #FF1493;  /* Deep Pink */
    --secondary-color: #00FFFF;  /* Cyan */
    --accent-color-1: #FF00FF;  /* Magenta */
    --accent-color-2: #FFFF00;  /* Yellow */
    --accent-color-3: #4BFF13;  /* Neon Green */
    --accent-color-4: #FF4500;  /* Orange Red */
    --bg-color: #120038;  /* Deep Purple */
    --text-color: #FFFFFF;  /* White */
    --glow-color: rgba(255, 0, 255, 0.7);
    
    /* Bubble colors */
    --bubble-pink: rgba(255, 20, 147, 0.2);
    --bubble-blue: rgba(0, 255, 255, 0.2);
    --bubble-purple: rgba(138, 43, 226, 0.2);
    --bubble-green: rgba(75, 255, 19, 0.2);
    --bubble-yellow: rgba(255, 255, 0, 0.2);
    --bubble-orange: rgba(255, 69, 0, 0.2);
    --bubble-cyan: rgba(0, 255, 255, 0.2);
    --bubble-magenta: rgba(255, 0, 255, 0.2);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    min-height: 100%;
    font-family: 'Arial', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    cursor: none; /* Hide default cursor for more immersive experience */
}

/* Create a large scrollable area to enable color fade effect */
body {
    height: 500vh; /* Make body 5x viewport height for scrolling */
    overflow-x: hidden; /* Allow vertical scroll only */
}

/* Trippy Background Effects */
.container {
    position: fixed; /* Fixed position so it stays visible while scrolling */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 10; /* Ensure it's above other elements */
}

.background-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSIxIiBmaWxsPSIjZmZmIi8+PC9zdmc+') repeat;
    background-size: 200px;
    animation: twinkle 5s infinite linear;
}

.twinkling {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSIyIiBmaWxsPSIjZmZmIi8+PC9zdmc+') repeat;
    background-size: 300px;
    animation: twinkle 7s infinite linear;
    opacity: 0.5;
}

.clouds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMTAwIj48cGF0aCBkPSJNMjUsMzAgQzM1LDIwIDYwLDIwIDcwLDMwIEM4MCw0MCA5MCwzMCAxMDAsNDAgQzExMCw1MCAxMzAsNDAgMTQwLDUwIEMxNTAsNjAgMTYwLDUwIDE3MCw2MCBDMTgwLDcwIDIxMCw3MCAyMjAsNjAgQzIzMCw1MCAyNDAsNjAgMjUwLDUwIEMyNjAsNDAgMjgwLDUwIDI5MCw0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMikiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==') repeat-x;
    background-size: 600px 100%;
    animation: move-clouds 60s infinite linear;
    opacity: 0.3;
}

@keyframes twinkle {
    0% { transform: translateY(0); opacity: 0.5; }
    50% { opacity: 1; }
    100% { transform: translateY(-1000px); opacity: 0.5; }
}

@keyframes move-clouds {
    0% { background-position: 0 0; }
    100% { background-position: 600px 0; }
}

/* Content Styling */
.content {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Psychedelic SVG Container */
.psychedelic-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.psychedelic-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 10px var(--glow-color));
}

/* SVG Animation */
.background-circles .circle {
    transform-origin: center;
    animation: pulse 5s infinite alternate;
}

.circle-large {
    animation-duration: 7s;
    animation-delay: 0s;
}

.circle-medium {
    animation-duration: 5s;
    animation-delay: 1s;
}

.circle-small {
    animation-duration: 3s;
    animation-delay: 2s;
}

/* Star animations */
.star {
    animation: star-twinkle 2s infinite alternate;
}

/* Apply different animation delays to stars */
.star:nth-child(2n) {
    animation-delay: 0.3s;
}

.star:nth-child(3n) {
    animation-delay: 0.6s;
}

.star:nth-child(4n) {
    animation-delay: 0.9s;
}

.star:nth-child(5n) {
    animation-delay: 1.2s;
}

/* Geometric shapes animations */
.geo-shape {
    transform-origin: center;
}

.shape-circle {
    animation: pulse 5s infinite alternate;
}

.shape-hexagon {
    animation: rotate-shape 15s infinite linear;
}

.spin-clockwise {
    animation: rotate-shape 10s infinite linear;
}

.spin-counterclockwise {
    animation: rotate-shape-reverse 8s infinite linear;
}

.pulse-shape {
    animation: pulse-glow 4s infinite alternate;
}

/* @ Symbol Styling */
.at-symbol {
    font-weight: bold;
    transform-origin: center;
    animation: at-symbol-float 8s infinite ease-in-out;
    filter: drop-shadow(0 0 15px var(--accent-color-1));
    font-size: 80px !important; /* Ensure larger size */
    opacity: 1 !important; /* Ensure full visibility */
    z-index: 100; /* Bring to front */
}

@keyframes at-symbol-float {
    0% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 10px var(--accent-color-1)); }
    25% { transform: translateY(-20px) scale(1.1); filter: drop-shadow(0 0 20px var(--accent-color-2)); }
    50% { transform: translateY(0) scale(1.2); filter: drop-shadow(0 0 15px var(--accent-color-3)); }
    75% { transform: translateY(20px) scale(1.1); filter: drop-shadow(0 0 20px var(--accent-color-4)); }
    100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 10px var(--accent-color-1)); }
}

/* Sparkle animations */
.sparkle {
    transform-origin: center;
    animation: sparkle 2s infinite alternate;
}

.sparkle:nth-child(2n) {
    animation-delay: 0.3s;
}

.sparkle:nth-child(3n) {
    animation-delay: 0.6s;
}

.sparkle:nth-child(4n) {
    animation-delay: 0.9s;
}

.pulse-sparkle {
    animation: pulse-glow 3s infinite alternate;
}

/* Animation keyframes */
@keyframes pulse {
    0% { transform: scale(1); opacity: 0.3; }
    100% { transform: scale(1.2); opacity: 0.6; }
}

@keyframes pulse-glow {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.3); filter: brightness(1.5) drop-shadow(0 0 10px var(--glow-color)); }
    100% { transform: scale(1); filter: brightness(1); }
}

@keyframes star-twinkle {
    0% { opacity: 0.3; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.5); filter: drop-shadow(0 0 3px #fff); }
}

@keyframes rotate-shape {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes rotate-shape-reverse {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

@keyframes sparkle {
    0% { transform: scale(1) rotate(0deg); opacity: 0.7; }
    50% { transform: scale(1.2) rotate(10deg); opacity: 1; filter: drop-shadow(0 0 5px var(--accent-color-1)); }
    100% { transform: scale(1.5) rotate(20deg); opacity: 0.7; }
}

/* Floating Bubbles */
.bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.bubble {
    position: absolute;
    border-radius: 50%;
    animation: bubble-rise 15s infinite ease-in;
    opacity: 0;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.2) 40%,
        rgba(255, 255, 255, 0.05) 70%,
        rgba(255, 255, 255, 0) 100%
    );
    box-shadow: 
        inset 0 0 10px rgba(255, 255, 255, 0.5), 
        0 0 20px rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(2px);
}

/* Bubble sizes */
.bubble-small {
    width: 20px;
    height: 20px;
    animation-duration: 10s;
}

.bubble-large {
    width: 100px;
    height: 100px;
    animation-duration: 30s;
}

/* Default bubble size if not specified */
.bubble:not(.bubble-small):not(.bubble-large) {
    width: 50px;
    height: 50px;
}

/* Bubble colors */
.bubble-pink {
    background: radial-gradient(
        circle at 50% 50%,
        var(--bubble-pink) 0%,
        rgba(255, 20, 147, 0.1) 60%,
        rgba(255, 20, 147, 0) 100%
    );
    box-shadow: inset 0 0 10px rgba(255, 20, 147, 0.5), 0 0 15px rgba(255, 20, 147, 0.3);
}

.bubble-blue {
    background: radial-gradient(
        circle at 50% 50%,
        var(--bubble-blue) 0%,
        rgba(0, 255, 255, 0.1) 60%,
        rgba(0, 255, 255, 0) 100%
    );
    box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.5), 0 0 15px rgba(0, 255, 255, 0.3);
}

.bubble-purple {
    background: radial-gradient(
        circle at 50% 50%,
        var(--bubble-purple) 0%,
        rgba(138, 43, 226, 0.1) 60%,
        rgba(138, 43, 226, 0) 100%
    );
    box-shadow: inset 0 0 10px rgba(138, 43, 226, 0.5), 0 0 15px rgba(138, 43, 226, 0.3);
}

.bubble-green {
    background: radial-gradient(
        circle at 50% 50%,
        var(--bubble-green) 0%,
        rgba(75, 255, 19, 0.1) 60%,
        rgba(75, 255, 19, 0) 100%
    );
    box-shadow: inset 0 0 10px rgba(75, 255, 19, 0.5), 0 0 15px rgba(75, 255, 19, 0.3);
}

.bubble-yellow {
    background: radial-gradient(
        circle at 50% 50%,
        var(--bubble-yellow) 0%,
        rgba(255, 255, 0, 0.1) 60%,
        rgba(255, 255, 0, 0) 100%
    );
    box-shadow: inset 0 0 10px rgba(255, 255, 0, 0.5), 0 0 15px rgba(255, 255, 0, 0.3);
}

.bubble-orange {
    background: radial-gradient(
        circle at 50% 50%,
        var(--bubble-orange) 0%,
        rgba(255, 69, 0, 0.1) 60%,
        rgba(255, 69, 0, 0) 100%
    );
    box-shadow: inset 0 0 10px rgba(255, 69, 0, 0.5), 0 0 15px rgba(255, 69, 0, 0.3);
}

.bubble-cyan {
    background: radial-gradient(
        circle at 50% 50%,
        var(--bubble-cyan) 0%,
        rgba(0, 255, 255, 0.1) 60%,
        rgba(0, 255, 255, 0) 100%
    );
    box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.5), 0 0 15px rgba(0, 255, 255, 0.3);
}

.bubble-magenta {
    background: radial-gradient(
        circle at 50% 50%,
        var(--bubble-magenta) 0%,
        rgba(255, 0, 255, 0.1) 60%,
        rgba(255, 0, 255, 0) 100%
    );
    box-shadow: inset 0 0 10px rgba(255, 0, 255, 0.5), 0 0 15px rgba(255, 0, 255, 0.3);
}

/* Random positions for regular bubbles */
.bubble:nth-child(1) { left: 10%; animation-delay: 0s; }
.bubble:nth-child(2) { left: 20%; animation-delay: 2s; }
.bubble:nth-child(3) { left: 35%; animation-delay: 4s; }
.bubble:nth-child(4) { left: 50%; animation-delay: 6s; }
.bubble:nth-child(5) { left: 55%; animation-delay: 8s; }
.bubble:nth-child(6) { left: 65%; animation-delay: 10s; }
.bubble:nth-child(7) { left: 70%; animation-delay: 12s; }
.bubble:nth-child(8) { left: 80%; animation-delay: 14s; }
.bubble:nth-child(9) { left: 85%; animation-delay: 16s; }
.bubble:nth-child(10) { left: 5%; animation-delay: 18s; }

/* Colored bubbles */
.bubble:nth-child(11) { left: 15%; animation-delay: 1s; }
.bubble:nth-child(12) { left: 25%; animation-delay: 3s; }
.bubble:nth-child(13) { left: 45%; animation-delay: 5s; }
.bubble:nth-child(14) { left: 60%; animation-delay: 7s; }
.bubble:nth-child(15) { left: 75%; animation-delay: 9s; }
.bubble:nth-child(16) { left: 90%; animation-delay: 11s; }
.bubble:nth-child(17) { left: 30%; animation-delay: 13s; }
.bubble:nth-child(18) { left: 40%; animation-delay: 15s; }

/* Large bubbles */
.bubble:nth-child(19) { left: 50%; animation-delay: 2s; }
.bubble:nth-child(20) { left: 20%; animation-delay: 8s; }
.bubble:nth-child(21) { left: 70%; animation-delay: 14s; }

/* Small bubbles */
.bubble:nth-child(22) { left: 12%; animation-delay: 0.5s; }
.bubble:nth-child(23) { left: 32%; animation-delay: 2.5s; }
.bubble:nth-child(24) { left: 52%; animation-delay: 4.5s; }
.bubble:nth-child(25) { left: 72%; animation-delay: 6.5s; }

@keyframes bubble-rise {
    0% { bottom: -100px; opacity: 0; transform: translateX(0) scale(0.8); }
    10% { opacity: 0.8; transform: translateX(10px) scale(1); }
    30% { transform: translateX(-10px); }
    50% { transform: translateX(10px); opacity: 0.6; }
    70% { transform: translateX(-10px); opacity: 0.4; }
    90% { transform: translateX(10px); opacity: 0.2; }
    100% { bottom: 100%; opacity: 0; transform: translateX(0) scale(0.5); }
}

/* Custom cursor */
body::after {
    content: "";
    position: fixed;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    filter: drop-shadow(0 0 5px #fff);
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;
    opacity: 0.7;
    transition: opacity 0.3s;
}

/* Hover states */
.psychedelic-container:hover .geo-shape {
    filter: drop-shadow(0 0 10px var(--accent-color-2));
}

.psychedelic-container:hover .sparkle {
    filter: brightness(1.5);
}

/* Responsive Design */
@media (max-width: 768px) {
    .psychedelic-container {
        height: 80vh;
    }
    
    .bubble-large {
        width: 70px;
        height: 70px;
    }
}

@media (max-width: 480px) {
    .psychedelic-container {
        height: 70vh;
    }
    
    .bubble-large {
        width: 50px;
        height: 50px;
    }
    
    body::after {
        width: 30px;
        height: 30px;
    }
}