/* ==========================================================================
   Poradnia Rodzinna Eskulap – WARSTWA WIZUALNA (kolory, ilustracje, animacje)
   style.css = wersja uproszczona (zawsze działa sama).
   effects.css = ozdoby nakładane na nią. Wyłączane gdy:
     - html[data-simple]           → przycisk „Wersja uproszczona”
     - html[data-contrast="high"]  → wysoki kontrast
     - prefers-reduced-motion      → ustawienie systemu (tylko animacje)
       Elementy czysto graficzne mają klasę .gfx.
   ========================================================================== */

:root {
  --mint: #5FB8A0;
  --mint-tint: #E3F4EF;
  --sun-tint: #FFF6CC;
  --amber-tint: #FDEBDC;
  --sky-tint: #E3F0FA;
  --alt: #E7F2FA;        /* tło sekcji naprzemiennych w wersji kolorowej */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Hero: niebo, łuki, budynek ---------- */
:root:not([data-simple]):not([data-contrast="high"]) .hero {
  background:
    radial-gradient(60% 80% at 85% 90%, rgba(255, 233, 112, .35), transparent 70%),
    radial-gradient(50% 70% at 5% 0%, rgba(134, 186, 225, .35), transparent 70%),
    linear-gradient(180deg, #E4F1FB 0%, #F3F8FC 60%, #FFFBEA 100%);
  border-bottom: 0;
}
:root:not([data-simple]):not([data-contrast="high"]) .hero .wrap {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  padding-block: clamp(2rem, 4vw, 3rem) clamp(4rem, 7vw, 6rem);
}
.hero-visual { position: relative; min-width: 0; }
.hero-art {
  display: block; width: 100%; height: auto; max-width: 620px; margin-inline: auto;
  /* miękkie wygaszenie krawędzi ilustracji, żeby nie było widać „prostokąta” */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-composite: intersect;
}


/* Pasek „Godziny i adres” nachodzi na dół hero */
:root:not([data-simple]):not([data-contrast="high"]) .info-strip { padding-top: 0; }
:root:not([data-simple]):not([data-contrast="high"]) .info-strip .today-card {
  margin-top: -3.5rem; position: relative; z-index: 2;
  box-shadow: 0 18px 40px rgba(23, 50, 74, .12);
  border-color: transparent;
}

/* ---------- Nagłówki sekcji z małym łukiem ---------- */
:root:not([data-simple]):not([data-contrast="high"]) .section-head h2,
:root:not([data-simple]):not([data-contrast="high"]) #zapisy-h,
:root:not([data-simple]):not([data-contrast="high"]) #kontakt-h {
  position: relative; padding-top: 1.25rem;
}
:root:not([data-simple]):not([data-contrast="high"]) .section-head h2::before,
:root:not([data-simple]):not([data-contrast="high"]) #zapisy-h::before,
:root:not([data-simple]):not([data-contrast="high"]) #kontakt-h::before {
  content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 14'%3E%3Cpath d='M3 12a19 19 0 0 1 38 0' fill='none' stroke='%23FBD700' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M11 12a11 11 0 0 1 22 0' fill='none' stroke='%23E5750A' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
}

/* ---------- Karty usług: kolorowe ikony, uniesienie ---------- */
:root:not([data-simple]):not([data-contrast="high"]) .cards .card {
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(23, 50, 74, .06), 0 8px 24px rgba(23, 50, 74, .06);
}
:root:not([data-simple]):not([data-contrast="high"]) .cards .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(23, 50, 74, .06), 0 16px 36px rgba(23, 50, 74, .12);
}
:root:not([data-simple]):not([data-contrast="high"]) .cards .card:nth-child(6n+1) .icon { background: var(--sky-tint); }
:root:not([data-simple]):not([data-contrast="high"]) .cards .card:nth-child(6n+2) .icon { background: var(--mint-tint); }
:root:not([data-simple]):not([data-contrast="high"]) .cards .card:nth-child(6n+3) .icon { background: var(--amber-tint); }
:root:not([data-simple]):not([data-contrast="high"]) .cards .card:nth-child(6n+4) .icon { background: var(--sun-tint); }
:root:not([data-simple]):not([data-contrast="high"]) .cards .card:nth-child(6n+5) .icon { background: var(--mint-tint); }
:root:not([data-simple]):not([data-contrast="high"]) .cards .card:nth-child(6n+6) .icon { background: var(--sky-tint); }
:root:not([data-simple]):not([data-contrast="high"]) .card .icon { width: 56px; height: 56px; border-radius: 18px; }

/* ---------- Specjalności: ikony w kolorowych kołach ---------- */
.spec-ico {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; color: var(--brand); background: var(--sky-tint);
}
.spec-ico svg { width: 26px; height: 26px; }
.spec-list li:nth-child(2) .spec-ico { background: var(--sun-tint); }
.spec-list li:nth-child(3) .spec-ico { background: var(--mint-tint); }
.spec-list li:nth-child(4) .spec-ico { background: var(--amber-tint); }
.spec-list li:nth-child(5) .spec-ico { background: var(--sky-tint); }
:root:not([data-simple]):not([data-contrast="high"]) .section-alt .spec-list li { border-color: transparent; box-shadow: 0 6px 20px rgba(23, 50, 74, .06); }

