/* Explain: Global styles for the dragon theme, including card textures and section seams. */
/* ==========================================================================
   DRAGON MOTIF — motyw przewodni Hot Dragon
   Żar, smugi światła i delikatna faktura łusek na kartach oraz
   charakterystyczne, rozgrzane cięcia między sekcjami.
   Bez dosłownych grafik smoka — tylko klimat.
   ========================================================================== */

:root {
    --dragon-gold: 201, 162, 75;   /* stare złoto */
    --dragon-lit: 220, 199, 138;   /* rozświetlone złoto */
    --dragon-ember: 176, 106, 60;  /* żar / miedź */
}

/* --- Karty: faktura łusek + żar bijący od dolnej krawędzi ----------------
   Motyw trafia we wszystkie karty serwisu: bezpośrednio przez klasę
   .dragon-card oraz automatycznie na karty z powierzchnią i wewnętrznym
   paddingiem (kafelki, panele CTA i tym podobne). ------------------------ */

:is(
    .dragon-card,
    [class~="p-6"][class~="bg-[var(--surface-color)]"],
    [class~="p-8"][class~="bg-[var(--surface-color)]"],
    [class~="p-9"][class~="bg-[var(--surface-color)]"],
    [class~="p-10"][class~="bg-[var(--surface-color)]"],
    [class~="p-6"][class~="bg-[var(--background-color)]"],
    [class~="p-8"][class~="bg-[var(--background-color)]"],
    [class~="p-9"][class~="bg-[var(--background-color)]"],
    [class~="p-10"][class~="bg-[var(--background-color)]"]
) {
    position: relative;
    isolation: isolate;
    background-image:
        radial-gradient(circle at 50% 100%, transparent 8px, rgba(var(--dragon-gold), 0.05) 9px, transparent 10.5px),
        radial-gradient(circle at 50% 100%, transparent 8px, rgba(var(--dragon-gold), 0.05) 9px, transparent 10.5px),
        radial-gradient(130% 85% at 50% 118%, rgba(var(--dragon-ember), 0.16), transparent 62%);
    background-size: 22px 22px, 22px 22px, 100% 100%;
    background-position: 0 0, 11px 11px, center;
    background-repeat: repeat, repeat, no-repeat;
    transition: box-shadow 0.5s ease, border-color 0.5s ease;
}

:is(
    .dragon-card,
    [class~="p-6"][class~="bg-[var(--surface-color)]"],
    [class~="p-8"][class~="bg-[var(--surface-color)]"],
    [class~="p-9"][class~="bg-[var(--surface-color)]"],
    [class~="p-10"][class~="bg-[var(--surface-color)]"],
    [class~="p-6"][class~="bg-[var(--background-color)]"],
    [class~="p-8"][class~="bg-[var(--background-color)]"],
    [class~="p-9"][class~="bg-[var(--background-color)]"],
    [class~="p-10"][class~="bg-[var(--background-color)]"]
):hover {
    box-shadow:
        inset 0 -34px 54px -22px rgba(var(--dragon-ember), 0.22),
        inset 0 1px 0 rgba(var(--dragon-lit), 0.07),
        0 14px 40px -18px rgba(0, 0, 0, 0.7);
    border-color: rgba(var(--dragon-gold), 0.5);
}

/* --- Cięcie między sekcjami: rozgrzana smuga światła ---------------------- */

.dragon-seam {
    position: relative;
    height: 1px;
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(var(--dragon-gold), 0.35) 34%,
        rgba(var(--dragon-lit), 0.65) 50%,
        rgba(var(--dragon-gold), 0.35) 66%,
        transparent
    );
}

.dragon-seam::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    transform: translate(-50%, -50%) rotate(45deg);
    background: var(--primary-color);
    box-shadow: 0 0 18px 4px rgba(var(--dragon-gold), 0.45);
}

@media (prefers-reduced-motion: reduce) {
    :is(.dragon-card) {
        transition: none;
    }
}