/* ============================================================
   Ezoterium — rozkłady tematyczne tarota (miłość, przyszłość…)
   Kula rewersów, tacka pozycji i odsłonięcie kart.
   Dokłada się do tarot.css.
   ============================================================ */

:root {
  --rose: #e68cc4;
  --rose-light: #f6c6e3;
  --rose-24: rgba(230, 140, 196, .24);
  --rose-45: rgba(230, 140, 196, .45);
  --rose-70: rgba(230, 140, 196, .70);

  /* pas nagłówka i tacki — kula dostaje to, co między nimi */
  --head-h: clamp(150px, 22vh, 190px);
  --tray-h: clamp(118px, 19vh, 168px);
}

/* ---------- nagłówek etapu wyboru ---------- */

.spread-pick {
  position: relative;
  z-index: 70;
  margin: 0 auto auto;
  max-width: 640px;
  text-align: center;
  pointer-events: none;
  animation: riseIn .7s ease both;
}

/* ciemna mgiełka pod napisami — karty kuli przepływają tuż za nimi */
.spread-pick::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(760px, 120vw);
  height: 230%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(7, 6, 26, .82), rgba(7, 6, 26, .5) 60%, transparent);
  pointer-events: none;
}

.spread-pick__kicker {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--rose-light);
  text-shadow: 0 0 18px var(--rose-45);
}

.spread-pick__title {
  font-size: clamp(26px, 3.8vw, 42px);
  color: var(--ink);
  text-shadow: 0 2px 26px rgba(7, 6, 26, .95), 0 0 60px rgba(7, 6, 26, .8);
}

.spread-pick__note {
  margin: 8px auto 0;
  max-width: 46ch;
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--ink-mute);
  text-shadow: 0 2px 20px rgba(7, 6, 26, .95);
  text-wrap: balance;
}

.stage:has(.spread-pick) { pointer-events: none; }

/* ---------- kula ---------- */

/* Pytający stoi wewnątrz kuli, a karty leżą na ściankach licem do niego.
   Kamera jest cofnięta za środek kuli (tarot-globe.js, BACK), więc widać
   przed sobą całe sklepienie — karty ułożone wzdłuż południków
   i równoleżników, każda pod swoim kątem. */
.globe {
  position: fixed;
  inset: 0;
  z-index: 20;
  --r: clamp(260px, 34vmax, 660px);

  --cw: calc(var(--r) * .2);
  --gy: calc(var(--head-h) + (100svh - var(--head-h) - var(--tray-h)) / 2);
  perspective: var(--r);
  perspective-origin: 50% var(--gy);
  cursor: grab;
  touch-action: none;
  pointer-events: auto;
  animation: globeIn 1.6s ease both;
  transition: opacity .9s ease;
}
.globe.is-dragging { cursor: grabbing; }
.globe.is-done { opacity: 0; pointer-events: none; }

@keyframes globeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* różowa mgła w głębi, na wprost patrzącego */
.globe__halo {
  position: absolute;
  left: 50%;
  top: var(--gy);
  width: min(120vmin, 900px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 90, 168, .16) 0%, rgba(150, 60, 170, .07) 42%, transparent 68%);
  pointer-events: none;
}

.globe__shell {
  position: absolute;
  left: 50%;
  top: var(--gy);
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  /* środek kuli przed cofniętą kamerą; obrót dokłada tarot-globe.js */
  transform: translateZ(calc(var(--r) * .45));
}

