/* --- ALAPOK ÉS HÁTTÉR --- */
:root {
    --accent: #cc0000;         /* A fő szín HEX kódja */
    --accent-rgb: 204, 0, 0;   /* A fő szín RGB kódja az üveges átlátszóságokhoz */
    --glass-bg: rgba(255, 255, 255, 0.7); /* Fehéres, enyhén áttetsző üveg */
    --glass-border: rgba(255, 255, 255, 1);
    --glass-blur: blur(20px);
    --text-main: #2d2d2d;
    --text-muted: #666666;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-main);
    background-color: #f5f5f7;
    min-height: 100vh; /* Fix 100vh helyett min-height, hogy lehessen normálisan görgetni */
    overflow-x: hidden;
}

/* --- LÜKTETŐ BLOB HÁTTÉR ANIMÁCIÓ (Változatlan marad) --- */
.background-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background-color: #f5f5f7;
    overflow: hidden;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.55;
    animation: float 20s infinite ease-in-out alternate;
}

/* Hátsó szines gömbök*/
.blob-1 { background: var(--accent); width: 25vw; height: 25vw; top: 5%; left: 10%; animation-duration: 22s; } /* dinamikusan változik*/
.blob-2 { background: #ffb732; width: 18vw; height: 18vw; bottom: 15%; right: 20%; animation-duration: 28s; animation-direction: alternate-reverse; animation-delay: -5s; } /* Fix sárga*/
.blob-3 { background: #a0aab5; width: 22vw; height: 22vw; top: 35%; right: 5%; animation-duration: 25s; animation-delay: -12s; } /* Fix sötétszürke */
.blob-4 { background: #e1e5ea; width: 28vw; height: 28vw; bottom: 5%; left: 25%; animation-duration: 32s; animation-direction: alternate-reverse; animation-delay: -8s; } /* Fix világosszürke */

@keyframes float {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(10vw, 8vh) scale(1.1); }
    66% { transform: translate(-8vw, 15vh) scale(0.9); }
    100% { transform: translate(15vw, -10vh) scale(1.15); }
}

/* --- STRUKTÚRA ÉS GÖRGETÉS (Mágneses ugrás visszatétele) --- */
#main-content {
    width: 100%;
    height: 100vh; /* Fontos: fix 100vh kell, hogy ez legyen a görgethető ablak */
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;

    /* Ez az a sor, ami bekapcsolja a mágneses ugrást! */
    scroll-snap-type: y proximity;
}

/* A szekciók mostantól rugalmasan nyúlnak a tartalommal, de ugranak */
.fullscreen-section {
    width: 100%;
    height: auto;
    min-height: 100vh; /* Legalább egy képernyőnyi legyen, hogy működjön az ugrás */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 3vw;
    box-sizing: border-box;

    /* Amikor idegörgetsz, pontosan középre húzza be a kártyát */
    scroll-snap-align: center;
}

/* --- AZ ÜVEG KÁRTYÁK (RUGALMAS KONTÉNER + GUMI ANIMÁCIÓ) --- */
.glass-card {
    width: 100%;
    max-width: 1100px;
    height: auto;
    min-height: 200px;

    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);

    /* Visszakapja a lélegző, gumis mozgást! */
    animation: cardMorph 8s ease-in-out infinite alternate;

    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 40px;
    box-sizing: border-box;

    transition: transform 0.3s ease, border 0.3s ease;
}

.glass-card:hover {
    border: 1px solid rgba(255, 255, 255, 0.4);
    transform: translateY(-5px);
}

/* Az új, tartalom-barát gumis animáció (pixel alapú, így nem nyomja össze a szöveget!) */
@keyframes cardMorph {
    /* A perjel (/) előtti számok a vízszintes, a perjel utániak a függőleges íveket adják */

    /* 1. állapot: Jobbra dőlő kavics */
    0% {
        border-radius: 80px 30px 100px 40px / 40px 90px 30px 100px;
    }

    /* 2. állapot: Áthullámzik egy balra dőlő, kicsit laposabb formába */
    50% {
        border-radius: 30px 100px 40px 80px / 100px 40px 90px 30px;
    }

    /* 3. állapot: Egy harmadik, teljesen aszimmetrikus "kő" forma */
    100% {
        border-radius: 90px 40px 80px 30px / 30px 80px 40px 90px;
    }
}

.hero-card h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem); /* Reszponzív betűméret */
    margin: 0;
    background: -webkit-linear-gradient(#2d2d2d, #666666);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-card h3 {
    color: var(--text-muted);
}

/* --- A "ZSILIP" (BEJELENTKEZŐ RÉTEG) --- */
#login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    background: rgba(245, 245, 247, 0.3);
}

.glass-login-card {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

.glass-login-card h2, .glass-login-card p {
    color: var(--text-main);
}

/* --- A BETÖLTÖTT OLDAL ELMOSÁSA (VÉDŐRÉTEG) --- */
.blurred-content {
    filter: blur(12px);
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
    transition: filter 0.8s ease, opacity 0.8s ease;
}

/* --- GOMBOK ÉS INPUTOK --- */
input[type="password"] {
    width: 80%;
    padding: 12px;
    margin: 20px 0;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    color: var(--text-main);
    outline: none;
    font-size: 16px;
    backdrop-filter: blur(5px);
}

input[type="password"]:focus {
    border-color: var(--accent);
}

button {
    padding: 12px 30px;
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid var(--accent);
    color: var(--accent);
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    backdrop-filter: blur(5px);
}

button:hover {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.4);
}

/* --- KŐKEMÉNY MOBIL OPTIMALIZÁLÁS --- */
@media (max-width: 768px) {

    /* Mobilon kikapcsoljuk az ugrálást, hogy a hosszú szövegek is olvashatóak maradjanak */
    #main-content {
        scroll-snap-type: none;
    }

    /* Mobilon a padding és a margók drasztikus csökkentése */
    .fullscreen-section {
        padding: 5px;
    }

    .glass-card {
        padding: 20px !important; /* Helycsinálás a szövegnek */
        border-radius: 20px;
        margin-bottom: 15px;
    }

    /* A bemutatkozó kártya elemeit egymás alá rendezzük */
    .hero-card > div[style*="flex-direction: row"] {
        flex-direction: column !important;
        gap: 20px !important;
    }

    /* A Suli és Munka szekciók (amik a HTML-ben row-ba vannak kényszerítve) egymás alá törése */
    .fullscreen-section > div[style*="display: flex"] {
        flex-direction: column !important;
        height: auto !important;
    }

    /* A profilkép egyedi konténerét is visszahúzzuk */
    #dynamic-profile-pic {
        margin: 10px auto !important;
    }
}
/* Egyedi görgetősáv */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.5); /* Dinamikus távirányítós szín */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-rgb), 0.8);
}