/* ======================================
   WATER ONE PAGE — STYLESHEET
====================================== */

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

:root{
  /* Kolory */
  --bg: #07060D;
  --white: #ffffff;
  --black: #000000;
  --orange: #F04821;

  /* Karty */
  --card-light: #F5F5F5;
  --card-dark: #14161F;

  /* Gradienty sekcji */
  --g1: linear-gradient(180deg, #202430 2%, #06050B 100%);
  --g2: linear-gradient(180deg, #07060D 0%, #1A1C27 100%);
  --g3: linear-gradient(180deg, #07060D 2%, #171822 100%);
  --g4: linear-gradient(180deg, #07060D 0%, #171923 100%);
  --g5: linear-gradient(180deg, #0D0D0D 0%, #101018 100%);

  /* Layout */
  --max: 1200px;
  --navH: 72px;

  /* Typo */
  --h1: 40px;
  --h2: 24px;
  --h3: 16px;
  --p: 14px;

  /* UI */
  --r: 16px;
  --r2: 12px;
  --border: 1px solid rgba(255,255,255,0.10);
  --shadow: 0 18px 40px rgba(0,0,0,0.28);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: "Roboto", sans-serif;
  background: var(--bg);
  color: var(--white);
}
a{ text-decoration: none; color: inherit; }
img{ max-width: 100%; display: block; }
p{ margin: 0; font-size: var(--p); line-height: 1.6; }

h1,h2,h3{ margin: 0; font-weight: 700; }
h1{ font-size: var(--h1); line-height: 1.05; }
h2{ font-size: var(--h2); letter-spacing: .4px; margin-bottom: 12px; }
h3{ font-size: var(--h3); margin-bottom: 10px; }

/* ======================================
   NAV — fixed + flex
====================================== */
nav{
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: var(--navH);
  z-index: 10;

  background: rgba(7,6,13,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);

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

  padding: 10px 16px;
}

nav ol{
  max-width: var(--max);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;

  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 14px;
}

nav ol li{ flex: 1; }

nav ol li a{
  display: block;
  text-align: center;

  font-size: 20px;
  font-weight: 500;
  color: var(--white);

  padding: 10px 12px;
  border-radius: 10px;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);

  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

nav ol li a:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.22);
}

/* ======================================
   SEKCJE — mniejsze odstępy (bez “pustyni”)
====================================== */
section{
  /* najważniejsze: nie robić wszędzie 90vh, bo psuje */
  min-height: auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* content od góry */

  padding: calc(var(--navH) + 22px) 20px 46px;
  scroll-margin-top: calc(var(--navH) + 18px);
}

.zawartosc{
  max-width: var(--max);
  width: 100%;
  padding: 8px 20px;
}

/* ======================================
   SEKCJA 1 — HERO (bg1 jako tło sekcji)
====================================== */
#pierwsza{
  /* pełne tło sekcji */
  background:
    linear-gradient(180deg, rgba(32,36,48,0.92) 2%, rgba(6,5,11,0.96) 100%),
    url("img/bg1.png") center/cover no-repeat;

  background-blend-mode: overlay;

  /* hero ma być większy */
  min-height: 92vh;
}

#pierwsza .zawartosc{
  display:flex;
  justify-content:center;   /* poziomo */
  align-items:center;       /* pionowo */
  min-height:92vh;          /* wysokość całej sekcji */
}


.hero{
  width: 100%;
  min-height: 380px;

  border-radius: var(--r);
  border: var(--border);
  overflow: hidden;

  /* dodatkowy overlay dla czytelności tekstu */
  background:
    linear-gradient(90deg,
      rgba(7,6,13,0.86) 0%,
      rgba(7,6,13,0.45) 55%,
      rgba(7,6,13,0.10) 100%
    );

  box-shadow: var(--shadow);
}

.hero-content{
  max-width: 700px;
  padding: 38px 40px;

  display: flex;
  flex-direction: column;
  gap: 12px;
}

.eyebrow{
  font-size: 14px;
  letter-spacing: .8px;
  opacity: .9;
}

.hero .btn{
  display: inline-block;
  width: fit-content;
  margin-top: 6px;

  font-size: 24px;
  color: var(--white);

  padding: 10px 18px;
  border-radius: 10px;

  background: rgba(240,72,33,0.45);
  border: 1px solid rgba(240,72,33,0.70);
}

.hero .btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* ======================================
   SEKCJA 2 — bg2 (pattern) jako tło CAŁEJ sekcji
====================================== */
#druga{
  background:
    url("img/bg2.png") center/cover no-repeat,
    var(--g2);
  background-blend-mode: overlay;
}

