/* =========================================================================
   exio.pl: animacje i interakcja hero-v2 (2026-09-28). Dokladane do paczki
   grafika - hero.css zostaje nietkniety. Wszystko wlacza klasa .xh-anim,
   ktora dodaje hero-anim.js; bez JS i przy prefers-reduced-motion hero
   wyglada dokladnie jak w paczce.
   ========================================================================= */

/* dluzszy naglowek (pytanie) - troche mniejszy niz krotkie haslo z paczki */
#exio-audit-hero h1{font-size:clamp(2.35rem,3.7vw,3.6rem);line-height:1.1}
@media(max-width:1000px){#exio-audit-hero h1{font-size:clamp(2.3rem,6.4vw,3.6rem)}}
@media(max-width:600px){#exio-audit-hero h1{font-size:clamp(1.95rem,8.6vw,2.6rem)}}
#exio-audit-hero .xh-description strong{color:#fff;font-weight:650}

/* --- pisanie naglowka: kursor --- */
#exio-audit-hero .xh-kursor{display:inline-block;width:.07em;height:.9em;margin-left:.04em;vertical-align:-.06em;
  background:#ff6b73;border-radius:2px;animation:xhMrug 1s steps(1) infinite;-webkit-text-fill-color:initial}
#exio-audit-hero .xh-kursor.xh-zgas{animation:xhZgas .6s ease forwards}
@keyframes xhMrug{50%{opacity:0}}
@keyframes xhZgas{to{opacity:0}}

/* --- wejscie pozostalych elementow (tylko gdy JS wlaczyl animacje) --- */
#exio-audit-hero.xh-anim .xh-wejscie{opacity:0;transform:translateY(14px)}
#exio-audit-hero.xh-anim .xh-wejscie.xh-jest{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}

/* --- poswiata za kursorem myszy + lekka paralaksa tla --- */
#exio-audit-hero .xh-poswiata{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s;
  background:radial-gradient(520px circle at var(--xh-mx,50%) var(--xh-my,40%),rgba(120,110,255,.16),transparent 62%)}
#exio-audit-hero.xh-mysz .xh-poswiata{opacity:1}
#exio-audit-hero.xh-anim::before{transform:translate3d(var(--xh-px,0px),var(--xh-py,0px),0) scale(1.04);transition:transform .9s cubic-bezier(.2,.7,.2,1)}

/* --- karta skanera: pochylenie 3D i blysk krawedzi --- */
#exio-audit-hero.xh-anim .xh-scanner{transform:perspective(1100px) rotateX(var(--xh-rx,0deg)) rotateY(var(--xh-ry,0deg));
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
#exio-audit-hero.xh-anim .xh-scanner:hover{box-shadow:inset 0 1px 2px #e2e9ff8c,inset 0 0 25px #7372d416,0 0 0 3px #7b7ff033,0 24px 60px #0105138c}

/* --- przebieg pokazowy w karcie: linia skanu + ustalenia jedno po drugim --- */
#exio-audit-hero .xh-results{position:relative}
#exio-audit-hero .xh-linia{position:absolute;left:-6px;right:-6px;top:0;height:2px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,#9d95ff 30%,#fff 50%,#9d95ff 70%,transparent);
  box-shadow:0 0 18px 3px rgba(140,130,255,.55)}
