/* --- Google Font --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&family=Poppins:wght@600&display=swap');

/* --- CSS Variables for Theming --- */
:root {
    /* Subtle background for the overall page */
    --bg-color-start: #e0f7fa; /* Very light blue */
    --bg-color-end: #d1c4e9; /* Very light lavender */

    /* Glass block specific colors */
    --text-color: #212529;
    --block-bg-gradient-start: rgba(255, 255, 255, 0.15); /* More transparent */
    --block-bg-gradient-end: rgba(255, 255, 255, 0.05); /* Even more transparent */
    --block-shadow: 0 10px 35px rgba(0, 0, 0, 0.1); /* More pronounced shadow */
    --link-color: #333;
    --control-btn-bg: rgba(255, 255, 255, 0.15); /* More transparent */
}

/* --- Keyframes for Marquee Border Animation --- */
@keyframes top-line-marquee {
    0% { --top-line-x: -100%; }
    100% { --top-line-x: 200%; }
}
@keyframes bottom-line-marquee {
    0% { --bottom-line-x: 200%; }
    100% { --bottom-line-x: -100%; }
}
@keyframes left-line-marquee {
    0% { --left-line-y: -100%; }
    100% { --left-line-y: 200%; }
}
@keyframes right-line-marquee {
    0% { --right-line-y: 200%; }
    100% { --right-line-y: -100%; }
}

/* Initialize custom properties for animation */
.ai-block {
    --top-line-x: -100%;
    --bottom-line-x: 200%;
    --left-line-y: -100%;
    --right-line-y: 200%;
}

[data-theme="dark"] {
    --bg-color-start: #483D8B; /* DarkSlateBlue */
    --bg-color-mid1: #2c3e50; /* Dark Blue-Gray */
    --bg-color-mid2: #1D4350; /* Dark Teal */
    --bg-color-end: #2B5876; /* Darker Blue */
    --text-color: #f8f9fa;
    --block-bg: rgba(0, 0, 0, 0.3);
    --link-color: #eee;
    --control-btn-bg: rgba(0, 0, 0, 0.2);
}

/* --- Fluid Animated Background --- */
@keyframes fluidAnimation {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}



@keyframes auroraAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


body {
    font-family: 'Noto Sans TC', sans-serif;
    color: var(--text-color);
    background-color: var(--bg-color-mid1); /* Fallback background */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    transition: color 0.5s, background-color 0.5s;
    position: relative;
}

body::before {
    content: '';
    position: fixed; /* Use fixed to ensure it covers viewport */
    top: 50%;
    left: 50%;
    width: 150vmax;
    height: 150vmax;
    transform-origin: center;
    background-image: 
        radial-gradient(circle at 30% 30%, var(--bg-color-start), transparent 35%),
        radial-gradient(circle at 70% 25%, var(--bg-color-mid2), transparent 35%),
        radial-gradient(circle at 20% 75%, var(--bg-color-end), transparent 35%),
        radial-gradient(circle at 80% 80%, var(--bg-color-mid1), transparent 35%);
    animation: fluidAnimation 40s ease-in-out infinite;
    z-index: -1; /* Place it at the very back */
    opacity: 0.8;
    filter: blur(80px); /* Create the soft, blended look */
    pointer-events: none;
}

/* --- Header & Controls --- */
.page-header {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10; /* Keep header on top */
}

.back-link {
    font-size: 1rem;
    color: var(--link-color);
    text-decoration: none;
    font-weight: 700;
}

.controls {
    display: flex;
    gap: 10px;
}

.control-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background-color: var(--control-btn-bg);
    backdrop-filter: blur(5px);
    color: var(--text-color);
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* --- Theme Toggle Icons --- */
[data-theme="light"] .bi-moon-stars-fill { display: none; }
[data-theme="dark"] .bi-sun-fill { display: none; }

/* --- Main Content --- */
main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Push content towards the bottom of its space */
    align-items: center; 
    position: relative; z-index: 2; /* Ensure content is above fluid background */
    padding-top: 80px; /* Space for header */
}

.main-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-align: center;
    font-size: clamp(2rem, 5vw, 3rem);
    letter-spacing: 2px;
}

