/* Specific to index.html */
main {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.mysterious-image {
    width: 90vw;
    max-height: 80vh;
    opacity: 0;
    animation: expandField 8s cubic-bezier(0.1, 0.8, 0.1, 1) forwards, breathe 12s infinite alternate linear 8s;
    transform-origin: center center;
}

.mysterious-image path, 
.mysterious-image circle,
.mysterious-image polygon,
.mysterious-image rect,
.mysterious-image line {
    stroke: var(--accent-color);
    fill: none;
    vector-effect: non-scaling-stroke;
    transition: all 0.5s ease;
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: drawLine 6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.mysterious-image .dot {
    stroke-dasharray: none;
    animation: flashDot 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
    fill: var(--accent-color);
    filter: none;
}

.mysterious-image .path-delay-1 { animation-delay: 1.5s; }
.mysterious-image .path-delay-2 { animation-delay: 3s; }
.mysterious-image .path-delay-3 { animation-delay: 4.5s; }

.mysterious-image:hover path {
    stroke-width: 0.8;
    opacity: 0.8;
}

@keyframes expandField {
    0% { transform: scale(0.001) rotate(-180deg); opacity: 0; filter: blur(10px); }
    10% { transform: scale(0.01) rotate(-90deg); opacity: 1; filter: blur(5px); }
    100% { transform: scale(1) rotate(0deg); opacity: 0.9; filter: blur(0px); }
}

@keyframes drawLine {
    to { stroke-dashoffset: 0; }
}

@keyframes flashDot {
    0% { opacity: 0; transform: scale(0); }
    20% { opacity: 1; transform: scale(3); }
    100% { opacity: 0.4; transform: scale(1); }
}

@keyframes breathe {
    0% { transform: scale(0.99) rotate(-0.5deg); opacity: 0.8; filter: blur(0.5px); }
    100% { transform: scale(1.01) rotate(0.5deg); opacity: 0.95; filter: blur(0px); }
}