/* ==========================================================================
   /tarot-za-darmo — INTERAKTYWNA TALIA (rewolucja)
   Koncept: "Talia z Pergaminu — The Living Grimoire Deck"
   Gruba, oświetlona świecą talia → riffle shuffle → wachlarz (hand of cards)
   → wybór 3 (lift + lot do gniazd) → synchroniczny flip z jednym smugiem
   złotego światła → maszynowy odczyt z kursorem.

   Ładowany PO interactive.css + tarot-dnia.css (gating: tylko tarot-za-darmo),
   więc nadpisuje stare reguły .tarot-dnia / .cards__* dzięki kolejności
   i scope'owi `.tarot-dnia ...`. Wszystkie kontraktowe ID zachowane.
   Tylko transform/opacity/filter → GPU-friendly.
   ========================================================================== */

.tarot-dnia {
    /* lokalne tokeny (zgodne z paletą home) */
    --tdk-card-w: 170px;
    --tdk-card-h: 300px;
    --tdk-paper:     #ebdfc8;
    --tdk-copper:    #a85e2c;
    --tdk-copper-hi: #c4753a;
    --tdk-gold:      #c9a84c;
    --tdk-gold-hi:   #e0c068;
    --tdk-terra:     #d97742;
    --tdk-line:      rgba(196, 117, 58, 0.30);
    --tdk-line-soft: rgba(196, 117, 58, 0.16);
    --tdk-ease:      cubic-bezier(.2, .7, .2, 1);

    /* napędzane przez GSAP — migot świecy */
    --flame: 0.85;
}

/* ============================================================
   LAYOUT — kompaktowy rytm pionowy (koniec z 100vh pustki
   i przyciskiem pływającym 280px pod tekstem)
   ============================================================ */
.tarot-dnia { min-height: auto; }
.tarot-dnia .tarot-dnia__header { margin-bottom: clamp(20px, 3vw, 34px); }
.tarot-dnia .tarot-dnia__guide  { margin-bottom: clamp(10px, 1.8vw, 20px); max-width: 44ch; }
.tarot-dnia .tarot-dnia__title  { font-size: clamp(1.45rem, 1.05rem + 1.9vw, 2.45rem); }   /* pkt 7 — mniejszy H2 */
.tarot-dnia .tarot-dnia__eyebrow { margin-bottom: clamp(0.7rem, 2.4vw, 1.25rem); }
.tarot-dnia .tarot-dnia__divider { margin-top: clamp(12px, 2.2vw, 28px); }                   /* mniejszy odstęp pod tytułem */

/* ============================================================
   TŁO SEKCJI — głębsza, ciepła „komnata ze świecą".
   Wyróżnia narzędzie i nie pozwala mu zlać się z płaskimi
   granatowymi sekcjami nad/pod nim. Nadpisuje granat z interactive.css.
   ============================================================ */
