/* ═══════════════════════════════════════════════

   Pokój Życzeń — style.css

   Aktualizacja: magiczne ornamenty + intro screen

   ═══════════════════════════════════════════════ */



:root {

  --bg: #080609;

  --bg-soft: #130b12;

  --panel: rgba(20, 13, 20, 0.82);

  --panel-strong: rgba(32, 19, 24, 0.94);

  --text: #fff7e8;

  --muted: #d8c8aa;

  --soft: rgba(255, 247, 232, 0.72);

  --gold: #d8a846;

  --gold-bright: #f3cd75;

  --wine: #70203a;

  --green: #264935;

  --blue: #233b59;

  --line: rgba(216, 168, 70, 0.22);

  --shadow: 0 26px 80px rgba(0, 0, 0, 0.44);

  --radius: 8px;

  --max: 1180px;

}



* {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  margin: 0;

  color: var(--text);

  background:

    radial-gradient(circle at 12% 6%, rgba(112, 32, 58, 0.34), transparent 30rem),

    radial-gradient(circle at 86% 18%, rgba(35, 59, 89, 0.28), transparent 28rem),

    linear-gradient(180deg, #070508 0%, #130b12 52%, #070508 100%);

  font-family: Georgia, "Times New Roman", serif;

  font-size: 18px;

  line-height: 1.65;

  overflow-x: hidden;

  -webkit-font-smoothing: antialiased;

}



body::before {

  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: -1;

  background-image:

    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);

  background-size: 58px 58px;

  mask-image: linear-gradient(180deg, rgba(0,0,0,0.75), transparent 72%);

}



img {

  display: block;

  max-width: 100%;

  height: auto;

}



a {

  color: inherit;

}



button,

input,

textarea {

  font: inherit;

}



/* ─── INTRO SCREEN ─── */

#intro-screen {

  position: fixed;

  inset: 0;

  z-index: 9999;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  background: #07050a;

  opacity: 1;

  transition: opacity 0.9s ease;

  pointer-events: all;

}



#intro-screen.fade-out {

  opacity: 0;

  pointer-events: none;

}



#intro-screen.hidden {

  display: none;

}



.intro-logo-wrap {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 1.4rem;

  animation: introFadeIn 0.8s ease forwards;

  opacity: 0;

}



@keyframes introFadeIn {

  from { opacity: 0; transform: translateY(12px); }

  to   { opacity: 1; transform: translateY(0); }

}



.intro-logo-wrap img {

  width: clamp(100px, 20vw, 160px);

  height: auto;

  filter: drop-shadow(0 0 32px rgba(243, 205, 117, 0.45));

}



.intro-title {

  color: var(--gold-bright);

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(1.4rem, 4vw, 2.2rem);

  letter-spacing: 0.22em;

  text-transform: uppercase;

  text-align: center;

  margin: 0;

}



.intro-subtitle {

  color: var(--muted);

  font-family: "Trebuchet MS", Arial, sans-serif;

  font-size: 0.72rem;

  letter-spacing: 0.28em;

  text-transform: uppercase;

  text-align: center;

  margin: -0.8rem 0 0;

}



/* Magiczny romb / ornament pod logiem */

.intro-ornament {

  width: 140px;

  height: 2px;

  position: relative;

  margin-top: 0.4rem;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0;

}



.intro-ornament::before,

.intro-ornament::after {

  content: "";

  flex: 1;

  height: 1px;

  background: linear-gradient(90deg, transparent, var(--gold));

}



.intro-ornament::after {

  background: linear-gradient(90deg, var(--gold), transparent);

}



.intro-diamond {

  width: 7px;

  height: 7px;

  background: var(--gold-bright);

  transform: rotate(45deg);

  flex-shrink: 0;

  box-shadow: 0 0 10px rgba(243, 205, 117, 0.6);

}



/* ─── SKIP LINK ─── */

.skip-link {

  position: fixed;

  top: 0.75rem;

  left: 0.75rem;

  z-index: 20;

  transform: translateY(-140%);

  padding: 0.65rem 0.9rem;

  color: #160d0f;

  background: var(--gold-bright);

  border-radius: var(--radius);

  transition: transform 0.2s ease;

}



.skip-link:focus {

  transform: translateY(0);

}



/* ─── LAYOUT ─── */

.container {

  width: min(var(--max), calc(100% - 2rem));

  margin-inline: auto;

}



/* ─── SECTION PAD ─── */

.section-pad {

  padding: clamp(4rem, 8vw, 7rem) 0;

  contain: layout;

}



/* ─── SEKCJA KICKER + OZDOBNIK ─── */

.section-kicker {

  display: inline-flex;

  align-items: center;

  gap: 0.65rem;

  margin-bottom: 0.85rem;

  color: var(--gold-bright);

  font-family: "Trebuchet MS", Arial, sans-serif;

  font-size: 0.74rem;

  font-weight: 700;

  letter-spacing: 0.18em;

  text-transform: uppercase;

}



.section-kicker::before {

  content: "";

  width: 2.2rem;

  height: 1px;

  background: var(--gold);

}



/* ─── MAGICZNY SEPARATOR SVG ─── */

.magic-divider {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0;

  margin: 0 auto;

  width: 100%;

  max-width: 560px;

  padding: clamp(1.5rem, 4vw, 2.5rem) 0;

  opacity: 0.55;

}



.magic-divider svg {

  flex-shrink: 0;

}



.magic-divider::before,

.magic-divider::after {

  content: "";

  flex: 1;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(216, 168, 70, 0.5));

}



.magic-divider::after {

  background: linear-gradient(90deg, rgba(216, 168, 70, 0.5), transparent);

}



/* ─── AMBIENT PARTICLES (tło strony) ─── */

.ambient-stars {

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 0;

  overflow: hidden;

}



.ambient-stars span {

  position: absolute;

  border-radius: 50%;

  background: var(--gold-bright);

  animation: twinkle var(--dur, 4s) var(--delay, 0s) ease-in-out infinite alternate;

  opacity: 0;

}



@keyframes twinkle {

  0%   { opacity: 0; transform: scale(0.7); }

  50%  { opacity: var(--max-op, 0.35); }

  100% { opacity: 0.05; transform: scale(1.1); }

}



/* ─── CORNER ORNAMENTS na sekcjach ─── */

.ornament-section {

  position: relative;

}



.ornament-section::before,

.ornament-section::after {

  content: "";

  position: absolute;

  width: 60px;

  height: 60px;

  pointer-events: none;

  opacity: 0.25;

}



.ornament-section::before {

  top: 1.5rem;

  left: 1.5rem;

  border-top: 1px solid var(--gold);

  border-left: 1px solid var(--gold);

}



.ornament-section::after {

  bottom: 1.5rem;

  right: 1.5rem;

  border-bottom: 1px solid var(--gold);

  border-right: 1px solid var(--gold);

}



