/* ================================================
   MOONLY – Egyedi stílusok
   Kiegészíti a Tailwind CSS-t
   ================================================ */

/* Sima görgetés horgony-linkekhez (sticky nav: h-20 = 5rem) */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
    overflow-x: clip;
}

body {
    /* Finom textúra a háttérnek */
    background-image:
        radial-gradient(circle at 20% 0%, rgba(218, 147, 226, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 100%, rgba(97, 101, 229, 0.05) 0%, transparent 50%);
    background-attachment: fixed;
}

#kutatas {
    scroll-margin-top: 4.5rem;
}

#betet {
    scroll-margin-top: 5rem;
}

#funkciok {
    scroll-margin-top: 2rem;
}

#hogyan {
    scroll-margin-top: 4.5rem;
}

#gyik {
    scroll-margin-top: 5rem;
}

#letoltes {
    scroll-margin-top: 5rem;
}

/* A html scroll-padding-top (5rem) már kezeli a nav-et */
#csapat {
    scroll-margin-top: 0;
}

#bemutatkozott {
    scroll-margin-top: 5rem;
}

/* ---------- Asset Placeholder stílusok ----------
   Minden olyan elemen, ahol képet vagy más asset-et
   kell majd cserélni. Vizuálisan jelzi a fejlesztőnek.
*/
.asset-placeholder {
    position: relative;
    isolation: isolate;
}

.asset-placeholder::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: linear-gradient(135deg,
            transparent 0%,
            transparent 49%,
            rgba(245, 229, 246, 0.04) 49%,
            rgba(245, 229, 246, 0.04) 51%,
            transparent 51%,
            transparent 100%);
    background-size: 16px 16px;
    pointer-events: none;
    opacity: 0.6;
    z-index: -1;
}

/* Body class hozzáadásával lehet kapcsolni a placeholder jelölést. */
body.hide-placeholders .asset-placeholder::after {
    display: none;
}

/* ---------- Egyedi scrollbar ---------- */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #1C091E;
}

::-webkit-scrollbar-thumb {
    background: #7B1F85;
    border-radius: 10px;
    border: 2px solid #1C091E;
}

::-webkit-scrollbar-thumb:hover {
    background: #DA93E2;
}

/* ---------- Szöveg kijelölés ---------- */
::selection {
    background: #DA93E2;
    color: #1C091E;
}

/* ---------- Details / Summary tisztítás ---------- */
summary {
    list-style: none;
}

summary::-webkit-details-marker {
    display: none;
}

/* GYIK kinyíláskor finom megjelenés */
details[open] summary~* {
    animation: detailsSlide 0.3s ease-out;
}

@keyframes detailsSlide {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

/* ---------- Focus stílus (akadálymentesség) ---------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 2px solid #DA93E2;
    outline-offset: 4px;
    border-radius: 6px;
}

/* ---------- Csillagok finom pulzálása ---------- */
.shimmer {
    background: linear-gradient(90deg,
            rgba(245, 229, 246, 0.05) 0%,
            rgba(245, 229, 246, 0.15) 50%,
            rgba(245, 229, 246, 0.05) 100%);
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ---------- Navigáció ---------- */
.site-nav {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.nav-toggle__icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-toggle__svg {
    width: 1.5rem;
    height: 1.5rem;
}

body.nav-open {
    overflow: hidden;
}

/* ---------- Mobile finomítások ---------- */

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}