/* =========================================================
   VOGLAIR — shared styles
   Dark aurora look, Inter, based on the original landing page
   ========================================================= */

:root{
    --bg:#050505;
    --bg2:#0d0d0d;
    --text:#ffffff;
    --muted:#a8a8a8;
    --dim:#5c5c5c;
    --border:rgba(255,255,255,.12);
    --accent:#4d9fff;
    --maxw:920px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;
    background:var(--bg);
    color:var(--text);
    min-height:100%;
    -webkit-font-smoothing:antialiased;
}

/* landing page + 404 are single-screen, no scroll */
body.fixed-screen{
    height:100%;
    overflow:hidden;
}
html.fixed-screen{
    height:100%;
}

a{color:inherit;}

:focus-visible{
    outline:2px solid rgba(255,255,255,.85);
    outline-offset:4px;
    border-radius:6px;
}

::selection{
    background:rgba(255,255,255,.18);
}

/* ============================ BACKGROUND ============================ */

.background{
    position:fixed;
    inset:0;
    overflow:hidden;
    z-index:0;
    pointer-events:none;
}

.aurora{
    position:absolute;
    width:700px;
    height:700px;
    border-radius:50%;
    filter:blur(140px);
    opacity:.18;
    animation:move 22s ease-in-out infinite alternate;
}

.a1{
    background:#ffffff;
    left:-180px;
    top:-150px;
}

.a2{
    background:#4d9fff;
    right:-220px;
    bottom:-220px;
    animation-duration:28s;
}

.grid{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:70px 70px;
    mask-image:radial-gradient(circle at center,black 25%,transparent 100%);
    -webkit-mask-image:radial-gradient(circle at center,black 25%,transparent 100%);
}

.glow{
    position:fixed;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.08),transparent 70%);
    filter:blur(30px);
    pointer-events:none;
    transform:translate(-50%,-50%);
    z-index:0;
}

/* ============================ LAYOUT ============================ */

main{
    position:relative;
    z-index:1;
}

main.centered{
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:40px;
}

.container{
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 28px;
}

.container-narrow{
    max-width:800px;
}

/* ============================ LOGO / TITLE ============================ */

.logo{
    width:140px;
    margin:0 auto 48px;
    animation:float 5s ease-in-out infinite;
    opacity:0;
    transform:translateY(20px);
}

.logo svg{
    width:100%;
    display:block;
}

h1.wordmark{
    font-weight:300;
    font-size:5rem;
    letter-spacing:22px;
    margin-bottom:26px;
    opacity:0;
    transform:translateY(20px);
}

.tagline{
    font-size:1.15rem;
    font-weight:300;
    letter-spacing:2px;
    color:var(--muted);
    opacity:0;
    transform:translateY(20px);
}

/* ============================ PROJECT LINKS (home) ============================ */

.section-label{
    margin-top:54px;
    margin-bottom:18px;
    font-size:.68rem;
    font-weight:500;
    letter-spacing:4px;
    text-transform:uppercase;
    color:#555;
    opacity:0;
    transform:translateY(20px);
}

.projects{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    flex-wrap:wrap;
    row-gap:22px;
    column-gap:30px;
    opacity:0;
    transform:translateY(20px);
}

.project-link{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    text-decoration:none;
    color:var(--muted);
    transition:.35s;
}

.project-link:hover{
    color:#ffffff;
}

.project-name{
    font-size:.78rem;
    font-weight:400;
    letter-spacing:3px;
    text-transform:uppercase;
}

.project-desc{
    font-size:.64rem;
    font-weight:300;
    letter-spacing:1.5px;
    color:var(--dim);
}

.projects .dot{
    width:3px;
    height:3px;
    margin-top:6px;
    border-radius:50%;
    background:var(--border);
}

/* ============================ NEWSLETTER ============================ */

.newsletter{
    margin-top:52px;
    opacity:0;
    transform:translateY(20px);
}

.newsletter-form{
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
}

.newsletter input[type=email]{
    width:270px;
    padding:14px 20px;
    border-radius:999px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.03);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    color:#fff;
    font-family:inherit;
    font-size:.85rem;
    letter-spacing:1px;
    transition:.35s;
}

.newsletter input[type=email]::placeholder{
    color:#5c5c5c;
    letter-spacing:1px;
}

.newsletter input[type=email]:focus{
    border-color:rgba(255,255,255,.35);
    outline:none;
}

