/* ==========================================================================
   FSO DECK ENGINE — wspólny silnik prezentacji HackAIthon Film Spring Open 2026
   Scena 1920×1080 skalowana do okna. Każda talia definiuje własny motyw.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body.deck {
  background: var(--letterbox, #000);
  color: var(--fg, #fff);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  cursor: default;
  user-select: none;
}
body.deck.idle { cursor: none; }

/* ---------- scena ---------- */
.stage {
  position: absolute;
  left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform-origin: 0 0;
  overflow: hidden;
  background: var(--bg, #000);
  contain: strict;
}
.slide {
  position: absolute; inset: 0;
  width: 1920px; height: 1080px;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  background: var(--slide-bg, transparent);
  will-change: transform, opacity, clip-path, filter;
}
.slide.active, .slide.leaving { visibility: visible; }
.slide.active { pointer-events: auto; z-index: 2; }
.slide.leaving { z-index: 1; }

/* ---------- przejścia między slajdami ---------- */
:root { --t-dur: 1000ms; --t-ease: cubic-bezier(.77,0,.18,1); }
.slide.anim-in  { animation: var(--in-name, t-fade-in)  var(--t-dur) var(--t-ease) both; }
.slide.anim-out { animation: var(--out-name, t-fade-out) var(--t-dur) var(--t-ease) both; }

.slide[data-transition="fade"]    { --in-name: t-fade-in;   --out-name: t-fade-out; }
.slide[data-transition="zoom"]    { --in-name: t-zoom-in;   --out-name: t-zoom-out; }
.slide[data-transition="slide"]   { --in-name: t-slide-in;  --out-name: t-slide-out; }
.slide[data-transition="iris"]    { --in-name: t-iris-in;   --out-name: t-hold; }
.slide[data-transition="wipe"]    { --in-name: t-wipe-in;   --out-name: t-hold; }
.slide[data-transition="wipe-up"] { --in-name: t-wipeup-in; --out-name: t-hold; }
.slide[data-transition="blur"]    { --in-name: t-blur-in;   --out-name: t-blur-out; }
.slide[data-transition="curtain"] { --in-name: t-curtain-in;--out-name: t-hold; }
.slide[data-transition="diagonal"]{ --in-name: t-diag-in;   --out-name: t-hold; }
.slide[data-transition="flip"]    { --in-name: t-flip-in;   --out-name: t-flip-out; }
.slide[data-transition="rise"]    { --in-name: t-rise-in;   --out-name: t-sink-out; }
.slide[data-transition="glitch"]  { --in-name: t-glitch-in; --out-name: t-fade-out; --t-dur: 700ms; }
.slide[data-transition="dissolve"]{ --in-name: t-dissolve-in; --out-name: t-dissolve-out; --t-dur: 1400ms; --t-ease: ease-in-out; }
.slide[data-transition="cut"]     { --in-name: t-cut;       --out-name: t-cut-out; --t-dur: 10ms; }

/* wersje wsteczne (nawigacja do tyłu) */
.stage.rev .slide[data-transition="slide"]   { --in-name: t-slide-in-r;  --out-name: t-slide-out-r; }
.stage.rev .slide[data-transition="wipe"]    { --in-name: t-wipe-in-r; }
.stage.rev .slide[data-transition="wipe-up"] { --in-name: t-wipeup-in-r; }
.stage.rev .slide[data-transition="diagonal"]{ --in-name: t-diag-in-r; }
.stage.rev .slide[data-transition="rise"]    { --in-name: t-sink-in-r;   --out-name: t-rise-out-r; }

@keyframes t-hold { from { opacity: 1 } to { opacity: 1 } }
@keyframes t-cut { from { opacity: 1 } to { opacity: 1 } }
@keyframes t-cut-out { from { opacity: 0 } to { opacity: 0 } }
@keyframes t-fade-in  { from { opacity: 0 } to { opacity: 1 } }
@keyframes t-fade-out { from { opacity: 1 } to { opacity: 0 } }
@keyframes t-zoom-in  { from { opacity: 0; transform: scale(1.18); filter: blur(14px) } to { opacity: 1; transform: none; filter: none } }
@keyframes t-zoom-out { from { opacity: 1; transform: none } to { opacity: 0; transform: scale(.86); filter: blur(6px) } }
@keyframes t-slide-in   { from { transform: translateX(100%) } to { transform: none } }
@keyframes t-slide-out  { from { transform: none } to { transform: translateX(-35%); opacity: .2 } }
@keyframes t-slide-in-r { from { transform: translateX(-100%) } to { transform: none } }
@keyframes t-slide-out-r{ from { transform: none } to { transform: translateX(35%); opacity: .2 } }
@keyframes t-iris-in  { from { clip-path: circle(0% at var(--ix, 50%) var(--iy, 50%)) } to { clip-path: circle(150% at var(--ix, 50%) var(--iy, 50%)) } }
@keyframes t-wipe-in  { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0 0 0 0) } }
@keyframes t-wipe-in-r{ from { clip-path: inset(0 0 0 100%) } to { clip-path: inset(0 0 0 0) } }
@keyframes t-wipeup-in  { from { clip-path: inset(100% 0 0 0) } to { clip-path: inset(0 0 0 0) } }
@keyframes t-wipeup-in-r{ from { clip-path: inset(0 0 100% 0) } to { clip-path: inset(0 0 0 0) } }
@keyframes t-blur-in  { from { opacity: 0; filter: blur(40px) saturate(0) } to { opacity: 1; filter: none } }
@keyframes t-blur-out { from { opacity: 1; filter: none } to { opacity: 0; filter: blur(30px) } }
@keyframes t-curtain-in { from { clip-path: inset(0 50% 0 50%) } to { clip-path: inset(0 0 0 0) } }
@keyframes t-diag-in   { from { clip-path: polygon(0 0, 0 0, 0 0, 0 0) } to { clip-path: polygon(0 0, 200% 0, 0 200%, 0 0) } }
@keyframes t-diag-in-r { from { clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%) } to { clip-path: polygon(100% 100%, -100% 100%, 100% -100%, 100% 100%) } }
@keyframes t-flip-in  { from { opacity: 0; transform: perspective(2400px) rotateY(-70deg) translateZ(-300px) } to { opacity: 1; transform: none } }
@keyframes t-flip-out { from { opacity: 1; transform: none } to { opacity: 0; transform: perspective(2400px) rotateY(60deg) translateZ(-300px) } }
@keyframes t-rise-in  { from { transform: translateY(100%) } to { transform: none } }
@keyframes t-sink-out { from { transform: none; filter: none } to { transform: translateY(-20%) scale(.94); filter: brightness(.3) } }
@keyframes t-sink-in-r{ from { transform: translateY(-100%) } to { transform: none } }
@keyframes t-rise-out-r{ from { transform: none } to { transform: translateY(20%) scale(.94); filter: brightness(.3) } }
@keyframes t-dissolve-in  { 0% { opacity: 0; filter: brightness(2.4) contrast(.6) } 100% { opacity: 1; filter: none } }
@keyframes t-dissolve-out { 0% { opacity: 1 } 100% { opacity: 0; filter: brightness(.2) } }
@keyframes t-glitch-in {
  0%   { opacity: 0; clip-path: inset(40% 0 45% 0); transform: translateX(-40px) }
  15%  { opacity: 1; clip-path: inset(10% 0 70% 0); transform: translateX(30px) }
  30%  { clip-path: inset(60% 0 5% 0); transform: translateX(-20px) skewX(8deg) }
  45%  { clip-path: inset(0 0 0 0); transform: translateX(12px); filter: hue-rotate(90deg) contrast(1.6) }
  60%  { clip-path: inset(30% 0 30% 0); transform: translateX(-6px) }
  75%  { clip-path: inset(0 0 0 0); transform: none; filter: none }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: none }
}