/* 4 karty: flex + wrap, ale na desktop trzyma 4 */
.cards{
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: stretch;
  margin-top: 10px;
}

.card{
  flex: 0 0 calc((100% - 66px) / 4); /* 4 w rzędzie */
  background: var(--card-light);
  color: var(--black);

  border-radius: 14px;
  padding: 16px;

  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: var(--shadow);
}

/* ======================================
   SEKCJA 3 — PANEL (3 kolumny flex)
====================================== */
#trzecia{ background: var(--g3); }

.subhead{
  font-size: 16px;
  opacity: .9;
  margin: -4px 0 16px;
}

.panel{
  width: 100%;
  min-height: 300px;

  border-radius: var(--r);
  overflow: hidden;
  border: var(--border);
  background: rgba(255,255,255,0.02);

  display: flex;
  flex-wrap: nowrap; /* desktop */
}

.col{
  flex: 1 1 0;
  padding: 18px 16px;
}

.col.left{ background: rgba(20,22,31,0.88); }
.col.right{ background: rgba(240,72,33,0.50); }

.metrics{
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}

.metrics li{
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  font-size: 14px;
}

.metrics li b{ font-weight: 700; }

.center{
  flex: 1.2 1 0; /* środek większy */
  padding: 18px;

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

  background: rgba(0,0,0,0.18);
}

.center .img{
  width: 100%;
  height: 100%;
  min-height: 260px;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);

  background: url("img/bg3.png") center/cover no-repeat;
}

/* ======================================
   SEKCJA 4 — SPLIT (flex)
====================================== */
#czwarta{ background: var(--g4); }

.split{
  display: flex;
  flex-wrap: nowrap; /* desktop */
  gap: 22px;
  align-items: stretch;
  margin-top: 8px;
}

#czwarta .media{
  flex: 1.15 1 0;
  min-height: 260px;
  border-radius: var(--r);
  border: var(--border);

  background:
    linear-gradient(180deg, rgba(7,6,13,0.22), rgba(7,6,13,0.62)),
    url("img/bg4.png") center/cover no-repeat;
}

#czwarta .text{
  flex: 1 1 0;
  min-height: 260px;
  border-radius: var(--r);
  border: var(--border);
  background: rgba(20,22,31,0.90);
  padding: 22px;

  display: flex;
  align-items: center;
}

/* ======================================
   SEKCJA 5 — SPLIT + STOPKA
====================================== */
#piata{
  background: var(--g5);
  padding-bottom: 30px; /* trochę ciaśniej */
}

#piata .text-light{
  flex: 1 1 0;
  min-height: 260px;

  border-radius: var(--r);
  border: var(--border);
  background: var(--card-light);
  color: var(--black);

  padding: 22px;

  display: flex;
  align-items: center;
}

#piata .media{
  flex: 1.15 1 0;
  min-height: 260px;

  border-radius: var(--r);
  border: var(--border);

  background:
    linear-gradient(180deg, rgba(7,6,13,0.22), rgba(7,6,13,0.62)),
    url("img/bg5.png") center/cover no-repeat;
}

/* ======================================
   STOPKA (osobny footer na dole)
====================================== */
#stopka{
  background: #0b0b12;
  border-top: 1px solid rgba(255,255,255,0.10);
  padding: 54px 20px;
}

.footer-wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;

  display: flex;
  gap: 40px;
  flex-wrap: nowrap; /* desktop */
}

#stopka .col{ flex: 1; }

#stopka h3{
  font-size: 16px;
  margin-bottom: 14px;
}

#stopka p,
#stopka a{
  font-size: 14px;
  color: rgba(255,255,255,0.80);
  margin: 6px 0;
  display: block;
}

#stopka a:hover{
  color: var(--orange);
}
/* FIX: ścieżki do obrazów */

#pierwsza{
  background:
    linear-gradient(180deg, rgba(32,36,48,0.92) 2%, rgba(6,5,11,0.96) 100%),
    url("img/bg1.jpg") center/cover no-repeat;
  background-blend-mode: overlay;
}

#druga{
  background:
    url("img/bg2.png") center/cover no-repeat,
    linear-gradient(180deg, #07060D 0%, #1A1C27 100%);
  background-blend-mode: overlay;
}

.center .img{ background: url("img/bg3.jpg") center/cover no-repeat; }
#czwarta .media{ background: linear-gradient(180deg, rgba(7,6,13,0.22), rgba(7,6,13,0.62)), url("img/bg4.jpg") center/cover no-repeat; }
#piata .media{ background: linear-gradient(180deg, rgba(7,6,13,0.22), rgba(7,6,13,0.62)), url("img/bg5.jpg") center/cover no-repeat; }
/* =========================
   WATER EFFECTS: Parallax + Ripple + Glass
  ========================= */