.newsletter button{
    padding:14px 30px;
    border-radius:999px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.03);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    color:#fff;
    font-family:inherit;
    font-size:.78rem;
    letter-spacing:3px;
    text-transform:uppercase;
    cursor:pointer;
    transition:.35s;
}

.newsletter button:hover{
    background:#fff;
    color:#000;
    transform:translateY(-3px);
    box-shadow:0 0 30px rgba(255,255,255,.22);
}

.newsletter button:disabled{
    opacity:.45;
    cursor:default;
    transform:none;
    box-shadow:none;
    background:rgba(255,255,255,.03);
    color:#fff;
}

.newsletter-note{
    margin-top:14px;
    font-size:.66rem;
    font-weight:300;
    letter-spacing:1.5px;
    color:var(--dim);
    min-height:1.2em;
}

.newsletter-note.error{
    color:#ff8f8f;
}

.newsletter-note.success{
    color:#8fe0a8;
}

/* honeypot — hidden from humans, tempting for bots */
.hp-field{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
}

/* ============================ CONTACT ============================ */

.contact{
    display:inline-block;
    margin-top:44px;
    font-size:.72rem;
    font-weight:300;
    letter-spacing:2px;
    color:var(--dim);
    text-decoration:none;
    transition:.35s;
    opacity:0;
    transform:translateY(20px);
}

.contact:hover{
    color:#fff;
}

/* ============================ FOOTER ============================ */

footer{
    position:relative;
    z-index:1;
    text-align:center;
    font-size:.82rem;
    letter-spacing:1px;
    color:#666;
}

footer.fixed-footer{
    position:fixed;
    bottom:35px;
    width:100%;
    opacity:0;
}

footer.page-footer{
    margin-top:100px;
    padding:44px 28px 54px;
    border-top:1px solid rgba(255,255,255,.06);
}

footer .footer-links{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:24px;
    margin-bottom:22px;
}

footer .footer-links a{
    font-size:.72rem;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--dim);
    text-decoration:none;
    transition:.35s;
}

footer .footer-links a:hover{
    color:#fff;
}

/* ============================ SUBPAGE HEADER ============================ */

.site-header{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    max-width:var(--maxw);
    margin:0 auto;
    padding:26px 28px;
}

.back-link{
    display:inline-flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:var(--muted);
    font-size:.72rem;
    letter-spacing:3px;
    text-transform:uppercase;
    transition:.35s;
}

.back-link:hover{
    color:#fff;
}

.back-link svg{
    width:22px;
    height:19px;
    display:block;
}

/* language switcher */
.lang-switch{
    display:flex;
    align-items:center;
    gap:2px;
}

.lang-switch button{
    background:none;
    border:none;
    color:var(--dim);
    font-family:inherit;
    font-size:.68rem;
    letter-spacing:2px;
    text-transform:uppercase;
    padding:6px 8px;
    cursor:pointer;
    transition:.3s;
    border-radius:4px;
}

.lang-switch button:hover{
    color:#fff;
}

.lang-switch button[aria-current=true]{
    color:#fff;
}

.lang-switch .sep{
    color:rgba(255,255,255,.15);
    font-size:.6rem;
}

/* ============================ SUBPAGE CONTENT ============================ */

.hero{
    padding:64px 0 20px;
    text-align:center;
}

.eyebrow{
    font-size:.66rem;
    font-weight:500;
    letter-spacing:5px;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:22px;
}

h1.page-title{
    font-weight:200;
    font-size:3.6rem;
    letter-spacing:6px;
    line-height:1.1;
    margin-bottom:24px;
}

.lede{
    font-size:1.12rem;
    font-weight:300;
    line-height:1.7;
    letter-spacing:.5px;
    color:var(--muted);
    max-width:620px;
    margin:0 auto;
}

.artwork{
    margin:56px auto 0;
    max-width:620px;
}

.artwork svg{
    width:100%;
    height:auto;
    display:block;
}

.artwork-caption{
    margin-top:16px;
    text-align:center;
    font-size:.66rem;
    font-weight:300;
    letter-spacing:2px;
    color:var(--dim);
}

section.block{
    margin-top:88px;
}

h2{
    font-weight:300;
    font-size:1.9rem;
    letter-spacing:3px;
    margin-bottom:20px;
}

h3{
    font-weight:400;
    font-size:.95rem;
    letter-spacing:1.5px;
    margin-bottom:10px;
}

.prose p{
    font-size:1rem;
    font-weight:300;
    line-height:1.8;
    letter-spacing:.4px;
    color:var(--muted);
    margin-bottom:18px;
    max-width:660px;
}