/* ─── TYPOGRAPHY ─── */

h1, h2, h3, p {

  margin-top: 0;

}



h1, h2, h3 {

  line-height: 1.05;

  letter-spacing: 0;

}



h1 {

  max-width: 11ch;

  margin-bottom: 1rem;

  font-size: clamp(3.6rem, 10vw, 8.4rem);

  text-wrap: balance;

  overflow-wrap: normal;

}



h2 {

  max-width: 760px;

  margin-bottom: 1rem;

  font-size: clamp(2rem, 5.5vw, 3.8rem);

  line-height: 1.1;

  text-wrap: balance;

  text-align: left;

}



.h2-two-lines {

  font-size: clamp(1.9rem, 3.2vw, 2.5rem);

  line-height: 1.15;

  text-wrap: balance;

}



.h2-center {

  max-width: 100%;

  margin: 0 auto 1rem auto;

  text-align: center;

  white-space: nowrap;

  display: block;

  overflow: visible;

}



h3 {

  font-size: clamp(1.25rem, 2vw, 1.65rem);

}



p {

  color: var(--soft);

}



/* ─── BUTTONS ─── */

.btn {

  display: inline-flex;

  min-height: 48px;

  align-items: center;

  justify-content: center;

  padding: 0.72rem 1.05rem;

  border: 1px solid transparent;

  border-radius: var(--radius);

  font-family: "Trebuchet MS", Arial, sans-serif;

  font-size: 0.78rem;

  font-weight: 800;

  letter-spacing: 0.12em;

  text-decoration: none;

  text-transform: uppercase;

  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;

}



.btn:hover {

  transform: translateY(-2px);

}



.btn-primary {

  color: #17100c;

  background: linear-gradient(135deg, var(--gold-bright), var(--gold));

  box-shadow: 0 14px 32px rgba(216, 168, 70, 0.18);

}



.btn-primary:hover {

  box-shadow: 0 18px 40px rgba(216, 168, 70, 0.32), 0 0 0 1px rgba(243,205,117,0.4);

}



.btn-ghost {

  color: var(--text);

  border-color: var(--line);

  background: rgba(255,255,255,0.06);

  backdrop-filter: blur(16px);

}



/* ─── HEADER ─── */

.site-header {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 10;

  display: grid;

  grid-template-columns: auto 1fr auto auto;

  gap: 1rem;

  align-items: center;

  padding: 0.9rem clamp(1rem, 4vw, 2rem);

  color: var(--text);

  background: transparent;

  border: none;

  transition: background 0.25s ease, padding 0.25s ease;

}



.site-header.is-scrolled,

.site-header:focus-within {

  border-bottom: 1px solid var(--line);

  background: rgba(8, 6, 9, 0.92);

  backdrop-filter: blur(18px);

}



.brand {

  display: inline-flex;

  align-items: center;

  gap: 0.75rem;

  color: var(--text);

  text-decoration: none;

}



.brand img {

  width: 54px;

  height: 54px;

  object-fit: contain;

  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.45));

}



.brand strong,

.site-footer strong {

  display: block;

  color: var(--gold-bright);

  font-size: 1.08rem;

  line-height: 1.05;

}



.brand small {

  display: block;

  color: var(--muted);

  font-family: "Trebuchet MS", Arial, sans-serif;

  font-size: 0.58rem;

  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;

}



.desktop-nav {

  justify-self: center;

  display: flex;

  gap: 0.2rem;

  padding: 0.25rem;

  border: 1px solid rgba(255,255,255,0.08);

  border-radius: var(--radius);

  background: rgba(7, 5, 8, 0.35);

}



.desktop-nav a,

.header-action,

.mobile-nav a {

  padding: 0.64rem 0.82rem;

  color: var(--muted);

  font-family: "Trebuchet MS", Arial, sans-serif;

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.12em;

  text-decoration: none;

  text-transform: uppercase;

}



.desktop-nav a:hover,

.header-action:hover,

.mobile-nav a:hover {

  color: var(--gold-bright);

}



.desktop-nav a.active {

  color: var(--gold-bright);

}



.header-action {

  border: 1px solid var(--line);

  border-radius: var(--radius);

  background: rgba(255,255,255,0.06);

}



.menu-toggle {

  display: none;

  width: 48px;

  height: 48px;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  gap: 5px;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  color: var(--text);

  background: rgba(255,255,255,0.06);

  cursor: pointer;

}



.menu-toggle span {

  width: 20px;

  height: 2px;

  background: currentColor;

}



.mobile-nav {

  display: none;

  position: absolute;

  top: 100%;

  left: 0;

  right: 0;

  z-index: 1000;

  flex-direction: column;

  padding: 0.5rem 1rem 1rem;

  border-bottom: 1px solid var(--line);

  background: rgba(8, 6, 9, 0.97);

  backdrop-filter: blur(18px);

  overflow: hidden;

  max-height: 0;

  opacity: 0;

  transition: max-height 0.35s ease, opacity 0.35s ease;

}



.mobile-nav.is-open {

  display: flex !important;

  max-height: 500px;

  opacity: 1;

}



/* ─── HERO ─── */

.hero {

  position: relative;

  min-height: 96svh;

  display: grid;

  align-items: end;

  overflow: hidden;

  contain: layout style paint;

}



.hero-media,

.hero-media img,

.hero-shade {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

}



.hero-media img {

  object-fit: cover;

  object-position: 55% 48%;

}



.hero-shade {

  background:

    linear-gradient(90deg, rgba(7,5,8,0.72) 0%, rgba(7,5,8,0.42) 44%, rgba(7,5,8,0.06) 100%),

    linear-gradient(0deg, rgba(7,5,8,0.98) 0%, transparent 38%);

}



/* Magiczne cząsteczki w hero */

.hero-particles {

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 1;

  overflow: hidden;

}



.hero-particles span {

  position: absolute;

  border-radius: 50%;

  background: var(--gold-bright);

  animation: floatUp var(--dur, 8s) var(--delay, 0s) ease-in-out infinite;

  opacity: 0;

}



@keyframes floatUp {

  0%   { opacity: 0;    transform: translateY(0) scale(0.5); }

  15%  { opacity: 0.5; }

  85%  { opacity: 0.15; }

  100% { opacity: 0;    transform: translateY(-60vh) scale(1); }

}



/* Ozdobny ramkowy element w hero */

.hero-frame {

  position: absolute;

  inset: 2.5rem;

  pointer-events: none;

  z-index: 1;

  border: 1px solid rgba(216, 168, 70, 0.10);

  border-radius: 2px;

}



.hero-frame::before,

.hero-frame::after {

  content: "";

  position: absolute;

  width: 48px;

  height: 48px;

  border-color: rgba(216, 168, 70, 0.35);

  border-style: solid;

}



