/* ═══════════════════════════════════════════════════════════════════════
   HVMBAK EFFECTS /motion — warstwa wizualna

   Styl przeniesiony z HVMBAK EFFECTS (photo): papier/czerń/błękit, przyciski
   „Cięcie", Archivo Narrow + Oswald na liczbach. Układ prostszy: dwie kolumny
   (suwaki | scena), bo aplikacja ma jeden silnik animacji zamiast biblioteki.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --blue: #A8C5DA;
  --blue-deep: #94B5CC;
  --black: #0D0D0D;
  --panel: #1A1A1A;
  --panel-lift: #242424;
  --paper: #F5F0EB;
  --paper-dim: rgba(245, 240, 235, 0.6);
  --line-dark: rgba(245, 240, 235, 0.09);
  --font-liczby: 'Oswald', 'Archivo Narrow', system-ui, sans-serif;
  --sheet: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%20%3Cfilter%20id%3D%27j%27%20x%3D%27-30%25%27%20y%3D%27-30%25%27%20width%3D%27160%25%27%20height%3D%27160%25%27%3E%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.012%200.9%27%20numOctaves%3D%272%27%20seed%3D%277%27%20result%3D%27n%27%2F%3E%20%3CfeDisplacementMap%20in%3D%27SourceGraphic%27%20in2%3D%27n%27%20scale%3D%273.2%27%2F%3E%20%3CfeGaussianBlur%20stdDeviation%3D%270.45%27%2F%3E%20%3C%2Ffilter%3E%20%3Cg%20filter%3D%27url%28%23j%29%27%20stroke%3D%27%23F5F0EB%27%20stroke-opacity%3D%270.05%27%20stroke-width%3D%271%27%20fill%3D%27none%27%3E%20%3Cpath%20d%3D%27M0%20150%20H300%27%2F%3E%3Cpath%20d%3D%27M150%200%20V300%27%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");

  --bar-h: 60px;
  --stage-foot: 64px;
  --col: 340px;

  /* Geometria klina „Cięcie" — BEZ tych zmiennych clip-path jest nieważny
     i przyciski wychodzą płaskimi prostokątami. */
  --pinch: 9%;
  --lean: 7%;
  --bw: 1.5px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--panel);
  color: var(--paper);
  font-family: 'Archivo Narrow', system-ui, 'DM Sans', sans-serif;
  font-stretch: extra-condensed;
  -webkit-font-smoothing: antialiased;
  height: 100svh;
  overflow: hidden;
}

.label {
  font-family: 'Archivo Narrow', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.label, .control-name {
  display: inline-block;
  transform: scaleY(1.09);
  transform-origin: center;
}

/* ═══════════════════════════════ POWŁOKA ════════════════════════════════ */

.workspace {
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: var(--bar-h) minmax(0, 1fr);
  grid-template-columns: var(--col) minmax(0, 1fr);
  grid-template-areas:
    "bar  bar"
    "dock stage";
}
.workspace > * { animation: rise .6s var(--ease-out) backwards; }
.bar   { animation-delay: .02s; }
.dock  { animation-delay: .16s; }
.stage { animation-delay: .08s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

/* ── pasek ── */
.bar {
  grid-area: bar;
  background: var(--black);
  color: var(--paper);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 16px 0 14px;
  gap: 16px;
  z-index: 20;
}
.bar-brand {
  justify-self: start;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px 8px 6px 4px;
  border-radius: 8px;
  transition: background .3s var(--ease-out);
}
.bar-brand:hover { background: rgba(245, 240, 235, 0.08); }
.bar-logo { height: 30px; width: auto; display: block; user-select: none; -webkit-user-drag: none; }
/* Człon produktu jak w DRAPE i VIDEO: techniczny zapis mono ze slashem,
   dosunięty do linii pisma logo. */
.bar-sub {
  align-self: flex-end;
  margin-bottom: 7.5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(245, 240, 235, 0.55);
}

/* ═══════════ PRZYCISKI — system „Cięcie" (pochylony die-cut) ═══════════ */
.tp {
  position: relative; isolation: isolate;
  border: 0; background: transparent;
  min-height: 36px; padding: 0 20px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px;
  cursor: pointer;
  font-family: 'Archivo Narrow', system-ui, sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--paper); -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .3s var(--ease-out), color .25s;
}
.tp-label { display: inline-block; transform: scaleY(1.09); transform-origin: center; pointer-events: none; }
.tp-ico { width: 15px; height: 15px; flex: none; pointer-events: none; }
.tp--ico { padding: 0 13px; min-width: 44px; }
.tp:active { transform: translateY(1px); }
.tp:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.tp[disabled] { opacity: .5; cursor: default; }
.tp::before, .tp::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  clip-path: var(--shape);
  transition: background .25s var(--ease-out);
}
.tp::after { clip-path: var(--shape-in, var(--shape)); }