/* ---------- Fale między sekcjami ---------- */
.wave { display: block; line-height: 0; background: var(--bg); color: var(--alt); }
.wave svg { display: block; width: 100%; height: clamp(28px, 4vw, 64px); fill: currentColor; }
.wave-down { background: var(--bg); color: var(--alt); }
:root:not([data-simple]):not([data-contrast="high"]) .section-alt { border-block: 0; background: var(--alt); }
:root:not([data-simple]):not([data-contrast="high"]) .section-alt .note,
:root:not([data-simple]):not([data-contrast="high"]) .section-alt .spec-list li { background: var(--surface); }

/* ---------- Ilustracje sekcji ---------- */
.zapisy-art { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto 1rem; }
.map-card { margin: 0; }
.map-art { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 10px 30px rgba(23, 50, 74, .10); }
.map-card figcaption { font-size: var(--step--1); color: var(--muted); margin-top: .6rem; }

/* ---------- Podstrony: łuki w nagłówku ---------- */
.page-head { position: relative; overflow: hidden; }
.page-head .wrap { position: relative; z-index: 1; }
.ph-arcs { position: absolute; right: -40px; bottom: -8px; width: min(420px, 55vw); height: auto; opacity: .85; }
:root:not([data-simple]):not([data-contrast="high"]) .page-head {
  background: linear-gradient(180deg, #E4F1FB 0%, #F6FAFD 100%);
}

/* ==========================================================================
   ANIMACJE – „kinowe” wejście strony (całość kończy się przed 5 s, więc
   zgodnie z WCAG 2.2.2 nie jest potrzebny przycisk pauzy) + efekty przewijania
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* --- Tekst: nagłówek odsłania się jak kurtyna, reszta wjeżdża warstwami --- */
  .hero-copy .eyebrow { animation: rise .8s var(--ease-out) both; }
  .hero-copy h1 { animation: wipe 1.1s cubic-bezier(.7, 0, .2, 1) .15s both; }
  .hero-copy .lead { animation: rise .9s var(--ease-out) .55s both; }
  .hero-copy .hero-actions { animation: rise .9s var(--ease-out) .75s both; }
  .info-strip .today-card { animation: rise-card 1s var(--ease-out) .9s both; }

  /* --- Ilustracja: sekwencja „wschodu słońca” --- */
  .glow { transform-box: fill-box; transform-origin: center; animation: glow-in 1.6s ease-out both; }
  .rays { transform-box: view-box; transform-origin: 300px 410px; animation: rays-in 2.2s var(--ease-out) .2s both; }
  .arc { stroke-dasharray: 1; animation: draw 1.7s var(--ease-out) .3s both; }
  .arc.a2 { animation-delay: .5s; }
  .arc.a3 { animation-delay: .7s; }

  .building { animation: rise-big 1.1s cubic-bezier(.3, 1.3, .5, 1) .5s both; }
  .win { transform-box: fill-box; transform-origin: center; animation: pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
  .win.w1 { animation-delay: 1.3s; } .win.w2 { animation-delay: 1.42s; } .win.w3 { animation-delay: 1.54s; }
  .win.w4 { animation-delay: 1.66s; } .win.w5 { animation-delay: 1.78s; }
  .win.lit { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1) 1.42s both, light-on .6s ease-out 2.4s both; }
  .win.w4.lit { animation-delay: 1.66s, 2.7s; }
  .cross { transform-box: fill-box; transform-origin: center; animation: pop .6s cubic-bezier(.3, 1.8, .5, 1) 1.9s both; }
  .cross-ring { transform-box: fill-box; transform-origin: center; animation: ring 1s ease-out 2.3s 2 both; }

  .tree { transform-box: fill-box; transform-origin: 50% 100%; animation: grow .9s cubic-bezier(.3, 1.5, .5, 1) both; }
  .tree.t1 { animation-delay: 1s; } .tree.t2 { animation-delay: 1.15s; }
  .walkway { stroke-dasharray: 1; animation: draw 1s ease-out 1.8s both; }

  /* Rodzina wchodzi z lewej i idzie w stronę drzwi */
  .family { animation: walk-in 1.9s cubic-bezier(.25, .8, .3, 1) 1.8s both, bob .32s ease-in-out 1.8s 6; }
  .heart-pop { transform-box: fill-box; transform-origin: center; animation: heart 1.3s ease-out 3.5s both; }

  .cloud { animation: cloud-in 3.6s var(--ease-out) both; }
  .cloud.c2 { animation-name: cloud-in-r; animation-delay: .2s; }
  .cloud.c3 { animation-delay: .5s; }
  .bird { animation: fly 3.4s cubic-bezier(.3, .6, .3, 1) .8s both; }
  .bird.b2 { animation-delay: 1s; } .bird.b3 { animation-delay: 1.2s; }
  .spark { transform-box: fill-box; transform-origin: center; animation: pop .6s cubic-bezier(.3, 1.8, .5, 1) both; }
  .spark.s1 { animation-delay: 2.2s; } .spark.s2 { animation-delay: 2.4s; }
  .spark.s3 { animation-delay: 2.6s; } .spark.s4 { animation-delay: 2.8s; }

  /* Mapa i ilustracja zapisów – startują dopiero gdy sekcja wjedzie na ekran */
  .reveal.in .pin, .reveal:not(.pre) .pin { animation: pin-drop .9s cubic-bezier(.3, 1.4, .5, 1) .2s both; }
  .reveal.in .pulse, .reveal:not(.pre) .pulse { transform-box: fill-box; transform-origin: center; animation: ring 1.2s ease-out 1s 3 both; }
  .reveal.in .zapisy-art .bubble { transform-box: fill-box; transform-origin: 20% 100%; animation: pop .6s cubic-bezier(.3, 1.8, .5, 1) .5s both; }
  .reveal.in .zapisy-art .cal { animation: rise .8s var(--ease-out) .3s both; }

  /* --- Przewijanie: sekcje wjeżdżają z lekkim rozmyciem --- */
  .reveal.pre { opacity: 0; transform: translateY(48px) scale(.97); filter: blur(6px); }
  .reveal.pre.in { opacity: 1; transform: none; filter: none;
    transition: opacity .8s ease-out, transform 1s var(--ease-out), filter .8s ease-out; }
  .cards .reveal.pre.in:nth-child(3n+2), .spec-list .reveal.pre.in:nth-child(3n+2) { transition-delay: .1s; }
  .cards .reveal.pre.in:nth-child(3n+3), .spec-list .reveal.pre.in:nth-child(3n+3) { transition-delay: .2s; }
  .reveal.in .icon, .reveal.in .spec-ico { animation: pop .6s cubic-bezier(.3, 1.8, .5, 1) .35s both; }

  .cards .card { transition: transform .25s var(--ease-out), box-shadow .25s ease; }
  .cards .card:hover .icon { transform: rotate(-6deg) scale(1.08); transition: transform .25s var(--ease-out); }
  [data-depth] { will-change: transform; }
}

