/* =====================================================================
   anim-picker.css — WSPÓŁDZIELONY picker stylu animacji (video preview).

   Wydzielony z kadr_step3.css (sekcja \"ANIM PICKER v2\") do osobnego pliku,
   bo picker jest teraz używany w DWÓCH miejscach z jednego źródła (DRY):
     - step1 (upload-card): wybór stylu animacji przy uploadzie.
     - step3 (stage accepted / anim-only): wybór przed startem animacji.

   Markup generuje js/anim-picker.js (renderPicker). Wszystkie zmienne
   --anim-* są scoped do .anim-picker — nie zaśmiecają globalnego :root.
   ===================================================================== */

.anim-picker {
    /* Design tokens scoped do tego komponentu — nie zaśmiecamy globalnego :root.
       Wszystkie podelementy (chip / card / row / video / cta) czytają te
       zmienne, single source of truth dla palety. */
    --anim-bg:           #EEEDFE;
    --anim-icon-bg:      #CECBF6;
    --anim-name:         #26215C;
    --anim-desc:         #534AB7;
    --anim-border:       #7F77DD;
    --anim-icon-stroke:  #3C3489;
    --anim-cta-hover:    #534AB7;
    --anim-row-border:   #E4E0F8;  /* delikatny separator między wierszami akordeonu */
    --anim-bg-soft:      #F8F7FE;  /* lżejsze tło dla expanded row na mobile */

    /* Filter chain dla SVG ikon — produkuje --anim-icon-stroke (#3C3489)
       z czarnego SVG. Identyczny pattern jak --picker-icon-filter
       w starej galerii (linia ~2129). Brak zewnętrznego color-mod()
       w CSS, więc filter chain to standardowy hack dla colorize black SVG.
       Wartości tuned generatorem cssfilterconverter dla #3C3489. */
    --anim-icon-filter: brightness(0) saturate(100%) invert(20%) sepia(54%) saturate(2470%) hue-rotate(231deg) brightness(85%) contrast(95%);

    display: block;
    margin-bottom: 16px;
}

/* Default: desktop view widoczny, mobile schowany. Media query niżej
   odwraca dla <768px. Trzymamy oba widoki w DOM jednocześnie — single
   source of truth state'u (selectedAnimStyles / _animPickerExpanded /
   _animPickerPreviewCollapsed). Click handler przelatuje przez ten sam
   data-action niezależnie od widoku. */
.anim-picker-desktop { display: block; }
.anim-picker-mobile  { display: none; }

/* ----- DESKTOP — chip strip ----- */

.anim-picker-chip-strip {
    display: flex;
    gap: 6px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 12px;
    margin-bottom: 14px;
    overflow-x: auto;
}

