/* AstroPlus 2.0 „Aura”: kolekcjonerska karta znaku (strona główna, Wielka Trójka, strony znaków).
   Wzorzec: prototyp/home.css (sekcja ZODIAC CARD). Markup: astroplus_zcard() w inc/zcard.php. */

.zcard {
  position: relative; display: block; aspect-ratio: 5 / 7; max-width: 100%; border-radius: 14px; overflow: hidden; isolation: isolate;
  container-type: inline-size; cursor: pointer; border: 0; padding: 0; text-align: center; font: inherit; text-decoration: none;
  color: var(--card-ink); background: var(--a3);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 14px 30px -18px rgba(30, 27, 46, .55);
}
.zcard:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.zcard.is-mine { box-shadow: 0 0 0 2px var(--ink), 0 14px 30px -18px rgba(30, 27, 46, .55); }
.zcard__drift {
  position: absolute; inset: -30%; z-index: 0;
  background:
    radial-gradient(circle at 32% 34%, color-mix(in srgb, var(--a1) 75%, transparent) 0%, transparent 34%),
    radial-gradient(circle at 68% 66%, color-mix(in srgb, var(--a2) 85%, transparent) 0%, transparent 38%),
    radial-gradient(circle at 70% 25%, color-mix(in srgb, white 55%, transparent) 0%, transparent 22%);
  animation: drift 18s ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * -1.7s);
}
@keyframes drift {
  from { transform: translate(-7%, -5%) rotate(0deg); }
  to { transform: translate(7%, 6%) rotate(28deg); }
}
.zcard > .aura-fill { z-index: 0; }
/* gwiazdozbiór: serce karty */
.zcard__sky { position: absolute; inset: 10% 5% 29% 5%; z-index: 1; color: var(--card-ink); }
.cl { width: 100%; height: 100%; overflow: visible; display: block; }
.cl-field circle { fill: currentColor; }
.cl-lines path { fill: none; stroke: currentColor; stroke-width: .42; stroke-opacity: .6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-opacity .4s; }
.cl-halo { fill: currentColor; opacity: .13; transition: opacity .4s; }
.cl-core { fill: currentColor; }
.cl-glint { fill: currentColor; opacity: .9; transform-box: fill-box; transform-origin: center; animation: glint 5s ease-in-out infinite; animation-delay: var(--d, 0s); }
.cl-name { display: none; font-family: var(--f-display); font-style: italic; font-size: 3.7px; fill: currentColor; opacity: .78; }
@container (min-width: 200px) { .cl-name { display: inline; } }
.tw { animation: twinkle 3.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.zcard:hover .cl-halo { opacity: .3; }
.zcard:hover .cl-lines path { stroke-opacity: .95; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }
@keyframes glint { 0%, 100% { transform: scale(.72); opacity: .55; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes rise-in { from { transform: translateY(34px) rotate(3deg); opacity: 0; } }
@keyframes halo {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 12px 40px -12px color-mix(in srgb, var(--a1) 65%, transparent); }
  50% { box-shadow: 0 0 0 1px rgba(255, 255, 255, .32), 0 12px 70px 2px color-mix(in srgb, var(--a1) 80%, transparent); }
}
.zcard__frame { position: absolute; inset: 3.6cqi; z-index: 2; border: 1px solid color-mix(in srgb, var(--card-ink) 34%, transparent); border-radius: 9px; pointer-events: none; }
.zcard__frame::after { content: ""; position: absolute; inset: 1.6cqi; border: 1px solid color-mix(in srgb, var(--card-ink) 16%, transparent); border-radius: 6px; }
.zcard__idx {
  position: absolute; z-index: 3; top: 7cqi; left: 7.4cqi; display: grid; justify-items: center; gap: 1cqi;
  font-family: var(--f-display); font-style: italic; font-size: 8cqi; line-height: 1;
}
.zcard__idx .g { width: 9cqi; height: 9cqi; stroke-width: 1.2; }
.zcard__idx--br { top: auto; left: auto; bottom: 7cqi; right: 7.4cqi; transform: rotate(180deg); }
.zcard__text { position: absolute; z-index: 3; left: 10%; right: 10%; bottom: 10cqi; display: grid; gap: 1.6cqi; justify-items: center; }
.zcard__meta { font: 600 4.4cqi/1.2 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; opacity: .8; display: inline-flex; gap: 2cqi; align-items: center; }
.zcard__meta svg { width: 4.6cqi; height: 4.6cqi; }
.zcard__name { font-family: var(--f-display); font-style: italic; font-size: 13.5cqi; line-height: .95; letter-spacing: -.01em; }
.zcard__dates { font: 600 4.2cqi/1.2 var(--f-ui); letter-spacing: .16em; opacity: .75; }
.zcard__badge {
  position: absolute; right: 7cqi; top: 7cqi; z-index: 4; font: 600 4cqi/1.2 var(--f-ui); letter-spacing: .16em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); padding: 1.6cqi 3cqi; border-radius: 999px;
}
/* miękkie światło pod kursorem (bez przesuwających się pasów) */
.zcard__sheen {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; mix-blend-mode: soft-light; transition: opacity .45s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 35%), rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .3) 24%, transparent 55%);
}
.zcard:hover .zcard__sheen, .zcard:focus-visible .zcard__sheen { opacity: 1; }
.zcard__spine { display: none; }
/* karta „?” (nieznany znak, np. ascendent bez godziny) */
.zcard--unknown { --card-ink: var(--star); background: var(--night-2); color: var(--on-night); cursor: default; }
.zcard--unknown .zcard__q { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 4cqi; z-index: 3; padding: 14cqi; }
.zcard--unknown .zcard__q b { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 34cqi; line-height: 1; color: var(--star); }
.zcard--unknown .zcard__q span { font: 5.4cqi/1.4 var(--f-ui); color: var(--on-night-soft); }

@media (prefers-reduced-motion: reduce) {
  .zcard__drift, .cl-glint, .tw { animation: none !important; }
}