/* ====================================================
   Uptracker — tokeny strony marketingowej („Sejsmograf”)
   Jedno źródło dla custom.css (strona główna) i seo.css
   (landingi, blog, strony prawne). Panel ma własne tokeny.
   ==================================================== */

:root {
  /* papier i tusz */
  --paper:      #F1ECE1;
  --paper-2:    #E8E1D2;
  --paper-3:    #FBF8F1;
  --ink:        #15171B;
  --ink-2:      #3B3E46;
  /* najjaśniejszy szary, który na --paper-2 trzyma jeszcze 4.5:1 (WCAG AA) */
  --ink-3:      #5E616A;
  --rule:       rgba(21, 23, 27, .14);
  --rule-2:     rgba(21, 23, 27, .32);

  /* sygnał — wyłącznie awaria / alarm / działaj */
  --signal:       #D43C17;   /* tło przycisku, biały tekst 4.7:1 */
  --signal-hot:   #E5431B;   /* linie i grafika, nie tekst */
  --signal-ink:   #B3320F;   /* tekst na papierze 5.3:1 */
  --signal-wash:  rgba(212, 60, 23, .09);

  /* działa */
  --ok:         #1E6B4B;
  --ok-wash:    rgba(30, 107, 75, .1);

  /* sekcje odwrócone */
  --night:       #141518;
  --night-2:     #1D1F24;
  --on-night:    #EDE8DC;
  --on-night-2:  #ABA698;
  --signal-night:#F0592F;
  --ok-night:    #4FBF8A;
  --rule-night:  rgba(237, 232, 220, .14);

  /* siatka milimetrowa */
  --grid-minor: rgba(21, 23, 27, .045);
  --grid-major: rgba(21, 23, 27, .085);

  /* typografia */
  --font-h: 'Gloock', 'Georgia', serif;
  --font-b: 'Schibsted Grotesk', 'Helvetica Neue', sans-serif;
  --font-m: 'Martian Mono', ui-monospace, monospace;
  --h1: clamp(2.6rem, 1.4rem + 5.2vw, 6.1rem);
  --h2: clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
  --h3: clamp(1.35rem, 1.1rem + .9vw, 1.8rem);
  --label: .6875rem;

  /* rytm */
  --gutter: clamp(1rem, .5rem + 2.5vw, 2.5rem);
  --section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --measure: 68ch;
  --tap: 44px;

  /* kształt: druk, nie aplikacja */
  --radius: 3px;
  --shadow-print: 4px 4px 0 var(--ink);

  /* ruch */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 160ms;
  --dur: 320ms;

  /* baner cookies (components/cookie-banner) — jasna wersja */
  --ck-bg: var(--paper-3);
  --ck-border: var(--ink);
  --ck-title: var(--ink);
  --ck-text: var(--ink-2);
  --ck-link: var(--signal-ink);
  --ck-accept-bg: var(--signal);
  --ck-accept-hover: #B8330F;
  --ck-accept-text: #FFFFFF;
  --ck-secondary-bg: transparent;
  --ck-secondary-border: var(--ink);
  --ck-secondary-text: var(--ink);
  --ck-icon: var(--ink);
  --ck-icon-bg: var(--paper-2);
  --ck-icon-border: var(--rule-2);
  --ck-radius: 4px;
  --ck-btn-radius: 3px;
  --ck-shadow: 6px 6px 0 var(--ink);
  --ck-font-h: var(--font-h);
  --ck-font-b: var(--font-b);
}

/* telefon: etykiety nie schodzą poniżej 12px */
@media (max-width: 640px) {
  :root { --label: .75rem; }
}

/* ─── papier milimetrowy + ziarno ─── */
.paper-grid {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
}

.paper-grain::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .07 0 0 0 0 .05 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── znak marki (components/brand-mark) ─── */
.brand-mark { display: inline-flex; align-items: center; gap: .55rem; color: inherit; text-decoration: none; }
.brand-mark__pulse { width: 30px; height: 18px; flex-shrink: 0; overflow: visible; }
.brand-mark__pulse polyline {
  fill: none;
  stroke: var(--signal-hot);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.brand-mark__word {
  font-family: var(--font-h);
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: -.01em;
}
@media (prefers-reduced-motion: no-preference) {
  .brand-mark:hover .brand-mark__pulse polyline,
  .brand-mark--live .brand-mark__pulse polyline {
    animation: pulse-trace 2.4s var(--ease-out) infinite;
  }
}
@keyframes pulse-trace {
  0%   { stroke-dashoffset: 1; }
  55%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1; }
}