.anim-picker-chip {
    flex: 1;
    /* Układ PIONOWY (2 rzędy): ikona w 1. rzędzie, nazwa w 2. — zamiast
       wcześniejszego poziomego (ikona | tekst obok). Przy 5 aktywnych stylach
       chip był za wąski na "ikona + długie jednowyrazowe imię" w jednej linii,
       więc nazwa łamała się brzydko, zrzucając pojedynczą literę do 2. linii
       ("Klasyczn"/"y", "Pocałune"/"k"). Stack daje nazwie PEŁNĄ szerokość chipa
       → mieści się w 1 linii (a w węższym kontenerze łamie się symetrycznie,
       wyśrodkowana — bez litery-sieroty). */
    display: flex;
    flex-direction: column;
    align-items: center;          /* ikona i tekst wyśrodkowane w poziomie */
    justify-content: flex-start;  /* ikona przy GÓRZE — równy baseline ikon we wszystkich chipach */
    gap: 6px;                     /* pionowy odstęp ikona → nazwa */
    padding: 10px 6px;
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    min-width: 0;
    /* min-height = podłoga dla wariantu 1-liniowego: ikona 32px + gap 6px +
       1 linia (1.25 × 12.5px ≈ 16px) + 2×padding 10px ≈ 74px. Gdy któraś nazwa
       zawinie się do 2 linii, `.anim-picker-chip-strip` (align-items: stretch,
       domyślnie) zrównuje WSZYSTKIE chipy do najwyższego → brak schodków. */
    min-height: 72px;
    font-family: var(--font-family);
    font-weight: 600;
    color: var(--color-stone-700);
    font-size: 12.5px;
    text-align: center;           /* nazwa wyśrodkowana pod ikoną */
    line-height: 1.25;
}
.anim-picker-chip:hover { background: rgba(255, 255, 255, 0.65); }
.anim-picker-chip.is-active {
    background: var(--anim-bg);
    border-color: var(--anim-border);
    color: var(--anim-name);
}
.anim-picker-chip-name {
    /* width: 100% — w układzie kolumnowym (align-items: center) span domyślnie
       kurczy się do szerokości treści; pełna szerokość pozwala tekstowi zawijać
       się i wyśrodkować w obrębie CAŁEGO chipa (text-align: center dziedziczone
       z .anim-picker-chip). overflow-wrap: break-word + hyphens: auto —
       bezpiecznik dla bardzo długich pojedynczych słów w wąskim kontenerze
       (Polski hyphenation działa, bo <html lang="pl"> w kadr_step3.html); przy
       normalnej szerokości chipa nie zadziała. */
    width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Ikona w chipie — pełne kółko 32px (powiększone z 22px), glyph 22px (z 13px).
   Większa, czytelniejsza ikona w układzie pionowym (ikona u góry, nazwa pod
   spodem). Rozmiary 1:1 z .style-icon-square--sm (reno picker, kadr_step3.css)
   — oba chip stripy mają identyczne ikony. */
.anim-picker-chip-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--anim-icon-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.anim-picker-chip-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: var(--anim-icon-filter);
}

/* ----- DESKTOP — rozszerzona karta ze stylem + video ----- */

.anim-picker-card {
    background: var(--anim-bg);
    border: 1.5px solid transparent;
    border-radius: 16px;
    padding: 18px 20px;
    transition: border-color 0.2s ease;
}
/* Confirmed = klient świadomie wybrał styl (kliknął chip). Mocniejszy
   theme border vs faint default (klient widzi konkretny styl ale jeszcze
   "nie zadeklarował wyboru"). */
.anim-picker-desktop.is-confirmed .anim-picker-card {
    border-color: var(--anim-border);
}

.anim-picker-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.anim-picker-card-headline {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Pełne kółko ikony 26px w nagłówku karty (plan 3.2 — desktop). */
.anim-picker-icon-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--anim-icon-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.anim-picker-icon-circle img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: var(--anim-icon-filter);
}

.anim-picker-card-text {
    flex: 1;
    min-width: 0;
}
.anim-picker-card-name {
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 700;
    color: var(--anim-name);
    margin: 0 0 4px;
    line-height: 1.3;
}
.anim-picker-card-desc {
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--anim-desc);
    line-height: 1.5;
    margin: 0;
}

/* Toggle "Zwiń"/"Pokaż podgląd" — nie-natywny button, link-look.
   Plan: w prawym górnym rogu karty, mała ikona strzałki. */
.anim-picker-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--anim-desc);
    transition: background 0.15s, border-color 0.15s;
}
.anim-picker-toggle:hover {
    background: rgba(255, 255, 255, 0.6);
    border-color: var(--anim-border);
}
.anim-picker-toggle svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ----- VIDEO PREVIEW (shared desktop + mobile) ----- */

/* Wrap kontenerujący <video>, overlay z labelem, blur background.
   Plan v2.1 (klient feedback): wszystkie wrap'y mają fixed aspect-ratio
   + blur fallback dla niekwadratowych video. Desktop = poziomy 16:9,
   mobile = kwadrat 1:1. Klient widzi spójny rozmiar niezależnie od
   proporcji video — pionowe i kwadratowe video dostają blur po bokach.
   Wzorzec Spotify/YouTube Shorts. */
.anim-picker-video-wrap {
    position: relative;
    margin-top: 16px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(15, 12, 30, 0.85);  /* ciemne tło widoczne przez moment przed loadeddata */
    aspect-ratio: 16 / 9;                /* desktop default — poziomy */
}