@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes rise-card { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
@keyframes rise-big { from { opacity: 0; transform: translateY(90px); } to { opacity: 1; transform: none; } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes glow-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes rays-in { from { opacity: 0; transform: rotate(-35deg) scale(.6); } to { opacity: .45; transform: none; } }
@keyframes pop { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scaleY(0) scaleX(.6); } to { transform: none; } }
@keyframes light-on { 0% { fill: #E6F1FA; } 40% { fill: #FFE56B; } 100% { fill: #FFF3B0; } }
@keyframes ring { from { opacity: .9; transform: scale(.7); } to { opacity: 0; transform: scale(1.9); } }
@keyframes walk-in { from { opacity: 0; transform: translateX(-140px); } 15% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes bob { 50% { translate: 0 -3px; } }
@keyframes heart { 0% { opacity: 0; transform: translateY(10px) scale(.3); } 30% { opacity: 1; transform: translateY(0) scale(1.1); } 100% { opacity: 0; transform: translateY(-50px) scale(.9); } }
@keyframes cloud-in { from { opacity: 0; transform: translateX(-90px); } to { opacity: 1; transform: none; } }
@keyframes cloud-in-r { from { opacity: 0; transform: translateX(90px); } to { opacity: 1; transform: none; } }
@keyframes fly { from { opacity: 0; transform: translate(-160px, 40px); } 20% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes pin-drop { 0% { opacity: 0; transform: translateY(-60px); } 100% { opacity: 1; transform: none; } }

/* ==========================================================================
   WYŁĄCZNIKI – muszą być na końcu pliku
   ========================================================================== */
html[data-simple] .gfx,
html[data-contrast="high"] .gfx { display: none !important; }

html[data-simple] *, html[data-simple] *::before, html[data-simple] *::after,
html[data-contrast="high"] *, html[data-contrast="high"] *::before, html[data-contrast="high"] *::after {
  animation: none !important;
  transition: none !important;
}
html[data-simple] .reveal.pre,
html[data-contrast="high"] .reveal.pre { opacity: 1 !important; transform: none !important; }

@media print {
  .gfx { display: none !important; }
  .reveal.pre { opacity: 1 !important; transform: none !important; }
}

/* ---------- Telefon / wąski ekran ---------- */
@media (max-width: 860px) {
  :root:not([data-simple]):not([data-contrast="high"]) .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .hero-art { max-width: 440px; }
  .ph-arcs { width: 240px; right: -60px; opacity: .5; }
}