.tarot-dnia {
    background-color: #0c0916;
    background-image:
        radial-gradient(ellipse 78% 58% at 50% 40%, rgba(96, 56, 36, 0.42), transparent 62%),     /* ciepły reflektor świecy (centrum) */
        radial-gradient(ellipse 142% 120% at 50% 44%, transparent 38%, rgba(3, 2, 8, 0.86) 100%),  /* ciemna winieta krawędzi */
        linear-gradient(180deg, #0a0712 0%, #120c20 50%, #0c0916 100%);
    border-top: 1px solid rgba(196, 117, 58, 0.24);
    border-bottom: 1px solid rgba(196, 117, 58, 0.24);
}

/* kolory tekstu dostrojone do cieplejszego, ciemniejszego tła */
.tarot-dnia .tarot-dnia__title,
.tarot-dnia .cards__title,
.tarot-dnia .cards__description { color: #f1e7d4; }
.tarot-dnia .tarot-dnia__guide,
.tarot-dnia .cards__intro,
.tarot-dnia .cards__extra { color: #d4b78a; }
.tarot-dnia .tarot-dnia__eyebrow { color: #d18347; }

/* Stage frame — copper hairline corner brackets (spójne z home zn-arcana) */
.tarot-dnia__corner {
    position: absolute;
    width: 46px;
    height: 46px;
    z-index: 3;
    pointer-events: none;
    opacity: 0.7;
}
.tarot-dnia__corner::before,
.tarot-dnia__corner::after {
    content: '';
    position: absolute;
    background: var(--tdk-copper-hi);
}
.tarot-dnia__corner::before { width: 100%; height: 1px; }
.tarot-dnia__corner::after  { width: 1px; height: 100%; }
.tarot-dnia__corner--tl { top: 18px; left: 18px; }
.tarot-dnia__corner--tl::before, .tarot-dnia__corner--tl::after { top: 0; left: 0; }
.tarot-dnia__corner--tr { top: 18px; right: 18px; }
.tarot-dnia__corner--tr::before, .tarot-dnia__corner--tr::after { top: 0; right: 0; }
.tarot-dnia__corner--bl { bottom: 18px; left: 18px; }
.tarot-dnia__corner--bl::before, .tarot-dnia__corner--bl::after { bottom: 0; left: 0; }
.tarot-dnia__corner--br { bottom: 18px; right: 18px; }
.tarot-dnia__corner--br::before, .tarot-dnia__corner--br::after { bottom: 0; right: 0; }

/* ============================================================
   STAGE — kolumna: [holding row / triptych] nad [wachlarz]
   ============================================================ */
.tarot-dnia .tarot-dnia__stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 4vw, 44px);
    width: 100%;
    margin-top: clamp(8px, 1.5vw, 18px);
    padding: 0;
    min-height: 0;                 /* SPOCZYNEK: scena wielkości przycisku (kompaktowo, bez pustki) */
    perspective: 1500px;
    transform-style: preserve-3d;
    isolation: isolate;
}
/* OTWARTA (wachlarz + reveal): stały „podest", by faza wachlarz↔triptyk nie skakała */
.tarot-dnia .tarot-dnia__stage.is-open { min-height: clamp(360px, 46vh, 460px); }

/* Candlelight pool — wyśrodkowany za treścią (przycisk / wachlarz / triptyk),
   skaluje się ze sceną; migocze przez GSAP --flame. Nadpisuje stary ::after. */
.tarot-dnia .tarot-dnia__stage::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(260px, 62%, 500px);
    height: clamp(110px, 78%, 340px);
    transform: translate(-50%, -50%) scale(var(--flame));
    background: radial-gradient(ellipse, rgba(196, 117, 58, 0.24), rgba(201, 168, 76, 0.08) 45%, transparent 72%);
    filter: blur(22px);
    opacity: var(--flame);
    pointer-events: none;
    z-index: 0;
}

/* ============================================================
   WACHLARZ / TALIA — #deck
   Karty absolutne, wspólny środek, pivot poniżej (hand of cards).
   ============================================================ */
.tarot-dnia .cards__wrapper--deck {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: calc(var(--tdk-card-h) + 140px);
    margin: 0 auto;
    cursor: pointer;
    perspective: 1200px;   /* daje głębię flipowi + parallaxowi kart (direct children) */
}
.tarot-dnia .cards__wrapper--deck.is-stack { cursor: grab; }
.tarot-dnia .cards__wrapper--deck.is-stack:active { cursor: grabbing; }
.tarot-dnia .cards__wrapper--deck.is-fanned { cursor: default; }

/* karta — wyśrodkowana w #deck (transformy GSAP budują stos / wachlarz / triptyk) */
.tarot-dnia .card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--tdk-card-w);
    height: var(--tdk-card-h);
    margin-top: calc(var(--tdk-card-h) / -2);
    margin-left: calc(var(--tdk-card-w) / -2);
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    cursor: pointer;
}
.tarot-dnia .cards__wrapper--deck.is-fanned .card { cursor: pointer; }

/* will-change tylko na kartach w ruchu (nie na 22 w spoczynku) → tani GPU */
.tarot-dnia .card.is-hover,
.tarot-dnia .card.is-lifted,
.tarot-dnia .card.is-picked,
.tarot-dnia .card.card--flipper { will-change: transform; }