.gcard {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cw);
  height: calc(var(--cw) * 1.6);
  margin: calc(var(--cw) * -.8) 0 0 calc(var(--cw) * -.5);
  padding: 0;
  border: 0;
  background: none;
  transform-style: preserve-3d;
  /* odsunięcie o promień w głąb i obrót licem do środka kuli */
  transform: rotateY(var(--yaw)) rotateX(var(--pitch)) translateZ(calc(var(--r) * -1));
  cursor: inherit;
  pointer-events: none;
  opacity: .3;
  transition: opacity .5s ease;
}
.gcard.is-front { opacity: 1; pointer-events: auto; cursor: pointer; }
.gcard.is-edge  { opacity: .42; }
.gcard.is-edge:hover, .gcard.is-edge:focus-visible, .gcard.is-edge.is-lit { opacity: .9; }
/* za plecami albo tuż przy oku — znika zupełnie */
.gcard.is-far   { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.globe.is-dragging .gcard { cursor: grabbing; }
.gcard__in {
  position: absolute;
  inset: 0;
  border-radius: 7% / 4.4%;
  background: var(--rewers) center / 100% 100% no-repeat;
  box-shadow: 0 0 0 rgba(242, 140, 200, 0);
  transition: transform .35s ease, box-shadow .6s ease, filter .6s ease, opacity .4s ease;
}

/* losowy rozbłysk — karta „woła" pytającego */
.gcard.is-lit .gcard__in {
  filter: brightness(1.55) saturate(1.2);
  box-shadow: 0 0 calc(var(--cw) * .55) rgba(242, 140, 200, .85), 0 0 calc(var(--cw) * .15) rgba(255, 220, 240, .9);
}

.gcard.is-front:hover .gcard__in,
.gcard.is-front:focus-visible .gcard__in {
  transform: scale(1.14);
  filter: brightness(1.7);
  box-shadow: 0 0 calc(var(--cw) * .7) rgba(246, 170, 220, .95);
}
.gcard:focus-visible { outline: none; }

/* losowanie samoczynne — karty wyciąga kula, nie pytający */
.globe[data-auto] .gcard.is-front { cursor: inherit; }
.globe[data-auto] .gcard.is-front:not(.is-lit):hover .gcard__in { transform: none; filter: none; box-shadow: none; }

/* wyciągnięta karta zostawia w kuli puste miejsce */
.gcard.is-taken { pointer-events: none; }
.gcard.is-taken .gcard__in { opacity: 0; transform: scale(1.3); }

/* ---------- karta w locie i na tacce ---------- */

.flycard {
  position: fixed;
  z-index: 90;
  perspective: 600px;
  pointer-events: none;
}
.flycard.is-flying {
  transition:
    left .82s cubic-bezier(.5, 0, .2, 1),
    top .82s cubic-bezier(.5, 0, .2, 1),
    width .82s cubic-bezier(.5, 0, .2, 1),
    height .82s cubic-bezier(.5, 0, .2, 1);
}
.flycard.is-landed { position: absolute; inset: 0; z-index: 1; }

.flycard__flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}
.flycard.is-flying .flycard__flip { animation: flySpin .82s ease-in-out; }
.flycard.is-open .flycard__flip { transform: rotateY(180deg); }

@keyframes flySpin {
  0%   { transform: rotateZ(0) scale(1); }
  45%  { transform: rotateZ(-8deg) scale(1.35); }
  100% { transform: rotateZ(0) scale(1); }
}

.flycard__back,
.flycard__face {
  position: absolute;
  inset: 0;
  border-radius: 7% / 4.4%;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.flycard__back {
  background: var(--rewers) center / 100% 100% no-repeat;
  box-shadow: 0 0 26px var(--rose-70);
}
.flycard__face {
  transform: rotateY(180deg);
  background: #120c34;
  border: 1px solid var(--rose-70);
  box-shadow: 0 0 22px var(--rose-45);
}
.flycard__face img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- tacka pozycji rozkładu ---------- */

.tray {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  height: var(--tray-h);
  margin: 0;
  padding: 0 12px clamp(10px, 2vh, 20px);
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(8px, 2.2vw, 26px);
  pointer-events: none;
  background: linear-gradient(to top, rgba(7, 6, 26, .96) 0%, rgba(7, 6, 26, .78) 62%, rgba(7, 6, 26, 0) 100%);
  animation: riseIn .9s ease .3s both;
}

.tray__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc((var(--tray-h) - 44px) / 1.6);
  /* --n — liczba pozycji rozkładu (domyślnie pięć) */
  max-width: calc((100vw - 24px - (var(--n, 5) - 1) * 8px) / var(--n, 5));
}

.tray__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 100 / 160;
  border-radius: 7% / 4.4%;
  border: 1px dashed var(--rose-45);
  background: rgba(230, 140, 196, .05);
  box-shadow: inset 0 0 18px rgba(230, 140, 196, .08);
}

.tray__no {
  font-family: var(--serif-display);
  font-size: clamp(16px, 2.2vw, 22px);
  color: var(--rose-45);
}

.tray__label {
  /* zawsze dwa wiersze miejsca — karty na tacce stoją w jednej linii */
  min-height: 2.5em;
  margin-top: 7px;
  font-size: 10.5px;
  line-height: 1.25;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-faint);
  transition: color .5s ease;
}
.tray__slot.is-filled .tray__label { color: var(--rose-light); }
.tray__slot.is-filled .tray__card { border-color: transparent; }

/* ---------- bez JS-a ---------- */

.globe__plain { display: none; }
.no-js .globe__shell { display: none; }
.no-js .globe__plain {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 75;
  margin: 0;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

/* ============================================================
   ODSŁONIĘCIE
   ============================================================ */

.spread-read {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-bottom: 40px;
}

.spread-read__head {
  /* sama nazwa rozkładu — karty i przyciski mają zmieścić się na jednym ekranie */
  margin: calc(-1 * clamp(4px, 1.4vh, 14px)) 0 0;
  font-family: var(--serif-text);
  font-weight: 400;
  text-align: center;
  animation: riseIn .6s ease both;
}

/* flex zamiast siatki — przy dwóch kartach (Polska) komórki nie rozlewają
   się na pół ekranu, tylko stoją pośrodku w szerokości zwykłej karty */
.spread-read__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 28px);
  margin: clamp(10px, 2vh, 18px) 0 0;
  padding: 0;
  list-style: none;
}

