/* Dola — spytajdole.pl · paleta i typografia wg 02-persona.md · v2 (głębia+motion) */

/* Docelowy font displayowy — pliki jeszcze nie wgrane do assets/fonts/ (self-hosting
   zamiast Google Fonts CDN = czystość RODO). @font-face CELOWO wyłączone poniżej:
   bez plików Cloudflare Pages zwraca fallback index.html zamiast 404, co psuje
   konsolę błędem dekodowania. Odkomentuj obie reguły, gdy pliki .woff2 wylądują
   w assets/fonts/ (instrukcja w README.md). Do tego czasu font spada na Georgię.
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../assets/fonts/CormorantGaramond-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../assets/fonts/CormorantGaramond-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
*/

:root {
  --granat: #1a1033;
  --granat-gleboki: #120b24;
  --granat-jasny: #251a45;
  --zloto: #d4af37;
  --zloto-jasne: #e8cc6a;
  --biel: #f5f0e8;
  --fiolet: #7b5ea7;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --przejscie: .6s cubic-bezier(.22,.8,.35,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(123,94,167,.14), transparent 60%),
    radial-gradient(900px 500px at 10% 40%, rgba(212,175,55,.05), transparent 60%),
    var(--granat);
  color: var(--biel);
  font-family: var(--sans);
  line-height: 1.65;
  font-size: 17px;
  overflow-x: hidden;
}

.dola-glos { font-family: var(--serif); }

main { display: block; }
section { padding: 84px 20px; position: relative; }
.wnetrze { max-width: 720px; margin: 0 auto; }
.szeroka { max-width: 980px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--biel); letter-spacing: .01em; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.18; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin-bottom: 26px; }
h3 { font-size: 1.2rem; color: var(--zloto-jasne); }

/* złota nić pod nagłówkami sekcji */
h2::after {
  content: '';
  display: block;
  width: 72px; height: 1px;
  margin-top: 14px;
  background: linear-gradient(90deg, var(--zloto), transparent);
}
.wysrodkowana h2::after { margin-left: auto; margin-right: auto; background: linear-gradient(90deg, transparent, var(--zloto), transparent); }

a { color: var(--zloto-jasne); }

/* ---------- ANIMACJE WEJŚCIA ---------- */
.anim { opacity: 0; transform: translateY(18px); transition: opacity var(--przejscie), transform var(--przejscie); }
.anim.widoczna { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim { opacity: 1; transform: none; transition: none; }
  .gwiazda, .karta-rewers, .hero-tlo { animation: none !important; }
}

/* ---------- HERO ---------- */
.hero {
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding-top: 48px;
}
.hero .wnetrze { position: relative; z-index: 3; }
.hero-tlo {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; object-position: right center;
  pointer-events: none;
}
.hero-przyciemnienie {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(100deg, var(--granat) 0%, rgba(26,16,51,.88) 30%, rgba(26,16,51,.35) 55%, transparent 72%),
    linear-gradient(0deg, var(--granat) 0%, transparent 16%, transparent 84%, var(--granat) 100%);
}
.hero-gwiazdy { position: absolute; inset: 0; z-index: 2; width: 45%; height: 100%; pointer-events: none; }
.gwiazda { animation: mruganie 3.4s ease-in-out infinite; transform-origin: center; }
.gwiazda:nth-child(2n) { animation-delay: 1.1s; animation-duration: 4.2s; }
.gwiazda:nth-child(3n) { animation-delay: 2s; animation-duration: 5s; }
@keyframes mruganie { 0%,100% { opacity: .25 } 50% { opacity: 1 } }

.hero-tekst { text-align: left; margin-left: 0; margin-right: auto; }