/* Video w środku — object-fit: contain żeby zachować naturalne proporcje,
   absolute positioning żeby siedzieć NAD blurred poster background (z-index 1
   nad ::before z z-index 0). */
.anim-picker-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
    /* Crossfade — opacity 0 → 1 po loadeddata (klasa .is-ready dodawana
       przez listener w handlers.js). 200ms zgodnie z planem 3.6. */
    opacity: 0;
    transition: opacity 200ms ease;
}
.anim-picker-video-wrap.is-ready .anim-picker-video {
    opacity: 1;
}

/* Blur background — ten sam poster co w video, mocno rozmyty, lekko ściemniony.
   --anim-current-poster ustawiana inline przez renderAnimStylePicker na każdej
   zmianie stylu. Visible TYLKO dla niekwadratowych proporcji (czarne pasy
   po bokach object-fit:contain'a) — dla 16:9 video w 16:9 wrapperze blur
   jest schowany pod video.
   Renderowany dla VSZYSTKICH wrap'ów (desktop + mobile) — plan v2.1. */
.anim-picker-video-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--anim-current-poster);
    background-size: cover;
    background-position: center;
    filter: blur(22px) brightness(0.78);
    transform: scale(1.15);  /* skompensuj blur edge fade żeby nie było ostrej krawędzi */
    z-index: 0;
}

/* Mobile variant — nadpisuje TYLKO aspect-ratio. Reszta (blur, absolute video)
   dziedziczona z bazowej reguły wyżej. */
.anim-picker-video-wrap--mobile {
    aspect-ratio: 1 / 1;
}

/* Overlay z tekstem "Przykładowy wynik stylu" / "styl: {nazwa}".
   Plan 4.2 — półprzezroczysty czarny tint, dwa wiersze tekstu wycentrowane.
   Pointer-events: none — overlay nie przechwytuje klików (np. tap żeby
   pause/play video, choć obecnie autoplay loop, ale forward-compat). */
.anim-picker-video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 12, 30, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    pointer-events: none;
    z-index: 2;
}
.anim-picker-video-label {
    color: #fff;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 500;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
    text-align: center;
}
.anim-picker-video-sub {
    color: rgba(255, 255, 255, 0.78);
    font-family: var(--font-family);
    font-size: 11px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
    text-align: center;
}

/* Loading spinner w prawym dolnym rogu video — visible przed loadeddata,
   znika z fade-out po dodaniu .is-ready. Plan 3.7 — subtelny, nie blokuje
   klienta od oglądania postera. */
.anim-picker-video-spinner {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    color: rgba(255, 255, 255, 0.85);
    z-index: 3;
    opacity: 1;
    transition: opacity 200ms ease;
    /* Spinner SVG ma własną animację (klasa .pill-spinner), ale ten wariant
       pokazujemy w innym kontekście — używamy podstawowego SVG bez klasy,
       więc dodajemy własną rotację. */
    animation: anim-picker-spin 0.9s linear infinite;
}
.anim-picker-video-spinner svg {
    width: 100%;
    height: 100%;
}
.anim-picker-video-wrap.is-ready .anim-picker-video-spinner {
    opacity: 0;
    animation: none;  /* zatrzymaj rotację po fade-out, oszczędność CPU */
}
@keyframes anim-picker-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Failed-state — gdy video się nie załaduje (404, codec, network).
   Pokazujemy poster jako finalny fallback (już jest w blur background),
   spinner znika, overlay pokazuje plain "Podgląd niedostępny".
   Subtelny, nie alarmujący — zwykle to chwilowy network glitch i klient
   może po prostu wybrać styl bez podglądu. */
.anim-picker-video-wrap.is-video-failed .anim-picker-video {
    /* Ukryj broken video element. Poster pozostaje w background-image
       (na mobile przez blur) lub w native poster attr. */
    visibility: hidden;
}

