:root {
    --era-retro-window: #c0c0c0;
    --era-retro-window-light: #ffffff;
    --era-retro-window-mid: #808080;
    --era-retro-window-dark: #404040;
    --era-retro-title: #000080;
    --era-retro-ink: #000000;
    --era-retro-desktop: #008080;
    --era-retro-screen: #000020;
    --era-retro-matrix: #000080;
    --era-retro-accent: #ffffff;
    --era-retro-accent-rgb: 255, 255, 255;
    --era-transition-signal: 0, 255, 136;
    --era-transition-panel: rgba(0, 12, 8, 0.76);
    --era-transition-duration: 1.85s;
    --era-transition-scanline-duration: 1.25s;
    --era-transition-scanline-delay: 0.2s;
    --era-transition-glitch-offset: 2px;
}

/*==================================================
                TIME TRAVEL TRANSITION
==================================================*/

html.era-transition,
html.era-transition body {
    overflow-x: clip;
}

html.era-transition::before,
html.era-transition::after {
    position: fixed;
    pointer-events: none;
}

html.era-transition::before {
    content: "";
    top: 0;
    right: 0;
    left: 0;
    z-index: 30001;
    height: clamp(3px, 0.45vw, 6px);
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(var(--era-transition-signal), 0.72) 12%,
            rgba(255, 255, 255, 0.96) 50%,
            rgba(var(--era-transition-signal), 0.72) 88%,
            transparent
        );
    box-shadow:
        0 -55vh 0 55vh rgba(var(--era-transition-signal), 0.035),
        0 0 10px rgba(var(--era-transition-signal), 0.9),
        0 0 24px rgba(var(--era-transition-signal), 0.42);
    transform: translateY(-10vh);
    animation-duration: var(--era-transition-scanline-duration);
    animation-delay: var(--era-transition-scanline-delay);
    animation-timing-function: cubic-bezier(0.36, 0, 0.22, 1);
    animation-fill-mode: both;
}

html.era-transition::after {
    content: "";
    inset: 0;
    z-index: 29999;
    background: repeating-linear-gradient(
        0deg,
        transparent 0 4px,
        rgba(var(--era-transition-signal), 0.055) 4px 5px
    );
    opacity: 0.38;
    animation: eraTravelTexture var(--era-transition-duration)
        steps(2, end) both;
}

html.era-transition-to-modern::before {
    animation-name: eraMigrationScanline;
}

html.era-transition-to-retro {
    --era-transition-signal: 0, 0, 128;
    --era-transition-panel: rgba(192, 192, 192, 0.9);
}

html.era-transition-to-retro::before {
    background: repeating-linear-gradient(
        90deg,
        var(--era-retro-window-light) 0 12px,
        var(--era-retro-title) 12px 18px,
        var(--era-retro-window-mid) 18px 28px
    );
    box-shadow:
        0 -55vh 0 55vh rgba(0, 0, 128, 0.035),
        0 0 8px rgba(255, 255, 255, 0.72),
        0 0 18px rgba(0, 0, 128, 0.5);
    animation-name: eraRollbackScanline;
}

html.era-transition-to-retro::after {
    background: repeating-linear-gradient(
        0deg,
        transparent 0 3px,
        rgba(0, 0, 128, 0.11) 3px 4px
    );
    opacity: 0.5;
}

.era-time-counter {
    position: fixed;
    inset: 0;
    z-index: 30002;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: clamp(10px, 2vh, 22px);
    padding: 24px;
    color: var(--color-accent);
    font-family: monospace;
    text-align: center;
    pointer-events: none;
    animation: eraCounterFrame var(--era-transition-duration)
        steps(1, end) both;
}

.era-time-counter__year {
    font-size: clamp(4rem, 16vw, 10rem);
    font-weight: 800;
    line-height: 0.86;
    letter-spacing: clamp(4px, 1.2vw, 18px);
    text-shadow:
        calc(var(--era-transition-glitch-offset) * -1) 0
            rgba(var(--color-accent-rgb), 0.62),
        var(--era-transition-glitch-offset) 0 rgba(255, 255, 255, 0.44),
        0 0 28px rgba(var(--era-transition-signal), 0.68);
    animation: eraCounterGlitch 145ms steps(2, end) infinite;
}