.hero-frame::before {

  top: -1px;

  left: -1px;

  border-width: 1px 0 0 1px;

}



.hero-frame::after {

  bottom: -1px;

  right: -1px;

  border-width: 0 1px 1px 0;

}



.hero-content {

  position: relative;

  z-index: 2;

  width: min(1120px, calc(100% - 2rem));

  margin: 0 auto;

  padding: 8.5rem 0 clamp(3rem, 9vw, 6rem);

}



.eyebrow {

  display: inline-block;

  margin-bottom: 1rem;

  color: var(--gold-bright);

  font-family: "Trebuchet MS", Arial, sans-serif;

  font-size: 0.8rem;

  font-weight: 800;

  letter-spacing: 0.2em;

  text-transform: uppercase;

}



.lead {

  max-width: 680px;

  margin-bottom: 1.4rem;

  color: #fff0d2;

  font-size: clamp(1.08rem, 2vw, 1.42rem);

}



.hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 0.75rem;

}



.quick-facts {

  display: flex;

  flex-wrap: wrap;

  gap: 0.65rem;

  margin: 1.6rem 0 0;

  padding: 0;

  list-style: none;

}



.quick-facts li {

  padding: 0.5rem 0.72rem;

  border: 1px solid rgba(255,255,255,0.12);

  border-radius: var(--radius);

  color: var(--muted);

  background: rgba(0,0,0,0.28);

  backdrop-filter: blur(14px);

  font-family: "Trebuchet MS", Arial, sans-serif;

  font-size: 0.78rem;

}



/* ─── INTRO SEKCJA ─── */

.intro {

  border-block: 1px solid var(--line);

  background: linear-gradient(90deg, rgba(112,32,58,0.2), rgba(38,73,53,0.12));

  position: relative;

  overflow: hidden;

  contain: layout style;

}



/* Subtelne gwiazdy tła w intro */

.intro::after {

  content: "✦  ✧  ✦";

  position: absolute;

  top: 1.2rem;

  right: 2rem;

  color: rgba(243, 205, 117, 0.12);

  font-size: 1.4rem;

  letter-spacing: 1.2rem;

  pointer-events: none;

}



.intro-grid {

  display: grid;

  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.65fr);

  gap: clamp(2rem, 6vw, 5rem);

  align-items: center;

}



.intro p {

  margin: 0;

  font-size: 1.1rem;

}



/* ─── ABOUT / SPLIT ─── */

.split,

.contact-grid {

  display: grid;

  grid-template-columns: minmax(0, 0.9fr) minmax(300px, 0.8fr);

  gap: clamp(2rem, 6vw, 5rem);

  align-items: center;

}



.copy p {

  max-width: 680px;

  font-size: 1.06rem;

}



.image-stack {

  position: relative;

  min-height: 620px;

}



.image-stack picture {

  position: absolute;

  overflow: hidden;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  box-shadow: var(--shadow);

}



.image-stack picture:first-child {

  top: 0;

  right: 0;

  width: 76%;

}



.image-stack picture:last-child {

  left: 0;

  bottom: 0;

  width: 52%;

}



.image-stack img {

  width: 100%;

  aspect-ratio: 3 / 4;

  object-fit: cover;

}



/* ─── SECTION HEAD ─── */

.section-head {

  display: grid;

  grid-template-columns: minmax(0, 0.9fr) minmax(260px, 0.45fr);

  gap: 2rem;

  align-items: end;

  margin-bottom: 2rem;

}



.section-head--center {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  max-width: 800px;

  margin-left: auto;

  margin-right: auto;

  margin-bottom: 2rem;

}



.section-head--center h2,

.section-head--center p {

  text-align: center;

  max-width: 700px;

}



.section-head p {

  margin-bottom: 0.8rem;

}



/* ─── MENU PAGE ─── */

.menu-section {

  background:

    linear-gradient(180deg, rgba(255,255,255,0.03), transparent),

    radial-gradient(circle at 90% 20%, rgba(38,73,53,0.22), transparent 28rem);

}



/* Karty menu (poglądowe, jeśli potrzebne) */

.menu-cards {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1rem;

  margin-bottom: 1rem;

}



.menu-cards article {

  overflow: hidden;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  background: var(--panel);

  box-shadow: 0 16px 48px rgba(0,0,0,0.22);

}



.menu-cards img {

  width: 100%;

  aspect-ratio: 4 / 3;

  object-fit: cover;

}



.menu-cards h3,

.menu-cards p {

  padding-inline: 1rem;

}



.menu-cards h3 {

  margin: 1rem 0 0.45rem;

}



.menu-cards p {

  margin-bottom: 1.15rem;

  font-size: 0.96rem;

}



/* ─── MENU PDF EMBED ─── */

.menu-pdf-wrap {

  position: relative;

  width: 100%;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  overflow: hidden;

  background: rgba(7,5,8,0.6);

  box-shadow: var(--shadow);

}



/* Ozdobny nagłówek ramki PDF */

.menu-pdf-header {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.9rem;

  padding: 1rem 1.4rem;

  border-bottom: 1px solid var(--line);

  background: rgba(216, 168, 70, 0.06);

}



.menu-pdf-header span {

  color: var(--gold-bright);

  font-family: "Trebuchet MS", Arial, sans-serif;

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.18em;

  text-transform: uppercase;

}



.menu-pdf-header svg {

  color: var(--gold);

  flex-shrink: 0;

}



.menu-pdf-header::before,

.menu-pdf-header::after {

  content: "";

  flex: 1;

  height: 1px;

  background: var(--line);

}



.menu-pdf-frame {

  display: block;

  width: 100%;

  height: min(85vh, 1100px);

  border: 0;

}



.menu-pdf-fallback {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 1.2rem;

  padding: 4rem 2rem;

  text-align: center;

}



.menu-pdf-fallback p {

  font-size: 1rem;

  max-width: 38ch;

}



/* ─── GALLERY / MENU GALLERY ─── */

.menu-gallery,

.gallery-grid {

  display: grid;

  grid-template-columns: repeat(6, 1fr);

  gap: 1rem;

}



.menu-gallery a,

.gallery-grid picture {

  overflow: hidden;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  background: rgba(255,255,255,0.04);

}



.menu-gallery img {

  width: 100%;

  aspect-ratio: 3 / 4;

  object-fit: cover;

  transition: transform 0.35s ease;

}



.menu-gallery a:hover img {

  transform: scale(1.04);

}



.gallery-grid {

  grid-template-columns: 1.1fr 0.7fr 0.7fr;

}



.gallery-grid img {

  width: 100%;

  height: 100%;

  min-height: 460px;

  object-fit: cover;

  cursor: pointer;

  transition: transform 0.35s ease;

}



.gallery-grid picture:hover img {

  transform: scale(1.03);

}



.gallery-grid .wide {

  grid-row: span 2;

}



