/* ============================================================
   CHARACTER ANIMATIONS — FNiR
   3D tilt, conic-gradient glow, particles, lightning, gears
   ============================================================ */

@property --glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

:root {
  --copper: #c47a3a;
  --copper-light: #e8a54c;
  --gold: #d4a843;
  --lightning: #ffd944;
  --lightning-glow: #ffec80;
  --orange: #e87b2a;
}

/* ===== Wrapper added by JS around each .character-img ===== */
.character-wrap {
  position: relative;
  display: block;
  perspective: 1000px;
  border-radius: 12px;
  /* allow gears/particles to spill outside the image edges */
  overflow: visible;
}

/* The image itself */
.character-wrap > .character-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow:
    0 0 40px rgba(196, 122, 58, 0.20),
    0 20px 60px rgba(0, 0, 0, 0.40);
  transition:
    transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.3s ease;
  transform-style: preserve-3d;
  will-change: transform;
  position: relative;
  z-index: 2;
}

.character-wrap:hover > .character-img {
  box-shadow:
    0 0 60px rgba(196, 122, 58, 0.40),
    0 0 120px rgba(196, 122, 58, 0.15),
    0 0 20px rgba(255, 217, 68, 0.20);
}

/* ===== Conic-gradient border glow (rotating) ===== */
.character-wrap::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 16px;
  background: conic-gradient(
    from var(--glow-angle),
    var(--copper)       0deg,
    var(--gold)        90deg,
    var(--copper-light) 180deg,
    var(--orange)      270deg,
    var(--copper)      360deg
  );
  z-index: 0;
  opacity: 0;
  filter: blur(8px);
  transition: opacity 0.4s ease;
  animation: charGlowSpin 4s linear infinite;
  pointer-events: none;
}

.character-wrap:hover::before {
  opacity: 0.85;
}

@keyframes charGlowSpin {
  to { --glow-angle: 360deg; }
}

/* ===== Particles ===== */
.char-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  box-shadow: 0 0 8px currentColor;
  animation: charEnergyFloat var(--p-dur, 3s) ease-out forwards;
  will-change: transform, opacity;
}

@keyframes charEnergyFloat {
  0% {
    transform: scale(0) translate(0, 0);
    opacity: 0;
  }
  20% {
    transform: scale(1) translate(var(--tx, 0), var(--ty, 0));
    opacity: 1;
  }
  100% {
    transform:
      scale(0)
      translate(calc(var(--tx, 0) * 2), calc(var(--ty, 0) * 2));
    opacity: 0;
  }
}

/* ===== Lightning ⚡ ===== */
.char-lightning {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  font-size: 28px;
  line-height: 1;
  text-shadow:
    0 0 12px var(--lightning-glow),
    0 0 4px #fff;
  animation: charLightningFlash 0.3s ease-out forwards;
  will-change: transform, opacity;
}

@keyframes charLightningFlash {
  0%   { opacity: 0; transform: scale(0.5); }
  20%  { opacity: 1; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(0.5); }
}

/* ===== Steampunk gears ⚙ ===== */
.char-gear {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  color: var(--copper);
  text-shadow: 0 0 4px rgba(196, 122, 58, 0.30);
  animation:
    charFloatGear var(--gear-dur, 7s) ease-in-out infinite,
    charGearOpacity var(--gear-dur, 7s) ease-in-out infinite;
  animation-delay: var(--gear-delay, 0s);
  will-change: transform, opacity;
}

@keyframes charFloatGear {
  0%, 100% { transform: translateY(0)     rotate(0deg);   }
  50%      { transform: translateY(-20px) rotate(180deg); }
}

@keyframes charGearOpacity {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 0.40; }
}

/* ===== Mobile — przyciszone ===== */
@media (max-width: 768px) {
  .char-gear { display: none; }
  .character-wrap::before { animation-duration: 6s; }
  /* particle interval is set in JS (500ms instead of 200ms) */
}

/* ===== Reduced motion — szanuj preferencje ===== */
@media (prefers-reduced-motion: reduce) {
  .character-wrap::before,
  .char-particle,
  .char-lightning,
  .char-gear {
    animation: none !important;
    transition: none !important;
  }
  .character-wrap:hover > .character-img {
    transform: none !important;
  }
}

/* ===== Special-cases — niektóre miejsca trzymają własną geometrię ===== */

/* Hero (index) — Królusek wycentrowany na okrągłym tle, NIE rozciąga się */
.hero-visual { position: relative; }

/* Bubble z dymkiem MUSI być nad zdjęciem Króluska — perspective tworzy stacking context */
.hero-visual .hero-quote-bubble {
  position: relative;
  z-index: 20;
}

.hero-visual .character-wrap {
  display: inline-block;
  width: auto;
  max-width: 100%;
  position: relative;
  z-index: 1; /* pod bubble */
}
.hero-visual .character-wrap > .character-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 580px;
  display: inline-block;
}

