/**
 * Scalemora — Lux 2026 (animacje, aurora, detale)
 * Ładuj ZARAZ PO scalemora-brand.css. Nie używać na stronach demo.
 */

/* ---- Tło: żywa aurora (nadpisuje statyczne body::before) ---- */
body::before {
    background:
        radial-gradient(ellipse 105% 88% at 10% 6%, rgba(155, 138, 237, 0.22) 0%, transparent 54%),
        radial-gradient(ellipse 95% 78% at 94% 10%, rgba(226, 176, 122, 0.14) 0%, transparent 50%),
        radial-gradient(ellipse 75% 58% at 50% 104%, rgba(80, 198, 210, 0.08) 0%, transparent 48%),
        radial-gradient(ellipse 130% 100% at 48% -24%, rgba(226, 176, 122, 0.17) 0%, transparent 58%),
        linear-gradient(168deg, #05040c 0%, #0c0a18 44%, #07051c 100%);
    background-size: 100% 100%, 100% 100%, 100% 100%, 125% 125%, 100% 100%;
    animation: lux-aurora 44s ease-in-out infinite alternate;
}

@keyframes lux-aurora {
    0% {
        background-position: 0% 0%, 0% 0%, 50% 100%, 52% 0%, 0% 0%;
        background-size: 100% 100%, 100% 100%, 100% 100%, 125% 125%, 100% 100%;
    }
    100% {
        background-position: 6% 4%, -4% 6%, 48% 98%, 48% 2%, 0% 0%;
        background-size: 108% 108%, 105% 105%, 102% 102%, 140% 135%, 100% 100%;
    }
}

body::after {
    opacity: 0.036;
    animation: lux-grain 14s ease-in-out infinite;
}

@keyframes lux-grain {
    0%, 100% { opacity: 0.028; }
    50% { opacity: 0.048; }
}

/* ---- Hero + nagłówki artykułów bloga (pierwsza sekcja bez klasy .hero) ---- */
.page-home .hero,
.page-lead .hero,
.page-premium .hero,
.page-kariera .hero,
.page-about .hero,
.page-blog .hero,
.page-faq .faq-hub-hero,
.page-privacy .policy-hero,
.page-blog main > section.section-padding:first-child:not(.hero) {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.page-home .hero::before,
.page-lead .hero::before,
.page-premium .hero::before,
.page-kariera .hero::before,
.page-about .hero::before,
.page-blog .hero::before,
.page-faq .faq-hub-hero::before,
.page-privacy .policy-hero::before,
.page-blog main > section.section-padding:first-child:not(.hero)::before {
    content: "";
    position: absolute;
    inset: -60% -45%;
    z-index: 0;
    pointer-events: none;
    background: conic-gradient(
        from 200deg at 50% 50%,
        rgba(155, 138, 237, 0.075),
        transparent 14%,
        rgba(226, 176, 122, 0.065),
        transparent 32%,
        rgba(94, 210, 208, 0.045),
        transparent 50%,
        rgba(155, 138, 237, 0.065),
        transparent 68%,
        rgba(226, 176, 122, 0.055),
        transparent 86%,
        rgba(155, 138, 237, 0.075)
    );
    animation: lux-hero-rotate 100s linear infinite;
    will-change: transform;
}

@keyframes lux-hero-rotate {
    to { transform: rotate(1turn); }
}

.page-home .hero::after,
.page-lead .hero::after,
.page-premium .hero::after,
.page-kariera .hero::after,
.page-about .hero::after,
.page-blog .hero::after,
.page-faq .faq-hub-hero::after,
.page-privacy .policy-hero::after,
.page-blog main > section.section-padding:first-child:not(.hero)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 78% 68% at 50% 42%, #000 16%, transparent 74%);
    mask-image: radial-gradient(ellipse 78% 68% at 50% 42%, #000 16%, transparent 74%);
    animation: lux-hero-grid 160s linear infinite;
}

@keyframes lux-hero-grid {
    to {
        background-position: 56px 56px, 56px 56px;
    }
}

.page-home .hero h1,
.page-lead .hero h1,
.page-premium .hero h1,
.page-kariera .hero h1,
.page-about .hero h1,
.page-blog .hero h1 {
    position: relative;
    z-index: 1;
    text-shadow:
        0 0 100px rgba(155, 138, 237, 0.12),
        0 0 60px rgba(226, 176, 122, 0.08);
}

/* ---- Marka w topbarze ---- */
.logo-dot {
    background: linear-gradient(135deg, #f5d4a8 0%, var(--accent) 42%, #a67c4a 100%);
    box-shadow: 0 0 18px rgba(226, 176, 122, 0.35);
    animation: lux-dot 5.5s ease-in-out infinite;
}

@keyframes lux-dot {
    0%, 100% {
        box-shadow:
            0 0 14px rgba(226, 176, 122, 0.32),
            0 0 0 0 rgba(155, 138, 237, 0);
    }
    50% {
        box-shadow:
            0 0 28px rgba(226, 176, 122, 0.48),
            0 0 36px rgba(155, 138, 237, 0.14);
    }
}

/* ---- Karty: świetlna krawędź (bez nakładania na treść) ---- */
.premium-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(226, 176, 122, 0.55),
        rgba(155, 138, 237, 0.4),
        transparent
    );
    opacity: 0.4;
    z-index: 1;
    pointer-events: none;
    border-radius: 14px 14px 0 0;
    transition: opacity 0.45s ease;
}

.premium-card:hover::before {
    opacity: 1;
}

/* ---- Nagłówki sekcji: delikatna poświata ---- */
.section-head h2,
.page-lead .section-head h2,
.page-premium .section-head h2,
.page-about .section-head h2 {
    text-shadow: 0 0 80px rgba(155, 138, 237, 0.06);
}

/* ---- Separator sekcji ---- */
.section-border-top {
    background-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(155, 138, 237, 0.22) 24%,
            rgba(226, 176, 122, 0.4) 50%,
            rgba(155, 138, 237, 0.22) 76%,
            transparent 100%
        ),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, transparent 12rem);
    background-size: 100% 1px, auto;
    background-repeat: no-repeat;
    background-position: top center, 0 0;
}

