/* ============================================================
   gold.css — restyle-safe override réteg
   A style.css UTÁN töltődik; ezt az egy importot eltávolítva
   minden vizuális változás visszaáll. Meglévő CSS-t nem módosít.
   Rétegek: tokenek → tipográfia → szín → spacing → komponensek
   → atmoszféra → motion.
   ============================================================ */

/* ===== 1. TOKENEK ===== */
:root {
    /* Egységes easing-nyelv a generikus `ease` helyett */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);

    /* Radius-nyelv: 8 / 12 / pill — a 10px és 25px kivezetve */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-full: 999px;

    /* Háttér-ramp: három tudatos lépcső a hat ad-hoc sötét helyett */
    --surface-0: #0e1013;   /* legmélyebb — stats, about */
    --surface-1: #14171a;   /* köztes — services, contact */
    --surface-2: #181717;   /* alap — body, portfolio */
}

/* ===== 2. TIPOGRÁFIA ===== */
/* Törtfehér szöveg a vakító #fff helyett — a token már létezett, csak nem volt használva */
body {
    color: var(--text);
}

/* Fluid szekciócímek a fix 2.4rem helyett */
.contact-header h2 {
    font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.6rem);
    letter-spacing: -0.025em;
}

/* ===== 3. SZÍN ===== */
/* Szekció-ritmus: 2 → 0 → 1 → 2 → 0 → 1 váltakozás */
.stats { background: var(--surface-0); }
.services { background: var(--surface-1); }

/* Az #about inline style="background:#151515"-öt csak !important előzi meg
   — tudatos kivétel, a template-hez nem nyúlunk */
#about.wrapper { background: var(--surface-0) !important; }

/* Zavaros 3-stop gradiens helyett nyugodt felület + halvány accent-fény */
.contact {
    background:
        radial-gradient(90% 60% at 50% 0%, rgba(153, 170, 187, 0.07), transparent 60%),
        var(--surface-1);
}
.footer {
    background: var(--surface-0);
}

/* Hajszálvonal-elválasztók a szekcióhatárokon */
.stats,
.services,
#about.wrapper,
.contact {
    border-top: 1px solid var(--border-color);
}

/* Form-visszajelzés sötét témára hangolva (a világos pasztell helyett) */
#formResponse.success {
    background-color: rgba(56, 161, 105, 0.12);
    color: #8fd6ae;
    border: 1px solid rgba(56, 161, 105, 0.4);
}
#formResponse.error {
    background-color: rgba(229, 62, 62, 0.12);
    color: #f0a3a3;
    border: 1px solid rgba(229, 62, 62, 0.4);
}

/* ===== 4. SPACING ===== */
/* Fluid szekció-padding a fix 4rem helyett */
.services,
.wrapper {
    padding-top: clamp(4rem, 3rem + 4vw, 6rem);
    padding-bottom: clamp(4rem, 3rem + 4vw, 6rem);
}
.contact {
    padding-top: clamp(5rem, 4rem + 4vw, 7rem);
    padding-bottom: clamp(5rem, 4rem + 4vw, 7rem);
}

/* ===== 5. KOMPONENSEK ===== */
/* Filter-gombok: vékonyabb border, pill-radius token, egységes easing */
.filter-btn {
    border-width: 1px;
    border-radius: var(--radius-full);
    transition: border-color 0.3s var(--ease-snap), color 0.3s var(--ease-snap),
                background 0.3s var(--ease-snap);
}

/* Kártyák és CV-dobozok: radius-token + easing */
.service-card {
    border-radius: var(--radius-md);
    transition: transform 0.4s var(--ease-snap), border-color 0.3s var(--ease-snap),
                box-shadow 0.4s var(--ease-snap);
}
.cv-side .box,
.cv-main .box {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    box-shadow: none;
}

/* CTA és küldés gomb: taktilis press-feedback */
.hero-cta,
.contact-form button {
    transition: background 0.3s var(--ease-snap), transform 0.3s var(--ease-snap),
                box-shadow 0.3s var(--ease-snap);
}
.hero-cta:hover,
.contact-form button:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.hero-cta:active,
.contact-form button:active {
    transform: translateY(0) scale(0.98);
}

/* Láthatóbb billentyűzet-fókusz mindenhol */
a:focus-visible,
button:focus-visible,
.filter-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Swiper nyilak: hover-kor sötét ikon a világos accenten */
.swiper-button-prev:hover,
.swiper-button-next:hover {
    color: #14181c;
}

/* Chipek: finom kontúr az alaktalan pöttyök helyett */
.chip {
    border: 1px solid var(--border-color);
}
.chip.primary {
    border-color: rgba(153, 170, 187, 0.35);
}

/* ===== 6. ATMOSZFÉRA ===== */
/* A hero-nak már van radial glow-ja — itt csak a stats-sáv kap
   egy leheletnyi felső fényt, hogy ne legyen holt felület */
.stats {
    background:
        radial-gradient(80% 50% at 20% 0%, rgba(153, 170, 187, 0.045), transparent 55%),
        var(--surface-0);
}

/* ===== 7. MOTION (scroll-reveal, progresszív) ===== */
/* A rejtés CSAK akkor aktív, ha a reveal.js hozzáadta a root-classt.
   JS nélkül (vagy reduced-motion mellett) minden elem látható marad. */
.gold-reveal .gr {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    transition-delay: calc(var(--gr-i, 0) * 90ms);
}
.gold-reveal .gr.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .gold-reveal .gr {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}