/* ---------- poprawki: przejścia CSS nie mogą walczyć z GSAP ---------- */
.btn { transition: background .25s, box-shadow .25s, translate .25s; }
.btn:hover { transform: none; translate: 0 -2px; }

/* ---------- tło: zorza w każdym slajdzie ---------- */
.slide > .wrap { position: relative; z-index: 2; }
.slide:not(.hero):not(.dark3d)::before {
  content: ""; position: absolute; inset: -25%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 30% at 20% 30%, rgba(127, 211, 255, .13), transparent 70%),
    radial-gradient(35% 28% at 80% 70%, rgba(80, 140, 255, .12), transparent 70%),
    radial-gradient(30% 25% at 60% 15%, rgba(140, 255, 220, .07), transparent 70%);
  animation: aurora 22s ease-in-out infinite alternate;
}
@keyframes aurora {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(4%, -3%, 0) rotate(8deg) scale(1.08); }
  100% { transform: translate3d(-4%, 3%, 0) rotate(-6deg) scale(1.02); }
}
#ambient { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20; opacity: .55; }

/* ---------- obracający się podpis ---------- */
#badge { position: fixed; left: 18px; bottom: 18px; width: 118px; height: 118px; z-index: 45; color: rgba(217, 243, 255, .5); pointer-events: none; mix-blend-mode: screen; }
#badge svg { width: 100%; height: 100%; overflow: visible; }
#badge text { font: 800 15.5px var(--display); letter-spacing: .06em; fill: currentColor; }
.badge-rot { transform-origin: 100px 100px; animation: spin 18s linear infinite; }
.badge-flake { transform-origin: 100px 100px; animation: spin 30s linear infinite reverse; opacity: .8; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 700px) { #badge { width: 84px; height: 84px; left: 8px; bottom: 8px; } }

/* ---------- przejście między slajdami ---------- */
#wipe {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; display: grid; place-items: center;
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  background: linear-gradient(160deg, #e8f7ff 0%, #9fdcff 40%, #2b7bd6 100%);
}
.wipe-frost { position: absolute; inset: 0; opacity: .5; background:
  repeating-linear-gradient(115deg, rgba(255, 255, 255, .0) 0 38px, rgba(255, 255, 255, .35) 38px 40px),
  repeating-linear-gradient(35deg, rgba(255, 255, 255, .0) 0 70px, rgba(255, 255, 255, .25) 70px 71px); }
.wipe-in { position: relative; display: flex; align-items: baseline; gap: 22px; color: #05101c; overflow: hidden; padding: 0 20px; }
.wipe-n { font: 800 clamp(80px, 16vw, 220px)/1 var(--display); letter-spacing: -.06em; }
.wipe-t { font: 800 clamp(26px, 4vw, 54px)/1 var(--display); letter-spacing: -.02em; }

/* ---------- nagłówki dzielone na słowa ---------- */
.split-h .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split-h .wi { display: inline-block; will-change: transform; }

/* ---------- autor na starcie ---------- */
.hero .author { margin: 26px 0 0; font: 600 16px var(--body); color: #cfe4f3; letter-spacing: .02em; }
.hero .author span { display: block; font-size: 12px; letter-spacing: .25em; text-transform: uppercase; color: var(--glacier); margin-bottom: 4px; }

/* ---------- światło pod kursorem na kartach ---------- */
.lake::after, .fact-card::after, .gl-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(217, 243, 255, .22), transparent 60%);
}
.lake:hover::after, .fact-card:hover::after, .gl-card:hover::after { opacity: 1; }

/* ---------- oś czasu ---------- */
.tl { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: stretch; }
.tl svg { width: 100%; height: auto; background: rgba(7, 26, 44, .7); border: 1px solid var(--line); border-radius: var(--r); }
.tl-ui { display: flex; flex-direction: column; gap: 12px; }
.tl-info { margin: 0; flex: 1; }
.tl-mark { cursor: pointer; }
.tl-mark circle.c { transition: r .2s; }
.tl-mark:hover circle.c, .tl-mark.on circle.c { r: 13; }
.tl-mark text { font: 700 15px var(--body); fill: #fff; paint-order: stroke; stroke: #05101c; stroke-width: 4px; }
@media (max-width: 900px) { .tl { grid-template-columns: 1fr; } }

/* ---------- przekrój: kroki ---------- */
.xs-steps { display: flex; gap: 6px; flex-wrap: wrap; background: rgba(5, 16, 28, .55); padding: 6px; border-radius: 999px; backdrop-filter: blur(8px); }
.xs-steps button { border: 0; background: transparent; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 14px; transition: background .25s, color .25s; }
.xs-steps button b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(217, 243, 255, .18); margin-right: 6px; font-size: 12px; }
.xs-steps button.on { background: var(--ice); color: var(--ink); }
.xs-steps button.on b { background: var(--ink); color: var(--ice); }
.xs-steps button.done b { background: #46d38a; color: #05101c; }
.xs-steps .xs-reset { font-size: 18px; padding: 6px 12px; }
.xs-cap {
  position: absolute; left: 16px; bottom: 14px; max-width: min(560px, calc(100% - 32px)); z-index: 2;
  background: rgba(5, 16, 28, .78); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 16px; font-size: 15.5px; color: #dcecf7;
}
.xs-cap b { color: var(--warm); }

/* ---------- nauka ---------- */
.tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); margin-bottom: 20px; }
.tabs button { border: 0; background: transparent; padding: 9px 22px; border-radius: 999px; font-weight: 700; transition: background .25s, color .25s; }
.tabs button.on { background: var(--ice); color: var(--ink); }
.tab-pane { display: none; }
.tab-pane.on { display: block; }

