/* Global styles */
body {
    background: #2b213a;
    color: white;
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    overflow-x: hidden;
}

.page-container {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    overflow-x: hidden;
}

.content-wrapper {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    z-index: 3;
    padding: 30px 0;
}

/* Vector art section */
.vector-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
}

.vector-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.abstract-art {
    width: 100vw;
    height: auto;
    min-height: 100vh;
    object-fit: cover;
}

/* Grid lines */
.grid-line {
    stroke: #45b7d1;
    stroke-width: 1;
    opacity: 0.3;
}

.grid-line.horizontal {
    animation: horizontalGridPulse 3s ease-in-out infinite;
}

.grid-line.vertical {
    animation: verticalGridPulse 3s ease-in-out infinite;
}

/* Offset animations for grid lines */
.grid-line.horizontal:nth-child(2) { animation-delay: 0.6s; }
.grid-line.horizontal:nth-child(3) { animation-delay: 1.2s; }
.grid-line.horizontal:nth-child(4) { animation-delay: 1.8s; }
.grid-line.horizontal:nth-child(5) { animation-delay: 2.4s; }

.grid-line.vertical:nth-child(6) { animation-delay: 0.3s; }
.grid-line.vertical:nth-child(7) { animation-delay: 0.6s; }
.grid-line.vertical:nth-child(8) { animation-delay: 0.9s; }
.grid-line.vertical:nth-child(9) { animation-delay: 1.2s; }
.grid-line.vertical:nth-child(10) { animation-delay: 1.5s; }

