/* ============================================================================
   Animacje kafelkow - wspolny system dla calej strony (podania, sklep, regulamin,
   transmisje, changelog, jak zaczac). Karty oznaczamy klasa .pd-card.
   - wejscie: kaskada kart (obrot 3D + stopniowe wskakiwanie zawartosci)
   - najechanie: przechylenie za kursorem (3D) + linia okrazajaca krawedz, bez cieni i poswiat
   Modyfikator .pd-flat: tylko wejscie (bez przechylania i linii) - dla duzych kart z trescia.
   Sterowanie: podania/cards-anim.js (klasy .pd-in, .pd-moving, zmienne --d --rx --ry, element .pd-orbit).
   ============================================================================ */

@property --pd-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

:root {
  --pd-out: cubic-bezier(0.22, 1, 0.36, 1);        /* plynne wyhamowanie */
  --pd-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* lekki "sprezysty" przeskok */
}

/* ---------- stan poczatkowy: karty czekaja na wejscie ---------- */
.pd-js .pd-card.pd-card:not(.pd-in) { opacity: 0; }

/* ---------- transformacja karty: lift + przechylenie sterowane z JS ---------- */
.pd-card.pd-card {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
  transition: transform 0.7s var(--pd-out), border-color 0.35s ease, background 0.35s ease, opacity 0.3s ease;
  transform-style: preserve-3d;
  will-change: transform;
  animation: none;
}
.pd-card.pd-card:not(.pd-flat):hover { --ty: -6px; }
.pd-card.pd-flat:hover { --ty: 0px; }

/* w trakcie ruchu myszy: szybka, lekka reakcja; po zjechaniu: spokojny powrot */
.pd-card.pd-moving {
  transition: transform 0.12s linear, border-color 0.35s ease, background 0.35s ease, opacity 0.3s ease !important;
}

/* ---------- linia okrazajaca krawedz przy najechaniu (osobny element dodawany przez JS) ---------- */
.pd-card > .pd-orbit {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--pd-a), transparent 0 58%, rgba(123, 57, 198, 0.95) 80%, rgba(165, 139, 209, 0.9) 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
  z-index: 6;
  animation: pd-orbit 3.4s linear infinite;
  animation-play-state: paused;
}
.pd-card:not(.pd-flat):hover > .pd-orbit {
  opacity: 1;
  animation-play-state: running;
}
.pd-card.crime-card > .pd-orbit {
  background: conic-gradient(from var(--pd-a), transparent 0 58%, rgba(239, 68, 68, 0.95) 80%, rgba(252, 165, 165, 0.9) 88%, transparent 100%);
}
.pd-card.pd-flat > .pd-orbit { display: none; }
@keyframes pd-orbit { to { --pd-a: 360deg; } }

/* karty produktow w ukosnych paskach (komputer): linia nie pasuje do ksztaltu - zostaje obrys */
@media (min-width: 992px) {
  .product-card.pd-card > .pd-orbit { display: none; }
}

/* ---------- rozwiniete karty transmisji (odtwarzacz): bez przechylania ---------- */
.pd-card.is-expanded { transform: none !important; }

/* ---------- mikro-reakcje elementow karty ---------- */
.application-card .card-icon,
.category-card .category-icon,
.rule-category-card .category-icon {
  transition: transform 0.55s var(--pd-spring);
}
.application-card.pd-card:hover .card-icon { transform: scale(1.1) rotate(-7deg); }
.category-card.pd-card:hover .category-icon,
.rule-category-card.pd-card:hover .category-icon { transform: scale(1.08) rotate(-5deg); }

.apply-btn i,
.login-btn i { transition: transform 0.45s var(--pd-spring); }
.apply-btn:hover i,
.login-btn:hover i { transform: translate(3px, -3px) rotate(12deg); }