/* ─── CONTACT ─── */

.contact-section {

  border-top: 1px solid var(--line);

  background:

    radial-gradient(circle at 16% 30%, rgba(112,32,58,0.22), transparent 28rem),

    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.14));

}



address {

  margin-bottom: 1.25rem;

  color: var(--soft);

  font-style: normal;

}



address strong {

  color: var(--text);

}



.contact-links {

  display: flex;

  flex-wrap: wrap;

  gap: 0.75rem;

  margin-bottom: 1rem;

}



.contact-links a,

.map-link,

.site-footer a {

  color: var(--gold-bright);

  text-decoration-color: rgba(243, 205, 117, 0.35);

  text-underline-offset: 4px;

}



.social-above-email {

  margin-bottom: 0.25rem;

}



.social-above-email a {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 32px;

  height: 32px;

  color: var(--muted);

  border: 1px solid rgba(255,255,255,0.12);

  border-radius: var(--radius);

  background: rgba(255,255,255,0.04);

  transition: all 0.2s ease;

}



.social-above-email a:hover {

  color: var(--gold-bright);

  border-color: var(--gold);

  background: rgba(216, 168, 70, 0.12);

}



.contact-form {

  padding: clamp(1rem, 4vw, 2rem);

  border: 1px solid var(--line);

  border-radius: var(--radius);

  background: var(--panel-strong);

  box-shadow: var(--shadow);

}



.contact-form h3 {

  margin-bottom: 0.35rem;

}



.form-note {

  margin-bottom: 1rem;

  font-size: 0.96rem;

}



.contact-form label {

  display: grid;

  gap: 0.35rem;

  margin-bottom: 0.85rem;

  color: var(--muted);

  font-family: "Trebuchet MS", Arial, sans-serif;

  font-size: 0.74rem;

  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;

}



.contact-form input,

.contact-form textarea {

  width: 100%;

  border: 1px solid rgba(216, 168, 70, 0.24);

  border-radius: var(--radius);

  padding: 0.82rem 0.9rem;

  color: var(--text);

  background: rgba(7,5,8,0.68);

  text-transform: none;

}



.contact-form input:focus,

.contact-form textarea:focus {

  outline: 2px solid rgba(243, 205, 117, 0.34);

  border-color: var(--gold);

}



.website-field {

  position: absolute;

  left: -100vw;

}



.form-status {

  margin-bottom: 1rem;

  padding: 0.8rem;

  border-radius: var(--radius);

  font-size: 0.95rem;

}



.form-status.success {

  color: #d9ffe2;

  background: rgba(38, 73, 53, 0.55);

}



.form-status.error {

  color: #ffe1e1;

  background: rgba(112, 32, 58, 0.55);

}



.map-frame {

  margin-top: 2rem;

  overflow: hidden;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  background: var(--panel);

}



.map-frame iframe {

  display: block;

  width: 100%;

  height: min(58vh, 430px);

  border: 0;

  filter: saturate(0.85) contrast(0.95);

}



/* ─── FOOTER ─── */

.site-footer {

  padding: 1.5rem 0 0.8rem;

  border-top: 1px solid var(--line);

  background: #070508;

}



.footer-grid {

  display: grid;

  grid-template-columns: 1.2fr repeat(3, 0.7fr);

  gap: 1rem;

}



.site-footer span {

  display: block;

  margin-bottom: 0.4rem;

  color: var(--gold-bright);

  font-family: "Trebuchet MS", Arial, sans-serif;

  font-size: 0.7rem;

  font-weight: 800;

  letter-spacing: 0.14em;

  text-transform: uppercase;

}



.site-footer p {

  margin-bottom: 0;

  font-size: 0.95rem;

}



.footer-nav {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 2rem;

  margin-top: 2rem;

  padding-top: 1.5rem;

  border-top: 1px solid rgba(255,255,255,0.08);

}



.footer-nav nav {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 2rem;

}



.footer-nav a {

  color: var(--muted);

  font-family: "Trebuchet MS", Arial, sans-serif;

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  text-decoration: none;

  transition: color 0.2s ease;

}



.footer-nav a:hover {

  color: var(--gold-bright);

}



.footer-logo {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  margin-bottom: 1rem;

}



.footer-logo img {

  width: 48px;

  height: 48px;

  object-fit: contain;

}



.footer-logo strong {

  display: block;

  color: var(--gold-bright);

  font-size: 1rem;

  line-height: 1.05;

}



.footer-logo small {

  display: block;

  color: var(--muted);

  font-family: "Trebuchet MS", Arial, sans-serif;

  font-size: 0.54rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;

}



.social-icons {

  display: flex;

  gap: 1rem;

  margin-top: 0.5rem;

}



.social-icons a {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 40px;

  height: 40px;

  color: var(--muted);

  border: 1px solid rgba(255,255,255,0.12);

  border-radius: var(--radius);

  background: rgba(255,255,255,0.04);

  transition: all 0.2s ease;

}



.social-icons a:hover {

  color: var(--gold-bright);

  border-color: var(--gold);

  background: rgba(216, 168, 70, 0.12);

}



.social-icons svg {

  width: 20px;

  height: 20px;

}



.footer-bottom {

  display: flex;

  justify-content: center;

  gap: 1rem;

  margin-top: 2rem;

  padding-top: 1rem;

  border-top: 1px solid rgba(255,255,255,0.08);

}



.footer-bottom p {

  color: rgba(255,247,232,0.52);

  font-family: "Trebuchet MS", Arial, sans-serif;

  font-size: 0.72rem;

}



/* ─── GALLERY MODAL ─── */

.gallery-modal {

  position: fixed;

  inset: 0;

  z-index: 1000;

  display: none;

  align-items: center;

  justify-content: center;

  background: rgba(0, 0, 0, 0.95);

  opacity: 0;

  transition: opacity 0.3s ease;

}



.gallery-modal.is-open {

  display: flex;

  opacity: 1;

}



.gallery-modal-content {

  position: relative;

  width: 80%;

  max-width: 90vw;

  max-height: 90vh;

  display: flex;

  align-items: center;

  justify-content: center;

}



.gallery-modal-image {

  max-width: 100%;

  max-height: 90vh;

  object-fit: contain;

  cursor: zoom-in;

  transition: transform 0.3s ease;

  will-change: transform;

}



.gallery-modal-image.is-dragging { transition: none; }

.gallery-modal-image.is-zoomed   { cursor: zoom-out; transform: scale(2); }



.gallery-modal-close {

  position: absolute;

  top: 20px;

  right: 20px;

  width: 50px;

  height: 50px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--text);

  background: rgba(0, 0, 0, 0.8);

  border: 2px solid rgba(255, 255, 255, 0.3);

  border-radius: 50%;

  cursor: pointer;

  transition: all 0.2s ease;

  z-index: 1002;

}



