/* ════════════════════════════════════════════════════════════════
   KRÓLIK — O MNIE (about)
   Reuses krolik-sections.css (sec-meta, sec-h, booking, footer) +
   the chrome carried over from oferta. This file = about-specific layout.
   Mode = RPG class: ta sama osoba, inny akcent (inżynier / hybryda / artysta).
   ════════════════════════════════════════════════════════════════ */

.osheet{position:relative;z-index:2}
[data-mode="artist"] .osheet{overflow:hidden}

/* shared labeled photo placeholder (brand way: spec inside, no stock) */
.pslot{position:relative;overflow:hidden;border:1px solid var(--secbd);border-radius:var(--cardr);
  background:rgba(229,228,226,.022);display:flex;align-items:center;justify-content:center;text-align:center}
[data-mode="artist"] .pslot{border:3px solid var(--rs);border-radius:16px}
.pslot::before{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(-45deg,rgba(229,228,226,.022)0,rgba(229,228,226,.022)1px,transparent 1px,transparent 9px)}
.pslot-lbl{position:relative;z-index:1;font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(229,228,226,.34);line-height:1.8;padding:0 22px}
.pslot-lbl b{display:block;color:rgba(229,228,226,.6);font-weight:500;font-size:9.5px;margin-bottom:5px}
.pslot .pco{position:absolute;width:11px;height:11px;z-index:2;border:1px solid rgba(229,228,226,.22)}
.pslot .pco.tl{top:9px;left:9px;border-right:0;border-bottom:0}
.pslot .pco.tr{top:9px;right:9px;border-left:0;border-bottom:0}
.pslot .pco.bl{bottom:9px;left:9px;border-right:0;border-top:0}
.pslot .pco.br{bottom:9px;right:9px;border-left:0;border-top:0}
[data-mode="artist"] .pslot .pco{display:none}

/* ════════════════ HERO ════════════════ */
.ahero{position:relative;min-height:100vh;display:flex;align-items:center;
  padding:120px 6vw 64px;background:#050506;border-bottom:1px solid var(--secbd);overflow:hidden}
[data-mode="engineer"] .ahero::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:linear-gradient(90deg,rgba(204,255,0,.04)1px,transparent 1px);background-size:8.333% 100%}
[data-mode="artist"] .ahero::before{content:'';position:absolute;top:-40%;right:-6%;width:55%;height:170%;
  pointer-events:none;z-index:0;background:radial-gradient(ellipse at 70% 40%,rgba(136,45,23,.17),transparent 60%);filter:blur(30px)}
.ahero-inner{position:relative;z-index:2;width:100%;max-width:min(560px,52%)}
/* HERO – cały tekst wchodzi z prawej krawędzi przy wejściu na stronę (nie przy zmianie trybu).
   Brak fill → stan spoczynkowy jest widoczny; ruch to tylko wejście. */
@media(prefers-reduced-motion:no-preference){
  .ahero-inner{animation:aheroTextIn 1.02s cubic-bezier(.12,.7,.2,1)}
}
@keyframes aheroTextIn{from{opacity:0;transform:translateX(-84px)}to{opacity:1;transform:none}}
@media(max-width:860px){.ahero{min-height:auto;padding-top:104px}.ahero-inner{max-width:none}}
.ahero-eye{display:flex;align-items:center;gap:12px;font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--ma);margin-bottom:24px}
.ahero-eye::before{content:'';width:26px;height:1px;background:currentColor}
.ahero-h{font-family:'Teko',sans-serif;font-size:clamp(64px,10vw,150px);font-weight:700;text-transform:uppercase;
  line-height:.9;letter-spacing:.005em}
