/* ====================================================
   1. RESET & GLOBAL STYLES
   ==================================================== */

/* Remove browser margins and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden; /* Keeps everything full screen without scrollbars */
    background-color: #ffffff;
}

/* Load your custom .ttf font file for Q, K, and X */
@font-face {
    font-family: 'MyLetterFont';
    src: url('card_font.ttf') format('truetype'); 
}


/* ====================================================
   2. LANDING PAGE (INDEX.HTML) LAYOUT
   ==================================================== */

/* Container for the 4 landing columns */
.container {
    display: flex;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
    transition: background-color 0.3s ease;
}

/* Each individual column */
.column {
    flex: 1; /* Splits the screen into 4 equal vertical sections */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Default: White column background, Black text */
    background-color: #ffffff;
    color: #000000;
    
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Default font style for Q, K, and X */
.letter {
    font-family: 'MyLetterFont', sans-serif;
    font-size: 10rem;
    font-weight: normal;
}

/* Custom font style specifically for 'ii' (Column 3) */
.helvetica-letter {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: -0.05em;
}
/* ====================================================
   LINE ("lu tuotri") STYLES
   ==================================================== */

.line {
    position: fixed;
    bottom: 3rem;           /* Positioned near the bottom of the screen */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;            /* Keeps it above the columns */
    
    font-family: 'Courier New', Courier, monospace; /* Clean monospaced look */
    font-size: 1rem;
    color: #000000;         /* Visible in black text on white background */
    letter-spacing: 0.1em;
    pointer-events: none;   /* Allows clicking through it if needed */
    
    transition: opacity 0.3s ease; /* Smooth fade-out */
}

/* Hide the text when ANY column is hovered */
.container:hover ~ .line,
.container:hover .line {
    opacity: 0;             /* Disappears completely on hover */
}

/* ====================================================
   3. LANDING PAGE HOVER EFFECT
   ==================================================== */

/* A. When hovering anywhere over the container:
   Turn ALL column backgrounds black and letters black */
.container:hover .column {
    background-color: #000000;
    color: #000000;
}

/* B. BUT for the SPECIFIC column being hovered:
   Keep background black, but turn the letter WHITE */
.container .column:hover {
    background-color: #000000;
    color: #ffffff;
}


/* ====================================================
   4. SUB-PAGES LAYOUT (Q.HTML, K.HTML, II.HTML, X.HTML)
   ==================================================== */

/* Full black background for sub-pages */
.subpage-bg {
    background-color: #000000;
    color: #ffffff;
}

/* Split screen container for sub-pages */
.subpage-container {
    display: flex;
    width: 100vw;
    height: 100vh;
}

/* Left side: Large letter */
.subpage-left {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.subpage-letter-link {
    color: #ffffff;
    text-decoration: none;
}

/* Right side: Sub-menu */
.subpage-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Sub-menu list reset */
.sub-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2rem; /* Vertical space between items */
}

.sub-menu a {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    color: #ffffff;
    text-decoration: none;
    font-family: monospace; /* Typewriter/code style */
    font-size: 2rem;
    transition: opacity 0.2s ease;
}

.symbol-bullet {
    font-size: 1.5rem;
    color: #ffffff;
}

/* Sub-menu hover effect */
.sub-menu a:hover {
    opacity: 0.7;
}
/* ====================================================
   SUB-PAGE FADE-IN ANIMATION
   ==================================================== */

/* Apply the fade animation to all sub-pages */
.subpage-bg {
    background-color: #000000;
    color: #ffffff;
    
    /* 0.5s fade duration — adjust higher (e.g. 0.8s) for a slower fade */
    animation: fadeIn 0.5s ease-in-out forwards; 
}

/* Keyframes controlling opacity from invisible (0) to fully visible (1) */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Keeps left letter and right menu hidden initially, then fades them in */
.subpage-left, 
.subpage-right {
    animation: fadeIn 0.7s ease-in-out forwards;
}

/* ====================================================
   Q PAGE & SUB-MENU SPECIFIC STYLES
   ==================================================== */

/* Align menu items neatly in a column */
.sub-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2.5rem; /* Space between each row */
}

/* Sub-menu text & icon layout */
.sub-menu a {
    display: flex;
    align-items: center;
    gap: 1.5rem; /* Space between square bullet and text */
    color: #ffffff;
    text-decoration: none;
    font-family: 'Courier New', Courier, monospace; /* Monospaced typewriter font */
    font-size: 2.2rem;
    letter-spacing: 0.1em;
    transition: opacity 0.2s ease;
}

/* White square bullet points */
.bullet {
    width: 28px;
    height: 28px;
    background-color: #ffffff;
    display: inline-block;
    flex-shrink: 0; /* Prevents square from squishing */
}

/* Smooth opacity hover effect for links */
.sub-menu a:hover {
    opacity: 0.6;
}

/* Create the giant white club symbol behind the ii */
.subpage-left.ii-watermark::before {
    content: "♣"; /* Trefoil / Club symbol */
    position: absolute;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 30vw; /* Scales with screen width */
    font-weight: bold;
    color: #ffffff;
    opacity: 0.12; /* Subtle watermark opacity — adjust as you like */
    pointer-events: none;
    z-index: 1;
    line-height: 1;
}