/* ---------- animacje elementów: data-a="…" data-d="opóźnienie ms" ---------- */
[data-a] {
  --d: 0ms; --dur: 1100ms; --ease: cubic-bezier(.16,1,.3,1);
  transition:
    opacity var(--dur) var(--ease) var(--d),
    transform var(--dur) var(--ease) var(--d),
    filter var(--dur) var(--ease) var(--d),
    clip-path var(--dur) var(--ease) var(--d),
    letter-spacing calc(var(--dur) * 1.6) var(--ease) var(--d);
}
.slide:not(.in) [data-a] { transition-duration: 0s !important; transition-delay: 0s !important; }

.slide:not(.in) [data-a="fade"]   { opacity: 0; }
.slide:not(.in) [data-a="up"]     { opacity: 0; transform: translateY(60px); }
.slide:not(.in) [data-a="down"]   { opacity: 0; transform: translateY(-60px); }
.slide:not(.in) [data-a="left"]   { opacity: 0; transform: translateX(90px); }
.slide:not(.in) [data-a="right"]  { opacity: 0; transform: translateX(-90px); }
.slide:not(.in) [data-a="zoom"]   { opacity: 0; transform: scale(.82); }
.slide:not(.in) [data-a="zoom-out"]{ opacity: 0; transform: scale(1.25); }
.slide:not(.in) [data-a="pop"]    { opacity: 0; transform: scale(.4); }
.slide:not(.in) [data-a="blur"]   { opacity: 0; filter: blur(22px); }
.slide:not(.in) [data-a="rise"]   { clip-path: inset(100% 0 0 0); transform: translateY(40px); }
.slide:not(.in) [data-a="wipe"]   { clip-path: inset(0 100% 0 0); }
.slide:not(.in) [data-a="wipe-l"] { clip-path: inset(0 0 0 100%); }
.slide:not(.in) [data-a="reveal"] { clip-path: inset(50% 0 50% 0); }
.slide:not(.in) [data-a="iris"]   { clip-path: circle(0% at 50% 50%); }
.slide:not(.in) [data-a="tilt"]   { opacity: 0; transform: perspective(1200px) rotateX(55deg) translateY(80px); }
.slide:not(.in) [data-a="spin"]   { opacity: 0; transform: rotate(-120deg) scale(.5); }
.slide:not(.in) [data-a="track"]  { opacity: 0; letter-spacing: .6em; filter: blur(8px); }
[data-a="pop"]  { --ease: cubic-bezier(.34,1.56,.64,1); }
[data-a="iris"] { clip-path: circle(150% at 50% 50%); }
[data-a="pop"], [data-a="spin"] { --dur: 900ms; }