/* obraz karty — ostre rogi (sharp editorial), wypełnia kartę */
.tarot-dnia .card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.tarot-dnia .card__img--back { transform: rotateY(180deg); }

/* gruba talia: każda karta dostaje cienki "papierowy" brzeg → stos arkuszy.
   TANIO: tylko inset box-shadow, bez drop-shadow filtra na 22 kartach. */
.tarot-dnia .card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow:
        inset -1px -1px 0 rgba(0, 0, 0, 0.30),
        inset 1px 1px 0 rgba(232, 200, 117, 0.07);
    z-index: 2;
}

/* ============================================================
   PRZYCISK STARTOWY — "Rozłóż karty" (zamiast stosu kart)
   ============================================================ */
.tarot-dnia__shuffle {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 20px 42px;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: #fff;
    background: var(--tdk-terra);
    border: none;
    border-radius: 0;
    cursor: pointer;
    position: relative;          /* w przepływie → scena = wysokość przycisku (kompaktowo) */
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(217, 119, 66, 0.32);
    transition: transform .35s var(--tdk-ease), box-shadow .35s, gap .35s, background .35s;
    animation: tdk-shuffle-glow 3.2s ease-in-out infinite;
    z-index: 2;
}
.tarot-dnia__shuffle:hover {
    background: #bf6432;
    transform: translateY(-2px);
    gap: 18px;
    box-shadow: 0 16px 36px rgba(217, 119, 66, 0.45);
}
.tarot-dnia__shuffle:focus-visible { outline: 2px solid var(--tdk-gold-hi); outline-offset: 4px; }
.tarot-dnia__shuffle-mark {
    color: var(--tdk-gold-hi);
    font-size: 0.9em;
    transition: transform .4s var(--tdk-ease);
}
.tarot-dnia__shuffle:hover .tarot-dnia__shuffle-mark { transform: rotate(90deg) scale(1.15); }
@keyframes tdk-shuffle-glow {
    0%, 100% { box-shadow: 0 12px 28px rgba(217, 119, 66, 0.30), 0 0 0 rgba(196, 117, 58, 0); }
    50%      { box-shadow: 0 12px 28px rgba(217, 119, 66, 0.38), 0 0 26px rgba(196, 117, 58, 0.40); }
}
@media (prefers-reduced-motion: reduce) {
    .tarot-dnia__shuffle { animation: none; }
}

/* ============================================================
   GLOW — tylko hover / picked / triptych (scoped → tanio)
   ============================================================ */
.tarot-dnia .card.is-hover .card__img,
.tarot-dnia .card.is-lifted .card__img {
    filter:
        drop-shadow(0 0 3px rgba(232, 200, 117, 0.7))
        drop-shadow(0 0 10px rgba(196, 117, 58, 0.55));
}
.tarot-dnia .card.is-picked .card__img,
.tarot-dnia .card.card--selected .card__img,
.tarot-dnia .card.is-faceup .card__img {
    filter:
        drop-shadow(0 0 2px rgba(232, 200, 117, 0.85))
        drop-shadow(0 0 9px rgba(196, 117, 58, 0.55))
        drop-shadow(0 0 20px rgba(168, 94, 44, 0.35));
}

/* ROZBŁYSK przy osadzeniu karty — TYLKO warstwy kompozytowane (transform/opacity).
   Świadomie BEZ animowania filter: drop-shadow() — to przeliczało filtr co klatkę
   (4 warstwy, blur do 70px) na głównym wątku i powodowało zacinanie.
   Błysk daje radialna warstwa światła .cards__bloom (sam transform+opacity → GPU). */
.tarot-dnia .cards__bloom {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 150%;
    height: 98%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 238, 198, 0.68), rgba(224, 192, 104, 0.38) 36%, rgba(196, 117, 58, 0.12) 62%, transparent 76%);
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    will-change: transform, opacity;
}

/* ============================================================
   TRIPTYK (reveal) — #deck-selected: pewny, wyśrodkowany rząd 3 kart,
   nigdy się nie zawija; karty skalują się responsywnie by się zmieścić.
   ============================================================ */