.tp--single {
  --shape: polygon(0 var(--lean), 100% 0, 100% 100%, 0 calc(100% - var(--lean)));
  --shape-in: polygon(var(--bw) calc(var(--lean) + var(--bw)), calc(100% - var(--bw)) var(--bw), calc(100% - var(--bw)) calc(100% - var(--bw)), var(--bw) calc(100% - var(--lean) - var(--bw)));
}
.tp--single-r {
  --shape: polygon(0 0, 100% var(--lean), 100% calc(100% - var(--lean)), 0 100%);
  --shape-in: polygon(var(--bw) var(--bw), calc(100% - var(--bw)) calc(var(--lean) + var(--bw)), calc(100% - var(--bw)) calc(100% - var(--lean) - var(--bw)), var(--bw) calc(100% - var(--bw)));
}
.tp--seg-l {
  --shape: polygon(0 0, 100% var(--pinch), 100% calc(100% - var(--pinch)), 0 100%);
  --shape-in: polygon(var(--bw) var(--bw), calc(100% - var(--bw)) calc(var(--pinch) + var(--bw)), calc(100% - var(--bw)) calc(100% - var(--pinch) - var(--bw)), var(--bw) calc(100% - var(--bw)));
}
.tp--seg-r {
  --shape: polygon(0 var(--pinch), 100% 0, 100% 100%, 0 calc(100% - var(--pinch)));
  --shape-in: polygon(var(--bw) calc(var(--pinch) + var(--bw)), calc(100% - var(--bw)) var(--bw), calc(100% - var(--bw)) calc(100% - var(--bw)), var(--bw) calc(100% - var(--pinch) - var(--bw)));
}

.tp-switch { position: relative; isolation: isolate; display: inline-flex; gap: 2px; }
.tp-switch::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  clip-path: polygon(0 0, 50% var(--pinch), 100% 0, 100% 100%, 50% calc(100% - var(--pinch)), 0 100%);
  background: rgba(245, 240, 235, 0.08);
}
.tp-switch .tp { min-width: 60px; }

.cut-ghost::before { background: rgba(245, 240, 235, 0.35); }
.cut-ghost::after { background: var(--panel); }
.stage .cut-ghost::after { background: var(--black); }
.cut-ghost { color: rgba(245, 240, 235, 0.82); }
.cut-ghost:hover::before { background: rgba(245, 240, 235, 0.8); }
.cut-ghost:hover { color: var(--paper); }
.cut-solid::before, .cut-solid::after { background: var(--paper); }
.cut-solid { color: var(--black); }
.cut-solid:hover::before, .cut-solid:hover::after { background: #E3DDD6; }
.cut-solid:hover { color: var(--black); }
.cut-seg::before, .cut-seg::after { background: transparent; }
.cut-seg { color: rgba(245, 240, 235, 0.5); }
.cut-seg:hover { color: var(--paper); }
.cut-seg.is-on::before, .cut-seg.is-on::after { background: var(--paper); }
.cut-seg.is-on { color: var(--black); }

.tp--sm { min-height: 28px; padding: 0 12px; font-size: 9px; letter-spacing: 0.04em; }
.tp-switch--sm .tp { min-width: 44px; min-height: 28px; padding: 0 10px; font-size: 9px; }

/* ═══════════════════════════ LEWA: suwaki ═══════════════════════════════ */

.dock {
  grid-area: dock;
  background: var(--panel);
  border-right: 1px solid var(--line-dark);
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.dock-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 20px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.block-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-dark);
  margin-bottom: 14px;
}
.block-head .label { color: rgba(245, 240, 235, 0.86); }
.head-actions { display: inline-flex; gap: 6px; }

.efekt-opis {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(245, 240, 235, 0.45);
  margin-bottom: 4px;
}

/* Wybór efektu: dwie kolumny. Przy dwóch efektach mieszczą się w jednym
   rzędzie; siatka zostaje, żeby dołożenie kolejnych nic nie psuło. */
.efekty {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.efekt-btn {
  min-width: 0;
  min-height: 34px;
  padding: 0 10px;
  font-size: 9.5px;
  letter-spacing: 0.03em;
}
.efekt-btn .tp-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
/* `cut-seg` sam z siebie jest przezroczysty (zaprojektowany do przełącznika
   z tłem pod spodem). W siatce bez tła nieaktywne kafle znikały, więc klin
   dostaje tu własne wypełnienie. */
.efekt-btn::before { background: rgba(245, 240, 235, 0.26); }
.efekt-btn::after { background: var(--panel); }
.efekt-btn { color: rgba(245, 240, 235, 0.7); }
.efekt-btn:hover::before { background: rgba(245, 240, 235, 0.75); }
.efekt-btn:hover { color: var(--paper); }
.efekt-btn.is-on::before, .efekt-btn.is-on::after { background: var(--paper); }
.efekt-btn.is-on { color: var(--black); }

.controls { display: flex; flex-direction: column; gap: 15px; }
.control { display: flex; flex-direction: column; gap: 7px; }
.control-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Archivo Narrow', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.025em;
}
.control-name { color: rgba(245, 240, 235, 0.66); font-weight: 600; }
.control-value {
  font-family: var(--font-liczby);
  color: var(--blue);
  font-variant-numeric: tabular-nums;
  -webkit-user-select: none;
  user-select: none;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.slider::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: rgba(245, 240, 235, 0.16); }