/* ----- DESKTOP: collapsed preview state ----- */
/* Plan 4.3: "Zwiń" ukrywa TYLKO sekcję video, nie całą kartę.
   Header karty (ikona + nazwa + opis) zostaje, "Rozpocznij Animację"
   sunie w górę naturalnie. Implementacja: video block jest po prostu
   nie-renderowany w JS (videoBlock = '' gdy isPreviewCollapsed), CSS
   nie potrzebuje display:none — DOM jest light-weight. */
.anim-picker-card.is-preview-collapsed {
    /* Brak side-effectów wymaganych — header zostaje, video jest po
       prostu nieobecny w DOM. CSS klasa zostaje na karcie dla a11y
       data-attr i dla potencjalnych przyszłych microinteractions. */
}

/* ----- MOBILE — akordeon ----- */

.anim-picker-rows {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--anim-row-border);
    border-radius: 14px;
    overflow: hidden;
}

.anim-picker-row {
    border-bottom: 1px solid var(--anim-row-border);
    transition: background 0.18s ease, border-color 0.18s ease;
}
.anim-picker-row:last-child { border-bottom: none; }

.anim-picker-row.is-expanded {
    background: var(--anim-bg-soft);
}
.anim-picker-row.is-selected {
    background: var(--anim-bg);
    border-bottom-color: transparent;
}
/* Po sąsiedzie selected — top border znika, żeby nie podwajać linii
   wokół zaznaczonego wiersza (analogiczny pattern do .anim-style-card
   w starym pickerze, linia ~1995). */
.anim-picker-row.is-selected + .anim-picker-row { border-top-color: transparent; }

.anim-picker-row-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-family);
    color: inherit;
}

/* Pełne kółko ikony 30px w wierszu mobile (plan 3.2). */
.anim-picker-row-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--anim-icon-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.anim-picker-row-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: var(--anim-icon-filter);
}

.anim-picker-row-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.anim-picker-row-name {
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 700;
    color: var(--anim-name);
    line-height: 1.3;
}
.anim-picker-row-desc {
    font-family: var(--font-family);
    font-size: 12.5px;
    color: var(--anim-desc);
    line-height: 1.45;
}

/* Indicator po prawej — UJEDNOLICONY z reno pickerem (2026-07):
   pusty okrąg (default) → wypełnione kółko z ptaszkiem (selected).
   Chevron usunięty razem z markupem w anim-picker.js — tap na wiersz
   wybiera styl, więc wskaźnik ma wyglądać jak radio, nie jak akordeon.
   Border niezaznaczonego = ten sam neutralny hairline co .reno-style-radio
   (--variant-border w step1/step3 :root); scoped fallback #E5E7EB, bo
   zmienne --anim-* celowo nie zaśmiecają globalnego :root, a ta jedna
   wartość pochodzi z palety neutralnej hosta, nie fioletowej pickera. */
