/* Base Reset & Variables */
:root {
    --parallax-x: 0px;
    --parallax-y: 0px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
    background-color: #050505;
    color: #fff;
    overflow-x: hidden;
}

/* Glassmorphism Container */
.glass-container {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 4rem;
    margin: 0 auto;
    max-width: 850px;
    text-align: center;
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.6);
}

/* --- PARALLAX HERO MECHANICS --- */
.interactive-hero {
    position: relative;
    width: 100vw;
    height: calc(100vh - 80px);
    /* Accounts for Navbar */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.layer {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background-size: cover;
    background-position: center;
    will-change: transform;
}

/* Unsplash Images (Brightened to 0.4 so they show up better) */
.layer-bg {
    background-image: url('https://images.unsplash.com/photo-1620712943543-bcc4688e7485?q=80&w=2000&auto=format&fit=crop');
    filter: brightness(0.4) contrast(1.2);
    transform: translate(calc(var(--parallax-x) * -0.02), calc(var(--parallax-y) * -0.02));
    z-index: 1;
}

.layer-mid {
    background-image: url('https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?q=80&w=2000&auto=format&fit=crop');
    opacity: 0.15;
    mix-blend-mode: screen;
    transform: translate(calc(var(--parallax-x) * 0.04), calc(var(--parallax-y) * 0.04));
    z-index: 2;
}

.layer-content {
    z-index: 3;
    transform: translate(calc(var(--parallax-x) * 0.08), calc(var(--parallax-y) * 0.08));
}

/* --- VIEW TRANSITIONS API LOGIC --- */
main {
    view-transition-name: pcb-page;
}

::view-transition-old(pcb-page) {
    animation: fade-out 0.2s ease-out both;
}

::view-transition-new(pcb-page) {
    animation: slide-up 0.4s cubic-bezier(0.2, 0, 0.2, 1) both;
}

@keyframes fade-out {
    to {
        opacity: 0;
        transform: scale(0.98);
    }
}

@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}