/* ============================================================
   Domino Computer — CSS do pakietu animacji
   Wgraj razem z domino-animacje.js. Same style; kolory biorą się
   ze zmiennych z 01-design-system/tokens.css (--blue, --dark, --ease).
   ============================================================ */

/* ---------- 1. Reveal przy scrollu ----------
   Elementy chowamy TYLKO gdy skrypt działa (klasa .js na <html>
   dokładana przez domino-animacje.js). Bez JS strona jest w pełni widoczna.
   Użycie w Elementorze:
     • pojedynczy element → atrybut  data-reveal|
     • siatka kart        → na kontenerze atrybut  data-reveal-group|
       (skrypt sam nada dzieciom data-reveal i stagger co 90 ms) */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease, cubic-bezier(.2,.7,.2,1)),
              transform .7s var(--ease, cubic-bezier(.2,.7,.2,1));
  transition-delay: var(--d, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- 2. Wejście hero przy ładowaniu strony ----------
   Nadaj klasę .rise-1 … .rise-4 kolejnym elementom hero
   (eyebrow → H1 → lead → przyciski). */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
.rise-1 { animation: riseIn .8s var(--ease, cubic-bezier(.2,.7,.2,1)) .05s backwards; }
.rise-2 { animation: riseIn .8s var(--ease, cubic-bezier(.2,.7,.2,1)) .20s backwards; }
.rise-3 { animation: riseIn .8s var(--ease, cubic-bezier(.2,.7,.2,1)) .32s backwards; }
.rise-4 { animation: riseIn .9s var(--ease, cubic-bezier(.2,.7,.2,1)) .48s backwards; }

/* ---------- 3. Canvas w hero i w nagłówkach podstron ----------
   HTML (widget „HTML" w Elementorze, wstawiony do sekcji z position: relative):
     <canvas id="heroCanvas" class="hero__canvas" aria-hidden="true"></canvas>
   Na podstronach dorzuć data-density="0.4" — rzadsza konstelacja. */
.hero__canvas,
.page-head__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

/* Ziarno na ciemnym tle — nakładka nad canvasem, pod treścią */
.hero__grain, .page-head__grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Przyciemnienie konstelacji pod typografią hero (od lewej) */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,21,36,.82) 0%, rgba(11,21,36,.35) 45%, rgba(11,21,36,0) 70%);
}
/* Przyciemnienie w nagłówkach podstron (góra + dół) */
.page-head__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,21,36,.62) 0%, rgba(11,21,36,.18) 55%, rgba(11,21,36,.55) 100%);
}

/* ---------- 4. Tilt 3D karty partnera ----------
   Skrypt szuka elementu .partner-card. Nadaj tę klasę
   kontenerowi karty (Zaawansowane → CSS Classes). */
.partner-card { transition: transform .5s var(--ease, cubic-bezier(.2,.7,.2,1)); will-change: transform; }
.partner-card:not(.partner-card--tilt):hover { transform: translateY(-4px); }
.partner-card--tilt { transition: none; }

/* ---------- 5. Liczniki ----------
   HTML: <span data-count="120">120</span> — skrypt odlicza od 0
   po wjechaniu liczby w kadr. Znak „+" / „lat" wstaw obok, poza spanem. */

/* ---------- 6. Maszyna do pisania ----------
   HTML: <span class="statement__text" data-typewriter>Twoje zdanie
         <span class="statement__sheen">z wyróżnieniem</span>.</span>
   Rodzic MUSI mieć position: relative (kursor jest pozycjonowany absolutnie). */
.statement__text { position: relative; display: block; }
.statement__sheen { color: var(--blue, #0b6fad); }
.statement__text.tw .tw-char { opacity: 0; }
.statement__text.tw .tw-char.tw-on { opacity: 1; transition: opacity .5s cubic-bezier(.22,.61,.36,1); }
.tw-caret {
  position: absolute; top: 0; left: 0; width: 2px;
  background: var(--blue, #0b6fad); border-radius: 1px;
  transform: translate(0, 0); will-change: transform; pointer-events: none;
}
.tw-caret--blink { animation: dcCaretBlink 1.05s steps(1) infinite; }
.tw-caret--done  { animation: none; opacity: 0; transition: opacity .5s ease; }
@keyframes dcCaretBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* ---------- 7. Dostępność — wyłączenie ruchu ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .rise-1, .rise-2, .rise-3, .rise-4 { animation: none; }
  .statement__text.tw .tw-char { opacity: 1; }
  .tw-caret { display: none; }
}