/* ==========================================================================
   Hero — powolny najazd na zdjęcie (Ken Burns), wjazd tekstu
   i pasek pokazujący czas do kolejnego slajdu.
   ========================================================================== */

:root {
    /* Przygaszona, zakurzona róż-czerwień. Pełne #e8384f zanadto ściągało
       na siebie uwagę na tle stonowanej zieleni i szarości serwisu. */
    --kolor-serca: #d1717c;
    --kolor-serca-poswiata: rgba(209, 113, 124, 0.55);
}

#hero-slide .carousel-item {
    overflow: hidden;
}

/* --------------------------- Ruch zdjęcia w tle -------------------------- */

#hero-slide .carousel-image {
    transform: scale(1.06);
    transform-origin: center 40%;
}

/* Warstwe GPU rezerwujemy tylko dla slajdu, ktory faktycznie sie porusza —
   wczesniej trzy pelnoekranowe zdjecia zajmowaly ja jednoczesnie. */
#hero-slide .carousel-item.active .carousel-image {
    will-change: transform;
}

#hero-slide .carousel-item.active .carousel-image {
    animation: hero-kenburns 9s ease-out forwards;
}

/* Kolejne slajdy dostają inny kierunek najazdu, żeby pokaz nie wyglądał
   jak trzy razy to samo. */
#hero-slide .carousel-item:nth-child(2).active .carousel-image {
    animation-name: hero-kenburns-alt;
}

#hero-slide .carousel-item:nth-child(3).active .carousel-image {
    animation-name: hero-kenburns-slow;
}

@keyframes hero-kenburns {
    from { transform: scale(1.06) translate(0, 0); }
    to   { transform: scale(1.16) translate(-1.2%, -1%); }
}

@keyframes hero-kenburns-alt {
    from { transform: scale(1.16) translate(1%, 0); }
    to   { transform: scale(1.06) translate(0, -0.6%); }
}

@keyframes hero-kenburns-slow {
    from { transform: scale(1.06) translate(0, 0.8%); }
    to   { transform: scale(1.15) translate(1%, 0); }
}

/* Delikatne przyciemnienie od dołu — podpis na jasnym zdjęciu bywał mało czytelny */
#hero-slide .carousel-item::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0) 45%);
}

/* ------------------------------ Wjazd tekstu ----------------------------- */

/* Ukryty jest tylko podpis slajdu, który i tak nie jest widoczny. Slajd
   aktywny pozostaje czytelny nawet wtedy, gdy animacja się nie wykona —
   tekst schowany w stanie bazowym potrafiłby zniknąć na dobre. */
#hero-slide .carousel-item:not(.active) .carousel-caption h1,
#hero-slide .carousel-item:not(.active) .carousel-caption p {
    opacity: 0;
}

#hero-slide .carousel-item.active .carousel-caption h1 {
    animation: hero-reveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.25s backwards;
}

#hero-slide .carousel-item.active .carousel-caption p {
    animation: hero-reveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.45s backwards;
}

@keyframes hero-reveal {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

/* ------------------------------- Strzałki -------------------------------- */

#hero-slide .carousel-control-prev,
#hero-slide .carousel-control-next {
    width: auto;
    top: auto;
    bottom: 28px;
    opacity: 1;
    z-index: 3;
}

#hero-slide .carousel-control-prev { left: 24px; }
#hero-slide .carousel-control-next { left: 84px; right: auto; }

#hero-slide .carousel-control-prev-icon,
#hero-slide .carousel-control-next-icon {
    width: 46px;
    height: 46px;
    background-size: 40% 40%;
    /* Bez backdrop-filter: strzalki leza na zdjeciu, ktore caly czas sie
       porusza, wiec rozmycie tla musialoby byc przeliczane w kazdej klatce.
       Mocniejsze wypelnienie daje ten sam efekt "szkla" za darmo. */
    background-color: rgba(255, 255, 255, 0.26);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    opacity: 1;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

