/* ══════════════════════════════════════════════
   HERO — w pełni animowane tło CSS (bez obrazu)
   ══════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #0E1C13; /* baza: głęboka leśna zieleń */
}

/* ── 1. Warstwa bazy (powoli dryfuje) ── */
.hero__bg-base {
  position: absolute;
  top: -60px; left: -60px; right: -60px; bottom: -60px;
  background:
    linear-gradient(
      148deg,
      #0D1C10 0%,
      #18281C 28%,
      #22201E 58%,
      #1A1220 100%
    );
  animation: bgDrift 28s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes bgDrift {
  0%   { transform: translate(0,    0)    scale(1);    }
  33%  { transform: translate(-2%,  1.5%) scale(1.03); }
  66%  { transform: translate(1.5%,-1%)   scale(1.02); }
  100% { transform: translate(-1%,  2%)   scale(1.04); }
}

/* ── 2. Obracający się stożkowy blask (bardzo subtelny) ── */
.hero__bg-sweep {
  position: absolute;
  /* Musi być większy niż viewport, żeby obrót nie odsłaniał krawędzi */
  top: 50%; left: 50%;
  width: 200vmax; height: 200vmax;
  transform: translate(-50%, -50%) rotate(0deg);
  background: conic-gradient(
    from 0deg at 40% 45%,
    transparent              0deg,
    rgba(92,140,96,  0.07)  55deg,
    transparent             115deg,
    rgba(196,163,90, 0.05) 195deg,
    transparent             255deg,
    rgba(130,45,55,  0.06) 310deg,
    transparent             360deg
  );
  animation: sweepRotate 50s linear infinite;
  z-index: 1;
  pointer-events: none;
}
@keyframes sweepRotate {
  from { transform: translate(-50%,-50%) rotate(0deg);   }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}

/* ── 3. Orby (rozmyte kule świetlne) ── */
.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  pointer-events: none;
  z-index: 2;
}

/* Szałwiowo-zielony — lewy górny róg */
.hero__orb--sage {
  width: 720px; height: 720px;
  background: radial-gradient(circle,
    rgba(80,130,86, 0.52) 0%,
    rgba(50, 90,56, 0.22) 45%,
    transparent           72%);
  top: -220px; left: -180px;
  animation: orbSage 22s ease-in-out infinite;
}
@keyframes orbSage {
  0%,100% { transform: translate(0,   0)    scale(1);    }
  30%     { transform: translate(90px, 70px) scale(1.14); }
  65%     { transform: translate(-40px,110px) scale(0.91); }
}

/* Bordo/mak — prawy dolny róg */
.hero__orb--burgundy {
  width: 560px; height: 560px;
  background: radial-gradient(circle,
    rgba(140,46,58, 0.58) 0%,
    rgba(100,28,38, 0.22) 45%,
    transparent           70%);
  bottom: -170px; right: -130px;
  animation: orbBurgundy 28s ease-in-out infinite;
}
@keyframes orbBurgundy {
  0%,100% { transform: translate(0,     0)    scale(1);    }
  40%     { transform: translate(-110px,-90px) scale(1.20); }
  70%     { transform: translate(-70px, -30px) scale(0.94); }
}

/* Złoty — środek-prawy (pulsuje) */
.hero__orb--gold {
  width: 380px; height: 380px;
  background: radial-gradient(circle,
    rgba(196,163,90, 0.38) 0%,
    rgba(180,140,55, 0.12) 50%,
    transparent            70%);
  top: 28%; right: 12%;
  animation: orbGold 19s ease-in-out infinite;
}
@keyframes orbGold {
  0%,100% { transform: translate(0,    0)    scale(1);    opacity:.9; }
  35%     { transform: translate(-55px,80px) scale(1.28); opacity:.65; }
  70%     { transform: translate(40px, 30px) scale(0.82); opacity:.85; }
}

/* Głęboka zieleń — środek-lewy (powolny) */
.hero__orb--deep {
  width: 450px; height: 450px;
  background: radial-gradient(circle,
    rgba(38,72,44, 0.65) 0%,
    transparent          65%);
  top: 35%; left: 5%;
  animation: orbDeep 24s ease-in-out infinite;
}
@keyframes orbDeep {
  0%,100% { transform: translate(0,   0);   }
  50%     { transform: translate(70px,-55px) scale(1.12); }
}

/* ── 4. Overlay — zapewnia czytelność tekstu ── */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    148deg,
    rgba(8, 18,10, 0.62) 0%,
    rgba(18,18,18, 0.32) 55%,
    rgba(80,28,36, 0.22) 100%
  );
  z-index: 3;
}