/* Mountains */
.mountain {
    fill: none;
    stroke: #4ecdc4;
    stroke-width: 2;
    filter: drop-shadow(0 0 5px #4ecdc4);
    animation: mountainPulse 1.5s ease-in-out infinite;
}

.mountain:nth-child(2) { animation-delay: 0.25s; }
.mountain:nth-child(3) { animation-delay: 0.5s; }
.mountain:nth-child(4) { animation-delay: 0.75s; }

/* Sun */
.sun {
    fill: #ff6b6b;
    filter: drop-shadow(0 0 20px #ff6b6b);
    animation: sunPulse 2.5s ease-in-out infinite;
}

.sun-inner {
    fill: #ff8787;
    filter: drop-shadow(0 0 10px #ff8787);
    animation: sunInnerPulse 2.5s ease-in-out infinite;
}

/* Button Container */
.button-container {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 20px;
    pointer-events: auto;
    margin-top: 40px;
}

.synthwave-button {
    display: block;
    text-decoration: none;
    background: linear-gradient(45deg, rgba(30, 30, 40, 0.9), rgba(43, 33, 58, 0.9));
    border: 2px solid #4ecdc4;
    border-radius: 8px;
    padding: 15px 30px;
    box-shadow: 0 0 20px rgba(78, 205, 196, 0.3),
                inset 0 0 15px rgba(78, 205, 196, 0.2);
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: buttonGlow 3s ease-in-out infinite;
}

.button-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.artist-name {
    color: #4ecdc4;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(78, 205, 196, 0.8);
}

.bandcamp-info {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.8;
    transform: translateY(0);
    transition: all 0.3s ease;
}

.bandcamp-icon {
    width: 16px;
    height: 16px;
    fill: #4ecdc4;
    filter: drop-shadow(0 0 5px rgba(78, 205, 196, 0.5));
    animation: iconPulse 2s ease-in-out infinite;
}

.bandcamp-text {
    color: #4ecdc4;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: lowercase;
    text-shadow: 0 0 8px rgba(78, 205, 196, 0.5);
}

.synthwave-button:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 30px rgba(78, 205, 196, 0.5),
                inset 0 0 20px rgba(78, 205, 196, 0.3);
    border-color: #5ff3ea;
}

.synthwave-button:hover .bandcamp-info {
    opacity: 1;
    transform: translateY(-1px);
}

.synthwave-button:hover .artist-name {
    text-shadow: 0 0 15px rgba(78, 205, 196, 1);
}

@keyframes buttonGlow {
    0% { box-shadow: 0 0 20px rgba(78, 205, 196, 0.3),
                    inset 0 0 15px rgba(78, 205, 196, 0.2); }
    50% { box-shadow: 0 0 25px rgba(78, 205, 196, 0.5),
                    inset 0 0 20px rgba(78, 205, 196, 0.3); }
    100% { box-shadow: 0 0 20px rgba(78, 205, 196, 0.3),
                    inset 0 0 15px rgba(78, 205, 196, 0.2); }
}

@keyframes iconPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* SoundCloud player section */
.player-section {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    margin-bottom: 0;
    margin-top: auto;
}

.soundcloud-container {
    width: 100%;
    max-width: 600px;
    padding: 20px;
    pointer-events: auto;
    background-color: rgba(30, 30, 30, 0.8);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 20px rgba(69, 183, 209, 0.3);
    animation: containerPulse 2s ease-in-out infinite;
}

/* Streaming Links Section */
.streaming-links-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    margin: 30px 0;
}

.streaming-header {
    color: #4ecdc4;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(78, 205, 196, 0.8);
    margin-bottom: 15px;
}

.streaming-buttons {
    display: flex;
    gap: 20px;
    pointer-events: auto;
}

.service-button {
    display: block;
    text-decoration: none;
    background: linear-gradient(45deg, rgba(30, 30, 40, 0.9), rgba(43, 33, 58, 0.9));
    border-radius: 8px;
    padding: 12px 20px;
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.spotify-button {
    border: 2px solid #1DB954;
    box-shadow: 0 0 20px rgba(29, 185, 84, 0.3),
                inset 0 0 15px rgba(29, 185, 84, 0.2);
    animation: spotifyGlow 3s ease-in-out infinite;
}

.apple-button {
    border: 2px solid #FB5C74;
    box-shadow: 0 0 20px rgba(251, 92, 116, 0.3),
                inset 0 0 15px rgba(251, 92, 116, 0.2);
    animation: appleGlow 3s ease-in-out infinite;
}

.service-button-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.service-icon {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
    animation: iconPulse 2s ease-in-out infinite;
}

.spotify-icon {
    fill: #1DB954;
    filter: drop-shadow(0 0 5px rgba(29, 185, 84, 0.5));
}

.apple-icon {
    fill: #FB5C74;
    filter: drop-shadow(0 0 5px rgba(251, 92, 116, 0.5));
}

.service-text {
    color: white;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.spotify-button:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 30px rgba(29, 185, 84, 0.5),
                inset 0 0 20px rgba(29, 185, 84, 0.3);
    border-color: #20E962;
}

.apple-button:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 30px rgba(251, 92, 116, 0.5),
                inset 0 0 20px rgba(251, 92, 116, 0.3);
    border-color: #FF7C8E;
}

@keyframes spotifyGlow {
    0% { box-shadow: 0 0 20px rgba(29, 185, 84, 0.3),
                   inset 0 0 15px rgba(29, 185, 84, 0.2); }
    50% { box-shadow: 0 0 25px rgba(29, 185, 84, 0.5),
                    inset 0 0 20px rgba(29, 185, 84, 0.3); }
    100% { box-shadow: 0 0 20px rgba(29, 185, 84, 0.3),
                     inset 0 0 15px rgba(29, 185, 84, 0.2); }
}

@keyframes appleGlow {
    0% { box-shadow: 0 0 20px rgba(251, 92, 116, 0.3),
                   inset 0 0 15px rgba(251, 92, 116, 0.2); }
    50% { box-shadow: 0 0 25px rgba(251, 92, 116, 0.5),
                    inset 0 0 20px rgba(251, 92, 116, 0.3); }
    100% { box-shadow: 0 0 20px rgba(251, 92, 116, 0.3),
                     inset 0 0 15px rgba(251, 92, 116, 0.2); }
}

/* Animations */
@keyframes horizontalGridPulse {
    0% { 
        opacity: 0.1;
        stroke-width: 1;
    }
    50% { 
        opacity: 0.4;
        stroke-width: 1.5;
    }
    100% { 
        opacity: 0.1;
        stroke-width: 1;
    }
}

@keyframes verticalGridPulse {
    0% { 
        opacity: 0.1;
        stroke-width: 1;
        transform: translateY(0);
    }
    50% { 
        opacity: 0.4;
        stroke-width: 1.5;
        transform: translateY(-5px);
    }
    100% { 
        opacity: 0.1;
        stroke-width: 1;
        transform: translateY(0);
    }
}

@keyframes mountainPulse {
    0% { filter: drop-shadow(0 0 4.5px #4ecdc4); }
    50% { filter: drop-shadow(0 0 12px #4ecdc4); }
    100% { filter: drop-shadow(0 0 4.5px #4ecdc4); }
}

@keyframes sunPulse {
    0% { filter: drop-shadow(0 0 22.5px #ff6b6b); }
    50% { filter: drop-shadow(0 0 37.5px #ff6b6b); }
    100% { filter: drop-shadow(0 0 22.5px #ff6b6b); }
}

@keyframes sunInnerPulse {
    0% { filter: drop-shadow(0 0 12px #ff8787); }
    50% { filter: drop-shadow(0 0 22.5px #ff8787); }
    100% { filter: drop-shadow(0 0 12px #ff8787); }
}

@keyframes containerPulse {
    0% { box-shadow: 0 0 22.5px rgba(69, 183, 209, 0.3); }
    50% { box-shadow: 0 0 37.5px rgba(69, 183, 209, 0.6); }
    100% { box-shadow: 0 0 22.5px rgba(69, 183, 209, 0.3); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .content-wrapper {
        padding: 20px 10px;
    }
    
    .soundcloud-container {
        max-width: 90%;
        padding: 10px;
    }
    
    .soundcloud-container iframe {
        height: 140px;
    }
    
    .synthwave-button {
        padding: 10px 20px;
    }
    
    .artist-name {
        font-size: 1rem;
    }
    
    .bandcamp-text {
        font-size: 0.7rem;
    }
    
    .streaming-header {
        font-size: 1rem;
        margin-bottom: 10px;
    }
    
    .streaming-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .service-button {
        padding: 8px 15px;
    }
    
    .service-icon {
        width: 20px;
        height: 20px;
    }
    
    .service-text {
        font-size: 0.8rem;
    }
    
    .button-container {
        flex-direction: column;
        gap: 10px;
        margin-top: 20px;
    }
}

/* Portrait mode height adjustments */
@media (orientation: portrait) {
    .content-wrapper {
        min-height: calc(100vh - 120px);
        padding-top: 10px;
    }
    
    .vector-section {
        height: calc(100vh - 120px);
    }
    
    .vector-container {
        height: calc(100vh - 120px);
    }
    
    .abstract-art {
        min-height: calc(100vh - 120px);
        transform: scale(1.5);
        transform-origin: center;
    }
    
    .falling-icons {
        height: calc(100vh - 120px);
    }
}

/* Falling Icons */
.falling-icons {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.icon-shape {
    position: absolute;
    width: 20px;
    height: 20px;
    opacity: 0.6;
}

/* Color variations */
.icon-shape.color-teal {
    fill: #4ecdc4;
    filter: drop-shadow(0 0 5px #4ecdc4);
}

.icon-shape.color-orange {
    fill: #ff6b6b;
    filter: drop-shadow(0 0 5px #ff6b6b);
}

.icon-shape.color-purple {
    fill: #9d4edd;
    filter: drop-shadow(0 0 5px #9d4edd);
}

/* Shape animations */
.icon-shape.triangle {
    animation: fallTriangle 8s linear infinite;
}

.icon-shape.circle {
    animation: fallCircle 6s linear infinite;
}

.icon-shape.square {
    animation: fallSquare 7s linear infinite;
}

.icon-shape.diamond {
    animation: fallDiamond 9s linear infinite;
}

/* Generate multiple instances with different delays and positions */
.icon-shape:nth-child(1) { left: 10%; animation-delay: 0s; }
.icon-shape:nth-child(2) { left: 30%; animation-delay: -2s; }
.icon-shape:nth-child(3) { left: 50%; animation-delay: -4s; }
.icon-shape:nth-child(4) { left: 70%; animation-delay: -6s; }
.icon-shape:nth-child(5) { left: 90%; animation-delay: -1s; }

/* Falling animations with different patterns */
@keyframes fallTriangle {
    0% {
        transform: translateY(-20px) rotate(0deg) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(100vh) rotate(360deg) scale(0.8);
        opacity: 0;
    }
}

@keyframes fallCircle {
    0% {
        transform: translateY(-20px) scale(1.2);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(100vh) scale(0.6);
        opacity: 0;
    }
}

@keyframes fallSquare {
    0% {
        transform: translateY(-20px) rotate(45deg) scale(0.8);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(100vh) rotate(405deg) scale(1.2);
        opacity: 0;
    }
}

@keyframes fallDiamond {
    0% {
        transform: translateY(-20px) rotate(0deg) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(100vh) rotate(-360deg) scale(0.7);
        opacity: 0;
    }
}

/* Email Link */
.email-link {
    pointer-events: auto;
}

.email-icon {
    width: 16px;
    height: 16px;
    fill: #4ecdc4;
    filter: drop-shadow(0 0 5px rgba(78, 205, 196, 0.5));
    animation: iconPulse 2s ease-in-out infinite;
}

.email-text {
    color: #4ecdc4;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(78, 205, 196, 0.5);
}

.email-info {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.8;
    transform: translateY(0);
    transition: all 0.3s ease;
}

.synthwave-button:hover .email-info {
    opacity: 1;
    transform: translateY(-1px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .button-container {
        bottom: 20px;
        gap: 15px;
    }
    
    .email-text {
        font-size: 0.7rem;
    }
}