:root {
    --bg:#050505;
    --text:#ffffff;
    --muted:#b8b8b8;
    --accent:#00f5d4;
    --accent2:#ff006e;
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

body {
    margin:0;
    font-family:'Fira Sans',sans-serif;
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
}

@keyframes brandIntro {
    0%,15% { max-width:0; margin-left:0; opacity:0; transform:translateX(-8px); }
    35%,70% { max-width:180px; margin-left:10px; opacity:1; transform:translateX(0); }
    100% { max-width:0; margin-left:0; opacity:0; transform:translateX(-8px); }
}

@keyframes logoSweep {
    from { background-position:150% 0; }
    to { background-position:-150% 0; }
}

.site-nav {
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 40px;
    background:rgba(5,5,5,.85);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255,255,255,.06);
}

.nav-logo {
    display:flex;
    align-items:center;
    color:var(--text);
    font-size:.95rem;
    font-weight:600;
    letter-spacing:2px;
    text-decoration:none;
    text-transform:uppercase;
    transition:opacity .3s;
}

.brand-mark {
    position:relative;
    display:block;
    width:38px;
    height:38px;
}

.brand-mark img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

.brand-mark::after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(100deg,transparent 25%,var(--accent) 40%,var(--accent2) 60%,transparent 75%);
    background-size:250% 100%;
    animation:logoSweep 4.5s linear infinite;
    -webkit-mask:url('../logos/PA-White.png') center/contain no-repeat;
    mask:url('../logos/PA-White.png') center/contain no-repeat;
}

.nav-logo-name {
    max-width:0;
    margin-left:0;
    overflow:hidden;
    opacity:0;
    transform:translateX(-8px);
    transition:max-width .3s ease, margin-left .3s ease, opacity .2s ease, transform .3s ease;
    white-space:nowrap;
    animation:brandIntro 2.6s ease .25s both;
}

.nav-logo:hover .nav-logo-name,
.nav-logo:focus-visible .nav-logo-name {
    max-width:180px;
    margin-left:10px;
    opacity:1;
    transform:translateX(0);
    animation:none;
}

.nav-logo-name.intro-complete {
    animation:none;
}

.nav-logo:hover {
    opacity:.7;
}

.nav-links {
    display:flex;
    gap:30px;
}

.nav-links a {
    color:var(--muted);
    font-size:.85rem;
    letter-spacing:1.5px;
    text-decoration:none;
    text-transform:uppercase;
    transition:color .3s;
}

.nav-links a:hover,
.nav-links a.active {
    color:var(--text);
}

footer {
    padding:100px 40px;
    color:#777;
    font-size:.95rem;
    text-align:center;
}

footer p {
    margin:8px 0;
    line-height:1.6;
}

footer a {
    color:var(--accent);
    text-decoration:none;
    transition:color .3s;
}

footer a:hover {
    color:var(--text);
}

.footer-logo {
    display:inline-block;
    margin-bottom:18px;
}

.footer-logo .brand-mark {
    width:52px;
    height:52px;
}

@media (max-width:768px) {
    .site-nav { padding:16px 24px; }
}