/* casali.agency v2 — INTRO: przeniesione 1:1 z www/intro.css (stany, przejścia, czasy; intro.js bez zmian).
   Jedyna zmiana tu: nazwy zmiennych na tokeny system v2 (--ink/--panel-fg/--panel-fg-2/--accent/--accent-bright/
   --font-display/--font-text/--pad-x z system.css) — wybór kolorów i choreografia zostają identyczne. */

:root{
  --intro-tlo:#111410;
  --intro-winieta:rgba(8,10,7,.55);
  --intro-pomin-tlo:rgba(27,26,23,.72);
  --intro-pomin-tlo-hover:rgba(27,26,23,.9);
  --intro-pomin-linia:rgba(240,236,228,.25);
  --intro-blysk:#F7F5F1;
  --intro-glitch-r:#E0552B;
  --intro-glitch-g:#2E7A4F;
  --intro-ease:ease-out;
  --intro-dur:900ms;
}

/* ---------- STRONA pod intro ---------- */
#strona{position:relative;transform-origin:50% 0}
#strona.zamrozona{pointer-events:none;user-select:none}

/* ---------- PASEK nad nagłówkiem (rozwija się po intro; dziś wyłączony w intro.js — PASEK_WLACZONY=false) ---------- */
#cytat{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s ease-out;background:var(--ink);color:var(--panel-fg)}
#cytat.widoczny{grid-template-rows:1fr}
#cytat.natychmiast{transition:none}
#cytat > div{overflow:hidden}
#cytat p{margin:0;padding:14px var(--pad-x);font-family:var(--font-display);font-size:14px;font-weight:600;letter-spacing:.01em;text-align:center;line-height:1.45;display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}
#cytat p::before,#cytat p::after{content:"";width:28px;height:2px;background:var(--accent);flex:none}
#cytat .ai{color:#22C97C;font-weight:700}
#cytat .haslo{color:var(--panel-fg)}
#cytat .wezwanie{color:var(--accent-bright);font-weight:700;text-decoration:none;border-bottom:1.5px solid rgba(255,122,80,.45);padding-bottom:1px;white-space:nowrap}
#cytat .wezwanie:hover{border-bottom-color:var(--accent-bright)}
#cytat.bez{display:none}
@media (max-width:640px){#cytat p{font-size:13px;padding:12px var(--pad-x)} #cytat p::before,#cytat p::after{display:none}}

/* ---------- WARSTWA INTRO ---------- */
#intro{position:fixed;inset:0;z-index:100;pointer-events:none}
#intro.is-aktywne{pointer-events:auto}
#intro[hidden]{display:none}
#scena{position:absolute;inset:0}
#intro-tlo{position:absolute;inset:0;background:var(--intro-tlo);opacity:0;transition:opacity var(--intro-dur) var(--intro-ease)}
#intro-tlo.is-widoczne{opacity:1}
#intro-tlo.is-cieciem{transition:none}
#intro-tlo::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%,transparent 0%,var(--intro-winieta) 100%);pointer-events:none}
#intro-canvas{display:block;position:absolute;inset:0;width:100%;height:100%}

#intro-blysk{position:absolute;inset:0;background:var(--intro-blysk);opacity:0;pointer-events:none}
#intro-blysk.is-teraz{animation:intro-blysk 420ms var(--intro-ease) both}
@keyframes intro-blysk{0%{opacity:0}8%{opacity:1}100%{opacity:0}}

#kom{display:grid;position:absolute;inset:0;padding:0 20px;text-align:center;place-items:center}
.intro-kom{grid-area:1/1;margin:0;max-width:22ch;opacity:0;color:var(--panel-fg);font-family:var(--font-display);font-size:40px;font-weight:700;line-height:1.12;letter-spacing:-.02em;text-wrap:balance;
  transform:translateY(28px) scale(1.04);filter:blur(18px);
  transition:opacity var(--intro-dur) var(--intro-ease),filter var(--intro-dur) var(--intro-ease),transform var(--intro-dur) var(--intro-ease)}
.intro-kom--maly{max-width:28ch;color:var(--panel-fg-2);font-size:30px}
.intro-kom--duzy{max-width:18ch}
.intro-kom em{color:var(--accent);font-style:normal}
.intro-kom.is-wchodzi{opacity:1;transform:none;filter:blur(0)}
.intro-kom.is-wychodzi{opacity:0;transform:translateY(-22px) scale(.985);filter:blur(12px)}

/* zakończenie trzeciego zdania — rusza WYŁĄCZNIE tekstem */
.intro-kom.is-gasnie{opacity:0;transform:translateY(12px) scale(1.07);filter:blur(24px);transition:opacity 1.25s ease .2s,filter 1.45s ease,transform 1.45s cubic-bezier(.4,0,.8,1)}
.intro-slowo{display:inline-block;transition:transform 1.15s cubic-bezier(.5,0,1,.55),opacity .9s ease .25s}
.intro-slowo.is-spada{opacity:0;transform:translateY(130vh) rotate(var(--intro-rot,0deg))}
.intro-kom.is-spadanie{opacity:1;transform:none;filter:none;transition:none}
.intro-kom.is-glitch{animation:intro-glitch 620ms steps(2,end) both}
@keyframes intro-glitch{
  0%{clip-path:inset(0 0 0 0);text-shadow:0 0 0 transparent}
  10%{transform:translateX(-6px);clip-path:inset(12% 0 60% 0);text-shadow:-6px 0 var(--intro-glitch-r),6px 0 var(--intro-glitch-g)}
  20%{transform:translateX(5px);clip-path:inset(55% 0 10% 0);text-shadow:5px 0 var(--intro-glitch-r),-5px 0 var(--intro-glitch-g)}
  30%{transform:translateX(8px) skewX(4deg);clip-path:inset(0 0 70% 0);text-shadow:-8px 0 var(--intro-glitch-r),8px 0 var(--intro-glitch-g)}
  40%{transform:translateX(-4px);clip-path:inset(30% 0 30% 0);text-shadow:4px 0 var(--intro-glitch-r),-4px 0 var(--intro-glitch-g)}
  50%{transform:translateX(3px) skewX(-6deg);clip-path:inset(75% 0 0 0);text-shadow:-10px 0 var(--intro-glitch-r),10px 0 var(--intro-glitch-g)}
  60%{transform:translateX(-7px);clip-path:inset(5% 0 50% 0);text-shadow:6px 0 var(--intro-glitch-r),-6px 0 var(--intro-glitch-g)}
  70%{transform:translateX(6px);clip-path:inset(40% 0 20% 0);text-shadow:-3px 0 var(--intro-glitch-r),3px 0 var(--intro-glitch-g)}
  80%{transform:translateX(-2px);clip-path:inset(0 0 0 0);text-shadow:9px 0 var(--intro-glitch-r),-9px 0 var(--intro-glitch-g)}
  100%{opacity:0;transform:none;clip-path:inset(0 0 0 0);text-shadow:0 0 0 transparent}
}

/* ---------- sterowanie: pomiń i pasek postępu ---------- */
#postep{position:absolute;top:0;left:0;z-index:3;width:0;height:2px;background:var(--accent);transition:width 160ms linear}
#pomin{display:inline-flex;gap:8px;position:absolute;bottom:16px;left:16px;z-index:3;align-items:center;min-height:44px;padding:0 24px;background:var(--intro-pomin-tlo);color:var(--panel-fg);border:1px solid var(--intro-pomin-linia);border-radius:999px;font:600 14px/1 var(--font-text);cursor:pointer;backdrop-filter:blur(6px);pointer-events:auto}
#pomin:hover{background:var(--intro-pomin-tlo-hover)}
#intro-filtr{position:absolute;width:0;height:0}

@media (min-width:1024px){
  .intro-kom{font-size:62px}
  .intro-kom--maly{font-size:40px}
  .intro-kom--duzy{font-size:78px}
}

/* zredukowany ruch */
@media (prefers-reduced-motion: reduce){
  #intro *,#intro *::before,#intro *::after,#cytat{animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:1ms !important;transition-delay:0ms !important}
}