@charset "utf-8";

.gx-button {
    border: 1px solid gray;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    display: inline-block;
    position: relative;
    color: white;
    background-color: var(--gx-color-3);
    padding: 10px 20px;
    text-decoration: none;
    overflow: hidden;
    transition: color 0.3s ease-out;
}
.gx-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 0;
    transition: left 0.6s ease-out;
}

.gx-button:hover::before {
    left: 0;
}
.gx-button:hover {
    color: black;
}
.gx-button span {
    position: relative;
    z-index: 1; /* Szöveg mindig látható marad */
}

.gx-button.orange {
    background-color: darkorange;
}


/* ---------- CHARACTER ---------------- */
.character-info {
    text-align: center;
    vertical-align: middle;
    text-align: center;
}

.character-info h2 {
    margin-bottom: 12px;
    color: var(--gx-color-4);
    font-weight: 400;
}

.character-portrait {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    margin: 0 auto 15px;
    border: 3px solid var(--gx-color-4);
    display: block;
}

.character-info .character-name {
    font-size: 18px;
    margin: 0 0 10px 0;
    padding-top: 0;
    color: var(--gx-color-3);
}

.character-row {
    position: relative;
    height: 0px;
}

.character-row .character-portrait {
    position: absolute;
    right: 0;
    top: -40px;
    z-index: 100;
}

/* =============== CHARACTER SELECTORS CARDS =============== */
#character-selector h2 {
    color: var(--gx-color-4);
    font-weight: 400;
}

.character-selector {
    display: flex;
    flex-wrap: wrap;
    margin-top: 24px;
    gap: 20px;
}
.character-card {
    display: flex;
    flex-direction: column;
    width: 200px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    background-color: #fff;
    margin: 5px;
    cursor: pointer;
    transition: transform 0.3s ease, border 0.3s ease; /* Animáció a hover-re és visszaállásra */
}

.character-card:hover {
    /*border: 10px solid var(--gx-color-4);*/
    transform: scale(1.1); /* 10%-os nagyítás hover esetén */
}

.character-card.selected {
    background-color: #ff9aa2;
}

.character-card img {
    width: 200px;
    object-fit: cover;
}
.character-name {
    padding: 16px;
    width: 100%;
    font-size: 1.2em;
    font-weight: 700;
    text-align: center;
    margin: 0 0 8px;
    color: #333;
}



/* ---------- CATEGORY ---------------- */
.category h2 {
    color: var(--gx-color-3);
    font-weight: 500;
}

/* ---------- STORY ---------------- */
.story-title {
    font-size: 14px;
    color: #777;
}
.story .card-title {
    color: var(--gx-color-3);
}
.story-card {
    margin-bottom: 20px;
}
.story-card .card-button-inactive-div {
    display:none;
}

.story-card .card-button-inactive-div {
    color: var(--gx-color-4);
    font-size: 115%;
    position: relative;
}

.story-button {
    background-color: var(--gx-color-3);;
}