/* rysowanie linii SVG: data-a="draw" na <svg> lub <g> — JS ustawia pathLength=1 */
[data-a="draw"] :is(path, line, polyline, polygon, circle, ellipse, rect).dr,
[data-a="draw"].dr {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--dur, 1800ms) cubic-bezier(.65,0,.35,1) calc(var(--d) + var(--di, 0ms)),
              fill-opacity .8s ease calc(var(--d) + var(--di, 0ms) + var(--dur, 1800ms) * .7);
}
[data-a="draw"] { --dur: 1800ms; }
.slide:not(.in) [data-a="draw"] .dr, .slide:not(.in) [data-a="draw"].dr { stroke-dashoffset: 1; transition: none !important; }
.slide:not(.in) [data-a="draw"] .dr.fill-after { fill-opacity: 0; }

/* tekst dzielony na słowa / litery: data-a="words" | "chars" */
[data-a="words"] .w, [data-a="chars"] .c {
  display: inline-block;
  transition: opacity .9s var(--ease) calc(var(--d) + var(--i) * var(--stagger, 60ms)),
              transform .9s var(--ease) calc(var(--d) + var(--i) * var(--stagger, 60ms)),
              filter .9s var(--ease) calc(var(--d) + var(--i) * var(--stagger, 60ms));
}
[data-a="chars"] { --stagger: 35ms; }
.slide:not(.in) [data-a="words"] .w { opacity: 0; transform: translateY(.6em); filter: blur(6px); transition: none; }
.slide:not(.in) [data-a="chars"] .c { opacity: 0; transform: translateY(.8em) rotate(8deg); transition: none; }
[data-a="words"] .w { white-space: pre; }

/* maszyna do pisania: data-a="type" (prędkość: data-speed ms/znak) */
[data-a="type"] .caret {
  display: inline-block; width: .08em; margin-left: .04em; height: 1em; vertical-align: -.12em;
  background: currentColor; animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0 } }

/* licznik: data-a="count" data-to="128" [data-from] [data-dec] [data-suffix] */

/* ---------- kroki (fragmenty) w obrębie slajdu: data-step="1..n" ---------- */
[data-step] {
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1), filter .7s ease, clip-path .9s cubic-bezier(.16,1,.3,1);
}
[data-step]:not(.shown) { opacity: 0; transform: translateY(30px); filter: blur(6px); }
[data-step].step-dim:not(.current) { opacity: .35; }

/* ---------- pętle ozdobne (zawsze aktywne tylko na aktywnym slajdzie) ---------- */
.slide:not(.active) .loop, .slide:not(.active) .loop * { animation-play-state: paused !important; }
@keyframes float   { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-18px) } }
@keyframes spin    { to { transform: rotate(360deg) } }
@keyframes pulse   { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.08); opacity: .75 } }
@keyframes breathe { 0%,100% { opacity: .35 } 50% { opacity: 1 } }
@keyframes drift   { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes kenburns{ from { transform: scale(1.02) translate(0,0) } to { transform: scale(1.14) translate(-2%, -1.5%) } }
@keyframes grain   { 0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)} }
@keyframes flicker { 0%,100%{opacity:1} 3%{opacity:.82} 6%{opacity:1} 41%{opacity:.93} 43%{opacity:1} 77%{opacity:.88} 79%{opacity:1} }
@keyframes dash    { to { stroke-dashoffset: -100 } }
.float { animation: float 6s ease-in-out infinite; }
.spin  { animation: spin 30s linear infinite; }
.pulse { animation: pulse 3s ease-in-out infinite; }
.breathe { animation: breathe 4s ease-in-out infinite; }
.kenburns { animation: kenburns 18s ease-out both alternate infinite; }

