/* Hero: niebieski ekran awarii, który się naprawia. Klasy na <html>: .intro (awaria), .handoff (naprawa). */

/* Opis z przyciskami i reszta ekranu błędu leżą w jednej komórce siatki: wysokość się nie zmienia, nagłówek nie skacze. */
.bsh .hbody{display:grid}
.bsh .hbody>*{grid-area:1/1;min-width:0}
.bsh .hmain{position:relative;z-index:1}
.bsh .bsod{visibility:hidden;pointer-events:none;margin-top:clamp(20px,3vh,32px)}
.intro .bsh .bsod,.handoff .bsh .bsod{visibility:visible}
.bsh .bsod p{color:#fff}
.bsh .bsod .bsod-msg,.bsh .bsod .bsod-pct{font-size:clamp(1.25rem,1.9vw,1.75rem);line-height:1.3;letter-spacing:-.015em;max-width:24em}
.bsh .bsod .bsod-pct{margin-top:8px;font-variant-numeric:tabular-nums}
.bsh .bsod-foot{display:flex;gap:20px;align-items:center;margin-top:clamp(24px,4vh,40px)}
.bsh .bsod-qr{flex:none;width:clamp(84px,7vw,104px)}
.bsh .bsod-qr svg,.bsh .face .qrcall svg{display:block;width:100%;height:auto;border-radius:4px}
.bsh .bsod .bsod-foot p{font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.9);max-width:28em}
.bsh .bsod .bsod-foot p+p{margin-top:6px}

/* Naprawa: reszta ekranu błędu znika krótko, z lekkim rozmyciem, a w jej miejsce wchodzi opis i przyciski. */
.bsh .bsod>*{transition:opacity .22s ease-out,transform .22s ease-out,filter .22s ease-out}
.handoff .bsh .bsod>*{opacity:0;transform:translateY(-8px);filter:blur(2px)}
.handoff .bsh .bsod>:nth-child(2){transition-delay:.03s}
.handoff .bsh .bsod>:nth-child(3){transition-delay:.06s}
/* Kod QR z ekranu błędu znika od razu: w tej samej chwili jego odpowiednik w hero startuje z tego miejsca. */
.handoff .bsh .bsod-qr{visibility:hidden}

/* Awaria: widać tylko pierwszą linię nagłówka. Druga linia, opis i przyciski czekają (czytniki ekranu je widzą). */
.intro .bsh .hero h1 .l2 .wd>span{transform:translateY(108%)!important;transition:none!important}
.intro .bsh .hero [data-r]{opacity:0!important;transform:translateY(22px)!important;transition:none!important}
.intro .bsh .hero .mfact,.intro .bsh .hero .log,.intro .bsh .hero .facts,.intro .bsh .qrcall{opacity:0}
.intro .bsh .face .e,.intro .bsh .face .m,.handoff .bsh .face .e,.handoff .bsh .face .m{opacity:1;transition:none}
/* Naprawa: „Firma nie musi.” wjeżdża zaraz po 100%, opis i przyciski chwilę później. */
.handoff .bsh .hero h1 .l2 .wd>span{transition-delay:calc((var(--i) - 2) * .05s + .12s)}
.handoff .bsh .hero [data-r]{transition-delay:calc(var(--d,0s) + .15s)}
@keyframes bsh-fade-in{from{opacity:0}}
.handoff .bsh .hero .mfact,.handoff .bsh .hero .log,.handoff .bsh .hero .facts,.handoff .bsh .stopcode{animation:bsh-fade-in .35s ease-out .45s both}

/* Kod QR w hero: pod buźką, tylko na komputerze (na telefonie wystarczy przycisk „Zadzwoń”). */
.bsh .face{display:flex;flex-direction:column;align-items:flex-end}
.bsh .face .face-svg{width:100%}
.bsh .face .qrcall{display:flex;align-items:center;gap:14px;margin-top:4px;color:rgba(255,255,255,.88);font-size:.9rem;line-height:1.35;text-decoration:none}
.bsh .face .qrcall svg{width:76px;flex:none;transform-origin:0 0}
.bsh .face .qrcall span{order:-1;text-align:right;transition:opacity .3s ease-out}
.handoff .bsh .face .qrcall span{opacity:0}
@media(hover:hover) and (pointer:fine){.bsh .face .qrcall:hover{color:#fff}}

@media(max-width:900px){
.bsh .bsod .bsod-msg,.bsh .bsod .bsod-pct{font-size:clamp(1.05rem,4.6vw,1.25rem)}
.bsh .bsod-qr{width:72px}
.bsh .bsod .bsod-foot p{font-size:.85rem}
.bsh .face{align-items:flex-start}
.bsh .face .qrcall{display:none}
}