/* ── 5. Warstwa płatków ── */
.hero__petals {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 4;
}

.petal {
  position: absolute;
  top: -30px;
  border-radius: 50% 50% 50% 50% / 38% 62% 38% 62%;
  animation: petalFall linear infinite;
  filter: blur(.6px);
}

/* ── 6. Treść hero ── */
.hero__content {
  position: relative;
  z-index: 5;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: calc(var(--nav-height) + 60px) 24px 100px;
  width: 100%;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 24px;
  animation: fadeInUp .8s ease .15s both;
}
.hero__eyebrow::before,
.hero__eyebrow::after {
  content: '';
  display: block;
  width: 22px; height: 1px;
  background: var(--gold-light);
  opacity: .6;
}

.hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5.8vw, 4.6rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.13;
  margin-bottom: 26px;
  max-width: 800px;
  animation: fadeInUp .8s ease .35s both;
}
.hero__title em {
  font-style: italic;
  color: var(--gold-light);
}

.hero__subtitle {
  font-size: clamp(.95rem, 2vw, 1.1rem);
  font-weight: 300;
  color: rgba(255,255,255,.78);
  max-width: 500px;
  line-height: 1.82;
  margin-bottom: 46px;
  animation: fadeInUp .8s ease .55s both;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  animation: fadeInUp .8s ease .75s both;
}

/* Pływająca odznaka (desktop) */
.hero__badge {
  position: absolute;
  bottom: 96px; right: 36px;
  background: rgba(255,255,255,.09);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-lg);
  padding: 20px 26px;
  text-align: center;
  z-index: 5;
  animation: fadeIn 1s ease 1.1s both;
}
.hero__badge-number {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}
.hero__badge-text {
  display: block;
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin-top: 6px;
}

/* Wskazówka scrolla */
.hero__scroll {
  position: absolute;
  bottom: 30px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.38);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  z-index: 5;
  animation: fadeIn 1s ease 1.5s both;
}
.hero__scroll-line {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, rgba(255,255,255,.42), transparent);
  animation: floatY 2.4s ease infinite;
}

/* ════════════════════════════════
   MOBILE — uproszczone, lżejsze
   ════════════════════════════════ */
@media (max-width: 768px) {
  /* Schowaj ciężkie orby */
  .hero__orb--gold { display: none; }
  .hero__orb--deep { display: none; }

  /* Zmniejsz pozostałe */
  .hero__orb--sage {
    width: 420px; height: 420px;
    top: -120px; left: -120px;
    filter: blur(56px);
  }
  .hero__orb--burgundy {
    width: 320px; height: 320px;
    bottom: -100px; right: -80px;
    filter: blur(50px);
  }

  .hero__content {
    padding: calc(var(--nav-height) + 40px) 20px 116px;
    text-align: center;
  }
  .hero__eyebrow           { justify-content: center; }
  .hero__eyebrow::before,
  .hero__eyebrow::after    { display: none; }
  .hero__subtitle          { max-width: 100%; }
  .hero__actions           { justify-content: center; }
  .hero__badge             { display: none; }
}
@media (max-width: 480px) {
  /* Na bardzo małych ekranach — przyciski na pełną szerokość */
  .hero__actions { flex-direction: column; align-items: center; }
  .hero__actions .btn { width: 100%; max-width: 280px; }
}

/* ════════════════════════════════════════
   PORTRET — kobieta z wiankiem z kwiatów
   ════════════════════════════════════════ */
.hero__portrait {
  position: absolute;
  right: 7%;
  top: 50%;
  transform: translateY(-46%);
  z-index: 5;
  width: clamp(210px, 26vw, 380px);
  animation: fadeIn 1.1s ease 1s both;
  pointer-events: none;
}

/* Miękka, rozmyta aureola za zdjęciem */
.hero__portrait-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(
    ellipse,
    rgba(196,163,90,.28) 0%,
    rgba(122,158,126,.18) 40%,
    transparent 72%
  );
  border-radius: 50%;
  animation: orbGold 14s ease-in-out infinite;
  z-index: 0;
}

/* Organiczna ramka zdjęcia */
.hero__portrait-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 3 / 4;
  /* Asymetryczny kształt — bardziej organiczny, kwiatowy */
  border-radius: 52% 48% 55% 45% / 46% 46% 54% 54%;
  overflow: hidden;
  /* Złota ramka + cień */
  box-shadow:
    0 0 0 2px rgba(196,163,90,.55),
    0 0 0 7px rgba(196,163,90,.12),
    0 28px 70px rgba(0,0,0,.55),
    inset 0 0 30px rgba(0,0,0,.15);
  /* Subtelna animacja kształtu — "oddycha" */
  animation: portraitMorph 12s ease-in-out infinite;
}