.sub-title {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
    width: 100%; /* Ensure it takes full width of container */
    font-weight: 700;
    margin-top: 1rem;
    text-align: left;
    align-self: flex-start; /* Align to the start of the flex container (main) */
    max-width: 800px;
}

/* --- 3D Blocks Container --- */
.blocks-container {
    width: 100%;
    padding: 2rem 0;
    flex-grow: 1; /* Allow this container to grow and take up space */
    display: flex;
    justify-content: center;
    align-items: center; /* Center the blocks vertically in its space */
    position: relative; z-index: 2; /* Ensure blocks are above fluid background */
    perspective: 1000px; /* This creates the 3D space */
}

.blocks-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    transform-style: preserve-3d;
}

.ai-block {
    width: 180px;
    height: 120px;
    background: linear-gradient(135deg, var(--block-bg-gradient-start) 0%, var(--block-bg-gradient-end) 100%); /* Subtle transparent gradient */
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: var(--block-shadow); /* Use the defined shadow */
    backdrop-filter: blur(10px);
    text-decoration: none;
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.8s ease;
    transform: rotateX(15deg); /* Tilt effect */
    position: relative; z-index: 1; /* Set a z-index for stacking context */
}

.ai-block.placeholder {
    cursor: not-allowed;
    opacity: 0.7;
}

.ai-block:hover:not(.placeholder) {
    /* Straighten up, scale up, and bring to the front */
    transform: rotateX(0deg) scale(1.2);
    /* Add a glow effect that matches the border colors */
    box-shadow: 0 0 25px rgba(0, 204, 255, 0.5), 0 0 40px rgba(255, 51, 153, 0.4);
    z-index: 10; /* Ensure the hovered block is on top of others */
}

/* --- Animated Marquee Border Lines --- */
/* ::before for Top and Bottom lines */
.ai-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allow clicks to pass through */
    z-index: 2; /* Ensure lines are above block content */
    background:
        /* Top line: Left to Right */
        linear-gradient(to right, transparent, #00ccff, transparent) var(--top-line-x) 0 / 50% 2px no-repeat,
        /* Bottom line: Right to Left */
        linear-gradient(to left, transparent, #ff3399, transparent) var(--bottom-line-x) 100% / 50% 2px no-repeat;
    animation:
        top-line-marquee 4s linear infinite,
        bottom-line-marquee 4s linear infinite;    
}

/* ::after for Left and Right lines */
.ai-block::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allow clicks to pass through */
    z-index: 2; /* Ensure lines are above block content */
    background:
        /* Left line: Top to Bottom */
        linear-gradient(to bottom, transparent, #00ff99, transparent) 0 var(--left-line-y) / 2px 50% no-repeat,
        /* Right line: Bottom to Top */
        linear-gradient(to top, transparent, #ffff00, transparent) 100% var(--right-line-y) / 2px 50% no-repeat;
    animation:
        left-line-marquee 4s linear infinite,
        right-line-marquee 4s linear infinite;
}

/* Speed up the border animation on hover */
.ai-block:hover::before,
.ai-block:hover::after {
    animation-duration: 1s;
}

/* Adjust z-index for block content to be below lines but above block background */
.ai-block .block-content {
    position: relative;
    z-index: 3;
}

/* Ensure text color is visible against the lines */
.ai-block .title,
.ai-block .emoji {
    color: var(--text-color);
    text-shadow: 0 0 5px rgba(0,0,0,0.3); /* Optional: add a subtle shadow for better readability */
}

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

.block-content .emoji {
    font-size: 2.5rem;
}

.block-content .title {
    font-weight: 700;
    font-size: 1rem;
}

/* --- Aurora Effect --- */
.aurora {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30vh;
    background: linear-gradient(45deg, #00ff99, #00ccff, #9933ff, #ff3399, #ff9933, #00ff99);
    background-size: 600% 600%;
    animation: auroraAnimation 15s ease infinite;
    z-index: 0; /* Place it behind content but above body background */
    opacity: 0.3;
    filter: blur(50px);
    mix-blend-mode: screen; /* Blending mode for a more "light-like" effect */
    pointer-events: none; /* Make it unclickable */
}