.down-arrow {
    font-size: 48px;
    display: inline-block;
    margin-left: 16px;
    animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {
    0% {
        transform: scale(1); /* 100% */
    }
    50% {
        transform: scale(1.5); /* 150% */
    }
    100% {
        transform: scale(1); /* Vissza 100%-ra */
    }
}

.story_end {
    color: #810125;
    text-align: center;
    margin-top: 50px;
    font-weight: 500;
    font-size: 24px;
}

/* ---------- SCENE ---------------- */
.scene-story-title {
    margin-top: -20px;
}
.scene-story-title .text-box {
    border-radius: 0 0 8px 8px;
    padding: 10px 20px;
    background-color: var(--gx-color-5) !important;
}
.scene-story-title .text-box h2 {
    font-family: var(--font2family);
    letter-spacing: 1px;
    color: var(--gx-color-1);
    font-size: 2rem;
    font-weight: 300;
    margin-bottom: 0;
    padding-right: 200px;
}

.scene-title {
    font-variant: small-caps;
    color: var(--gx-color-1);
    font-weight: 400;
    font-size: 1.8rem;
    padding-bottom: 8px;
}

.scene-children {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretcht;
    margin: 24px 0;
    gap: 12px;
}
.scene-child {
    background-color: white;
    width: 50%;
}
.scene-child a {
    height: 100%;
    width: 100%;
    text-align: center;
}

.scene-child.one-button {
    width: auto !important;
}
.scene-child.one-button a {
    width: auto !important;
    height: auto;
}



.children-label {
    text-align: center;
    margin-top: 24px;
    color: var(--gx-color-3);
    font-weight: 500;
}

/* -------------- INFO MODAL --------------- */
/* Alapstílusok */
.scene-info-button-wrapper {
    text-align: center;
}
.scene-info-button {
    margin: 12px auto;
}
.scene .content .text-box {
    margin-bottom: 0 !important;
}
#scene-info-modal {
    display: none; /* Alapértelmezés szerint rejtett */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8); /* Sötét átlátszó háttér */
    z-index: 1000;
    padding: 20px; /* 20px padding */
    box-sizing: border-box; /* Paddinget beleszámolja a méretbe */
    overflow: hidden; /* Elrejti a tartalmat, ami túlcsordul */
}

/* Scrollozható tartalom */
#scene-info-modal .info-content {
    width: 100%;
    height: calc(100% - 20px); /* A padding méretéhez igazodik */
    overflow-y: auto; /* Scrollozható a függőleges tengelyen */
    color: #10155e;
    background: #fbfbfb; /* Teszteléshez háttér */
    padding: 30px;
    border-radius: 5px;
}

/* Bezárás gomb */
#scene-info-modal .modal-close {
    position: absolute;
    top: 10px;
    right: 50px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 1100;
    color: gray;
    font-size: 48px;
}
#scene-info-modal .modal-close:hover {
    color: red;
}
#scene-info-modal .info-content h2 {
    font-weight: 400;
}
#scene-info-modal .info-content h3 {
    font-weight: 500;
}
#scene-info-modal .info-content h4 {
    font-weight: 500;
    font-size: 18px;
}
.info-modal .info-content h2 {
    font-size: 24px;
    padding-right: 50px;
}
.info-modal .info-content h3 {
    font-size: 20px;
    margin: 12px 0 8px;
}
.info-modal .info-content li {
    font-weight: bold;
    list-style: none;
    margin-top: 8px;
}

.category-options {
    margin-top: 50px;
    display: flex;
    justify-content: space-evenly;
    align-items: stretch;
    gap: 4px;
}
.category-options .option {
    flex: 1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    text-align: center;
    height: 400px;
    position: relative;
    cursor: pointer;
}
.category-options .option .option-button{
    position: absolute;
    left: 25%; /* Horizontális középpont */
    transform: translateX(-50%); /* Középre igazítás */
    bottom: -50px; /* 50px-re lejjebb a konténer aljától */
}
.category-options .option .category-name{
    position: absolute;
    top: -30px; /* 50px-re lejjebb a konténer aljától */
    width: 100%;
    text-align: center;
    font-size: 18px;
}


@media (max-width: 990px) {
    .category-options {
        flex-wrap: wrap;
        justify-content: center; /* Középre igazítja az elemeket */
        gap: 16px; /* Növelve a rés az elemek között */
    }

    .category-options .option {
        flex: 0 0 calc(50% - 8px); /* 50%-os szélesség a gap figyelembevételével */
        height: 250px; /* Magasság 250px */
    }

    /* Az utolsó egy elem középre igazítása */
    .category-options .option:last-child:nth-child(odd) {
        flex: 0 0 100%; /* Egész szélesség */
        max-width: 50%; /* Középre igazítás */
        margin: 0 auto; /* Középen tartás */
    }
}



.choice {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #dd7bfd;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.choice:hover {
    background-color: #ff6b6b;
}

.scene .content {
    padding: 0;
}
.scene .card {
    border-radius: 0 8px 8px 0;
}