.gallery-modal-close:hover {

  background: rgba(0, 0, 0, 0.95);

  border-color: rgba(255, 255, 255, 0.5);

  transform: scale(1.1);

}



.gallery-modal-nav {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 50px;

  height: 50px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--text);

  background: rgba(0, 0, 0, 0.8);

  border: 2px solid rgba(255, 255, 255, 0.3);

  border-radius: 50%;

  cursor: pointer;

  transition: all 0.2s ease;

  z-index: 1002;

}



.gallery-modal-nav:hover {

  background: rgba(0, 0, 0, 0.95);

  border-color: rgba(255, 255, 255, 0.5);

  transform: translateY(-50%) scale(1.1);

}



.gallery-modal-prev { left: 20px; }

.gallery-modal-next { right: 20px; }



/* ─── RESPONSIVE ─── */

@media (max-width: 980px) {

  .gallery-modal-content { width: 95%; }

  .gallery-modal-close   { top: 10px; right: 10px; width: 44px; height: 44px; }

  .gallery-modal-nav     { width: 44px; height: 44px; }

  .gallery-modal-prev    { left: 10px; }

  .gallery-modal-next    { right: 10px; }



  .site-header {

    grid-template-columns: auto 1fr auto;

  }



  .desktop-nav,

  .header-action {

    display: none;

  }



  .menu-toggle {

    display: inline-flex;

    justify-self: end;

  }



  .mobile-nav.is-open {

    display: flex;

    max-height: 300px;

  }



  .intro-grid,

  .split,

  .contact-grid,

  .section-head {

    grid-template-columns: 1fr;

  }



  .image-stack {

    min-height: 520px;

  }



  .menu-cards {

    grid-template-columns: repeat(2, 1fr);

  }



  .menu-gallery {

    grid-template-columns: repeat(3, 1fr);

  }



  .gallery-grid {

    grid-template-columns: 1fr 1fr;

  }



  .gallery-grid .wide {

    grid-column: 1 / -1;

  }



  .footer-grid {

    grid-template-columns: 1fr 1fr;

  }



  .footer-nav nav {

    gap: 1.5rem;

  }



  .hero-frame {

    display: none;

  }

}



@media (max-width: 640px) {

  body { font-size: 16px; }



  .site-header {

    padding: 0.7rem 0.8rem;

  }



  .brand img  { width: 46px; height: 46px; }

  .brand small { display: none; }



  .gallery-modal-content { width: 100%; max-height: 80vh; }

  .gallery-modal-close   { top: 10px; right: 10px; width: 40px; height: 40px; }

  .gallery-modal-nav     { width: 40px; height: 40px; }

  .gallery-modal-prev    { left: 10px; }

  .gallery-modal-next    { right: 10px; }



  .hero { min-height: 92svh; }



  .hero-shade {

    background:

      linear-gradient(180deg, rgba(7,5,8,0.5) 0%, rgba(7,5,8,0.34) 30%, rgba(7,5,8,0.96) 100%),

      linear-gradient(90deg, rgba(7,5,8,0.56), rgba(7,5,8,0.18));

  }



  .hero-content {

    width: calc(100vw - 2rem);

    max-width: calc(100vw - 2rem);

    padding-top: 6rem;

    overflow: hidden;

  }



  h1 {

    max-width: 100%;

    font-size: clamp(2.65rem, 11vw, 2.9rem);

  }



  .lead {

    max-width: 30ch;

    font-size: 1.05rem;

  }



  .hero-actions .btn { width: 100%; }

  .quick-facts { display: grid; }



  .footer-grid {

    grid-template-columns: 1fr;

    gap: 1rem;

  }



  .footer-nav {

    gap: 0.5rem;

    margin-top: 1rem;

  }



  .footer-nav nav {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 0.5rem;

    text-align: center;

  }



  .footer-nav a:not([href*="regulamin"]):not([href*="polityka"]) {

    display: none;

  }



  .image-stack {

    min-height: auto;

    display: grid;

    gap: 1rem;

  }



  .image-stack picture,

  .image-stack picture:first-child,

  .image-stack picture:last-child {

    position: static;

    width: 100%;

  }



  .menu-cards,

  .menu-gallery,

  .gallery-grid,

  .footer-grid {

    grid-template-columns: 1fr;

  }



  .gallery-grid img { min-height: 320px; }



  .footer-bottom {

    flex-direction: column;

    text-align: center;

  }



  .footer-nav nav {

    flex-direction: column;

    gap: 1rem;

  }



  .intro::after { display: none; }



  /* Optymalizacje wydajności na mobile */

  .quick-facts li {

    backdrop-filter: none;

    background: rgba(0,0,0,0.5);

  }



  .hero-particles,

  .hero-rings,

  .hero-stars,

  .magic-sparks,

  .ambient-stars,

  .hero-frame {

    display: none;

  }



  .site-header,

  .mobile-nav,

  .contact-form {

    backdrop-filter: none;

  }



  .menu-img-inner:hover {

    box-shadow: 0 50px 120px rgba(0,0,0,0.7);

  }



  /* Płynne scrollowanie na mobile */

  html {

    scroll-behavior: smooth;

  }



  /* Wyłączenie transformacji na mobile dla lepszej wydajności */

  .hero-frame-enhanced,

  .hero-runes {

    display: none;

  }

}



@media (prefers-reduced-motion: reduce) {

  *,

  *::before,

  *::after {

    scroll-behavior: auto !important;

    transition-duration: 0.01ms !important;

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

  }



  #intro-screen { display: none !important; }

}

/* Desktop - normalnie pokazuj PDF */

.mobile-menu-link {

  display: none;

}



/* Telefony */

@media (max-width: 768px) {

  .pdf-wrap {

    display: none;

  }



  .mobile-menu-link {

    display: flex;

    justify-content: center;

    margin-top: 1rem;

  }



  /* Nawigacja mobilna - rozwijana */

  .mobile-nav {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    z-index: 1000;

    flex-direction: column;

    padding: 0.5rem 1rem 1rem;

    border-bottom: 1px solid var(--line);

    background: rgba(8, 6, 9, 0.97);

    backdrop-filter: blur(18px);

    overflow: hidden;

    max-height: 0;

    opacity: 0;

    transition: max-height 0.35s ease, opacity 0.35s ease;

  }



  .mobile-nav.is-open {

    display: flex !important;

    max-height: 300px;

    opacity: 1;

  }



  /* Pokaż przycisk toggle na mobile */

  .menu-toggle {

    display: flex;

  }



  /* Ukryj desktop nav na mobile */

  .desktop-nav {

    display: none;

  }



  /* Ukryj header action na mobile */

  .header-action {

    display: none;

  }



  /* Dostosuj header dla mobile */

  .site-header {

    grid-template-columns: auto 1fr auto;

    gap: 0.5rem;

  }

}