/* --- GLASS LOOK (nav już ma blur, tu dopracowanie elementów) --- */
nav{
  background: rgba(7,6,13,0.72);
}

nav ol li a{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Panele w sekcji 3 jako delikatne szkło */
#trzecia .panel{
  background: rgba(255,255,255,0.03);
}

#trzecia .col.left{
  background: rgba(20,22,31,0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#trzecia .col.right{
  background: rgba(240,72,33,0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Karty w sekcji 2 – lekko „glass” ale nadal jasne */
#druga .card{
  background: rgba(245,245,245,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* --- PARALLAX WATER OVERLAY (wybrane tło: water-dark.jpg) --- */
#pierwsza{
  position: relative;
  overflow: hidden;
}

/* warstwa wody poruszana JS-em */
#pierwsza::after{
  content: "";
  position: absolute;
  inset: -60px; /* żeby nie było pustych krawędzi przy przesuwaniu */
  background: url("img/water-dark.jpg") center/cover no-repeat;
  opacity: 0.35;
  mix-blend-mode: screen; /* fajnie rozświetla granat */
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
  pointer-events: none;
  z-index: 0;
}

/* treść sekcji ponad wodą */
#pierwsza .zawartosc{
  position: relative;
  z-index: 1;
}

/* --- RIPPLE SETUP (działa na elementach klikanych/hover) --- */
.ripple-target{
  position: relative;
  overflow: hidden;
}

/* kółko ripple tworzone przez JS */
.ripple{
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0.65;

  /* “wodne” światło jak z obrazka ripple */
  background: radial-gradient(circle,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.35) 35%,
    rgba(240,72,33,0.15) 60%,
    rgba(240,72,33,0.00) 70%
  );

  animation: rippleAnim 700ms ease-out forwards;
}

@keyframes rippleAnim{
  to{
    transform: translate(-50%, -50%) scale(28);
    opacity: 0;
  }
}

/* mały hover na kartach */
#druga .card:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 55px rgba(0,0,0,0.35);
}
/* ======================================
   VIDEO LOOP SECTION (WOW EFFECT)
====================================== */

#video-loop{
  background: linear-gradient(180deg, #07060D 0%, #11121a 100%);
  padding: 40px 20px;
}

.video-wrap{
  position: relative;
  width: 100%;
  height: 320px; /* może zmienić na 280–380? */
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
}

/* video full cover */
.video-wrap video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  filter:
    brightness(0.7)
    contrast(1.05)
    saturate(0.9);
}

/* ciemny gradient żeby pasowało do strony */
.video-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(7,6,13,0.9) 0%,
    rgba(7,6,13,0.3) 50%,
    rgba(7,6,13,0.9) 100%
  );
}

/* tekst */
.video-text{
  position: absolute;
  left: 40px;
  bottom: 30px;
  z-index: 2;
}

.video-text h2{
  font-size: 24px;
  letter-spacing: 1px;
  color: white;
}
/* PARALLAX dla video */
.video-wrap video{
  will-change: transform;
  transform: translate3d(0, var(--vpy, 0px), 0) scale(1.06);
}
/* ======================================
   GLOBAL VIDEO BACKGROUND (2–5)
====================================== */

/* wrapper pod wszystkimi sekcjami */
.video-bg-wrap{
  position: fixed;
  inset: 0;
  z-index: -1; /* za całą stroną */
  overflow: hidden;
}

/* samo video */
.video-bg{
  width: 100%;
  height: 110%;
  object-fit: cover;

  filter:
    brightness(0.35)
    contrast(1.1)
    saturate(0.9);

  transform: translate3d(0, var(--vpy, 0px), 0) scale(1.1);
  will-change: transform;
}

/* żeby sekcje miały przezroczyste tło */
#druga,
#trzecia,
#czwarta,
#piata{
  background: transparent !important;
}

/* stopka już normalna */
#stopka{
  position: relative;
  z-index: 1;
  background: #0b0b12;
}

/* ===============================
   SCROLL REVEAL (fade + slide)
=============================== */

.reveal{
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.9s ease;
}

.reveal.show{
  opacity: 1;
  transform: translateY(0);
}

#druga .card:nth-child(1){ transition-delay: .05s; }
#druga .card:nth-child(2){ transition-delay: .12s; }
#druga .card:nth-child(3){ transition-delay: .19s; }
#druga .card:nth-child(4){ transition-delay: .26s; }

/* ===============================
   WATER CURSOR TRAIL (desktop)
=============================== */

