/* Art Page Specific Styles */

.art-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    background: #000;
    overflow: hidden;
    perspective: 1000px;
}

/* Triangular Tunnel Effect */
.tunnel-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.triangle-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vh;
    /* Base size */
    height: 100vh;
    border: 2px solid transparent;
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.5), inset 0 0 20px rgba(255, 0, 255, 0.5);
    /* Using clip-path to make it a triangle? Or just a box rotated?
       User asked for "Triangular hallway".
       Let's use an SVG background image that scales? 
       CSS Border is easier for "Neon".
    */
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    /* To make it a "Hallway", we need lines pointing to center. */
    background: linear-gradient(to bottom, transparent 90%, rgba(255, 0, 255, 0.1));
}

/* Actually, a better "Triangular Hallway" is a series of triangles moving towards the viewer */
.tri-shape {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    /* Equilateral-ish */
    transform: translate(-50%, -50%);
    border: 3px solid #fff;
    clip-path: polygon(50% 0%, 0% 87%, 100% 87%);
    /* Triangle shape */
    box-shadow: 0 0 15px var(--neon-blue);
    /* Box shadow doesn't follow clip-path well usually, need filter drop-shadow */
    filter: drop-shadow(0 0 10px var(--neon-magenta));
    opacity: 0;
    animation: tunnelMove 6s linear infinite;
}

/* Create stylistic varations for "Wow" factor */
.tri-shape:nth-child(1) {
    animation-delay: 0s;
    border-color: var(--neon-blue);
}

.tri-shape:nth-child(2) {
    animation-delay: 1s;
    border-color: var(--neon-magenta);
}

.tri-shape:nth-child(3) {
    animation-delay: 2s;
    border-color: var(--neon-gold);
}

.tri-shape:nth-child(4) {
    animation-delay: 3s;
    border-color: var(--neon-blue);
}

.tri-shape:nth-child(5) {
    animation-delay: 4s;
    border-color: var(--neon-magenta);
}

.tri-shape:nth-child(6) {
    animation-delay: 5s;
    border-color: var(--neon-gold);
}

@keyframes tunnelMove {
    0% {
        width: 10px;
        height: 10px;
        opacity: 0;
        border-width: 1px;
    }

    10% {
        opacity: 1;
    }

    100% {
        width: 300vmax;
        height: 300vmax;
        opacity: 0;
        border-width: 20px;
        filter: drop-shadow(0 0 50px var(--neon-blue));
    }
}

/* Add a "Floor" reflection or mist */
.mist {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), transparent);
    z-index: -1;
}

/* Card overrides for Art */
.grid-card .card-img.art-1 {
    background-image: linear-gradient(45deg, #FF00FF, #00FFFF);
}

.grid-card .card-img.art-2 {
    background-image: linear-gradient(45deg, #FFD700, #FF0000);
}

.grid-card .card-img.art-3 {
    background-image: linear-gradient(45deg, #00FF00, #0000FF);
}