.fc-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 30px; align-items: center; }
.fc-stack { position: relative; height: min(360px, 48vh); min-height: 280px; perspective: 1600px; }
.fc { position: absolute; inset: 0; cursor: pointer; transform-style: preserve-3d; }
.fc-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.fc.flip .fc-in { transform: rotateY(180deg); }
.fc-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 22px; border: 1px solid rgba(217, 243, 255, .3); padding: 30px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.fc-front { background: linear-gradient(150deg, #1d5a85, #0b2238 70%); }
.fc-front .fc-cat { position: absolute; top: 22px; left: 26px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--glacier); }
.fc-front h3 { font-size: clamp(34px, 5vw, 60px); }
.fc-front .fc-hint { position: absolute; bottom: 22px; left: 26px; font-size: 13px; color: var(--muted); }
.fc-back { transform: rotateY(180deg); background: linear-gradient(150deg, #e7f6ff, #a7dcff); color: #05101c; gap: 10px; }
.fc-back h4 { margin: 0; font: 800 26px var(--display); }
.fc-back p { margin: 0; font-size: 17px; line-height: 1.5; }
.fc-back .ex { font-size: 15px; color: #1d4a6c; }
.fc-back b { color: #05101c; }
.fc-done { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; border-radius: 22px; border: 1px dashed var(--line); }
.fc-done h3 { font-size: 44px; }
.fc-side { display: flex; flex-direction: column; gap: 14px; }
.fc-count { display: flex; align-items: baseline; gap: 10px; }
.fc-count span { font: 800 64px/1 var(--display); }
.fc-count small { color: var(--muted); }
.fc-bar { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.fc-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #46d38a, var(--glacier)); transition: width .5s; }
.fc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fc-btns button { border: 1px solid var(--line); padding: 14px 10px; border-radius: 14px; font-weight: 800; transition: background .2s, translate .2s; }
.fc-btns button:hover { translate: 0 -2px; }
.fc-no { background: rgba(229, 99, 111, .18); }
.fc-yes { background: rgba(70, 211, 138, .2); }
.fc-tip { color: var(--muted); font-size: 14px; margin: 0; }
@media (max-width: 860px) { .fc-wrap { grid-template-columns: 1fr; } }

.gl-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 18px; }
.gl-tools input { flex: 1 1 220px; max-width: 320px; background: var(--glass); border: 1px solid var(--line); color: var(--text); padding: 11px 16px; border-radius: 999px; font: inherit; font-size: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { border: 1px solid var(--line); background: transparent; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; transition: background .2s, color .2s; }
.chips button.on { background: var(--glacier); color: var(--ink); border-color: transparent; }
.gl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; max-height: calc(100vh - 360px); min-height: 260px; overflow: auto; padding-right: 6px; }
.gl-card { position: relative; overflow: hidden; text-align: left; background: var(--glass); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.gl-card h4 { margin: 0 0 4px; font: 700 20px var(--display); display: flex; justify-content: space-between; gap: 8px; }
.gl-card h4 small { font: 600 11px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--glacier); }
.gl-card p { margin: 6px 0 0; font-size: 14.5px; color: #cfe4f3; }
.gl-card .ex { color: var(--warm); }
.gl-card .more { overflow: hidden; height: 0; }
.gl-card.open { border-color: rgba(217, 243, 255, .45); }

/* ---------- quiz v2 ---------- */
.q-ans button { transition: background .2s, border-color .2s !important; }
.q-ans button kbd { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: rgba(255, 255, 255, .1); font: 700 12px var(--body); margin-right: 10px; }
.q-streak { color: var(--warm); font-weight: 700; }

/* ---------- finał ---------- */
.made { position: relative; margin: 36px 0 6px; padding: 30px 0; text-align: left; }
.made-k { display: block; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--glacier); }
.made-name { font-size: clamp(54px, 10vw, 140px); font-weight: 800; letter-spacing: -.04em; line-height: .95; margin: 10px 0 8px; color: #fff;
  filter: drop-shadow(0 8px 40px rgba(127, 211, 255, .45)); }
.made-name .ch { display: inline-block; background: linear-gradient(180deg, #ffffff 30%, #9fdcff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.made-name .sp { display: inline-block; width: .28em; }
.made-c { display: inline-block; font: 800 22px var(--display); padding: 6px 16px; border-radius: 10px; background: var(--ice); color: var(--ink); }
.shard { position: absolute; width: 10px; height: 26px; background: linear-gradient(180deg, #fff, #8fd8ff); clip-path: polygon(50% 0, 100% 40%, 50% 100%, 0 40%); pointer-events: none; }

/* ---------- przejście v2: warstwy lodu, pęknięcie, fala ---------- */
#wipe { clip-path: none !important; background: none !important; visibility: hidden; overflow: hidden; }
.wl { position: absolute; left: -15%; right: -15%; top: -35%; bottom: -35%; will-change: transform; }
.wl1 { background: linear-gradient(160deg, #0d3b66, #05101c); }
.wl2 { background: linear-gradient(160deg, #2b7bd6, #0d3b66); }
.wl3 { background: linear-gradient(160deg, #f2fbff 0%, #a9e0ff 45%, #3f95e0 100%); }
.wl3 .wipe-frost { inset: 25% 0; }
.wipe-ring { position: absolute; left: 50%; top: 50%; width: 40vmin; height: 40vmin; margin: -20vmin 0 0 -20vmin; border-radius: 50%; border: 6px solid rgba(255, 255, 255, .9); box-shadow: 0 0 60px rgba(255, 255, 255, .8), inset 0 0 40px rgba(255, 255, 255, .6); opacity: 0; }
.wipe-crack { position: absolute; inset: 0; width: 100%; height: 100%; }
.wipe-crack path { fill: none; stroke: #fff; stroke-width: .45; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .9)); }
.wipe-in { flex-direction: column; align-items: center; gap: 4px; text-align: center; perspective: 800px; z-index: 2; }
.wipe-n { text-shadow: 0 20px 60px rgba(5, 16, 28, .35); }
.wipe-t { display: block; }
.wipe-t .c { display: inline-block; }
.split-h .w { overflow: visible; perspective: 700px; white-space: nowrap; }
.split-h .wi { display: inline-block; }

/* ---------- slajdy mieszczą się w ekranie (kółko = jeden slajd) ---------- */
.slide { padding-top: 34px; padding-bottom: 34px; }
.flip { height: min(270px, 33vh); }
#map { max-height: calc(100vh - 300px); }
#mapa .sub { margin-bottom: 14px; }
#mapa .seg button { padding: 9px 14px; }
.xs-box { max-height: calc(100vh - 260px); }
#dolina .wrap { display: grid; grid-template-columns: 3fr 2fr; column-gap: 24px; align-items: start; }
#dolina .wrap > .kicker, #dolina .wrap > h2, #dolina .wrap > .sub { grid-column: 1 / -1; }
#dolina .photo-strip { margin: 0; grid-template-columns: 1fr; gap: 12px; }
#dolina #vu { max-height: calc(100vh - 330px); }
@media (max-width: 900px) { #dolina .wrap { grid-template-columns: 1fr; } }

/* ---------- scena przejść 3D ---------- */
#stageBg {
  position: fixed; inset: 0; z-index: 55; visibility: hidden; opacity: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 30% 30%, rgba(127, 211, 255, .18), transparent 70%),
    radial-gradient(50% 45% at 75% 75%, rgba(43, 123, 214, .22), transparent 70%),
    #02070d;
}
#dots, #progress, #badge { z-index: 70; }

/* ---------- własne przejścia (fx.js) ---------- */
#fxLayer { position: fixed; inset: 0; z-index: 62; pointer-events: none; overflow: hidden; perspective: 1700px; }
#fxLayer > .slide { position: absolute; }
.fx-fall { position: absolute; inset: 0; transform-style: preserve-3d; }
.fx-shard { position: absolute; overflow: hidden; will-change: transform; backface-visibility: visible; }
.fx-gloss { position: absolute; inset: 0; opacity: 0; background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(170, 225, 255, .2) 45%, transparent 70%); mix-blend-mode: screen; }
.fx-cracks { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-cracks path { fill: none; stroke: #f4fbff; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px #bfe9ff) drop-shadow(0 0 2px #fff); }
.fx-flash { position: absolute; width: 160px; height: 160px; margin: -80px 0 0 -80px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, rgba(191, 233, 255, .8) 30%, transparent 70%); }
.fx-strip { position: absolute; top: 0; transform-style: preserve-3d; will-change: transform; }
.fx-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fx-face.back { transform: rotateY(180deg); }
.fx-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #000, #02070d); opacity: 0; }
.fx-edge { position: absolute; top: 0; bottom: 0; right: -1px; width: 2px; background: linear-gradient(180deg, transparent, rgba(191, 233, 255, .7), transparent); transform: translateZ(1px); }
.fx-glow { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 64; pointer-events: none; overflow: visible; }
.fx-glow .edge { fill: none; stroke: #e9f8ff; stroke-width: 4; filter: drop-shadow(0 0 10px #8fd8ff) drop-shadow(0 0 3px #fff); }
.fx-glow .wet { fill: none; stroke: rgba(127, 211, 255, .35); stroke-width: 26; filter: blur(6px); }
.fx-glow .drop { fill: #dff4ff; filter: drop-shadow(0 0 6px #8fd8ff); }
.fx-ghost { position: absolute; inset: 0; overflow: hidden; will-change: transform; transform-origin: 50% 50%; }
.fx-burst { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, rgba(191, 233, 255, .9) 25%, rgba(43, 123, 214, .4) 55%, transparent 72%); }
.fx-ring { position: fixed; left: 50%; top: 50%; z-index: 64; pointer-events: none; border-radius: 50%; border: 3px solid #e9f8ff; box-shadow: 0 0 40px #8fd8ff, inset 0 0 40px rgba(143, 216, 255, .6); }

/* ======================= v4: świat 3D + przewijanie jak Apple ======================= */
html { scroll-snap-type: none !important; scroll-behavior: auto !important; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body { background: #02070d; }
#world { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
#worldShade { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(115% 85% at 62% 45%, transparent 38%, rgba(2, 7, 13, .72) 100%), linear-gradient(90deg, rgba(2, 7, 13, .6), transparent 58%); }
#worldLabels { position: fixed; inset: 0; z-index: 1; pointer-events: none; transition: opacity .5s; }
#worldLabels span { position: absolute; left: 0; top: 0; font: 800 13px var(--body); letter-spacing: .28em; text-transform: uppercase; color: rgba(217, 243, 255, .9); text-shadow: 0 2px 12px #000, 0 0 2px #000; white-space: nowrap; }
#fog { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 55%, #ffffff 0%, #e6f6ff 40%, #9fd4f5 100%); }
.slide { background: transparent !important; z-index: 2; }
.slide::before { display: none !important; }
.dark3d { background: #08121c !important; }
.slide h2, .slide .sub, .slide .kicker { text-shadow: 0 4px 30px rgba(2, 7, 13, .9); }
.interlude { display: grid; place-items: center; text-align: center; }
.il-in { width: min(1250px, 100%); padding: 0 16px; will-change: transform; }
.il-text { margin: 0; font: 800 clamp(52px, 9.5vw, 156px)/.95 var(--display); letter-spacing: -.045em; perspective: 900px; text-shadow: 0 10px 60px rgba(2, 7, 13, .7); }
.ilw { display: inline-block; }
.ilw > span { display: inline-block; transform-origin: 50% 100%; }
.il-sub { margin: 26px auto 0; max-width: 36ch; font-size: clamp(18px, 2vw, 25px); color: #d7ebf8; text-shadow: 0 2px 20px #02070d; }
.sub .sw { display: inline; }
.split-h { perspective: 800px; }