/* Styles for 胡HomeLab — black / gold / deep purple theme (enhanced)
   - stronger contrast, glow and motion
*/
:root{
    --bg-1: #050006; /* very dark */
    --bg-2: #1b0036; /* deeper purple */
    --gold: #ffd24d; /* brighter gold */
    --muted: #d6cfe0;
    --glass: rgba(255,255,255,0.03);
}

html, body{
    height:100%;
    margin:0;
    padding:0;
    background: radial-gradient(1200px 600px at 10% 10%, rgba(139,71,137,0.12), transparent 5%),
                linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 70%);
    color: var(--muted);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.wrap{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-between;
    padding:2.5rem 1rem;
    box-sizing:border-box;
    gap:2rem;
}

header{
    width:100%;
    max-width:980px;
    color:var(--gold);
    text-align:center;
    padding:1.25rem 1.5rem;
    border-radius:14px;
    background: linear-gradient(90deg, rgba(255,210,77,0.06), rgba(255,210,77,0.02));
    box-shadow: 0 12px 40px rgba(11,2,26,0.65), inset 0 -2px 0 rgba(255,255,255,0.02);
    border: 1px solid rgba(255,210,77,0.06);
}

header h1{ margin:0; font-weight:800; letter-spacing:0.8px; font-size:1.8rem; text-transform:uppercase; }

/* subtle shimmer on title */
header h1::after{
    content:'';
    display:block;
    height:6px;
    margin-top:10px;
    width:60%;
    margin-left:20%;
    background: linear-gradient(90deg, rgba(255,210,77,0.0), rgba(255,210,77,0.22), rgba(255,210,77,0.0));
    filter: blur(6px);
    border-radius:6px;
    transform: translateY(0);
}

main{
    width:100%;
    max-width:980px;
    padding:2.25rem;
    text-align:center;
    background: linear-gradient(180deg, rgba(255,255,255,0.012), rgba(0,0,0,0.08));
    border-radius:16px;
    box-shadow: 0 18px 60px rgba(3,0,20,0.7);
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0.75rem;
}

/* Link styles and hover animation — stronger */
a {
    color: var(--gold);
    text-decoration: none;
    position: relative;
    font-weight:700;
    transition: color 180ms ease, transform 180ms ease;
    padding:6px 8px;
    border-radius:6px;
}

/* animated underline */
a::after{
    content:'';
    position:absolute;
    left:8px; right:8px; bottom:-6px;
    height:5px;
    background: linear-gradient(90deg, rgba(255,210,77,0.98), rgba(153,89,183,0.98));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 260ms cubic-bezier(.2,.9,.2,1);
    border-radius:6px;
    box-shadow: 0 6px 18px rgba(153,89,183,0.18), 0 2px 8px rgba(255,210,77,0.12) inset;
}

a:hover{
    color: #fff;
    transform: translateY(-3px);
    text-shadow: 0 8px 28px rgba(255,210,77,0.12);
}

a:hover::after{ transform: scaleX(1); }

a:active{ transform: translateY(-1px) scale(0.995); }

/* focus for accessibility */
a:focus{ outline: 3px solid rgba(255,210,77,0.16); outline-offset:8px; }

footer{
    width:100%;
    max-width:980px;
    padding:0.85rem 1rem;
    text-align:center;
    color:var(--muted);
    font-size:0.92rem;
    border-radius:12px;
    background: transparent;
}

/* overlay used for navigation reveal */
#page-overlay{
    position:fixed;
    left:0;top:0;right:0;bottom:0;
    pointer-events:none;
    z-index:9999;
    background: radial-gradient(circle at var(--cx,50%) var(--cy,50%), rgba(255,210,77,0.95) 0%, rgba(153,89,183,0.92) 30%, rgba(5,0,6,0.98) 55%);
    clip-path: circle(0 at var(--cx,50%) var(--cy,50%));
    transition: clip-path 520ms cubic-bezier(.16,.9,.2,1), opacity 300ms ease;
    mix-blend-mode:screen;
    opacity:0;
}

#page-overlay.reveal{ clip-path: circle(160% at var(--cx,50%) var(--cy,50%)); opacity:1; }

/* small screens tweaks */
@media (max-width:600px){
    header h1{ font-size:1.25rem }
    main{ padding:1rem }
    a::after{ bottom:-5px; height:4px }
}