.mobile-menu-btn {

  display: flex;

  justify-content: center;

  align-items: center;

  margin: 2rem auto;

  width: 100%;

}

/* ═══════════════════════════════════════════════

   PATCH do wklejenia na końcu css/style.css

   Zastępuje/uzupełnia poprzednie bloki magic

   ═══════════════════════════════════════════════ */



/* ─── TYPOGRAFIA NAGŁÓWKÓW ─── */

h1,

.intro-name,

.intro-title {

  font-family: "Cinzel Decorative", Georgia, "Times New Roman", serif;

  font-weight: 700;

  letter-spacing: 0.04em;

  line-height: 1.15;

}



h2,

h3 {

  font-family: "Almendra", Georgia, "Times New Roman", serif;

  font-weight: 700;

  letter-spacing: 0.01em;

}



.intro-name {

  letter-spacing: 0.18em;

}



/* ─── KURSOR-RÓŻDŻKA ─── */

@media (hover: hover) and (pointer: fine) {

  /* Ukryj systemowy kursor wszędzie — różdżka go zastępuje */

  html,

  body,

  html *,

  body * {

    cursor: none !important;

  }



  .wand-cursor {

    position: fixed;

    top: 0;

    left: 0;

    /* Najwyżej jak się da — ponad wszystkimi overlayami, lightboxami itd. */

    z-index: 2147483647;

    width: 40px;

    height: 40px;

    pointer-events: none;

    /* Czubek SVG siedzi w (2,2) — JS przesuwa o -2px na osi X i Y */

    will-change: transform;

  }



  .wand-cursor svg {

    display: block;

    width: 100%;

    height: 100%;

    /* Delikatna poświata wokół całej różdżki */

    filter:

      drop-shadow(0 0 4px rgba(243, 205, 117, 0.7))

      drop-shadow(0 0 12px rgba(243, 205, 117, 0.3));

    animation: wandGlow 2s ease-in-out infinite alternate;

  }



  @keyframes wandGlow {

    from { filter: drop-shadow(0 0 3px rgba(243,205,117,0.5)) drop-shadow(0 0 8px rgba(243,205,117,0.2)); }

    to   { filter: drop-shadow(0 0 6px rgba(243,205,117,0.9)) drop-shadow(0 0 18px rgba(243,205,117,0.4)); }

  }



  /* Iskry różdżki — tuż pod różdżką, ale nad resztą UI */

  .wand-sparks {

    position: fixed;

    inset: 0;

    z-index: 2147483646;

    pointer-events: none;

    overflow: hidden;

  }



  .wand-sparks span {

    position: absolute;

    border-radius: 50%;

    opacity: 0.9;

    animation: wandSparkFade 0.7s ease-out forwards;

  }



  @keyframes wandSparkFade {

    from {

      opacity: 0.9;

      transform: translate(0, 0) scale(1);

    }

    to {

      opacity: 0;

      transform: translate(var(--tx, 0px), var(--ty, 16px)) scale(0.15);

    }

  }

}



@media (hover: none), (pointer: coarse) {

  .wand-cursor,

  .wand-sparks {

    display: none !important;

  }

}



/* ─── SUBTELNY FADE MIĘDZY PODSTRONAMI ─── */

.page-fade {

  position: fixed;

  inset: 0;

  z-index: 10002;

  pointer-events: none;

  background: #07050a;

  opacity: 1;

  transition: opacity 0.45s ease;

}



/* ─── HOVER-GLOW W GALERII ─── */

.gallery-grid picture img,

.menu-gallery img {

  transition: transform 0.5s ease, filter 0.5s ease;

  filter: saturate(0.86) brightness(0.94);

}



.gallery-grid picture:hover img,

.menu-gallery a:hover img {

  filter: saturate(1.18) brightness(1.06);

}



.gallery-grid picture {

  position: relative;

}



.gallery-grid picture::after {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: 0;

  transition: opacity 0.45s ease;

  background: radial-gradient(ellipse at center, rgba(243, 205, 117, 0.18) 0%, rgba(243, 205, 117, 0) 70%);

  mix-blend-mode: screen;

}



.gallery-grid picture:hover::after {

  opacity: 1;

}



/* ─── USUŃ stary .ink-transition jeśli istnieje ─── */

/* (zastąpiony przez .page-fade powyżej) */

.ink-transition {

  display: none !important;

}



/* ─── prefers-reduced-motion ─── */

@media (prefers-reduced-motion: reduce) {

  .page-fade,

  .wand-cursor,

  .wand-sparks {

    display: none !important;

  }



  body,

  a, button, .btn, input, textarea, select, [role="button"] {

    cursor: auto !important;

  }

}

/* ─────────────────────────────

   MAGIC DIVIDER LARGE

   ───────────────────────────── */



.magic-divider-lg{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:12px;

    margin:80px auto;

    width:min(900px,90%);

}



.mdl-line{

    width:100%;

}



.mdl-center{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

}



.mdl-d{

    flex:1;

    height:1px;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(243,205,117,.55),

        transparent

    );

}



.mdl-star{

    color:var(--gold-bright);

    font-size:1.1rem;

    text-shadow:

        0 0 10px rgba(243,205,117,.6),

        0 0 20px rgba(243,205,117,.3);

}



.mdl-sub{

    color:var(--gold-bright);

    font-family:"Cinzel Decorative", serif;

    font-size:.85rem;

    letter-spacing:.25em;

    text-transform:uppercase;

    opacity:.8;

    text-align:center;

}

.magic-divider-lg {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 12px;

  margin: 80px auto;

  width: min(900px, 90%);

}



.mdl-line {

  width: 100%;

}



.mdl-center {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 18px;

}



.mdl-d {

  flex: 1;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(243,205,117,.55), transparent);

}



.mdl-star {

  color: var(--gold-bright);

  font-size: 1.1rem;

  text-shadow: 0 0 10px rgba(243,205,117,.6), 0 0 20px rgba(243,205,117,.3);

}



.mdl-sub {

  color: var(--gold-bright);

  font-family: "Cinzel Decorative", serif;

  font-size: .85rem;

  letter-spacing: .25em;

  text-transform: uppercase;

  opacity: .8;

  text-align: center;

}

/* ─── STYLE DLA STRONY MENU (po usunięciu nadpisań separatora) ─── */

.menu-img-section {

  background:

    radial-gradient(circle at 15% 30%, rgba(112,32,58,0.28), transparent 34rem),

    radial-gradient(circle at 85% 70%, rgba(35,59,89,0.22), transparent 30rem);

}



.menu-section-head {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  margin-bottom: clamp(2rem, 4vw, 3rem);

}



/* Ramka wokół menu */

.menu-img-outer {

  position: relative;

  max-width: 920px;

  margin: 0 auto;

}



/* Złote rogi */

.menu-img-outer::before,