.hero h1 {
  background: linear-gradient(115deg, var(--biel) 55%, var(--zloto-jasne) 78%, var(--biel) 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero p.podtytul {
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  margin: 24px 0 36px; max-width: 480px; opacity: .92;
}
.mikro { font-size: .85rem; opacity: .6; margin-top: 16px; }

@media (max-width: 760px) {
  /* Na wąskim ekranie negative space znika przy przycięciu — zamiast chować Dolę pod
     przyciemnieniem, ustawiamy ją jako osobną kartę POD tekstem: tekst czytelny na
     czystym tle, obraz widoczny w pełnej krasie. */
  .hero {
    min-height: auto;
    display: flex;
    flex-direction: column;
    padding-bottom: 44px;
  }
  .hero-tekst { text-align: center; margin: 0 auto; order: 1; }
  .hero-tlo {
    position: static;
    order: 2;
    width: 100%;
    height: 62vw;
    max-height: 340px;
    min-height: 220px;
    object-position: center 22%;
    border-radius: 20px;
    margin-top: 32px;
    box-shadow: 0 18px 46px rgba(0,0,0,.4);
  }
  .hero-przyciemnienie { display: none; }
  .hero-gwiazdy { display: none; }
}

/* ---------- PRZYCISKI ---------- */
.przycisk {
  display: inline-block;
  background: linear-gradient(160deg, var(--zloto-jasne), var(--zloto) 60%);
  color: var(--granat);
  font-weight: 700;
  font-family: var(--sans);
  border: none;
  border-radius: 999px;
  padding: 16px 38px;
  font-size: 1.05rem;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(212,175,55,.25), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .18s ease, box-shadow .18s ease;
}
.przycisk:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(212,175,55,.45), inset 0 1px 0 rgba(255,255,255,.35); }
.przycisk:active { transform: translateY(0); }

/* ---------- KARTA DNIA ---------- */
#karta-dnia { text-align: center; background: linear-gradient(180deg, var(--granat-jasny), rgba(37,26,69,.4)); }
.karta-scena { margin: 34px auto; perspective: 1100px; width: min(220px, 62vw); aspect-ratio: 220/340; }
.karta {
  width: 100%; height: 100%; position: relative;
  transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3,.7,.3,1);
  cursor: pointer;
}
.karta.odwrocona { transform: rotateY(180deg); }
.karta-strona {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: 14px; border: 1px solid var(--zloto);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.karta-rewers {
  background: url('../assets/dola-rewers-karty.webp') center/cover, radial-gradient(ellipse at 50% 40%, var(--granat-jasny), var(--granat) 75%);
  animation: przyzywanie 2.6s ease-in-out infinite;
}
@keyframes przyzywanie {
  0%,100% { box-shadow: 0 0 18px rgba(212,175,55,.15); }
  50% { box-shadow: 0 0 34px rgba(212,175,55,.45); }
}
.karta.odwrocona .karta-rewers { animation: none; }
.karta-awers {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, var(--granat-jasny), #2e2255);
  flex-direction: column; padding: 18px; gap: 12px;
  box-shadow: inset 0 0 40px rgba(123,94,167,.25);
}
.karta-awers .nazwa { font-family: var(--serif); color: var(--zloto-jasne); font-size: 1.25rem; }
#wynik-karty { max-width: 560px; margin: 26px auto 0; display: none; }
#wynik-karty .dola-glos { font-size: 1.12rem; }
#wynik-karty .pytanie { color: var(--zloto-jasne); font-style: italic; margin-top: 14px; }

/* ---------- FORMULARZ ---------- */
.formularz {
  background: linear-gradient(var(--granat-jasny), var(--granat-jasny)) padding-box,
              linear-gradient(160deg, rgba(212,175,55,.7), rgba(123,94,167,.4), rgba(212,175,55,.15)) border-box;
  border: 1px solid transparent;
  border-radius: 18px;
  padding: 34px;
  margin-top: 40px;
  text-align: left;
  box-shadow: 0 12px 44px rgba(0,0,0,.35);
}
.formularz label { display: block; font-size: .9rem; margin: 16px 0 6px; color: var(--zloto-jasne); }
.formularz input[type=text], .formularz input[type=email],
.formularz input[type=date], .formularz textarea {
  width: 100%; padding: 13px 15px; border-radius: 10px;
  border: 1px solid rgba(245,240,232,.22);
  background: rgba(18,11,36,.7); color: var(--biel);
  font-family: var(--sans); font-size: 1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.formularz input:focus, .formularz textarea:focus {
  outline: none; border-color: var(--zloto);
  box-shadow: 0 0 0 3px rgba(212,175,55,.18);
}
.formularz textarea { min-height: 96px; resize: vertical; }
.zgoda { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: .85rem; opacity: .85; }
.zgoda input { margin-top: 4px; accent-color: var(--zloto); }
.formularz .przycisk { margin-top: 26px; width: 100%; }
.honeypot { position: absolute; left: -9999px; opacity: 0; }
#form-sukces { display: none; text-align: center; padding: 32px 10px; }

/* ---------- SEKCJE TREŚCI ---------- */
.mit p, .szczerosc p { margin-bottom: 18px; font-family: var(--serif); font-size: 1.14rem; }
.mit-tlo {
  background:
    linear-gradient(180deg, var(--granat) 0%, rgba(26,16,51,.65) 18%, rgba(26,16,51,.65) 82%, var(--granat) 100%),
    url('../assets/dola-tlo-o-mnie.webp') center/cover;
}

.kroki { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 32px; }
.krok {
  background: rgba(37,26,69,.75); border-radius: 16px; padding: 28px;
  border-top: 2px solid var(--zloto);
  backdrop-filter: blur(4px);
  transition: transform .25s ease, box-shadow .25s ease;
}
.krok:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,.35); }
.krok .numer { font-family: var(--serif); font-size: 2.1rem; color: var(--zloto); }