.era-time-counter__status {
    max-width: min(88vw, 760px);
    padding: 10px 16px;
    border: 1px solid rgba(var(--era-transition-signal), 0.62);
    background: var(--era-transition-panel);
    font-size: clamp(0.78rem, 2.2vw, 1.2rem);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: clamp(1px, 0.45vw, 5px);
    text-shadow: 0 0 12px currentColor;
}

.era-time-counter.is-target .era-time-counter__year {
    transform: scale(1.08);
    text-shadow:
        -2px 0 rgba(var(--color-accent-rgb), 0.75),
        2px 0 rgba(255, 255, 255, 0.68),
        0 0 42px rgba(var(--era-transition-signal), 0.92);
    animation: eraCounterTargetLock 350ms ease-out both;
}

html.era-transition-to-retro .era-time-counter {
    color: var(--era-retro-window-light);
}

html.era-transition-to-retro .era-time-counter__year {
    text-shadow:
        -3px 0 var(--era-retro-title),
        3px 0 var(--era-retro-window-dark),
        0 0 18px rgba(0, 0, 128, 0.55);
}

html.era-transition-to-retro .era-time-counter__status {
    border: 2px solid;
    border-color:
        var(--era-retro-window-light)
        var(--era-retro-window-dark)
        var(--era-retro-window-dark)
        var(--era-retro-window-light);
    background: var(--era-retro-window);
    color: var(--era-retro-ink);
    text-shadow: none;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.38);
}

html.era-transition .era-switcher {
    position: relative;
    isolation: isolate;
}

html.era-transition .era-switcher[data-era-travel-year]::after {
    content: attr(data-era-travel-year);
    position: absolute;
    inset: -1px;
    z-index: 4;
    display: grid;
    place-items: center;
    border: 1px solid rgba(var(--era-transition-signal), 0.62);
    border-radius: inherit;
    background: var(--era-transition-panel);
    color: var(--color-accent);
    font-family: monospace;
    font-size: clamp(0.55rem, 0.8vw, 0.68rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    white-space: nowrap;
    text-shadow: 0 0 8px currentColor;
    animation: eraSliderSignal 145ms steps(2, end) infinite;
}

html.era-transition-to-retro
    .era-switcher[data-era-travel-year]::after {
    border-radius: 0;
    border-color:
        var(--era-retro-window-light)
        var(--era-retro-window-dark)
        var(--era-retro-window-dark)
        var(--era-retro-window-light);
    background: var(--era-retro-window);
    color: var(--era-retro-ink);
    text-shadow: none;
}

html.era-transition .era-switcher.is-era-target::after {
    animation: none;
    filter: brightness(1.18);
}

html.era-transition :where(
    body,
    .site-header,
    .logo,
    .language-switcher,
    .era-switcher,
    .menu-toggle,
    .stat-card,
    .skill-card,
    .project-card,
    .project-terminal,
    .contact-form,
    .contact-form input,
    .contact-form textarea,
    .hero-button,
    .project-action-button,
    .contact-button,
    .return-button,
    .site-footer
) {
    transition:
        color 0.82s ease,
        background-color 0.82s ease,
        border-color 0.82s ease,
        border-radius 0.82s ease,
        box-shadow 0.82s ease,
        text-shadow 0.82s ease,
        filter 0.82s ease,
        opacity 0.82s ease;
}

html.era-transition:not(.era-transition-reduced) :where(
    .site-header,
    .logo,
    .language-switcher,
    .era-switcher,
    .menu-toggle,
    .stat-card,
    .skill-card,
    .project-card,
    .project-terminal,
    .contact-form,
    .hero-button,
    .project-action-button,
    .contact-button,
    .return-button,
    .site-footer
) {
    will-change: transform, opacity, filter;
    animation-duration: 1.32s;
    animation-timing-function: steps(1, end);
    animation-fill-mode: both;
}

html.era-transition-to-modern:not(.era-transition-reduced) :where(
    .site-header,
    .logo,
    .language-switcher,
    .era-switcher,
    .menu-toggle,
    .stat-card,
    .skill-card,
    .project-card,
    .project-terminal,
    .contact-form,
    .hero-button,
    .project-action-button,
    .contact-button,
    .return-button,
    .site-footer
) {
    animation-name: eraMigrateInterface;
}

html.era-transition-to-retro:not(.era-transition-reduced) :where(
    .site-header,
    .logo,
    .language-switcher,
    .era-switcher,
    .menu-toggle,
    .stat-card,
    .skill-card,
    .project-card,
    .project-terminal,
    .contact-form,
    .hero-button,
    .project-action-button,
    .contact-button,
    .return-button,
    .site-footer
) {
    animation-name: eraRollbackInterface;
}

html.era-transition:not(.era-transition-reduced) :where(
    .stat-card:nth-child(even),
    .skill-card:nth-child(even),
    .project-terminal,
    .contact-form,
    .site-footer
) {
    animation-delay: 70ms;
}

html.era-transition-to-modern:not(.era-transition-reduced) #matrix-canvas {
    opacity: 0.14;
    filter: blur(2px);
    transform: scale(1);
    animation: none;
}