.menu-img-outer::after {

  content: "";

  position: absolute;

  width: 64px; height: 64px;

  border-color: rgba(243,205,117,0.55);

  border-style: solid;

  pointer-events: none;

  z-index: 2;

}

.menu-img-outer::before { top: -2px; left: -2px; border-width: 2px 0 0 2px; }

.menu-img-outer::after  { bottom: -2px; right: -2px; border-width: 0 2px 2px 0; }



.menu-img-corner-tr,

.menu-img-corner-bl {

  position: absolute;

  width: 64px; height: 64px;

  border-color: rgba(243,205,117,0.55);

  border-style: solid;

  pointer-events: none;

  z-index: 2;

}

.menu-img-corner-tr { top: -2px; right: -2px; border-width: 2px 2px 0 0; }

.menu-img-corner-bl { bottom: -2px; left: -2px; border-width: 0 0 2px 2px; }



/* Gwiazdy */

.menu-img-star {

  position: absolute;

  color: rgba(243,205,117,0.7);

  font-size: 1.1rem;

  z-index: 3;

  pointer-events: none;

  animation: menuStarPulse 2.8s ease-in-out infinite alternate;

  text-shadow: 0 0 14px rgba(243,205,117,0.6);

}

.menu-img-star.tl { top: -0.65rem; left: 3.6rem; }

.menu-img-star.tr { top: -0.65rem; right: 3.6rem; }

.menu-img-star.bl { bottom: -0.65rem; left: 3.6rem; }

.menu-img-star.br { bottom: -0.65rem; right: 3.6rem; }

@keyframes menuStarPulse {

  from { opacity: 0.3; transform: scale(0.8) rotate(-10deg); }

  to   { opacity: 1;   transform: scale(1.2) rotate(10deg); }

}



/* Wewnętrzna ramka obrazka */

.menu-img-inner {

  position: relative;

  border: 1px solid rgba(216,168,70,0.25);

  border-radius: 2px;

  overflow: hidden;

  box-shadow:

    0 50px 120px rgba(0,0,0,0.7),

    0 0 0 1px rgba(216,168,70,0.1),

    inset 0 0 80px rgba(112,32,58,0.08);

}



.menu-img-inner img {

  display: block;

  width: 100%;

  height: auto;

  border-radius: 2px;

}



.menu-img-inner:hover {

  box-shadow:

    0 60px 140px rgba(0,0,0,0.75),

    0 0 0 1px rgba(216,168,70,0.18),

    0 0 60px rgba(216,168,70,0.08);

}



/* MOBILE: przycisk do pobrania */

.menu-mobile-btn {

  display: none;

}



@media (max-width: 768px) {

  .menu-img-outer { display: none; }

  .menu-mobile-btn {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1.2rem;

    padding: clamp(2.5rem, 8vw, 4rem) clamp(1.5rem, 5vw, 3rem);

    border: 1px solid rgba(216,168,70,0.2);

    border-radius: 4px;

    background: rgba(20,13,20,0.65);

    text-align: center;

    max-width: 480px;

    margin: 0 auto;

    position: relative;

  }

  .menu-mobile-btn::before,

  .menu-mobile-btn::after {

    content: "";

    position: absolute;

    width: 40px; height: 40px;

    border-color: rgba(243,205,117,0.45);

    border-style: solid;

  }

  .menu-mobile-btn::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }

  .menu-mobile-btn::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

}



.menu-mobile-icon {

  width: 64px; height: 64px;

  display: flex; align-items: center; justify-content: center;

  border: 1px solid rgba(216,168,70,0.3);

  border-radius: 50%;

  color: rgba(243,205,117,0.8);

  font-size: 1.8rem;

  background: rgba(216,168,70,0.06);

  box-shadow: 0 0 30px rgba(216,168,70,0.12);

}



.menu-open-btn {

  display: inline-flex; align-items: center; gap: 0.6rem;

  padding: 0.9rem 2rem;

  color: #17100c;

  background: linear-gradient(135deg, #f3cd75, #d8a846);

  border-radius: 4px;

  font-family: "Trebuchet MS", Arial, sans-serif;

  font-size: 0.82rem; font-weight: 800;

  letter-spacing: 0.14em; text-decoration: none; text-transform: uppercase;

  transition: transform 0.2s ease, box-shadow 0.2s ease;

  box-shadow: 0 12px 32px rgba(216,168,70,0.28);

}

.menu-open-btn:hover {

  transform: translateY(-3px);

  box-shadow: 0 20px 48px rgba(216,168,70,0.45);

}



.magic-eyebrow {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  color: rgba(243,205,117,0.7);

  font-family: "Trebuchet MS", Arial, sans-serif;

  font-size: 0.72rem;

  letter-spacing: 0.24em;

  text-transform: uppercase;

  margin-bottom: 0.75rem;

  justify-content: center;

}

.magic-eyebrow::before,

.magic-eyebrow::after {

  content: "";

  width: 2.5rem; height: 1px;

  background: linear-gradient(90deg, transparent, rgba(216,168,70,0.6));

}

.magic-eyebrow::after {

  background: linear-gradient(90deg, rgba(216,168,70,0.6), transparent);

}

/* ─── DODATKOWY MAGICZNY KLIMAT (bez widocznych symboli) ─── */



/* 1. Pływające, rozmyte światła w tle hero */

.hero::before {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 1;

  background:

    radial-gradient(ellipse 40% 40% at 20% 30%, rgba(243,205,117,0.12), transparent 50%),

    radial-gradient(ellipse 30% 30% at 85% 70%, rgba(216,168,70,0.08), transparent 40%);

  animation: heroLights 8s ease-in-out infinite alternate;

}

@keyframes heroLights {

  0% { opacity: 0.4; transform: scale(0.98); }

  100% { opacity: 1; transform: scale(1.02); }

}



/* 2. Delikatne unoszenie się gwiazdek tła (ambient stars) */

.ambient-stars span {

  animation: floatStar 8s ease-in-out infinite alternate;

}

@keyframes floatStar {

  0% { transform: translateY(0px) translateX(0px); }

  100% { transform: translateY(-15px) translateX(5px); }

}



/* 3. Pulsujący cień na separatorze i tytułach */

.magic-divider-lg .mdl-star {

  animation: starPulseGlow 2s ease-in-out infinite alternate;

}

@keyframes starPulseGlow {

  from { text-shadow: 0 0 4px rgba(243,205,117,0.4); }

  to { text-shadow: 0 0 18px rgba(243,205,117,0.9); }

}



h2, .h2-two-lines {

  transition: text-shadow 0.3s ease;

}

h2:hover, .h2-two-lines:hover {

  text-shadow: 0 0 12px rgba(243,205,117,0.4);

}



/* 4. Iskierki w tle (małe, niewidoczne jako symbole) */

.hero {

  position: relative;

  overflow: hidden;

}

.hero::after {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 1;

  background-image: radial-gradient(circle at 20% 40%, rgba(243,205,117,0.08) 1px, transparent 1px);

  background-size: 32px 32px;

  animation: sparkleMove 20s linear infinite;

}

@keyframes sparkleMove {

  from { background-position: 0 0; }

  to { background-position: 100px 100px; }

}



/* 5. Subtelna mgiełka na sekcjach */

.section-pad {

  position: relative;

}

.section-pad::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 120px;

  background: linear-gradient(to bottom, rgba(112,32,58,0.08), transparent);

  pointer-events: none;

}