.produkty { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 32px; }
.produkt {
  background: linear-gradient(rgba(37,26,69,.92), rgba(37,26,69,.92)) padding-box,
              linear-gradient(160deg, rgba(212,175,55,.55), rgba(123,94,167,.3), transparent) border-box;
  border: 1px solid transparent;
  border-radius: 16px; padding: 30px;
  display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.produkt:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(0,0,0,.4); }
.produkt .cena { color: var(--zloto-jasne); font-size: 1.45rem; font-family: var(--serif); margin: 8px 0 14px; }
.produkt p { font-size: .95rem; opacity: .9; flex: 1; }
.produkt .wkrotce {
  margin-top: 20px; text-align: center; font-size: .85rem;
  border: 1px dashed var(--fiolet); border-radius: 999px; padding: 9px;
  opacity: .8;
}

.gwarancja { text-align: center; margin-top: 38px; font-family: var(--serif); font-size: 1.1rem; color: var(--zloto-jasne); }

/* ---------- FAQ ---------- */
details { border-bottom: 1px solid rgba(245,240,232,.14); padding: 18px 0; }
summary {
  cursor: pointer; font-family: var(--serif); font-size: 1.1rem; color: var(--zloto-jasne);
  list-style: none; position: relative; padding-right: 28px;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: '+'; position: absolute; right: 4px; top: 0;
  color: var(--zloto); font-family: var(--sans); transition: transform .25s ease;
}
details[open] summary::after { transform: rotate(45deg); }
details p { margin-top: 12px; opacity: .9; }

/* ---------- STOPKA ---------- */
footer {
  background: var(--granat-gleboki); padding: 48px 20px; font-size: .85rem;
  text-align: center;
  border-top: 1px solid rgba(212,175,55,.2);
}
footer .prawna { max-width: 640px; margin: 0 auto 18px; opacity: .7; }
footer nav { margin: 14px 0; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
footer .pomoc { color: var(--zloto-jasne); margin-top: 18px; }

/* ---------- STRONY PRAWNE ---------- */
.prawnicza { max-width: 760px; margin: 0 auto; padding: 60px 20px; }
.prawnicza h1 { margin-bottom: 10px; }
.prawnicza h2 { font-size: 1.2rem; margin: 28px 0 10px; }
.prawnicza h2::after { display: none; }
.prawnicza p, .prawnicza li { font-size: .95rem; opacity: .92; margin-bottom: 10px; }
.prawnicza ol, .prawnicza ul { padding-left: 22px; }
.baner-draft {
  background: #5a1f1f; color: #ffd7d7; padding: 14px 18px; border-radius: 10px;
  margin-bottom: 28px; font-weight: 600; font-size: .9rem;
}
.znacznik-ai { font-size: .78rem; opacity: .6; letter-spacing: .04em; }

/* ---------- MOBILE ---------- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  section { padding: 56px 18px; }
  .hero { padding-top: 32px; }
  .formularz { padding: 24px 18px; }
  .przycisk { width: 100%; padding: 16px 20px; }
  .kroki, .produkty { gap: 18px; }
  footer nav { gap: 14px; }
  .zgoda { font-size: .82rem; }
}