/* ziarno filmowe: <div class="grain"></div> */
.grain { position: absolute; inset: -50%; pointer-events: none; z-index: 50; opacity: var(--grain-o, .07);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain .9s steps(4) infinite; mix-blend-mode: overlay; }
/* winieta */
.vignette { position: absolute; inset: 0; pointer-events: none; z-index: 49;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,var(--vig, .65)) 100%); }

/* ---------- interfejs nawigacji ---------- */
.deck-ui { position: fixed; inset: auto 0 0 0; height: 0; z-index: 100; pointer-events: none; }
.deck-progress { position: fixed; left: 0; bottom: 0; height: 4px; width: 100%; background: rgba(127,127,127,.18); z-index: 100; }
.deck-progress i { display: block; height: 100%; width: 0; background: var(--accent, #E2341D); transition: width .8s cubic-bezier(.77,0,.18,1); }
.deck-counter {
  position: fixed; right: 18px; bottom: 14px; z-index: 100;
  font: 600 13px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .12em;
  color: var(--ui-fg, rgba(255,255,255,.7)); background: var(--ui-bg, rgba(0,0,0,.35));
  padding: 7px 10px; border-radius: 6px; backdrop-filter: blur(6px);
  transition: opacity .4s; opacity: .0;
}
body.deck:not(.idle) .deck-counter, .deck-counter:hover { opacity: 1; }
.deck-home {
  position: fixed; left: 18px; top: 14px; z-index: 100; text-decoration: none;
  font: 600 13px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .08em;
  color: var(--ui-fg, rgba(255,255,255,.8)); background: var(--ui-bg, rgba(0,0,0,.4));
  padding: 8px 12px; border-radius: 6px; backdrop-filter: blur(6px); opacity: 0; transition: opacity .4s;
}
.deck-home.gal { left: auto; right: 18px; }
body.deck:not(.idle) .deck-home { opacity: .85; }
.deck-home:hover { opacity: 1 !important; }
.deck-nav { position: fixed; top: 50%; transform: translateY(-50%); z-index: 100; width: 54px; height: 54px; border-radius: 50%;
  border: 0; background: var(--ui-bg, rgba(0,0,0,.35)); color: var(--ui-fg, #fff); font-size: 22px; cursor: pointer; opacity: 0; transition: opacity .3s; backdrop-filter: blur(6px); }
.deck-nav.prev { left: 14px; } .deck-nav.next { right: 14px; }
body.deck:not(.idle) .deck-nav { opacity: .55; }
.deck-nav:hover { opacity: 1 !important; }
.deck-help { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; background: rgba(0,0,0,.72); color: #fff;
  font: 16px/1.7 "JetBrains Mono", monospace; }
.deck-help.open { display: grid; }
.deck-help div { background: #111; border: 1px solid #333; padding: 28px 36px; border-radius: 12px; }
.deck-help kbd { display: inline-block; min-width: 2.2em; padding: 1px 7px; margin-right: 8px; border: 1px solid #555; border-bottom-width: 3px; border-radius: 5px; text-align: center; }

/* ---------- przegląd (klawisz O) ---------- */
.stage.overview { overflow: visible; background: transparent; }
.stage.overview .slide { visibility: visible !important; pointer-events: auto; cursor: pointer; animation: none !important;
  transform: translate(var(--ox), var(--oy)) scale(var(--os)); transform-origin: 0 0; transition: transform .6s var(--t-ease);
  box-shadow: 0 0 0 4px transparent; }
.stage.overview .slide.active { box-shadow: 0 0 0 10px var(--accent, #E2341D); }
.stage.overview .slide * { pointer-events: none; }

/* ---------- pomocnicze ---------- */
.abs { position: absolute; }
.fill { position: absolute; inset: 0; }
.cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.center { display: grid; place-items: center; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
.nowrap { white-space: nowrap; }

/* tryb ?static — do zrzutów i podglądu układu */
body.static *, body.static *::before, body.static *::after {
  transition-duration: 0s !important; transition-delay: 0s !important;
  animation-duration: 0.001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
}
body.static .deck-counter, body.static .deck-nav { display: none; }

@media (prefers-reduced-motion: reduce) {
  .slide.anim-in, .slide.anim-out { animation-duration: 1ms !important; }
  [data-a], [data-a] * { transition-duration: 1ms !important; transition-delay: 0s !important; }
  .loop, .kenburns, .float, .spin, .pulse, .grain { animation: none !important; }
}
@media print {
  html, body { overflow: visible; height: auto; }
  .stage { position: relative; left: 0; top: 0; transform: none !important; height: auto; contain: none; }
  .slide { position: relative; visibility: visible; page-break-after: always; }
  .deck-ui, .deck-progress, .deck-counter, .deck-nav { display: none; }
}