#hero-slide .carousel-control-prev:hover .carousel-control-prev-icon,
#hero-slide .carousel-control-next:hover .carousel-control-next-icon,
#hero-slide .carousel-control-prev:focus-visible .carousel-control-prev-icon,
#hero-slide .carousel-control-next:focus-visible .carousel-control-next-icon {
    background-color: rgba(255, 255, 255, 0.42);
    transform: scale(1.08);
}

/* ---------------------------- Pasek postępu ------------------------------ */

.hero-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    z-index: 3;
    background: rgba(255, 255, 255, 0.22);
}

.hero-progress-bar {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: var(--primary-color, #5bc1ac);
}

.hero-progress-bar.is-running {
    animation: hero-progress var(--hero-interval, 6s) linear forwards;
}

/* Bootstrap zatrzymuje pokaz po najechaniu — pasek zatrzymujemy razem z nim */
#hero-slide:hover .hero-progress-bar {
    animation-play-state: paused;
}

@keyframes hero-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ---------------------------- Mniejsze ekrany ---------------------------- */

@media (max-width: 991px) {
    #hero-slide .carousel-control-prev { left: 12px; }
    #hero-slide .carousel-control-next { left: 64px; }

    #hero-slide .carousel-control-prev-icon,
    #hero-slide .carousel-control-next-icon {
        width: 40px;
        height: 40px;
    }
}

/* Wyłączamy ruch, gdy użytkownik prosi o ograniczenie animacji */
@media (prefers-reduced-motion: reduce) {
    #hero-slide .carousel-item.active .carousel-image {
        animation: none;
        transform: scale(1.06);
    }

    #hero-slide .carousel-item.active .carousel-caption h1,
    #hero-slide .carousel-item.active .carousel-caption p {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .hero-progress-bar.is-running {
        animation: none;
        transform: scaleX(1);
    }
}

/* ==========================================================================
   Serduszka unoszące się nad zdjęciem hero
   Warstwa czysto ozdobna — nie przechwytuje kliknięć i jest pomijana przez
   czytniki ekranu (aria-hidden ustawiane w js/hero-hearts.js).
   ========================================================================== */

.hero-hearts {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

.hero-heart {
    position: absolute;
    bottom: -40px;
    color: var(--kolor-serca);
    line-height: 1;
    opacity: 0;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    animation: hero-heart-rise var(--czas, 9s) linear var(--opoznienie, 0s) forwards;
}

/* Każdy poziom niesie jedną animację: zewnętrzny span wznosi się,
   środkowy kołysze na boki, a ikona reaguje na dotknięcie. Dzięki temu
   żadna z nich nie nadpisuje pozostałych. */
.hero-heart-sway {
    display: block;
    animation: hero-heart-sway calc(var(--czas, 9s) / 3) ease-in-out infinite;
}

.hero-heart-sway i {
    display: block;
    transition: color 0.3s ease;
}

@keyframes hero-heart-rise {
    0%   { transform: translateY(0)      scale(var(--skala, 1)); opacity: 0; }
    12%  { opacity: var(--przezroczystosc, 0.75); }
    80%  { opacity: var(--przezroczystosc, 0.75); }
    100% { transform: translateY(var(--dystans, -640px)) scale(var(--skala, 1)); opacity: 0; }
}

@keyframes hero-heart-sway {
    0%, 100% { transform: translateX(calc(var(--odchylenie, 14px) * -1)); }
    50%      { transform: translateX(var(--odchylenie, 14px)); }
}

/* Przy systemowym ograniczeniu animacji warstwa w ogóle nie powstaje
   (patrz js/hero-hearts.js), ale zabezpieczamy się też tutaj. */
@media (prefers-reduced-motion: reduce) {
    .hero-hearts {
        display: none;
    }
}

/* --------------------- Reakcja na dotknięcie serduszka -------------------- */

/* Warstwa nadal przepuszcza kliknięcia (patrz .hero-hearts), a strzałki
   karuzeli leżą wyżej (z-index 3), więc serduszka niczego nie zasłaniają. */
.hero-heart {
    pointer-events: auto;
    cursor: pointer;
}

/* Dotknięte serduszko nie znika — rozjaśnia się, nabiera ciepłej poświaty
   i wraca do swojego rytmu. Gest ma dodawać, nie odbierać. */
.hero-heart.is-dotkniete .hero-heart-sway i {
    animation: hero-heart-bloom 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes hero-heart-bloom {
    0% {
        transform: scale(1);
        filter: brightness(1);
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    }
    35% {
        transform: scale(1.45);
        filter: brightness(1.12);
        text-shadow: 0 0 16px var(--kolor-serca-poswiata), 0 2px 6px rgba(0, 0, 0, 0.25);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    }
}

/* Serduszka wyklute z dotkniętego. Ustawiamy je punktowo (left/top w miejscu
   rodzica), więc muszą znieść startowe `bottom` i animację wznoszenia
   z reguły bazowej — stąd podwójna klasa, żeby wygrać specyficznością. */
.hero-heart.hero-heart-mlode {
    bottom: auto;
    animation: hero-heart-hatch var(--czas-mlode, 4s)
               cubic-bezier(0.22, 1, 0.36, 1) var(--opoznienie-mlode, 0s) forwards;
}

@keyframes hero-heart-hatch {
    0% {
        transform: translate(-50%, -50%) scale(0.15);
        opacity: 0;
    }
    16% {
        transform: translate(calc(-50% + var(--dx, 30px) * 0.3),
                             calc(-50% + var(--dy, -180px) * 0.06)) scale(1.15);
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--dx, 30px)),
                             calc(-50% + var(--dy, -180px))) scale(0.85);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-heart.is-dotkniete .hero-heart-sway i {
        animation: none;
    }
}

