/* Theme CSS - Past, Present, Future UI Modes */

/* Past Theme (Medieval/Fantasy) */
.past-theme {
    --main-bg: #190a0c;
    --main-text: #e8c682;
    --accent-color: #8e3b2d;
    --highlight: #c69749;
    --shadow: #000000;
}

.past-theme .main-header {
    background-color: rgba(25, 10, 12, 0.9);
    border-bottom: 2px solid var(--highlight);
}

.past-theme .logo {
    font-family: var(--font-thin);
    color: var(--highlight);
    text-shadow: 0 0 5px var(--highlight);
}

.past-theme .japanese-subtitle {
    color: var(--main-text);
}

.past-theme .nav-link {
    color: var(--main-text);
}

.past-theme .nav-link:hover {
    color: var(--highlight);
}

.past-theme .nav-link.active {
    color: var(--accent-color);
}

.past-theme .nav-link::after {
    background-color: var(--accent-color);
}

.past-theme .section-title {
    font-family: var(--font-thin);
    color: var(--highlight);
    text-shadow: 0 0 5px var(--highlight);
}

.past-theme .cta-button {
    background-color: var(--accent-color);
    box-shadow: 0 0 10px var(--accent-color);
}

.past-theme .cta-button:hover {
    box-shadow: 0 0 20px var(--accent-color);
}

.past-theme .fire-trail {
    background: linear-gradient(90deg, var(--accent-color), var(--highlight));
}

.past-theme .tab-btn.active {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.past-theme .tab-panel h3 {
    color: var(--highlight);
}

.past-theme .play-button {
    background-color: var(--accent-color);
}

.past-theme .testimonial-badge {
    background-color: var(--highlight);
}

.past-theme .testimonial-author {
    color: var(--accent-color);
}

.past-theme .timeline::before {
    background: linear-gradient(var(--highlight), var(--accent-color));
}

.past-theme .timeline-badge {
    background-color: var(--highlight);
}

.past-theme .timeline-item::before {
    color: var(--accent-color);
}

.past-theme .main-footer {
    background-color: rgba(25, 10, 12, 0.9);
    border-top: 2px solid var(--highlight);
}

.past-theme .footer-column h3 {
    color: var(--highlight);
}

.past-theme #countdown {
    color: var(--accent-color);
    text-shadow: 0 0 5px var(--accent-color);
}

/* Present Theme (Current/Default) */
.present-theme {
    /* Default theme uses the root variables */
}

/* Future Theme (Cyberpunk/Digital) */
.future-theme {
    --main-bg: #0a1a29;
    --main-text: #00f0ff;
    --accent-color: #ff00aa;
    --highlight: #00ff9d;
    --shadow: #000a14;
}

.future-theme .main-header {
    background-color: rgba(10, 26, 41, 0.9);
    border-bottom: 2px solid var(--highlight);
}

.future-theme .logo {
    color: var(--highlight);
    text-shadow: 0 0 5px var(--highlight), 0 0 10px var(--highlight);
    letter-spacing: 3px;
}

.future-theme .japanese-subtitle {
    color: var(--main-text);
}

.future-theme .nav-link {
    color: var(--main-text);
}

.future-theme .nav-link:hover {
    color: var(--highlight);
}

.future-theme .nav-link.active {
    color: var(--accent-color);
}

.future-theme .nav-link::after {
    background-color: var(--accent-color);
}

.future-theme .section-title {
    color: var(--highlight);
    text-shadow: 0 0 5px var(--highlight), 0 0 10px var(--highlight);
    letter-spacing: 2px;
}

.future-theme .cta-button {
    background-color: var(--accent-color);
    box-shadow: 0 0 10px var(--accent-color), 0 0 20px rgba(255, 0, 170, 0.5);
}

.future-theme .cta-button:hover {
    box-shadow: 0 0 20px var(--accent-color), 0 0 40px rgba(255, 0, 170, 0.7);
}

.future-theme .fire-trail {
    background: linear-gradient(90deg, var(--accent-color), var(--highlight));
    box-shadow: 0 0 10px var(--accent-color);
}

.future-theme .tab-btn.active {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.future-theme .tab-panel h3 {
    color: var(--highlight);
}

.future-theme .play-button {
    background-color: var(--accent-color);
}

.future-theme .testimonial-badge {
    background-color: var(--highlight);
    color: var(--shadow);
}

.future-theme .testimonial-author {
    color: var(--accent-color);
}

.future-theme .timeline::before {
    background: linear-gradient(var(--highlight), var(--accent-color));
}

.future-theme .timeline-badge {
    background-color: var(--highlight);
}

.future-theme .timeline-item::before {
    color: var(--accent-color);
}

.future-theme .main-footer {
    background-color: rgba(10, 26, 41, 0.9);
    border-top: 2px solid var(--highlight);
}

.future-theme .footer-column h3 {
    color: var(--highlight);
}

.future-theme #countdown {
    color: var(--accent-color);
    text-shadow: 0 0 5px var(--accent-color);
}

/* Theme-specific Background Elements */
.past-theme .neon-cityscape {
    background-image: linear-gradient(0deg, rgba(25, 10, 12, 0.8) 0%, rgba(12, 0, 22, 0) 100%);
    box-shadow: 0 0 15px var(--highlight), 0 0 30px var(--highlight);
}

.future-theme .neon-cityscape {
    background-image: linear-gradient(0deg, rgba(10, 26, 41, 0.8) 0%, rgba(12, 0, 22, 0) 100%);
    box-shadow: 0 0 15px var(--highlight), 0 0 30px var(--highlight);
}

.past-theme .pixel-stars {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='1' fill='%23e8c682' fill-opacity='0.5'/%3E%3Ccircle cx='30' cy='25' r='0.5' fill='%23e8c682' fill-opacity='0.3'/%3E%3Ccircle cx='50' cy='50' r='1' fill='%23e8c682' fill-opacity='0.6'/%3E%3Ccircle cx='70' cy='30' r='0.5' fill='%23e8c682' fill-opacity='0.4'/%3E%3Ccircle cx='90' cy='75' r='1' fill='%23e8c682' fill-opacity='0.5'/%3E%3C/svg%3E");
    animation: twinkle 15s infinite linear;
}

.future-theme .pixel-stars {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='1' fill='%2300f0ff' fill-opacity='0.5'/%3E%3Ccircle cx='30' cy='25' r='0.5' fill='%2300f0ff' fill-opacity='0.3'/%3E%3Ccircle cx='50' cy='50' r='1' fill='%2300f0ff' fill-opacity='0.6'/%3E%3Ccircle cx='70' cy='30' r='0.5' fill='%2300f0ff' fill-opacity='0.4'/%3E%3Ccircle cx='90' cy='75' r='1' fill='%2300f0ff' fill-opacity='0.5'/%3E%3C/svg%3E");
    animation: twinkle 8s infinite linear;
}

.future-theme .data-particles::before {
    background-image: 
        radial-gradient(var(--main-text) 1px, transparent 1px),
        radial-gradient(var(--highlight) 1px, transparent 1px);
    animation: flow-up 15s linear infinite;
}