html.era-transition-to-retro:not(.era-transition-reduced) #matrix-canvas {
    animation: eraMatrixRollback var(--era-transition-duration)
        steps(1, end) both;
}

@keyframes eraMigrationScanline {
    0% {
        opacity: 0;
        transform: translateY(-10vh);
    }

    7% {
        opacity: 0.92;
    }

    94% {
        opacity: 0.86;
    }

    100% {
        opacity: 0;
        transform: translateY(110vh);
    }
}

@keyframes eraRollbackScanline {
    0% {
        opacity: 0;
        transform: translateY(-10vh) scaleY(1.4);
    }

    9%, 13%, 38%, 42%, 72%, 76% {
        opacity: 0.94;
    }

    11%, 40%, 74% {
        opacity: 0.56;
    }

    100% {
        opacity: 0;
        transform: translateY(110vh) scaleY(1.4);
    }
}

@keyframes eraTravelTexture {
    0%, 100% {
        opacity: 0;
        background-position: 0 0;
    }

    7%, 92% {
        opacity: 0.42;
    }

    32% {
        background-position: 0 2px;
    }

    68% {
        background-position: 0 4px;
    }
}

@keyframes eraCounterFrame {
    0%, 100% {
        opacity: 0;
    }

    4%, 96% {
        opacity: 1;
    }
}

@keyframes eraCounterGlitch {
    0%, 100% {
        transform: translateX(0) skewX(0);
        opacity: 1;
    }

    36% {
        transform: translateX(calc(var(--era-transition-glitch-offset) * -1))
            skewX(-0.5deg);
        opacity: 0.92;
    }

    64% {
        transform: translateX(var(--era-transition-glitch-offset))
            skewX(0.5deg);
        opacity: 1;
    }
}

@keyframes eraCounterTargetLock {
    0% {
        transform: scale(0.96);
        filter: brightness(1.8);
    }

    55% {
        transform: scale(1.12);
    }

    100% {
        transform: scale(1.08);
        filter: none;
    }
}

@keyframes eraSliderSignal {
    0%, 100% {
        opacity: 1;
        transform: translateX(0);
    }

    50% {
        opacity: 0.82;
        transform: translateX(var(--era-transition-glitch-offset));
    }
}