.cursor-trail{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

.cursor-drop{
  position: absolute;

  width: 22px;
  height: 22px;

  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0.55;

  background: radial-gradient(circle,
    rgba(255,255,255,0.95) 0%,
    rgba(170,230,255,0.55) 30%,
    rgba(0,180,255,0.25) 55%,
    rgba(0,180,255,0.00) 75%
  );

  filter: blur(3px);              /* KLUCZ do “wody” */
  mix-blend-mode: screen;         /* świeci na tle */
  pointer-events: none;

  animation: dropFade 1.4s ease-out forwards;
  animation: dropFade 2s ease-out forwards, float 4s ease-in-out infinite;

}



@keyframes dropFade{
  0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0.85; }
  60%  { opacity: 0.35; }
  100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}

/* delikatniej na jasnych elementach (karty) */
#druga .card, #piata .text-light{
  isolation: isolate; /* lepsze blendowanie, bez “brudzenia” */
}

/*@keyframes float{
  0%,100%{ transform: translate(-50%, -50%) scale(1) translateY(0px); }
  50%{ transform: translate(-50%, -50%) scale(1) translateY(-6px); }
}

/* HERO spotlight (refleks na wodzie) */
#pierwsza{
  position: relative;
  overflow: hidden;
}

#pierwsza::before{
  content:"";
  position:absolute;
  inset:-100px;
  pointer-events:none;
  z-index: 0;

  background: radial-gradient(
    500px 360px at var(--sx, 50%) var(--sy, 45%),
    rgba(255,255,255,0.18) 0%,
    rgba(0,180,255,0.10) 30%,
    rgba(0,0,0,0) 65%
  );

  mix-blend-mode: screen;
  opacity: 0.9;
  transition: opacity 250ms ease;
}

#pierwsza .zawartosc,
#pierwsza .hero{
  position: relative;
  z-index: 1;
}

/* Grain overlay (filmowy szum) */
#pierwsza .hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background-image: url("img/noise.png");
  background-size: 220px 220px;
  opacity: 0.08;
  mix-blend-mode: overlay;
}
/* ===== HERO CENTER FIX ===== */

.hero{
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-content{
  max-width: 720px;
  padding: 56px 60px;

  display:flex;
  flex-direction:column;
  gap:16px;

  align-items:center;
  text-align:center;
}

.hero h1{
  font-size: 52px;
  line-height: 1.1;
}

.hero .btn{
  margin: 18px auto 0;
}
.hero{
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition: transform 160ms ease;
}

/*zwezenie ramki i poprawa proporcji*/
.hero{
  max-width: 820px;
  margin: 0 auto;
}
/* ======================
   WATER CURSOR
====================== */

/* chowamy systemowy kursor */
body{
  cursor: none;
}

/* główna kropla */
.cursor{
  position: fixed;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;

  background: radial-gradient(circle,
    rgba(255,255,255,0.95) 0%,
    rgba(120,220,255,0.7) 40%,
    rgba(0,180,255,0.25) 70%,
    transparent 80%
  );

  filter: blur(1px);
  transform: translate(-50%, -50%);
}

/* bąbelki trail */
.trail{
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;

  background: rgba(180,230,255,0.5);
  filter: blur(2px);

  transform: translate(-50%, -50%);
  animation: fadeTrail .6s ease-out forwards;
}

@keyframes fadeTrail{
  to{
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
}
/* ======================
   WATER HOVER WAVE
====================== */

.wave-hover{
  position: relative;
  transition:
    transform .25s cubic-bezier(.2,.8,.2,1),
    box-shadow .25s ease,
    filter .25s ease;
}

/* lekki "float" */
.wave-hover:hover{
  transform: translateY(-3px) scale(1.03);
  filter: brightness(1.05);
  box-shadow:
    0 10px 25px rgba(0,0,0,0.35),
    0 0 25px rgba(120,220,255,0.25);
}

/* ripple aura */
.wave-hover::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;

  background:
    radial-gradient(circle at center,
      rgba(120,220,255,0.35),
      transparent 70%
    );

  opacity:0;
  transform: scale(.8);
  transition: .35s ease;
}

.wave-hover:hover::after{
  opacity:.6;
  transform: scale(1.2);
}
/* Magnetic buttons */
.magnet{
  position: relative;
  display: inline-block;
  will-change: transform;
  transition: transform 120ms ease-out;
}

.magnet .magnet-inner{
  display: inline-block;
  will-change: transform;
  transition: transform 120ms ease-out;
}
/* =====================
   COPYRIGHT (footer bottom)
===================== */
#stopka .copyright{
  margin-top: 40px;
  padding-top: 20px;

  text-align: center;
  font-size: 13px;
  letter-spacing: 0.5px;

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

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

/* ===== ODDECH PRZED STOPKĄ ===== */

#piata{
  padding-bottom: 180px; /* moge zwiekszyc */
}