/* delikatna "zywosc" statusu */
.status-badge.status-active i { animation: pd-pulse 2.6s ease-in-out infinite; }
@keyframes pd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---------- wejscie: kaskada ---------- */
@media (prefers-reduced-motion: no-preference) {
  .pd-js .pd-card.pd-in {
    opacity: 1;
    animation: pd-rise 1s var(--pd-out) backwards;
    animation-delay: var(--d, 0ms);
  }
  @keyframes pd-rise {
    from { opacity: 0; transform: perspective(1000px) translateY(54px) scale(0.93) rotateX(14deg); }
    to   { opacity: 1; transform: perspective(1000px) translateY(0) scale(1) rotateX(0deg); }
  }
  /* duze karty z trescia: spokojniejsze wejscie bez obrotu 3D */
  .pd-js .pd-card.pd-flat.pd-in { animation-name: pd-rise-flat; animation-duration: 0.9s; }
  @keyframes pd-rise-flat {
    from { opacity: 0; transform: translateY(36px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* cienka linia "skanujaca" gorna krawedz podczas wejscia (karty formularzy) */
  .application-card.pd-in::before {
    animation: pd-scan 1.1s var(--pd-out) backwards;
    animation-delay: calc(var(--d, 0ms) + 260ms);
  }
  @keyframes pd-scan {
    0%   { opacity: 0; transform: scaleX(0); transform-origin: left; }
    35%  { opacity: 1; }
    100% { opacity: 0; transform: scaleX(1); transform-origin: left; }
  }

  /* zawartosc kart formularzy wskakuje po kolei */
  .application-card.pd-in .card-icon {
    animation: pd-pop 0.8s var(--pd-spring) backwards;
    animation-delay: calc(var(--d, 0ms) + 240ms);
  }
  @keyframes pd-pop {
    from { opacity: 0; transform: scale(0.35) rotate(-28deg); }
    to   { opacity: 1; transform: scale(1) rotate(0deg); }
  }
  .application-card.pd-in .card-status,
  .application-card.pd-in .card-title,
  .application-card.pd-in .card-description-wrapper,
  .application-card.pd-in .card-features,
  .application-card.pd-in .card-footer {
    animation: pd-slide 0.75s var(--pd-out) backwards;
  }
  .application-card.pd-in .card-status              { animation-delay: calc(var(--d, 0ms) + 280ms); }
  .application-card.pd-in .card-title               { animation-delay: calc(var(--d, 0ms) + 330ms); }
  .application-card.pd-in .card-description-wrapper { animation-delay: calc(var(--d, 0ms) + 400ms); }
  .application-card.pd-in .card-features            { animation-delay: calc(var(--d, 0ms) + 460ms); }
  .application-card.pd-in .card-footer              { animation-delay: calc(var(--d, 0ms) + 520ms); }
  @keyframes pd-slide {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* karty produktow sklepu: obraz wjezdza, napisy i przycisk wplywaja */
  .product-card.pd-in .product-card-visual {
    animation: pd-zoom 1s var(--pd-out) backwards;
    animation-delay: calc(var(--d, 0ms) + 120ms);
  }
  @keyframes pd-zoom {
    from { opacity: 0; transform: scale(1.12); }
    to   { opacity: 1; transform: scale(1); }
  }
  .product-card.pd-in .product-card-info {
    animation: pd-slide 0.75s var(--pd-out) backwards;
    animation-delay: calc(var(--d, 0ms) + 360ms);
  }
  .product-card.pd-in .product-buy-btn {
    animation: pd-slide 0.75s var(--pd-out) backwards;
    animation-delay: calc(var(--d, 0ms) + 440ms);
  }

  /* kafelki kategorii (podania, regulamin): ikona wskakuje, napis wplywa */
  .category-card.pd-in .category-icon,
  .rule-category-card.pd-in .category-icon {
    animation: pd-pop 0.8s var(--pd-spring) backwards;
    animation-delay: calc(var(--d, 0ms) + 220ms);
  }
  .category-card.pd-in .category-name,
  .rule-category-card.pd-in h2,
  .rule-category-card.pd-in h3 {
    animation: pd-slide 0.75s var(--pd-out) backwards;
    animation-delay: calc(var(--d, 0ms) + 320ms);
  }
}

/* ---------- ograniczone animacje: bez ruchu, od razu widoczne ---------- */
@media (prefers-reduced-motion: reduce) {
  .pd-js .pd-card.pd-card { opacity: 1 !important; }
  .pd-card.pd-card { transform: none !important; transition: none; }
  .pd-card > .pd-orbit { display: none; }
  .status-badge.status-active i { animation: none; }
}

/* ---------- urzadzenia dotykowe: bez przechylania ---------- */
@media (hover: none), (pointer: coarse) {
  .pd-card.pd-card:hover { --ty: 0px; }
}

/* Linki-przyciski bez href (np. wybor kategorii): kursor jak przy linku, bez napisu "javascript:void(0)" na pasku przegladarki */
a[role="button"] { cursor: pointer; }
a[role="button"]:focus-visible { outline: 2px solid rgba(139, 92, 246, 0.7); outline-offset: 3px; }