@keyframes eraMigrateInterface {
    0%, 100% {
        transform: translateX(0) skewX(0);
        opacity: 1;
        filter: none;
    }

    18% {
        transform: translateX(-2px) skewX(-0.4deg);
        opacity: 0.96;
        filter: contrast(1.08);
    }

    23% {
        transform: translateX(3px) skewX(0.6deg);
        opacity: 0.9;
        filter: contrast(1.18);
    }

    28%, 54% {
        transform: translateX(0) skewX(0);
        opacity: 1;
        filter: none;
    }

    59% {
        transform: translateX(-3px) skewX(-0.5deg);
        opacity: 0.92;
        filter: brightness(1.12);
    }

    64% {
        transform: translateX(2px) skewX(0.35deg);
        opacity: 0.97;
        filter: contrast(1.12);
    }
}

@keyframes eraRollbackInterface {
    0%, 100% {
        transform: translateX(0) skewX(0);
        opacity: 1;
        filter: none;
    }

    16% {
        transform: translateX(2px) skewX(0.45deg);
        opacity: 0.94;
        filter: brightness(1.12);
    }

    21% {
        transform: translateX(-3px) skewX(-0.7deg);
        opacity: 0.88;
        filter: contrast(1.2);
    }

    27%, 50% {
        transform: translateX(0) skewX(0);
        opacity: 1;
        filter: none;
    }

    55% {
        transform: translateX(3px) skewX(0.55deg);
        opacity: 0.91;
        filter: contrast(1.16);
    }

    61% {
        transform: translateX(-2px) skewX(-0.4deg);
        opacity: 0.96;
        filter: brightness(0.9);
    }
}

@keyframes eraMatrixRollback {
    0% {
        opacity: 0.15;
        filter: blur(2px);
        transform: scale(1);
    }

    30% {
        opacity: 0.34;
        filter: blur(1px) contrast(1.18);
        transform: scaleX(1.006);
    }

    64% {
        opacity: 0.5;
        filter: contrast(1.22);
        transform: scaleX(1.01);
    }

    100% {
        opacity: 0.42;
        filter: none;
        transform: scale(1);
    }
}

/*==================================================
                    1998 ERA
==================================================*/

html[data-era="1998"] {
    --color-background: var(--era-retro-desktop);
    --color-accent: var(--era-retro-accent);
    --color-accent-rgb: var(--era-retro-accent-rgb);
    --color-white: #ffffff;
    --color-text-light: #e7e7e7;
    --color-text-muted: #b8b8b8;
    --color-text-dark: #686868;
}

html[data-era="1998"] * {
    font-family: "Courier New", monospace;
}

html[data-era="1998"] body {
    background: var(--era-retro-desktop);
}

html[data-era="1998"] body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent 0 3px,
        rgba(0, 0, 0, 0.09) 3px 4px
    );
    opacity: 0.22;
}

html[data-era="1998"] #matrix-canvas {
    opacity: 0.42;
    filter: none;
    mix-blend-mode: multiply;
}

html[data-era="1998"] .matrix-background {
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.04),
        transparent 68%
    );
}

html[data-era="1998"] .hero-overlay {
    background: transparent;
}

html[data-era="1998"] .hero-motto,
html[data-era="1998"] .scroll-hint {
    color: var(--era-retro-window-light);
    text-shadow: 1px 1px 0 var(--era-retro-title);
}

html[data-era="1998"] #particle-canvas {
    display: none;
}

html[data-era="1998"]:not(.snow-mode):not(.motion-reduced) #particle-canvas {
    display: block;
    opacity: 0.52;
    filter: none;
    mix-blend-mode: multiply;
    image-rendering: pixelated;
}

html[data-era="1998"] .glitch::before {
    text-shadow: -2px 0 var(--era-retro-title);
}

html[data-era="1998"] .glitch::after {
    text-shadow: 2px 0 var(--era-retro-window-light);
}

html[data-era="1998"] .site-header {
    background: var(--era-retro-window);
    border-top: 2px solid var(--era-retro-window-light);
    border-bottom: 2px solid var(--era-retro-window-dark);
    box-shadow:
        inset 0 -1px var(--era-retro-window-mid),
        0 4px 0 rgba(0, 0, 0, 0.45);
    backdrop-filter: none;
}