/* ==========================================================================
   Punkt kadrowania zdjęć hero
   Kadr hero jest znacznie szerszy niż wyższy, więc na wąskich ekranach
   z szerokiego zdjęcia zostaje tylko środek. Domyślnie wypadał on na tle,
   a nie na twarzach — dlatego każdy slajd dostaje własny punkt zaczepienia.
   ========================================================================== */

#hero-slide .carousel-image {
    object-fit: cover;
    object-position: center center;
}

@media (max-width: 991px) {
    /* Slajd 1 — chłopiec po lewej, opiekunka po prawej: trzymamy się chłopca */
    #hero-slide .carousel-item:nth-child(1) .carousel-image {
        object-position: 26% center;
    }

    /* Slajd 2 — roześmiany chłopiec jest po prawej stronie kadru */
    #hero-slide .carousel-item:nth-child(2) .carousel-image {
        object-position: 68% center;
    }

    /* Slajd 3 — chłopiec w foteliku stoi pośrodku, wystarczy podnieść kadr */
    #hero-slide .carousel-item:nth-child(3) .carousel-image {
        object-position: center 38%;
    }
}

/* ==========================================================================
   Serduszko zamiast kropki nad literą w hasłach hero
   Litera zostaje w kodzie w całości — obcinamy tylko jej kropkę, a w to
   miejsce wchodzi serduszko. Dzięki temu czytnik ekranu i wyszukiwarka
   nadal widzą poprawny wyraz.
   ========================================================================== */

.serce-kropka {
    position: relative;
    display: inline-block;
}

.serce-kropka-litera {
    display: inline-block;
    /* Ujemne wartości po bokach i u dołu poszerzają obszar widoczny,
       żeby nie uciąć ogonka "j" ani nie zjeść odstępów międzyliterowych. */
    clip-path: inset(var(--przyciecie, 0.34em) -0.2em -0.4em -0.2em);
}

.serce-kropka::before {
    content: "\F415";                 /* bootstrap-icons: heart-fill */
    font-family: "bootstrap-icons";
    position: absolute;
    left: 50%;
    top: var(--serce-gora, 0.30em);
    transform: translateX(-50%);
    font-size: var(--serce-rozmiar, 0.26em);
    line-height: 1;
    color: var(--kolor-serca);
    pointer-events: none;
}