.anim-picker-row-indicator {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--variant-border, #E5E7EB);
    border-radius: 50%;
    background: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
/* Checkmark w pełnym kółku — klient widzi "ten styl jest mój". */
.anim-picker-row.is-selected .anim-picker-row-indicator {
    background: var(--anim-border);
    border-color: var(--anim-border);
}
.anim-picker-row-check-icon {
    width: 14px;
    height: 14px;
    color: #fff;
}

/* Body akordeonu (video preview, plan v2.1 — bez "Wybierz ten styl" CTA) */
.anim-picker-row-body {
    padding: 0 16px 16px;
}
.anim-picker-row-body .anim-picker-video-wrap {
    /* Mniejszy margin-top niż default — header ma własny padding */
    margin-top: 0;
}

/* ----- CTA "Rozpocznij Animację" — fiolet z palety pickera (plan v2.1.2) -----
   UWAGA: hex hardcoded zamiast var(--anim-border).
   Powód: przycisk .dp-cta--anim jest renderowany w .dp-action JAKO SIOSTRA
   .anim-picker, nie potomek. CSS variables --anim-* są scope'owane do
   .anim-picker (definicja w `.anim-picker { --anim-border: #7F77DD; }`),
   więc var(--anim-border) w .dp-cta--anim zwraca initial value (transparent).
   To powodowało że v2.1 (bg #CECBF6) i v2.1.1 (bg #7F77DD) renderowały
   się jako transparent + biały tekst = niewidoczny przycisk.

   Możliwe alternatywy odrzucone:
   1. Przenieść --anim-* do :root — zaśmieca globalny scope tokenami które
      semantycznie należą do pickera.
   2. Zwiększyć scope --anim-* na cały .dp-action — wymaga zmiany markup
      (klasy na rodzicu) i mieszania concerns (renderowanie pickera vs CTA).
   3. Zostawić var() i dodać duplicate definition w .dp-cta--anim — co i tak
      sprowadza się do hardcoded hex.

   Wybór: hex hardcoded z linkiem do wartości w :root pickera (komentarze).
   Wartości:
     #7F77DD — purple-400, ten sam co --anim-border (border karty stylu)
     #534AB7 — purple-600, ten sam co --anim-cta-hover
   Wciąż bledszy niż dawny --purple-anim #7c3aed Tailwind purple-600 (zgodnie
   z pierwotną prośbą "bledszy"), kontrast z białym 4.6:1 = WCAG AA pass. */
.dp-cta--anim {
    background: #7F77DD;
    color: #fff;
    border-color: #7F77DD;
    box-shadow: 0 1px 2px rgba(60, 52, 137, 0.18);
}
.dp-cta--anim:hover:not(:disabled) {
    background: #534AB7;
    border-color: #534AB7;
}
.dp-cta--anim svg {
    color: #fff;
}

/* ----- MOBILE BREAKPOINT ----- */

@media (max-width: 768px) {
    .anim-picker-desktop { display: none; }
    .anim-picker-mobile  { display: block; }

    /* CTA "Rozpocznij Animację" — inline button (normalny flow) na mobile.
       Wcześniej miał `position: sticky; bottom: 0` żeby zawsze był widoczny
       podczas scrollu listy styli. Po wprowadzeniu mode-aware sticky CTA w
       #addonStickyMount (renderStickyCTA, tryb 'animate') ten inline button
       pełni rolę "natural CTA pod pickerem" — observer chowa fioletowy sticky
       gdy klient zescroluje TUTAJ. Dwa sticky przy bottom viewportu (inline
       sticky + fixed addon-sticky-mount z fioletowym CTA) by się nakładały
       wizualnie, więc inline traci sticky pozycjonowanie.
       Bez własnego paddingu/marginu — `.dp-action gap: 14px` rządzi spacing'iem
       od pickera. */
}

/* =====================================================================
   STEP1-ONLY OVERRIDE — układ AKORDEONU (mobile) na każdej szerokości.

   Decyzja (2026-06): step1 NIE używa desktopowego chip-strip + karta-z-video.
   Ten sam komponent renderuje się w dwóch kontenerach o różnej szerokości —
   w step3 picker ma szeroką sticky kolumnę (chip strip 1×N się mieści), w step1
   jest wewnątrz wąskiej karty uploadu (chipy się zbijały, nazwy łamały pionowo).
   Zamiast walczyć z chip-stripem w wąskim kontenerze, step1 wyświetla układ
   AKORDEONU (ten sam, którego mobile używa domyślnie) — pełny podgląd na
   szerokość wiersza, overlay, checkmark/chevron. Lepiej pasuje do wąskiej karty
   i jest spójny wizualnie z mobile.

   Zakres: WYŁĄCZNIE `.anim-style-section` (wrapper istnieje tylko w step1,
   patrz kadr_step1.html). step3 NIE jest objęty → desktop chip-strip tam działa
   bez zmian, zero ryzyka regresji.

   `renderPicker` renderuje OBA layouty (.anim-picker-desktop + .anim-picker-mobile)
   zawsze — różnicuje je CSS przez display. Tu po prostu w kontekście step1
   bezwarunkowo chowamy desktop i pokazujemy mobile, niezależnie od @media.
   ===================================================================== */
.anim-style-section .anim-picker-desktop { display: none; }
.anim-style-section .anim-picker-mobile  { display: block; }