html[data-era="1998"] .logo {
    padding: 7px 9px;
    border-top: 2px solid var(--era-retro-window-dark);
    border-left: 2px solid var(--era-retro-window-dark);
    border-right: 2px solid var(--era-retro-window-light);
    border-bottom: 2px solid var(--era-retro-window-light);
    background: var(--era-retro-screen);
    color: var(--color-accent);
}

html[data-era="1998"] nav a {
    color: var(--era-retro-ink);
    font-weight: 700;
    text-shadow: none;
}

html[data-era="1998"] .logo,
html[data-era="1998"] .logo:hover {
    color: var(--color-accent);
    text-shadow: 0 0 5px rgba(var(--color-accent-rgb), 0.7);
}

html[data-era="1998"] .nav-menu a:hover,
html[data-era="1998"] .nav-menu a.active {
    color: var(--era-retro-title);
    text-shadow:
        -1px 0 rgba(var(--color-accent-rgb), 0.7),
        1px 0 var(--era-retro-window-light);
}

html[data-era="1998"] #progress-bar {
    height: 3px;
    background: var(--era-retro-title);
    box-shadow: none;
}

html[data-era="1998"] .language-switcher,
html[data-era="1998"] .era-switcher,
html[data-era="1998"] .menu-toggle {
    border-top: 2px solid var(--era-retro-window-light);
    border-left: 2px solid var(--era-retro-window-light);
    border-right: 2px solid var(--era-retro-window-dark);
    border-bottom: 2px solid var(--era-retro-window-dark);
    border-radius: 0;
    background: var(--era-retro-window);
    box-shadow: none;
}

html[data-era="1998"] .language-option,
html[data-era="1998"] .era-year {
    color: var(--era-retro-ink);
    text-shadow: none;
}

html[data-era="1998"] .language-option.is-active {
    border-radius: 0;
    background: var(--era-retro-title);
    color: var(--era-retro-window-light);
    box-shadow: none;
}

html[data-era="1998"] .era-slider::-webkit-slider-runnable-track {
    height: 6px;
    border: 2px inset var(--era-retro-window);
    border-radius: 0;
    background: var(--era-retro-screen);
}

html[data-era="1998"] .era-slider::-webkit-slider-thumb {
    width: 13px;
    height: 18px;
    margin-top: -8px;
    border: 2px outset var(--era-retro-window);
    border-radius: 0;
    background: var(--era-retro-window);
    box-shadow: none;
}

html[data-era="1998"] .era-slider::-moz-range-track {
    height: 6px;
    border: 2px inset var(--era-retro-window);
    border-radius: 0;
    background: var(--era-retro-screen);
}

html[data-era="1998"] .era-slider::-moz-range-thumb {
    width: 13px;
    height: 18px;
    border: 2px outset var(--era-retro-window);
    border-radius: 0;
    background: var(--era-retro-window);
    box-shadow: none;
}

html[data-era="1998"] .menu-toggle span {
    border-radius: 0;
    background: var(--era-retro-ink);
}

html[data-era="1998"] :where(
    .stat-card,
    .skill-card,
    .project-card,
    .contact-form,
    .devlog-summary-card,
    .devlog-entry-card,
    .devlog-next,
    .privacy-card,
    .error-terminal
) {
    border-top: 2px solid var(--era-retro-window-light);
    border-left: 2px solid var(--era-retro-window-light);
    border-right: 2px solid var(--era-retro-window-dark);
    border-bottom: 2px solid var(--era-retro-window-dark);
    border-radius: 0;
    background: rgba(0, 0, 32, 0.94);
    box-shadow:
        3px 3px 0 rgba(0, 0, 0, 0.65),
        inset 0 0 0 1px var(--era-retro-window-mid);
}

html[data-era="1998"] :where(
    .project-status,
    .project-tech-tag,
    .status-badge,
    .skill-status,
    .devlog-tag
) {
    border-radius: 0;
}