/* -------- SENDER FORM ----------- */
.sender-form {
    text-align: center;
}
.sender-form input {
    padding: 10px;
    min-width: 200px;
    margin-left: 8px;
}


/* ---------- CIRCEL BUTTON ---------------- */
.circle-button {
    display: inline-block;
    width: 100px; /* Gomb mérete */
    height: 100px; /* Gomb mérete */
    background: linear-gradient(75deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); /* Színátmenetes háttér */
    border-radius: 50%; /* Kör alak */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Alap árnyék */
    border: 5px solid #ffffff; /* Fehér keret */
    position: relative; /* Szükséges a ::before ikon pozícionálásához */
    cursor: pointer;
    text-decoration: none; /* Link stílusának eltávolítása */
    animation: none; /* Alapállapotban nincs animáció */
    transform: scale(1); /* Alap méret */
    overflow: hidden; /* Az alapréteget rejtve tartja */

    font-size: 48px;
    color: #fff;
}
a.circle-button {
    text-align: center;
    line-height: 180%;
}

.circle-button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Középre igazítás */
    width: 40px; /* Ikon mérete */
    height: 40px; /* Ikon mérete */
    background: url('heart-icon.png') no-repeat center center; /* PNG ikon */
    background-size: contain; /* Az ikon méretarányos megjelenítése */
}
/* Hover Effekt - Animáció */
.category-options .option:hover .circle-button,
.circle-button:hover {
    animation: hover-bounce 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

.circle-button:hover:active {
    /*animation: paused; *//* Kattintás esetén az animáció kikapcsolható */
}

/* Hover Levétele - Vissza Effekt */
.circle-button {
    transition: none; /* Kikapcsolt alap transzformáció */
}
.circle-button:not(:hover) {
    animation: hover-bounce-reverse 0.5s cubic-bezier(0.57, -0.4, 0.5, 1.4) forwards;
}

/* A színátmenetréteg a fehér áttetszőséggel */
.circle-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(75deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); /* Színátmenetes háttér */
    z-index: 1; /* A színréteg a háttér fölött lesz */
    pointer-events: none; /* A réteg ne zavarja a kattintást */
    border-radius: 8px; /* Illeszkedik a gomb alakjához */
}

/* Kulcskockák - Felpattanó Effekt */
@keyframes hover-bounce {
    0% {
        transform: scale(1); /* Alapállapot */
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Alap árnyék */
        animation-timing-function: ease-in; /* Belépés lágy */
    }
    25% {
        transform: scale(1.2); /* Maximális felpattanás */
        box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3); /* Erősebb árnyék */
        animation-timing-function: ease-out; /* Belépés lágy */
    }
    50% {
        transform: scale(1.5); /* Rugózás vissza */
        box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.25); /* Árnyék mérséklődik */
        animation-timing-function: ease-in; /* Belépés lágy */
    }
    75% {
        transform: scale(1.2); /* Rugózás vissza */
        box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.25); /* Árnyék mérséklődik */
        animation-timing-function: ease-in; /* Belépés lágy */
    }
    100% {
        transform: scale(1.2); /* Alapállapotba visszatérés */
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Alap árnyék */
        animation-timing-function: ease-in; /* Belépés lágy */
    }
}

/* Kulcskockák - Visszafelé Rugózás */
@keyframes hover-bounce-reverse {
    0% {
        transform: scale(1.2); /* Hover állapot kezdése */
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Árnyék */
        animation-timing-function: ease-in; /* Belépés lágy */
    }
    25% {
        transform: scale(0.8); /* Kicsit összemegy */
        box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.25); /* Árnyék mérséklődik */
        animation-timing-function: ease-in; /* Belépés lágy */
    }
    75% {
        transform: scale(1.05); /* Visszarugózás nagyobbra */
        box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3); /* Erősebb árnyék */
        animation-timing-function: ease-in; /* Belépés lágy */
    }
    100% {
        transform: scale(1); /* Alapállapot */
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Alap árnyék */
        animation-timing-function: ease-in; /* Belépés lágy */
    }
}