#exio-audit-hero .xh-linia.xh-biegnie{animation:xhLinia 1.25s cubic-bezier(.45,.05,.4,1) forwards}
@keyframes xhLinia{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
#exio-audit-hero.xh-anim .xh-finding.xh-czeka{opacity:0;transform:translateX(-10px)}
#exio-audit-hero .xh-finding.xh-pojaw{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
#exio-audit-hero .xh-finding[data-level="krytyczne"].xh-pojaw>.xh-icon{animation:xhPuls 1.6s ease 1}
@keyframes xhPuls{0%{filter:drop-shadow(0 0 0 #ff5264)}40%{filter:drop-shadow(0 0 9px #ff5264)}100%{filter:drop-shadow(0 0 0 #ff5264)}}

/* --- przyciski: przebiegajacy blysk (osobny <span>, zeby nie ucinac ramki ::before z paczki) --- */
#exio-audit-hero .xh-blysk{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
#exio-audit-hero .xh-blysk::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg)}
#exio-audit-hero .xh-primary:hover .xh-blysk::after{animation:xhBlysk .8s ease}
#exio-audit-hero.xh-anim .xh-primary.xh-jest .xh-blysk::after{animation:xhBlysk 1.1s ease 1.2s}
@keyframes xhBlysk{to{left:130%}}

/* pole adresu: pisany placeholder zachowuje kolor placeholdera */
#exio-audit-hero .xh-scan-form input.xh-pisze::placeholder{color:#9aa6c4}

@media(prefers-reduced-motion:reduce){
  #exio-audit-hero .xh-kursor,#exio-audit-hero .xh-linia,#exio-audit-hero .xh-poswiata{display:none}
  #exio-audit-hero .xh-blysk{display:none}
}

/* stan przed startem skryptu (klase xh-pre dodaje inline skrypt w <head>, zdejmuje hero-anim.js lub bezpiecznik po 4 s) */
.xh-pre #exio-audit-hero h1,
.xh-pre #exio-audit-hero .xh-eyebrow,.xh-pre #exio-audit-hero .xh-description,.xh-pre #exio-audit-hero .xh-risks,
.xh-pre #exio-audit-hero .xh-purchase,.xh-pre #exio-audit-hero .xh-report,.xh-pre #exio-audit-hero .xh-scanner,
.xh-pre #exio-audit-hero .xh-footer{opacity:0}
/* linia skanu w petli, gdy czekamy na prawdziwy wynik */
#exio-audit-hero .xh-linia.xh-petla{animation:xhLinia 1.25s cubic-bezier(.45,.05,.4,1) infinite}

/* mrugajacy "?" w czerwonym wierszu (dzieli go hero-anim.js po napisaniu) */
#exio-audit-hero .xh-danger.xh-danger-dzielony{background:none;-webkit-text-fill-color:initial}
#exio-audit-hero .xh-grad{background:linear-gradient(180deg,#ff7d7e 0%,#ff5264 85%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--xh-red)}
#exio-audit-hero .xh-pytajnik{display:inline-block;animation:xhPytanie 1.1s steps(1) infinite}
@keyframes xhPytanie{0%{opacity:1}50%{opacity:0}}

/* CTA pod wynikiem mikroskanu (pokazuje hero.js, gdy sa ustalenia) */
#exio-audit-hero .xh-wynik-cta{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:22px;padding:15px 20px;
  border-radius:14px;border:1px solid #bcc5ff;color:#fff;font-weight:700;font-size:15.5px;text-align:center;
  background:linear-gradient(180deg,rgba(225,230,255,.16) 0%,transparent 35%),linear-gradient(115deg,#524bef,#3423bb 64%,#403cc9);
  box-shadow:inset 0 1px 2px #d5ddff66,0 0 22px #5351f333,0 8px 20px #01041666;transition:transform .2s,filter .2s}
#exio-audit-hero .xh-wynik-cta:hover{transform:translateY(-1px);filter:brightness(1.08);color:#fff}
#exio-audit-hero .xh-wynik-cta[hidden]{display:none}
@media(max-width:600px){#exio-audit-hero .xh-wynik-cta{font-size:14px;padding:13px 14px}}

/* Mikroskaner AI: zdanie oceny nad lista ustalen */
#exio-audit-hero .xh-ai{display:flex;flex-direction:column;gap:6px;margin:0 0 18px;padding:14px 16px;border-radius:12px;
  background:linear-gradient(120deg,rgba(124,112,255,.18),rgba(89,83,217,.08));border:1px solid rgba(160,150,255,.4);
  color:#eef0ff;font-size:14.5px;line-height:1.55}
#exio-audit-hero .xh-ai[hidden]{display:none}
#exio-audit-hero .xh-ai-etk{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#b9b2ff}

/* wynik: odstep wskazowki od linii "Wynik mikroskanu", favicona + tytul po prawej */
#exio-audit-hero .xh-ai{margin-top:16px}
#exio-audit-hero #xh-result-domain{display:inline-flex;align-items:center;gap:7px;min-width:0;max-width:62%;overflow:hidden}
#exio-audit-hero #xh-result-domain span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#dfe4f6}
#exio-audit-hero #xh-result-domain .xh-dom-adr{color:#fff;font-weight:700;flex-shrink:0;max-width:none}
#exio-audit-hero #xh-result-domain .xh-dom-tyt{color:#9aa6c6;font-weight:500;min-width:0}
#exio-audit-hero #xh-result-domain .xh-dom-tyt::before{content:"·";margin:0 6px;color:#66709a}
#exio-audit-hero .xh-fav{width:22px;height:22px;padding:3px;box-sizing:border-box;border-radius:7px;flex-shrink:0;background:#fff;object-fit:contain;box-shadow:0 0 0 1px rgba(255,255,255,.12)}