.tarot-dnia .cards__wrapper--selected {
    position: relative;
    z-index: 2;
    display: flex;             /* JS przełącza display:none → flex przy reveal */
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 3vw, 30px);
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    perspective: 1100px;
    transform-style: preserve-3d;
}

/* gniazdo holdingu = stała pozycja (lewa/środek/prawa) → karty NIE przeskakują przy dodawaniu.
   Wybrana karta wlatuje nad wachlarz do swojego gniazda; w fazie reveal te 3 gniazda = triptyk. */
.tarot-dnia .cards__slot {
    position: relative;
    flex: 0 0 auto;
    width: clamp(92px, 27vw, 184px);
    aspect-ratio: 170 / 300;
    border: 1px dashed rgba(196, 117, 58, 0.26);
    transition: border-color 0.45s var(--tdk-ease);
}
.tarot-dnia .cards__slot::before {       /* delikatna podpowiedź „tu trafi karta" */
    content: '✦';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(196, 117, 58, 0.30);
    font-size: 1rem;
    transition: opacity 0.4s;
}
.tarot-dnia .cards__slot.is-filled { border-color: transparent; }
.tarot-dnia .cards__slot.is-filled::before { opacity: 0; }

/* karta osadzona w gnieździe — wypełnia je */
.tarot-dnia .cards__slot .card {
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    transform-origin: 50% 50%;
}
.tarot-dnia .cards__slot.is-center { z-index: 2; }

/* jeden smug złotego światła przez triptyk (overlay → Safari-safe; GSAP steruje xPercent) */
.tarot-dnia .cards__sweep {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(224, 192, 104, 0.5) 50%, transparent 60%);
    mix-blend-mode: screen;
}

/* ============================================================
   ODCZYT — wyśrodkowanie (intro + tytuł), opis pozostaje do lewej
   ============================================================ */
.tarot-dnia .cards__content { text-align: center; }
.tarot-dnia .cards__intro {
    max-width: 56ch;
    margin-inline: auto;
    text-align: center;
}

/* pkt 1 — lekki margines nad fazą reveal (statyczny → nie rusza animacji #tarot-content) */
.tarot-dnia .tarot-dnia__phase--revealed { margin-top: 32px; }

/* spark ✦ przy lądowaniu wyboru / flipie */
.tarot-dnia .cards__spark {
    position: absolute;
    z-index: 7;
    color: var(--tdk-gold-hi);
    font-size: 0.85rem;
    pointer-events: none;
    opacity: 0;
    text-shadow: 0 0 8px rgba(224, 192, 104, 0.8);
}

/* po revealu — wachlarz znika, triptyk centruje, content niżej */
/* reveal: scena kurczy się do wysokości karty (pkt 5 — koniec dużych odstępów) */
.tarot-dnia .tarot-dnia__stage.is-revealed { gap: 0; min-height: 0; }

/* ============================================================
   COUNTER — "Wybierz [3] karty" + rzymskie I · II · III
   ============================================================ */
.tarot-dnia .tarot-dnia__roman {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0.25rem;
}
.tarot-dnia .tarot-dnia__roman > span {
    font-family: 'Poppins', system-ui, sans-serif;
    font-style: italic;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    color: rgba(196, 117, 58, 0.4);
    transition: color 0.45s var(--tdk-ease), text-shadow 0.45s var(--tdk-ease), transform 0.45s var(--tdk-ease);
}
.tarot-dnia .tarot-dnia__roman > span.is-lit {
    color: var(--tdk-gold-hi);
    text-shadow: 0 0 10px rgba(224, 192, 104, 0.6);
    transform: scale(1.12);
}

/* ============================================================
   TYPEWRITER — kursor (atrament w blasku świecy)
   ============================================================ */
.tarot-dnia .cards__caret {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    vertical-align: -0.12em;
    background: var(--tdk-copper-hi);
    box-shadow: 0 0 6px rgba(196, 117, 58, 0.6);
}
.tarot-dnia .cards__type { white-space: inherit; font-size: 0.7em; }   /* mniejszy maszynowy tekst */