/* Gwiazdki na zdjęciu głównym */

.hero {

  position: relative;

  overflow: hidden;

}

.hero-stars {

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 2;

  background-image: 

    radial-gradient(2px 2px at 10% 20%, rgba(243,205,117,0.7) 1px, transparent 1px),

    radial-gradient(1.5px 1.5px at 25% 45%, rgba(243,205,117,0.5) 1px, transparent 1px),

    radial-gradient(2.5px 2.5px at 40% 80%, rgba(243,205,117,0.6) 1px, transparent 1px),

    radial-gradient(1px 1px at 60% 15%, rgba(243,205,117,0.4) 1px, transparent 1px),

    radial-gradient(3px 3px at 75% 55%, rgba(243,205,117,0.5) 1px, transparent 1px),

    radial-gradient(1.8px 1.8px at 90% 30%, rgba(243,205,117,0.6) 1px, transparent 1px),

    radial-gradient(2.2px 2.2px at 15% 70%, rgba(243,205,117,0.4) 1px, transparent 1px),

    radial-gradient(1.2px 1.2px at 50% 90%, rgba(243,205,117,0.7) 1px, transparent 1px),

    radial-gradient(2px 2px at 85% 85%, rgba(243,205,117,0.5) 1px, transparent 1px),

    radial-gradient(1.5px 1.5px at 30% 10%, rgba(243,205,117,0.6) 1px, transparent 1px);

  background-size: 200px 200px;

  background-repeat: repeat;

  animation: starsTwinkle 4s ease-in-out infinite alternate;

}

@keyframes starsTwinkle {

  0% { opacity: 0.2; background-position: 0 0; }

  100% { opacity: 0.8; background-position: 50px 50px; }

}

/* ===== MAGICZNE CZĄSTECZKI I ISKRY (bez widocznych znaków) ===== */

.hero {

  position: relative;

  overflow: hidden;

}



/* Unoszące się, świecące kule (dawne magic-sparks) */

.magic-sparks {

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 1;

  overflow: hidden;

}

.magic-sparks span {

  position: absolute;

  border-radius: 50%;

  background: #f3cd75;

  box-shadow: 0 0 8px 2px rgba(243,205,117,0.7);

  opacity: 0;

  animation: sparkFloat 8s var(--delay,0s) ease-in-out infinite;

}

@keyframes sparkFloat {

  0%   { opacity: 0; transform: translateY(0) scale(0.2); }

  15%  { opacity: 0.9; }

  70%  { opacity: 0.3; transform: translateY(-55vh) translateX(var(--sway,20px)) scale(1); }

  100% { opacity: 0; transform: translateY(-85vh) translateX(var(--sway2,-15px)) scale(0.5); }

}



/* Pływające, delikatne światła (dawne hero-particles) */

.hero-particles {

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 1;

  overflow: hidden;

}

.hero-particles span {

  position: absolute;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(243,205,117,0.6), rgba(216,168,70,0.1));

  width: 3px; height: 3px;

  animation: floatLight 12s var(--delay,0s) ease-in-out infinite;

}

@keyframes floatLight {

  0%   { transform: translateY(10px) translateX(0) scale(1); opacity: 0; }

  25%  { opacity: 0.5; }

  75%  { opacity: 0.3; transform: translateY(-25vh) translateX(var(--sway,30px)) scale(1.8); }

  100% { opacity: 0; transform: translateY(-45vh) translateX(var(--sway2,-20px)) scale(0.5); }

}



/* Rozmyte, pulsujące pierścienie w tle hero */

.hero-rings {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  pointer-events: none;

  z-index: 1;

}

.hero-ring {

  position: absolute;

  border-radius: 50%;

  border: 1px solid rgba(216,168,70,0.2);

  box-shadow: 0 0 30px rgba(216,168,70,0.1);

  animation: ringPulse 5s ease-in-out infinite alternate;

}

.ring1 { width: 400px; height: 400px; animation-delay: 0s; }

.ring2 { width: 280px; height: 280px; border-color: rgba(216,168,70,0.3); animation-delay: 0.8s; }

.ring3 { width: 160px; height: 160px; border-color: rgba(243,205,117,0.4); animation-delay: 1.6s; }

@keyframes ringPulse {

  from { opacity: 0.2; transform: scale(0.95); }

  to   { opacity: 0.8; transform: scale(1.05); }

}



/* Migoczące gwiazdki (kropki światła) na zdjęciu – lepsze niż poprzednio */

.hero-stars {

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 2;

  background-image: 

    radial-gradient(2px 2px at 12% 18%, rgba(243,205,117,0.8) 1px, transparent 1px),

    radial-gradient(1.5px 1.5px at 28% 42%, rgba(243,205,117,0.6) 1px, transparent 1px),

    radial-gradient(2.5px 2.5px at 45% 75%, rgba(243,205,117,0.7) 1px, transparent 1px),

    radial-gradient(1px 1px at 63% 12%, rgba(243,205,117,0.5) 1px, transparent 1px),

    radial-gradient(3px 3px at 78% 52%, rgba(243,205,117,0.6) 1px, transparent 1px),

    radial-gradient(1.8px 1.8px at 92% 28%, rgba(243,205,117,0.7) 1px, transparent 1px),

    radial-gradient(2.2px 2.2px at 18% 68%, rgba(243,205,117,0.5) 1px, transparent 1px),

    radial-gradient(1.2px 1.2px at 52% 88%, rgba(243,205,117,0.8) 1px, transparent 1px),

    radial-gradient(2px 2px at 84% 82%, rgba(243,205,117,0.6) 1px, transparent 1px),

    radial-gradient(1.5px 1.5px at 34% 8%, rgba(243,205,117,0.7) 1px, transparent 1px),

    radial-gradient(2px 2px at 7% 55%, rgba(243,205,117,0.4) 1px, transparent 1px),

    radial-gradient(2.8px 2.8px at 68% 34%, rgba(243,205,117,0.7) 1px, transparent 1px);

  background-size: 180px 180px;

  background-repeat: repeat;

  animation: starsTwinkle 6s ease-in-out infinite alternate;

}

@keyframes starsTwinkle {

  0% { opacity: 0.2; background-position: 0 0; }

  100% { opacity: 0.9; background-position: 35px 35px; }

}