/* ---- Topbar po scrollu ---- */
#topbar.scrolled {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.07),
        0 22px 56px rgba(0, 0, 0, 0.52),
        0 -20px 48px rgba(155, 138, 237, 0.05);
}

/* ---- FAQ accordion: lekki „lift” przy otwarciu ---- */
.faq-accordion__item[open] {
    box-shadow: 0 0 0 1px rgba(226, 176, 122, 0.08);
}

/* ---- Dostępność: wyłącz ruchome tło i dekoracje ---- */
@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after,
    .page-home .hero::before,
    .page-lead .hero::before,
    .page-premium .hero::before,
    .page-kariera .hero::before,
    .page-about .hero::before,
    .page-blog .hero::before,
    .page-faq .faq-hub-hero::before,
    .page-privacy .policy-hero::before,
    .page-blog main > section.section-padding:first-child:not(.hero)::before,
    .page-home .hero::after,
    .page-lead .hero::after,
    .page-premium .hero::after,
    .page-kariera .hero::after,
    .page-about .hero::after,
    .page-blog .hero::after,
    .page-faq .faq-hub-hero::after,
    .page-privacy .policy-hero::after,
    .page-blog main > section.section-padding:first-child:not(.hero)::after {
        animation: none !important;
    }

    body::before {
        background-size: 100% 100%, 100% 100%, 100% 100%, 125% 125%, 100% 100% !important;
        background-position: center !important;
    }

    .logo-dot {
        animation: none !important;
        box-shadow: 0 0 12px rgba(226, 176, 122, 0.25);
    }

    .page-home .hero h1,
    .page-lead .hero h1,
    .page-premium .hero h1,
    .page-kariera .hero h1,
    .page-about .hero h1,
    .page-blog .hero h1 {
        text-shadow: none;
    }
}