.ahero-h em{font-style:normal;color:rgba(229,228,226,.2)}
[data-mode="artist"] .ahero-h em{color:var(--rs);opacity:.7}
.ahero-role{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.ahero-role span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(229,228,226,.6);border:1px solid var(--secbd);border-radius:var(--cardr);padding:7px 12px}
[data-mode="artist"] .ahero-role span{border-radius:30px}
.ahero-lead{font-size:clamp(15px,1.6vw,18px);line-height:1.85;color:rgba(229,228,226,.6);max-width:560px;margin-top:26px;text-wrap:pretty}
.ahero-lead strong{color:var(--pt);font-weight:500}
/* portret pełnej wysokości, do prawej krawędzi; po lewej rozmywa się w cień („wychodzę z mroku") */
.ahero-portrait{position:absolute;top:0;right:0;bottom:0;width:min(60%,860px);z-index:1;overflow:hidden;pointer-events:none}
.por-blur{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:64% 50%;
  filter:blur(16px) brightness(.62) saturate(.92);transform:scale(1.06);
  -webkit-mask-image:linear-gradient(90deg,transparent 8%,#000 30%,#000 52%,transparent 72%);
          mask-image:linear-gradient(90deg,transparent 8%,#000 30%,#000 52%,transparent 72%)}
.por-sharp{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:64% 50%;
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,rgba(0,0,0,.6) 50%,#000 66%);
          mask-image:linear-gradient(90deg,transparent 30%,rgba(0,0,0,.6) 50%,#000 66%)}
/* cień wtapiający lewą stronę w czarne tło sekcji */
.por-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#050506 0%,rgba(5,5,6,.86) 16%,rgba(5,5,6,.4) 34%,transparent 54%)}
/* #8 portret „budzi się z cienia" – kurtyna RUSZA AUTOMATYCZNIE przy wczytaniu strony.
   Klatka 0 (translateX(0)) zakrywa portret i jest malowana, zanim cokolwiek zobaczysz,
   więc nie ma mignięcia „zdjęcie → znika → odsłania". Zmiana trybu nie wznawia animacji CSS.
   Stan spoczynkowy (bez animacji / reduced-motion) = odsłonięte → brak JS nie zostawia czarnej płachty. */
.ahero-portrait::after{content:'';position:absolute;top:0;bottom:0;left:0;width:220%;z-index:3;pointer-events:none;
  transform:translateX(-115%);
  background:linear-gradient(90deg,#050506 0%,#050506 42%,rgba(5,5,6,.55) 60%,rgba(5,5,6,0) 80%)}
@media(prefers-reduced-motion:no-preference){
  .ahero-portrait::after{animation:porWake 2.8s cubic-bezier(.3,0,0,1) .1s both}
}
@keyframes porWake{0%{transform:translateX(0)}100%{transform:translateX(-115%)}}
@media(max-width:860px){
  .ahero-portrait{width:64%;opacity:.55}
  .ahero-inner .ahero-lead{max-width:none}
}
@media(max-width:560px){.ahero-portrait{width:80%;opacity:.4}}
.ahero-spec{position:absolute;left:0;bottom:-34px;font-family:'JetBrains Mono',monospace;font-size:8px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(229,228,226,.3)}

/* ════════════════ KIM JESTEM ════════════════ */
.who-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:center}
@media(max-width:860px){.who-grid{grid-template-columns:1fr;gap:32px}}
.who-photo{aspect-ratio:4/3;width:100%}
.who-img{margin:0;width:100%;height:100%;overflow:hidden;background:var(--cardbg);
  border:1px solid var(--secbd);box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}
.who-img img{display:block;width:100%;height:100%;object-fit:cover}
[data-mode="artist"] .who-img{border-radius:14px}
.who-body p{font-size:15px;line-height:1.9;color:rgba(229,228,226,.62);margin-bottom:18px;text-wrap:pretty}
.who-body p strong{color:var(--pt);font-weight:500}
.who-quote{margin-top:26px;padding-left:22px;border-left:2px solid var(--ma);
  font-family:'Teko',sans-serif;font-size:clamp(24px,3vw,34px);font-weight:600;text-transform:uppercase;line-height:1;letter-spacing:.01em;color:var(--pt)}
[data-mode="artist"] .who-quote{border-left-color:var(--rs)}

/* ════════════════ OŚ CZASU ════════════════ */
/* animated rail: art = zygzak, inż = prosta wiązka światła, hybryda = pośrodku */
.tl2{position:relative;margin-top:12px}
.tl2-rail{position:absolute;left:0;top:0;overflow:visible;z-index:0;pointer-events:none}
.tl2-base{stroke:var(--secbd);stroke-width:2;stroke-linecap:round;fill:none}
.tl2-lit{stroke:var(--ma);stroke-width:2.5;stroke-linecap:round;fill:none;filter:drop-shadow(0 0 6px rgba(var(--glow),.85))}
.tl2-tip{fill:var(--ma);filter:drop-shadow(0 0 10px rgba(var(--glow),1))}
/* #9 comet – jasna, rozmyta smuga tuż za czołem światła */
.tl2-comet{stroke:var(--ma);stroke-width:4;stroke-linecap:round;fill:none;opacity:0;
  filter:drop-shadow(0 0 7px rgba(var(--glow),.95)) drop-shadow(0 0 16px rgba(var(--glow),.6));transition:opacity .25s}
[data-mode="engineer"] .tl2-comet{stroke-width:3;filter:drop-shadow(0 0 5px var(--ac)) drop-shadow(0 0 14px rgba(204,255,0,.6))}
/* #9 jednorazowy puls węzła przy zapłonie */
.tl2-dot{overflow:visible}
.tl2-node.pulse .tl2-dot::after{content:'';position:absolute;left:50%;top:50%;width:13px;height:13px;border-radius:50%;
  transform:translate(-50%,-50%);border:2px solid var(--ma);pointer-events:none;
  animation:tlPulse .7s cubic-bezier(.2,0,0,1) forwards}
[data-mode="engineer"] .tl2-node.pulse .tl2-dot::after{border-radius:0}
@keyframes tlPulse{0%{opacity:.9;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(3.4)}}
@media(prefers-reduced-motion:reduce){.tl2-comet{display:none}.tl2-node.pulse .tl2-dot::after{display:none}}
[data-mode="engineer"] .tl2-base{stroke-width:1.4}
[data-mode="engineer"] .tl2-lit{stroke-width:2;filter:drop-shadow(0 0 3px var(--ac)) drop-shadow(0 0 11px rgba(204,255,0,.55))}
[data-mode="artist"] .tl2-lit{stroke-width:3}

.tl2-list{list-style:none;position:relative;z-index:1;margin:0;padding:0}
.tl2-node{position:relative;display:grid;grid-template-columns:1fr 72px 1fr;align-items:center;min-height:150px}
.tl2-card{display:flex;flex-direction:column;max-width:392px;opacity:.32;transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.tl2-node:nth-child(odd) .tl2-card{grid-column:1;text-align:right;align-items:flex-end;margin-left:auto;transform:translateX(8px)}
.tl2-node:nth-child(even) .tl2-card{grid-column:3;text-align:left;transform:translateX(-8px)}
.tl2-node.lit .tl2-card{opacity:1;transform:none}
.tl2-dot{position:absolute;left:50%;top:50%;width:13px;height:13px;border-radius:50%;
  transform:translate(-50%,-50%);border:2px solid var(--secbd);background:var(--c);z-index:2;
  transition:border-color .35s,background .35s,box-shadow .35s,left .5s cubic-bezier(.16,1,.3,1)}
[data-mode="engineer"] .tl2-dot{border-radius:0}
.tl2-node.lit .tl2-dot{border-color:var(--ma);background:var(--ma);box-shadow:0 0 13px rgba(var(--glow),.95)}
.tl2-node.now.lit .tl2-dot{box-shadow:0 0 18px rgba(var(--glow),1)}
.tl2-node.now.lit .tnode-t{color:var(--ma)}
/* hybryda: delikatne odchylenie punktów (małe pętelki w ścieżce) */
[data-mode="hybrid"] .tl2-node:nth-child(odd) .tl2-dot{left:calc(50% - 24px)}
[data-mode="hybrid"] .tl2-node:nth-child(even) .tl2-dot{left:calc(50% + 24px)}
/* artysta: punkty blisko środka – linia kluczy wokół osi i trafia w każdą kropkę */
[data-mode="artist"] .tl2-node:nth-child(odd) .tl2-dot{left:calc(50% - 22px)}
[data-mode="artist"] .tl2-node:nth-child(even) .tl2-dot{left:calc(50% + 22px)}
/* hybryda + artysta: szerszy środek = teksty odsunięte od linii (inż bez zmian) */
[data-mode="hybrid"] .tl2-node{grid-template-columns:1fr 150px 1fr}
[data-mode="artist"] .tl2-node{grid-template-columns:1fr 300px 1fr}
/* hybryda: szara droga ukryta – ścieżka pojawia się dopiero, gdy wchodzi kolor (kropki zostają) */
[data-mode="hybrid"] .tl2-base{stroke-opacity:0}
/* artysta: ukryta szara ścieżka i nieaktywne kropki – linia maluje się sama */
[data-mode="artist"] .tl2-base{stroke-opacity:0}
[data-mode="artist"] .tl2-dot{opacity:0}
[data-mode="artist"] .tl2-node.lit .tl2-dot{opacity:1}

.tnode-yr{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ma);margin-bottom:6px;display:block}
.tnode-t{font-family:'Teko',sans-serif;font-size:28px;font-weight:600;text-transform:uppercase;line-height:.95;letter-spacing:.01em}
.tnode-d{font-size:13px;line-height:1.6;color:rgba(229,228,226,.55);margin-top:5px;text-wrap:pretty}

@media(max-width:680px){
  .tl2-node{grid-template-columns:26px 1fr;min-height:0;padding:0 0 30px 0;align-items:start}
  .tl2-node:nth-child(odd) .tl2-card,.tl2-node:nth-child(even) .tl2-card{grid-column:2;text-align:left;align-items:flex-start;margin:0;transform:none;max-width:none}
  .tl2-dot,[data-mode="hybrid"] .tl2-node .tl2-dot,[data-mode="artist"] .tl2-node .tl2-dot{left:13px;top:9px;transform:translate(-50%,0)}
}

/* ════════════════ CAPOEIRA ════════════════ */
.capo{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,56px);align-items:center;
  border:1px solid var(--secbd);border-radius:var(--cardr);background:var(--cardbg);padding:clamp(26px,3.4vw,46px);overflow:hidden}
@media(max-width:820px){.capo{grid-template-columns:1fr;gap:28px}}
[data-mode="artist"] .capo{border-radius:18px}
.capo-photo{position:relative;aspect-ratio:.87;width:100%}
.capo-img{position:absolute;margin:0;overflow:hidden;background:var(--cardbg);
  border:1px solid var(--secbd);box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}
.capo-img img{display:block;width:100%;height:100%;object-fit:cover}
.capo-img--group{top:0;left:0;width:74%;aspect-ratio:1/1;z-index:1}
.capo-img--cord{right:0;bottom:0;width:54%;aspect-ratio:1/1;z-index:2;border-color:var(--ma)}
.capo-img--cord figcaption{position:absolute;left:0;bottom:0;
  font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--platinum,#E5E4E2);background:rgba(26,26,28,.78);padding:5px 9px}
[data-mode="artist"] .capo-img{border-radius:10px}
@media(max-width:820px){.capo-photo{max-width:420px;margin-inline:auto}}
.capo-k{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--ma);display:flex;align-items:center;gap:10px;margin-bottom:14px}
.capo-k::before{content:'';width:24px;height:1px;background:currentColor}
.capo-h{font-family:'Teko',sans-serif;font-size:clamp(40px,5vw,66px);font-weight:700;text-transform:uppercase;line-height:.95}
.capo-h em{font-style:normal;color:var(--ma)}
.capo-d{font-size:14.5px;line-height:1.85;color:rgba(229,228,226,.6);margin-top:18px;max-width:50ch;text-wrap:pretty}
.capo-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.capo-tags span{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(229,228,226,.5);border:1px solid var(--secbd);border-radius:30px;padding:6px 11px;
  transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s,color .25s}
/* #10 capoeira/wartości – mikro-ruch na hover (wg trybu) */
.capo-tags span:hover{transform:translateY(-3px);border-color:var(--ma);color:var(--ma)}
[data-mode="artist"] .capo-tags span:hover{transform:translateY(-3px) rotate(-1.5deg)}
.val{transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s}
.val:hover{transform:translateY(-3px)}
[data-mode="artist"] .val:hover{transform:translateY(-3px) rotate(.4deg)}
.val .val-n{transition:transform .3s cubic-bezier(.16,1,.3,1),color .3s}
.val:hover .val-n{transform:translateX(5px);color:var(--ma)}
[data-mode="engineer"] .val:hover .val-n{transform:translateX(0) scale(1.12)}

/* ════════════════ WARTOŚCI ════════════════ */
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
@media(max-width:880px){.vals{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.vals{grid-template-columns:1fr}}
.val{position:relative;padding:26px 24px 24px;border:1px solid var(--secbd);border-radius:var(--cardr);background:var(--cardbg);
  overflow:hidden;transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s}
.val::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:var(--ma);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.val:hover::before{transform:scaleX(1)}
[data-mode="engineer"] .val:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ma);border-color:var(--ma)}
[data-mode="hybrid"] .val:hover{transform:translateY(-4px);border-color:var(--ma)}
[data-mode="artist"] .val{border-radius:16px}
[data-mode="artist"] .val:hover{transform:rotate(.4deg) translateY(-3px);box-shadow:0 22px 50px -18px rgba(0,0,0,.7);border-color:var(--rs)}
.val-n{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.2em;color:rgba(229,228,226,.34);margin-bottom:12px;display:block}
.val-t{font-family:'Teko',sans-serif;font-size:30px;font-weight:700;text-transform:uppercase;line-height:.95;letter-spacing:.01em}
.val-d{font-size:13px;line-height:1.65;color:rgba(229,228,226,.58);margin-top:11px;text-wrap:pretty}

/* ════════════════ SOCIALS ════════════════ */
.socials{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.soc{display:flex;align-items:center;gap:10px;padding:13px 18px;cursor:none;text-decoration:none;
  border:1px solid var(--secbd);border-radius:var(--cardr);color:rgba(229,228,226,.72);
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;transition:all .22s}
.soc:hover{border-color:var(--ma);color:var(--ma);background:rgba(255,255,255,.02);transform:translateY(-2px)}
[data-mode="artist"] .soc{border-radius:30px}
.soc svg{width:16px;height:16px;flex-shrink:0}
.soc-cup{width:18px;height:auto;flex-shrink:0;display:block;opacity:.62;transition:opacity .22s}
.soc:hover .soc-cup{opacity:.95}
.soc-coffee{font-size:14px;line-height:1}