@keyframes portraitMorph {
  0%,100% { border-radius: 52% 48% 55% 45% / 46% 46% 54% 54%; }
  25%      { border-radius: 46% 54% 49% 51% / 52% 50% 50% 48%; }
  50%      { border-radius: 55% 45% 52% 48% / 44% 54% 46% 56%; }
  75%      { border-radius: 48% 52% 46% 54% / 50% 46% 54% 50%; }
}

.hero__portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Skupia się na górze — pokazuje twarz/wianek */
  object-position: center 15%;
  /* Lekki ciepły filtr */
  filter: brightness(1.05) saturate(1.1);
  transition: transform 8s ease;
}
/* Ken Burns na zdjęciu */
.hero__portrait-frame img:hover {
  transform: scale(1.04);
}

/* Etykieta pod zdjęciem */
.hero__portrait-label {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(196,163,90,.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(196,163,90,.35);
  border-radius: var(--radius-full);
  padding: 6px 18px;
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-light);
  white-space: nowrap;
  z-index: 2;
}

/* ══════════════════════════════════════════════
   PORTRET 2 — bukiet czerwonych róż (dół prawy)
   ══════════════════════════════════════════════ */
.hero__portrait--2 {
  right: 1%;
  top: auto;
  bottom: 72px;
  transform: none;
  width: clamp(140px, 15vw, 210px);
  z-index: 6;                        /* przed portretem głównym */
  animation-delay: 1.3s;
}

.hero__portrait-glow--red {
  background: radial-gradient(
    ellipse,
    rgba(200, 45, 50, .30) 0%,
    rgba(140, 30, 36, .12) 45%,
    transparent 70%
  );
  animation: orbBurgundy 16s ease-in-out infinite;
}

.hero__portrait-frame--2 {
  aspect-ratio: 1 / 1;              /* kwadratowe = zdjęcie róż lepiej wygląda */
  border-radius: 48% 52% 45% 55% / 52% 48% 52% 48%;
  box-shadow:
    0 0 0 2px rgba(200,50,50,.55),
    0 0 0 7px rgba(200,50,50,.12),
    0 22px 55px rgba(0,0,0,.55),
    inset 0 0 24px rgba(0,0,0,.15);
  animation: portraitMorph2 9s ease-in-out infinite;
}
@keyframes portraitMorph2 {
  0%,100% { border-radius: 48% 52% 45% 55% / 52% 48% 52% 48%; }
  33%     { border-radius: 54% 46% 52% 48% / 46% 54% 46% 54%; }
  66%     { border-radius: 44% 56% 48% 52% / 54% 46% 54% 46%; }
}

/* ════════════════════════════════════════════════════
   PORTRET 3 — serce z białą różą (góra, mniejsze)
   ════════════════════════════════════════════════════ */
.hero__portrait--3 {
  right: 26%;
  top: 7%;
  transform: none;
  width: clamp(120px, 13vw, 180px);
  z-index: 4;                        /* za portretem głównym */
  animation-delay: 1.6s;
}

.hero__portrait-glow--white {
  background: radial-gradient(
    ellipse,
    rgba(255,235,215, .22) 0%,
    rgba(196,163, 90, .10) 45%,
    transparent 68%
  );
  animation: orbGold 18s ease-in-out infinite;
}

.hero__portrait-frame--3 {
  aspect-ratio: 3 / 4;
  border-radius: 50% 50% 46% 54% / 46% 54% 46% 54%;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.28),
    0 0 0 6px rgba(255,255,255,.08),
    0 18px 44px rgba(0,0,0,.50),
    inset 0 0 20px rgba(0,0,0,.12);
  animation: portraitMorph3 15s ease-in-out infinite;
}
@keyframes portraitMorph3 {
  0%,100% { border-radius: 50% 50% 46% 54% / 46% 54% 46% 54%; }
  40%     { border-radius: 44% 56% 52% 48% / 52% 48% 52% 48%; }
  70%     { border-radius: 54% 46% 48% 52% / 48% 52% 46% 54%; }
}

/* ── Ukrywamy wszystkie portrety poniżej 1024px ── */
@media (max-width: 1024px) {
  .hero__portrait { display: none; }
}

/* ── Na ekranach 1024-1199px tylko portret główny ── */
@media (min-width: 1025px) and (max-width: 1199px) {
  .hero__portrait--2,
  .hero__portrait--3 { display: none; }
}