.prose p strong{
    color:#fff;
    font-weight:400;
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:18px;
    margin-top:32px;
}

.feature{
    padding:26px 24px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    background:rgba(255,255,255,.02);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    transition:.35s;
}

.feature:hover{
    border-color:rgba(255,255,255,.2);
    transform:translateY(-3px);
}

.feature .icon{
    width:26px;
    height:26px;
    margin-bottom:16px;
    color:var(--accent);
}

.feature p{
    font-size:.86rem;
    font-weight:300;
    line-height:1.65;
    color:var(--muted);
}

/* CTA */
.cta{
    margin-top:80px;
    text-align:center;
    padding:52px 28px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    background:rgba(255,255,255,.02);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}

.cta h2{
    margin-bottom:14px;
}

.cta p{
    font-size:.95rem;
    font-weight:300;
    color:var(--muted);
    letter-spacing:.5px;
    margin-bottom:32px;
}

.button{
    display:inline-block;
    padding:17px 42px;
    border-radius:999px;
    border:1px solid var(--border);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    background:rgba(255,255,255,.03);
    color:#fff;
    text-decoration:none;
    letter-spacing:5px;
    font-size:.82rem;
    text-transform:uppercase;
    transition:.35s;
}

.button:hover{
    background:#fff;
    color:#000;
    transform:translateY(-4px);
    box-shadow:0 0 30px rgba(255,255,255,.25);
}

/* other projects strip */
.more-projects{
    margin-top:80px;
    text-align:center;
}

.more-projects .projects{
    opacity:1;
    transform:none;
    margin-top:22px;
}

/* ============================ 404 ============================ */

.code-404{
    font-weight:200;
    font-size:6.5rem;
    letter-spacing:14px;
    line-height:1;
    margin-bottom:20px;
    color:rgba(255,255,255,.9);
    opacity:0;
    transform:translateY(20px);
}

/* ============================ ANIMATION ============================ */

.show{
    animation:fade .9s forwards;
}

.delay1{animation-delay:.2s;}
.delay2{animation-delay:.6s;}
.delay3{animation-delay:1s;}
.delay4{animation-delay:1.4s;}
.delay5{animation-delay:1.7s;}
.delay6{animation-delay:2s;}
.delay7{animation-delay:2.3s;}
.delay8{animation-delay:2.6s;}

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

@keyframes float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
}

@keyframes move{
    from{transform:translate(-80px,-50px) scale(1);}
    to{transform:translate(120px,80px) scale(1.25);}
}

/* scroll reveal for subpages */
.reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .8s ease,transform .8s ease;
}

.reveal.visible{
    opacity:1;
    transform:none;
}

/* ============================ RESPONSIVE ============================ */

@media(max-width:768px){

    .logo{width:95px;margin-bottom:38px;}

    h1.wordmark{
        font-size:2.9rem;
        letter-spacing:10px;
    }

    .tagline{font-size:1rem;}

    .projects{
        column-gap:20px;
        row-gap:18px;
    }

    .project-name{
        font-size:.72rem;
        letter-spacing:2px;
    }

    .newsletter input[type=email]{width:100%;max-width:300px;}
    .newsletter-form{flex-direction:column;align-items:center;}
    .newsletter button{width:100%;max-width:300px;}

    h1.page-title{
        font-size:2.2rem;
        letter-spacing:3px;
    }

    .lede{font-size:1rem;}

    h2{font-size:1.5rem;letter-spacing:2px;}

    section.block{margin-top:64px;}

    .site-header{padding:20px;}

    .container{padding:0 20px;}

    .code-404{font-size:4rem;letter-spacing:8px;}

    .cta{padding:38px 22px;}
}

@media(max-width:420px){
    .lang-switch button{padding:5px 5px;font-size:.62rem;letter-spacing:1px;}
    .back-link{font-size:.66rem;letter-spacing:2px;}
}

/* ============================ REDUCED MOTION ============================ */

@media (prefers-reduced-motion: reduce){

    html{scroll-behavior:auto;}

    .aurora,
    .logo{
        animation:none;
    }

    .glow{display:none;}

    .show{
        animation:none !important;
        opacity:1 !important;
        transform:none !important;
    }

    .reveal{
        opacity:1 !important;
        transform:none !important;
        transition:none;
    }

    .feature:hover,
    .button:hover,
    .newsletter button:hover{
        transform:none;
    }
}

/* ============================ PRINT ============================ */

@media print{
    .background,.glow{display:none;}
    body{background:#fff;color:#000;}
}