/* divider w treści: mniejsze marginesy pionowe (pkt 8) + linie wjeżdżają (scaleX) */
.tarot-dnia .cards__content .cards__divider { margin-block: clamp(10px, 1.8vw, 18px); }
.tarot-dnia .cards__content .cards__divider-line { transform-origin: center; }

/* tytuł karty — jednorazowy złoty „połysk” po dopisaniu.
   text-shadow (nie background-clip) bo tekst żyje w .cards__type obok kursora. */
.tarot-dnia .cards__content .cards__title { transition: text-shadow 0.5s var(--tdk-ease); }
.tarot-dnia .cards__content .cards__title.is-glow {
    text-shadow: 0 0 22px rgba(224, 192, 104, 0.7), 0 0 6px rgba(224, 192, 104, 0.5);
}

/* CTA — jednorazowy diagonalny połysk + trwała copper poświata */
.tarot-dnia .cards__cta {
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(217, 119, 66, 0.3), 0 0 0 rgba(217, 119, 66, 0);
}
.tarot-dnia .cards__cta.is-revealed { animation: tdk-cta-glow 2.4s ease-in-out 0.4s infinite; }
.tarot-dnia .cards__cta.is-revealed::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-18deg) translateX(-180%);
    animation: tdk-cta-gloss 0.7s var(--tdk-ease) 0.45s 1;
    pointer-events: none;
}
@keyframes tdk-cta-gloss {
    to { transform: skewX(-18deg) translateX(320%); }
}
@keyframes tdk-cta-glow {
    0%, 100% { box-shadow: 0 10px 20px rgba(217, 119, 66, 0.3), 0 0 0 rgba(196, 117, 58, 0); }
    50%      { box-shadow: 0 12px 24px rgba(217, 119, 66, 0.38), 0 0 22px rgba(196, 117, 58, 0.35); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .tarot-dnia { min-height: auto; }
    .tarot-dnia .cards__wrapper--selected { max-width: 560px; }
}

@media (max-width: 600px) {
    .tarot-dnia {
        --tdk-card-w: 116px;
        --tdk-card-h: 205px;
    }
    .tarot-dnia .cards__wrapper--deck { height: calc(var(--tdk-card-h) + 80px); }
    .tarot-dnia .tarot-dnia__stage { gap: clamp(14px, 4vw, 22px); margin-top: 4px; }
    .tarot-dnia .cards__wrapper--selected { gap: clamp(8px, 2.5vw, 16px); }
    /* pkt 1 — ciaśniejszy nagłówek na mobile, żeby wachlarz mieścił się w viewport */
    .tarot-dnia .tarot-dnia__header { margin-bottom: 14px; }
    .tarot-dnia .tarot-dnia__eyebrow { margin-bottom: 0.55rem; font-size: 10px; letter-spacing: 3px; }
    .tarot-dnia .tarot-dnia__divider { margin-top: 12px; max-width: 180px; }
    .tarot-dnia .tarot-dnia__guide { margin-bottom: 8px; font-size: 0.95rem; line-height: 1.6; }
    .tarot-dnia__corner { width: 28px; height: 28px; }
    .tarot-dnia__corner--tl, .tarot-dnia__corner--tr { top: 12px; }
    .tarot-dnia__corner--bl, .tarot-dnia__corner--br { bottom: 12px; }
    .tarot-dnia__corner--tl, .tarot-dnia__corner--bl { left: 12px; }
    .tarot-dnia__corner--tr, .tarot-dnia__corner--br { right: 12px; }
}

/* ============================================================
   REDUCED MOTION — bez fizyki; statyczny wachlarz + crossfade
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .tarot-dnia .card.is-top .card__shimmer { animation: none; }
    .tarot-dnia .cards__bloom { display: none; }
    .tarot-dnia .cards__title.is-glow { text-shadow: none; }
    .tarot-dnia .cards__cta.is-revealed,
    .tarot-dnia .cards__cta.is-revealed::after { animation: none; }
    .tarot-dnia .cards__caret { display: none !important; }
}