.rcell {
  flex: 1 1 170px;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 12px 16px;
  border: 1px solid rgba(230, 140, 196, .18);
  border-radius: 14px;
  background: rgba(16, 11, 40, .55);
  text-align: center;
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .8, .2, 1);
}

.rcell__pos {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rose-light);
}

/* karta z dwiema stronami — przy odsłanianiu odwraca się z rewersu na awers */
.rcell__card {
  /* wysokość od ekranu — na niskich oknach karta maleje, a przyciski zostają widoczne */
  height: clamp(110px, 24vh, 230px);
  aspect-ratio: 100 / 160;
  max-width: 70%;
  margin: 10px 0;
  perspective: 900px;
}
.rcell__flip {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 1.2s cubic-bezier(.3, .7, .2, 1);
}
.rcell__back,
.rcell__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5), 0 0 26px var(--rose-24);
}
.rcell__back {
  background: var(--rewers) center / 100% 100% no-repeat;
  transform: rotateY(180deg);
}
.rcell__img {
  object-fit: cover;
  border: 1px solid var(--rose-45);
}

/* bieżący tekst: niewidoczny pełny tekst trzyma miejsce, pisany leży na nim */
.rcell__text { position: relative; }
.rcell__ghost { visibility: hidden; }
.rcell__typed { position: absolute; inset: 0; }
.rcell__caret {
  display: inline-block;
  width: 1px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--rose-light);
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* ---------- odsłanianie po kolei (tarot-odczyt.js) ----------
   Tylko z JS-em — bez niego klasa is-staged nic nie ukrywa. */
html:not(.no-js) .is-staged .rcell { opacity: 0; transform: translateY(26px) scale(.96); }
html:not(.no-js) .is-staged .rcell.is-on { opacity: 1; transform: none; }
/* zakryta karta leży rewersem do góry, dopóki nie przyjdzie jej kolej */
html:not(.no-js) .is-staged .rcell:not(.is-open) .rcell__flip { transform: rotateY(180deg); }
html:not(.no-js) .is-staged .rcell__name,
html:not(.no-js) .is-staged .rcell__hint {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .7s ease, transform .7s ease;
}
html:not(.no-js) .is-staged .rcell.is-told .rcell__name,
html:not(.no-js) .is-staged .rcell.is-told .rcell__hint { opacity: 1; transform: none; }
/* odwrócona karta na chwilę rozbłyska */
.rcell.is-open .rcell__img { animation: cardGlow 1.6s ease .5s; }
@keyframes cardGlow {
  40% { box-shadow: 0 10px 28px rgba(0, 0, 0, .5), 0 0 60px rgba(242, 140, 200, .85); }
}
/* przyciski czekają na koniec odczytu */
html:not(.no-js) .is-staged .spread-read__actions { opacity: 0; pointer-events: none; }
.spread-read__actions { transition: opacity .9s ease; }

.rcell__name {
  font-size: 21px;
  color: var(--ink);
}

.rcell__hint {
  margin: 2px 0 6px;
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-faint);
}

.rcell__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* przypomnienie pod kartami (np. przy zdrowiu: karty nie zastępują lekarza) */
.spread-read__note {
  max-width: 62ch;
  margin: clamp(12px, 2vh, 20px) auto 0;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-faint);
  transition: opacity .9s ease;
}
html:not(.no-js) .is-staged .spread-read__note { opacity: 0; }

.spread-read__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(14px, 2.4vh, 26px);
}

.spread-btn {
  display: inline-block;
  padding: 13px 26px;
  border: 1px solid var(--rose-45);
  border-radius: 30px;
  color: var(--ink-mute);
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.spread-btn:hover { color: #fff; border-color: var(--rose-light); }
.spread-btn--main {
  border-color: var(--rose);
  background: rgba(230, 140, 196, .14);
  color: var(--rose-light);
  box-shadow: 0 0 24px var(--rose-24);
}

@media (max-width: 639px) {
  .tray__label { font-size: 9px; letter-spacing: .04em; }
  /* krzyż celtycki — przy dziesięciu miejscach zostają same numery */
  .tray--many .tray__label { display: none; }
  .spread-pick__note { font-size: 12.5px; }
  .rcell__card { height: 170px; }
}

@media (prefers-reduced-motion: reduce) {
  .globe, .tray { animation: none; }
  .flycard__flip, .flycard.is-flying .flycard__flip { transition: none; animation: none; }
}