html[data-era="1998"] :where(
    .section > h2,
    .section-heading h2,
    .devlog-section-label,
    .privacy-label,
    .error-status
) {
    display: inline-block;
    padding: 5px 9px;
    border: 1px solid var(--era-retro-window-light);
    background: var(--era-retro-title);
    color: var(--era-retro-window-light);
    text-shadow: 1px 1px var(--era-retro-ink);
}

html[data-era="1998"] :where(
    .hero-button,
    .project-action-button,
    .contact-button,
    .return-button,
    .privacy-back-link,
    .error-button
) {
    border-top: 2px solid var(--era-retro-window-light);
    border-left: 2px solid var(--era-retro-window-light);
    border-right: 2px solid var(--era-retro-window-dark);
    border-bottom: 2px solid var(--era-retro-window-dark);
    border-radius: 0;
    background: var(--era-retro-window);
    color: var(--era-retro-ink);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
    text-shadow: none;
}

html[data-era="1998"] :where(
    .hero-button,
    .project-action-button,
    .contact-button,
    .return-button,
    .privacy-back-link,
    .error-button
):active {
    border-top-color: var(--era-retro-window-dark);
    border-left-color: var(--era-retro-window-dark);
    border-right-color: var(--era-retro-window-light);
    border-bottom-color: var(--era-retro-window-light);
    box-shadow: none;
    transform: translate(1px, 1px);
}

html[data-era="1998"] .contact-form :where(input, textarea) {
    border-top: 2px solid var(--era-retro-window-dark);
    border-left: 2px solid var(--era-retro-window-dark);
    border-right: 2px solid var(--era-retro-window-light);
    border-bottom: 2px solid var(--era-retro-window-light);
    border-radius: 0;
    background: var(--era-retro-screen);
    color: var(--color-accent);
    box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.65);
}

html[data-era="1998"] .project-terminal,
html[data-era="1998"] .error-details {
    border-radius: 0;
    background: rgba(0, 0, 0, 0.72);
}

html[data-era="1998"] .terminal-intro {
    background: transparent;
}

html[data-era="1998"] .site-footer {
    border-top: 2px solid var(--era-retro-window-light);
    background: var(--era-retro-window);
    color: var(--era-retro-ink);
}

html[data-era="1998"] .site-footer a,
html[data-era="1998"] .footer-version {
    color: var(--era-retro-title);
}

@media (max-width: 900px) {
    html[data-era="1998"] .nav-menu {
        border-left: 2px solid var(--era-retro-window-light);
        background: var(--era-retro-window);
        box-shadow: -4px 0 0 var(--era-retro-window-dark);
    }

    html[data-era="1998"] .nav-menu a {
        border-bottom-color: var(--era-retro-window-mid);
        color: var(--era-retro-ink);
    }

    html[data-era="1998"] .nav-menu a:hover,
    html[data-era="1998"] .nav-menu a.active {
        background: var(--era-retro-title);
        color: var(--era-retro-window-light);
    }

    html[data-era="1998"] .era-mobile-label,
    html[data-era="1998"] .mobile-menu-status {
        color: var(--era-retro-ink);
    }
}

html.motion-reduced.era-transition::before,
html.motion-reduced.era-transition::after {
    display: none !important;
    animation: none !important;
}

html.motion-reduced .era-time-counter,
html.motion-reduced .era-time-counter__year,
html.motion-reduced .era-time-counter__status,
html.motion-reduced.era-transition
.era-switcher[data-era-travel-year]::after {
    animation: none !important;
    opacity: 1;
    transform: none;
}

html.motion-reduced .era-time-counter__year,
html.motion-reduced .era-time-counter__status {
    transition: opacity 0.18s ease;
}

html.motion-reduced.era-transition :where(
    .site-header,
    .logo,
    .language-switcher,
    .era-switcher,
    .menu-toggle,
    .stat-card,
    .skill-card,
    .project-card,
    .project-terminal,
    .contact-form,
    .hero-button,
    .project-action-button,
    .contact-button,
    .return-button,
    .site-footer,
    #matrix-canvas
) {
    animation: none !important;
    transition-duration: 0.35s !important;
    will-change: auto;
}