/* style.css */
:root {
    --bg-color: #0a0a0a; /* Near black */
    --panel-bg: #1a1a1a; /* Dark grey panel */
    --metal-texture-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="%23222" d="M0 0h100v100H0z"/><path fill="%23333" d="M10 10h80v80H10z"/><path fill="%232a2a2a" d="M20 20h60v60H20z"/><path fill="%23444" d="M30 30h40v40H30z"/><path fill="%233a3a3a" d="M40 40h20v20H40z"/></svg>'); /* Basic procedural texture */
    --accent-red: #b00000; /* Deep blood red */
    --accent-red-glow: rgba(176, 0, 0, 0.7);
    --text-light: #cccccc; /* Light grey text */
    --text-metal-title: #e0e0e0; /* Brighter for title */
    --button-border: #555555;
    --font-title: 'Metal Mania', cursive;
    --font-body: 'Exo 2', sans-serif;
}

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

html, body {
    height: 100%;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-color);
    background-image: var(--metal-texture-url); /* Subtle texture */
    background-blend-mode: overlay;
    background-color: rgba(10, 10, 10, 0.8); /* Darken texture slightly */
    color: var(--text-light);
    line-height: 1.7;
}

.page-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 2rem;
}

.content-container {
    display: flex;
    width: 100%;
    max-width: 960px; /* Max width */
    background-color: var(--panel-bg);
    border: 3px solid var(--button-border);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.6), inset 0 0 10px rgba(0,0,0,0.5);
    min-height: 400px; /* Minimum height */
}

.left-column {
    flex: 1 1 40%; /* Takes 40% of space */
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1516876345881-4c0adee8706f?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=70'); /* Example: Dark texture/flames */
    background-size: cover;
    background-position: center;
    border-right: 3px solid var(--button-border);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Optional graphic element styling */
.metal-graphic {
    width: 80%;
    height: 80%;
    /* Example: Could be a SVG logo or CSS effect */
     border: 2px dashed var(--button-border);
     opacity: 0.3;
}

/* Optional: Add a subtle glow effect to the column */
.left-column::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
    height: 100px;
    background: radial-gradient(ellipse at bottom, var(--accent-red-glow) 0%, transparent 70%);
    opacity: 0.6;
    pointer-events: none;
}


.right-column {
    flex: 1 1 60%; /* Takes 60% of space */
    padding: 2.5rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
}

.site-title {
    font-family: var(--font-title);
    font-size: 3.5rem; /* Large title */
    color: var(--text-metal-title);
    text-align: center;
    margin-bottom: 1.5rem;
    letter-spacing: 2px;
    text-shadow: 2px 2px 0px var(--bg-color), /* Hard shadow */
                 4px 4px 8px var(--accent-red-glow); /* Red glow */
}

.announcement {
    font-size: 1.1rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: 2.5rem;
    color: var(--text-light);
}

.cta-button {
    font-family: var(--font-body); /* Use body font for readability */
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
    background: linear-gradient(180deg, #4a4a4a, #2a2a2a); /* Dark metallic gradient */
    border: 2px solid var(--button-border);
    padding: 0.8rem 1.5rem;
    cursor: pointer;
    display: block; /* Make it block to center easily */
    width: fit-content; /* Size to content */
    margin: 0 auto; /* Center horizontally */
    box-shadow: inset 0 1px 0px #666, /* Top highlight */
                inset 0 -1px 0px #111, /* Bottom shadow */
                0 2px 4px rgba(0, 0, 0, 0.5); /* Outer shadow */
    transition: all 0.2s ease-in-out;
    position: relative; /* For potential pseudo-elements */
}

.cta-button:hover {
    background: linear-gradient(180deg, #5a5a5a, #3a3a3a);
    color: #fff;
    border-color: #777;
    box-shadow: inset 0 1px 0px #777,
                inset 0 -1px 0px #222,
                0 4px 8px rgba(0, 0, 0, 0.6),
                0 0 15px var(--accent-red-glow); /* Red glow on hover */
    transform: translateY(-2px);
}

.cta-button:active {
    transform: translateY(0px);
    box-shadow: inset 0 2px 2px #111, /* Pressed in look */
                0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Responsive: Stack columns on smaller screens */
@media (max-width: 768px) {
    .content-container {
        flex-direction: column;
        max-width: 500px; /* Adjust max width for single column */
        min-height: 0; /* Reset min-height */
    }

    .left-column {
        min-height: 200px; /* Give image column some height */
        border-right: none;
        border-bottom: 3px solid var(--button-border);
        flex-basis: auto; /* Reset flex basis */
    }
    .left-column::after { /* Adjust glow */
        height: 60px;
        bottom: -30px;
    }

    .right-column {
        padding: 2rem 1.5rem;
        flex-basis: auto; /* Reset flex basis */
    }

    .site-title {
        font-size: 2.8rem;
        margin-bottom: 1rem;
    }

    .announcement {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    .cta-button {
        font-size: 1.1rem;
        padding: 0.7rem 1.3rem;
    }
}

@media (max-width: 480px) {
    .page-wrapper {
        padding: 1rem;
    }
     .left-column {
        min-height: 150px;
     }
    .right-column {
        padding: 1.5rem 1rem;
    }
    .site-title {
        font-size: 2.2rem;
    }
    .announcement {
        font-size: 0.9rem;
    }
    .cta-button {
        font-size: 1rem;
        width: 90%; /* Make button wider */
        text-align: center;
    }
}