/* ============================================================
   AmberTheRambler — Dark Theme • Neon Animations • Custom Fonts
   ============================================================ */

/* 0)  Self-hosted Amsterdam Two */
@font-face{
    font-family:'AmsterdamTwo';
    src:url('../fonts/amsterdam-signature-two.ttf') format('truetype');
    font-weight:normal; font-style:normal;
}

/* 1)  Brand palette */
:root{
    --neon-pink : #ff66cc;
    --neon-white: #ffffff;
    --neon-border:#9ed6ff;
    --text-light: #eaeaea;
}

/* 2)  Global fonts */
body{
    background:#000;
    color:var(--text-light);
    font-family:'HussarEkologicznyRegular', sans-serif;
    margin:0; height:100%;
}

/* helpers */
.font-hussar   {font-family:'HussarEkologicznyRegular', sans-serif;}
.font-amsterdam{font-family:'AmsterdamTwo', cursive;}

/* 3)  Links / navbar */
a{color:var(--neon-pink);text-decoration:none}
a:hover{color:var(--neon-border);text-decoration:underline}
.neon-nav{color:var(--neon-pink);transition:color .2s}
.neon-nav:hover{color:var(--neon-border);text-decoration:none}

/* ============================================================
   4. Hero headline
   ============================================================ */
.neon-title{
    position:relative;
    margin:0 auto 1.5rem;
    font-weight:900;
    font-size:3rem;
    text-align:center;

    /* brighter, wider travelling gradient */
    background-image:linear-gradient(90deg,
        var(--neon-pink) 0%,
        var(--neon-white) 50%,
        var(--neon-pink) 100%);
    background-size:1000% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
    animation:neonFlow 10s linear infinite;

    /* soft halo */
    text-shadow:
        0 0 4px var(--neon-pink),
        0 0 8px var(--neon-white);
}

/* individual word sizing / spacing */
.neon-title .font-hussar{
    font-size:3.5rem;               /* Amber larger */
    margin-right:-0.05em;           /* pull closer to next word */
}
.neon-title .font-amsterdam{
    font-size:3rem;                 /* TheRambler slightly smaller */
    letter-spacing:-0.08em;         /* tighter kerning */
    margin-left:-0.1em;             /* overlap to “touch” Amber */
}

@keyframes neonFlow{
    0%   {background-position:0% 0;}
    100% {background-position:-1000% 0;}
}

/* ============================================================
   5. Twitch-style info panels
   ============================================================ */
.panel-card{
    background:#111;
    border:3px solid var(--neon-border);
    border-radius:8px;
    padding:1.5rem;
    transition:transform .2s, box-shadow .2s;
}
.panel-card:hover{
    transform:translateY(-4px);
    box-shadow:0 0 12px var(--neon-border);
}
.panel-sub{font-size:.9rem;opacity:.85}

/* ---------- Animated panel titles ---------- */
.panel-title{
    position:relative;
    font-family:'AmsterdamTwo', cursive;
    font-weight:normal;
    font-size:1.35rem;
    letter-spacing:.5px;
    margin-bottom:.75rem;

    background-image:linear-gradient(90deg,
        var(--neon-pink) 0%,
        var(--neon-white) 50%,
        var(--neon-pink) 100%);
    background-size:400% 100%;
    -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
    animation:panelFlow 10s linear infinite;

    text-shadow:
        0 0 3px var(--neon-pink),
        0 0 6px var(--neon-white);
}

@keyframes panelFlow{
    0%   {background-position:0% 0;}
    100% {background-position:-400% 0;}
}