/* ─── zapis sejsmografu (components/seismo-trace) ─── */
.seismo { position: relative; width: 100%; }
.seismo svg { display: block; width: 100%; height: var(--seismo-h, 150px); overflow: visible; }
.seismo__base,
.seismo__burst,
.seismo__after {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.seismo__base,
.seismo__after { stroke: var(--seismo-ink, var(--ink)); stroke-width: 1.5; }
.seismo__burst { stroke: var(--seismo-burst, var(--signal-hot)); stroke-width: 2.25; }
.seismo__axis {
  display: flex;
  justify-content: space-between;
  margin-top: .5rem;
  padding-top: .55rem;
  font-family: var(--font-m);
  font-size: var(--label);
  color: var(--seismo-muted, var(--ink-3));
  background:
    repeating-linear-gradient(90deg, var(--seismo-tick, var(--rule-2)) 0 1px, transparent 1px 2.5%) top / 100% 5px no-repeat;
}
.seismo__note {
  position: absolute;
  top: 0;
  /* osobna właściwość translate — animacja rise nadpisuje tylko transform */
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  font-family: var(--font-m);
  font-size: var(--label);
  line-height: 1.3;
  color: var(--seismo-note, var(--signal-ink));
  white-space: nowrap;
  pointer-events: none;
}
.seismo__note::after {
  content: '';
  width: 1px;
  height: calc(var(--seismo-h, 150px) * .2);
  background: currentColor;
  opacity: .6;
}
.seismo__note b {
  font-weight: 500;
  padding: .2rem .45rem;
  border: 1px solid currentColor;
  background: var(--seismo-note-bg, var(--paper-3));
}

@media (prefers-reduced-motion: no-preference) {
  .seismo--draw .seismo__base,
  .seismo--draw .seismo__burst,
  .seismo--draw .seismo__after {
    /* stan „przed” tylko w keyframe + fill both: gdy animacja nie ruszy, zapis i tak jest widoczny */
    stroke-dasharray: 1;
    animation: seismo-draw var(--seismo-dur, 1s) linear both;
  }
  .seismo--draw .seismo__base  { --seismo-dur: .95s; animation-delay: var(--seismo-delay, .15s); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  .seismo--draw .seismo__burst { --seismo-dur: .35s; animation-delay: calc(var(--seismo-delay, .15s) + .95s); }
  .seismo--draw .seismo__after { --seismo-dur: .6s;  animation-delay: calc(var(--seismo-delay, .15s) + 1.3s); animation-timing-function: ease-out; }
  .seismo--draw .seismo__note {
    animation: rise .5s var(--ease-out) both;
    animation-delay: calc(var(--seismo-delay, .15s) + 1.2s);
  }
  /* zapis poniżej ekranu startuje dopiero po wejściu w widok */
  .js .seismo--draw[data-reveal]:not(.is-in) * { animation-play-state: paused; }
}
@keyframes seismo-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* telefon: etykieta na środku zapisu i z zawijaniem — długie opisy nie wychodzą za ekran */
@media (max-width: 640px) {
  .seismo__note { left: 50% !important; max-width: calc(100% - 1rem); white-space: normal; text-align: center; }
  .seismo__note::after { display: none; }
}

/* ─── wejścia ─── */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal]:not(.seismo) {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
    transition-delay: var(--d, 0ms);
  }
  .js [data-reveal].is-in:not(.seismo) { opacity: 1; transform: none; }
  .load-in {
    animation: rise .8s var(--ease-out) both;
    animation-delay: var(--d, 0ms);
  }
}

/* ─── ikony kreskowe ─── */
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* baner cookies: dodatkowe stany hover dla jasnej wersji */
:root {
  --ck-link-hover: var(--ink);
  --ck-secondary-hover-border: var(--ink);
  --ck-secondary-hover-text: var(--signal-ink);
}