/* Detail-visual (atrakcje) — fill column, contain inside */
.detail-visual .character-wrap {
  width: 100%;
  height: 100%;
}
.detail-visual .character-wrap > .character-img {
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
}

/* Member-card (zespól) — kwadratowy slot z cover */
.member-card .visual .character-wrap {
  width: 100%;
  height: 100%;
}
.member-card .visual .character-wrap > .character-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Gallery — kafelki z cover */
.gallery-item .character-wrap {
  width: 100%;
  height: 100%;
}
.gallery-item .character-wrap > .character-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Team-poster na index (sekcja Zespół) — pozwól na rosnięcie do 100% kolumny */
.team-visual .character-wrap {
  width: 100%;
  display: block;
}
.team-visual .character-wrap > .character-img {
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* Team-poster na zespol.html hero — respektuj inline max-width 520px */
.zespol-hero .character-wrap,
.page-hero .character-wrap {
  display: inline-block;
  width: auto;
  max-width: 100%;
}
.zespol-hero .character-wrap > .character-img,
.page-hero .character-wrap > .character-img {
  width: 100%;
  height: auto;
  max-width: 520px; /* z inline style — zgodnie z oryginałem */
}

/* ==========================================================
   ROTUJĄCE ZĘBATKI W TLE (.cog-bg)
   style.css ma już cog-rotate 60s — przyspieszam do 30s
   ========================================================== */
.cog-bg {
  animation-duration: 30s !important;
}
.cog-bg.cog-2,
.hero .cog-bg.cog-2 {
  animation-duration: 45s !important;
  /* odwrotny kierunek już ustawiony w style.css */
}

/* ==========================================================
   3D TILT + LIFT NA KARTACH (CSS-only, bez JS)
   Karty: atrakcje (.attr-card), aktualności (.news-card),
   salki (.theme-card, .room-card), packages (.pkg-card),
   szkoły (.group-card), firmy (.event-card),
   cennik (.price-card), zespół (.member-card)
   ========================================================== */

.attr-card,
.attraction-card,
.news-card,
.theme-card,
.room-card,
.pkg-card,
.package-card,
.price-card,
.group-card,
.event-card,
.member-card {
  transition:
    transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.4s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Hover — lift + lekki 3D tilt + intensywniejszy cień */
.attr-card:hover,
.attraction-card:hover,
.news-card:hover,
.theme-card:hover,
.room-card:hover,
.pkg-card:hover,
.package-card:hover,
.price-card:hover,
.group-card:hover,
.event-card:hover,
.member-card:hover {
  transform: perspective(1200px) translateY(-8px) rotateX(2deg) rotateY(-1deg) scale(1.02);
  box-shadow:
    0 24px 60px rgba(26, 42, 74, 0.25),
    0 0 30px rgba(196, 122, 58, 0.10);
}

/* Member-card już ma własny hover style.css — wzmocnij go subtelnie */
.member-card:hover {
  transform: perspective(1200px) translateY(-6px) rotateX(1deg) scale(1.015);
}

/* Mobile — tilt OFF, lift ON */
@media (max-width: 768px) {
  .attr-card:hover,
  .attraction-card:hover,
  .news-card:hover,
  .theme-card:hover,
  .room-card:hover,
  .pkg-card:hover,
  .package-card:hover,
  .price-card:hover,
  .group-card:hover,
  .event-card:hover,
  .member-card:hover {
    transform: translateY(-4px);
  }
}

/* Reduced motion — wszystko OFF */
@media (prefers-reduced-motion: reduce) {
  .cog-bg { animation: none !important; }
  .attr-card,
  .attraction-card,
  .news-card,
  .theme-card,
  .room-card,
  .pkg-card,
  .package-card,
  .price-card,
  .group-card,
  .event-card,
  .member-card {
    transition: none !important;
  }
  .attr-card:hover,
  .attraction-card:hover,
  .news-card:hover,
  .theme-card:hover,
  .room-card:hover,
  .pkg-card:hover,
  .package-card:hover,
  .price-card:hover,
  .group-card:hover,
  .event-card:hover,
  .member-card:hover {
    transform: none !important;
  }
}

/* ==========================================================
   ROTUJĄCE ZĘBATKI W TLE (.cog-bg) — speed up
   style.css ma cog-rotate 60s; przyspieszam do 30s
   ========================================================== */
.cog-bg {
  animation-duration: 30s !important;
}
.cog-bg.cog-2,
.hero .cog-bg.cog-2 {
  animation-duration: 45s !important;
}

/* ==========================================================
   3D TILT + LIFT NA KARTACH (CSS-only)
   ========================================================== */
.attr-card, .attraction-card, .news-card, .theme-card, .room-card,
.pkg-card, .package-card, .price-card, .group-card, .event-card,
.member-card {
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.4s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

.attr-card:hover, .attraction-card:hover, .news-card:hover,
.theme-card:hover, .room-card:hover, .pkg-card:hover,
.package-card:hover, .price-card:hover, .group-card:hover,
.event-card:hover, .member-card:hover {
  transform: perspective(1200px) translateY(-8px) rotateX(2deg) rotateY(-1deg) scale(1.02);
  box-shadow: 0 24px 60px rgba(26, 42, 74, 0.25),
              0 0 30px rgba(196, 122, 58, 0.10);
}

.member-card:hover {
  transform: perspective(1200px) translateY(-6px) rotateX(1deg) scale(1.015);
}

@media (max-width: 768px) {
  .attr-card:hover, .attraction-card:hover, .news-card:hover,
  .theme-card:hover, .room-card:hover, .pkg-card:hover,
  .package-card:hover, .price-card:hover, .group-card:hover,
  .event-card:hover, .member-card:hover {
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cog-bg { animation: none !important; }
  .attr-card, .attraction-card, .news-card, .theme-card, .room-card,
  .pkg-card, .package-card, .price-card, .group-card, .event-card,
  .member-card { transition: none !important; }
  .attr-card:hover, .attraction-card:hover, .news-card:hover,
  .theme-card:hover, .room-card:hover, .pkg-card:hover,
  .package-card:hover, .price-card:hover, .group-card:hover,
  .event-card:hover, .member-card:hover {
    transform: none !important;
  }
}

/* =========================================================
   HERO (index.html) — poziomy baner scenowy z postaciami
   Grafika 1672×941 w miejsce pionowego portretu Króluska.
   Większe zaokrąglenie + miękki, premium cień na kremowym tle.
   ========================================================= */
.hero-visual .character-wrap {
  display: block;
  width: 100%;                      /* baner wypełnia całą prawą kolumnę */
}
.hero-visual .character-wrap,
.hero-visual .character-wrap > .character-img {
  border-radius: 22px;
}
.hero-visual .character-wrap::before {
  border-radius: 26px;              /* obracająca się ramka-glow pasuje do rogów */
}
.hero-visual .character-wrap > .character-img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;                 /* poziomy kadr — bez limitu wysokości portretu */
  filter: none;                     /* rezygnujemy z drop-shadow; cień robi box-shadow */
  box-shadow:
    0 20px 44px rgba(26, 42, 74, 0.16),
    0 6px 16px rgba(26, 42, 74, 0.10);
}
.hero-visual .character-wrap:hover > .character-img {
  box-shadow:
    0 28px 60px rgba(232, 102, 59, 0.26),
    0 8px 18px rgba(26, 42, 74, 0.12);
}
/* Ambient glow za banerem — szeroka, miękka elipsa zamiast koła (tylko mobile/tablet) */
.hero-visual::before {
  width: min(680px, 108%);
  height: 320px;
}

/* =========================================================
   HERO — DESKTOP (≥981px): grafika jako pełne tło hero,
   zakotwiczona do prawej (postacie po prawej), a tekst
   nałożony na lewą, kremową część sceny.
   Tło hero = #FAE5CF (krem grafiki) → brak szwu na styku.
   ========================================================= */
@media (min-width: 981px) {
  /* Sekcja pełną szerokością = płaski krem. Grafika trzyma się WYŚRODKOWANEGO
     kontenera (max 1180px), więc na szerokich monitorach nie ucieka do krawędzi
     ekranu — tekst i postacie są zawsze blisko siebie (koniec z pustą dziurą). */
  .hero {
    background: #FAE5CF;
    padding: 0;
    overflow: hidden;
  }
  /* Obszar hero zablokowany do proporcji grafiki (1672:941) → wypełnia się
     idealnie: bez przycinania (widać szyldy u góry i stopy u dołu) i bez luki. */
  .hero > .container {
    position: relative;
    aspect-ratio: 1672 / 941;
    background: url("../img/hero-postacie.webp") no-repeat center / cover;
    display: flex;
    align-items: center;
  }
  .hero-inner { width: 100%; display: block; }
  /* Treść wyłącznie na lewej, kremowej części sceny */
  .hero-text { max-width: 37%; }
  .hero-badge { margin-bottom: 14px; }
  .hero h1 { font-size: clamp(1.7rem, 2.5vw, 2.5rem); margin-bottom: 14px; }
  .hero-subtitle { max-width: 100%; font-size: .98rem; margin-bottom: 18px; }
  .hero-buttons { margin-bottom: 20px; gap: 12px; }
  .hero-stats { max-width: 100%; gap: 10px; }
  /* obraz + dymek są teraz częścią sceny w tle — chowamy blok wizualny na desktop */
  .hero-visual { display: none; }
}