.slider::-moz-range-track { height: 2px; border-radius: 2px; background: rgba(245, 240, 235, 0.16); }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 9px; height: 9px;
  margin-top: -3.5px;
  border: 0; border-radius: 0;
  background: var(--blue);
  clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
  transition: transform .3s var(--ease-spring), background .25s;
}
.slider::-moz-range-thumb {
  width: 9px; height: 9px; border: 0; border-radius: 0;
  background: var(--blue);
  clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
}
@media (hover: hover) {
  .slider:hover::-webkit-slider-thumb { transform: scale(1.25); background: var(--paper); }
  .slider:hover::-moz-range-thumb { background: var(--paper); }
}
.slider:active::-webkit-slider-thumb { background: var(--paper); transform: scale(1.35); }
.slider:active::-moz-range-thumb { background: var(--paper); }

.dock-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line-dark);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10.5px;
  line-height: 1.55;
  color: rgba(245, 240, 235, 0.32);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.dock-foot a { color: rgba(245, 240, 235, 0.5); text-decoration: none; }
.dock-foot a:hover { color: var(--paper); }

/* ═══════════════════════════ ŚRODEK: scena ══════════════════════════════ */

.stage {
  grid-area: stage;
  background: var(--black) var(--sheet);
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 18px 26px 12px;
  position: relative;
}
.stage-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  max-width: 100%;
  min-width: 0;
}
.viewer {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 0;
}
.viewer-canvas {
  display: block;
  max-width: 100%;
  max-height: calc(100svh - var(--bar-h) - var(--stage-foot) - 42px);
  background: #101010;
  cursor: pointer;
}
/* Znaczek pauzy na kadrze (tap w kadr = pauza/wznowienie). */
.viewer-pause {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s var(--ease-out);
  color: var(--paper);
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55));
}
.viewer.is-paused .viewer-pause { opacity: 0.92; }

.stage-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.stage-bar-group { display: inline-flex; align-items: center; gap: 8px; }
.stage-hint {
  font-family: 'Archivo Narrow', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(245, 240, 235, 0.35);
  text-align: center;
}

/* Spinner w przycisku eksportu. */
.btn-spin {
  display: none;
  width: 12px; height: 12px;
  border: 2px solid rgba(13, 13, 13, 0.25);
  border-top-color: var(--black);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.tp.is-busy .btn-spin { display: inline-block; }
.tp.is-busy { pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Pasek postępu eksportu pod kadrem. */
.export-progress {
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: rgba(245, 240, 235, 0.12);
}
.export-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--blue);
  transition: width .2s linear;
}

.toast {
  position: fixed;
  left: 50%; bottom: 26px;
  transform: translate(-50%, 16px);
  background: var(--paper);
  color: var(--black);
  font-family: 'Archivo Narrow', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 18px;
  clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 88%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
  z-index: 60;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ═══════════════════════════════ MOBILE ═════════════════════════════════ */

@media (max-width: 860px) {
  :root { --bar-h: 44px; --stage-foot: 0px; }
  body { overflow: hidden; }
  .workspace {
    grid-template-rows: var(--bar-h) minmax(0, auto) minmax(0, 1fr);
    grid-template-columns: 1fr;
    grid-template-areas: "bar" "stage" "dock";
    height: 100svh;
  }
  .bar { padding: 0 12px; }
  .bar-logo { height: 22px; }
  .bar-sub { font-size: 10px; margin-bottom: 4.5px; }
  .stage {
    padding: 10px 12px;
    min-height: 0;
  }
  .viewer-canvas { max-height: calc(58svh - var(--bar-h)); }
  .stage-bar { flex-wrap: wrap; justify-content: center; gap: 8px; }
  .stage-hint { display: none; }
  .dock { border-right: 0; border-top: 1px solid var(--line-dark); }
  .dock-scroll { padding: 14px 16px 22px; }
  .control-head { font-size: 11px; }
  .slider { height: 36px; margin-block: -7px; }
  .slider::-webkit-slider-thumb { width: 10px; height: 10px; margin-top: -4px; }
  .slider::-moz-range-thumb { width: 10px; height: 10px; }
}