/* PEKOPOS – úvod so scénou (pekopos/hero-scene). Port .hero … .lens, .readout, .tag, .hero-copy, .cue a .hero.mob z návrhu v3.
   Mobilná sada (.hero.mob v návrhu) platí podľa toho istého pravidla ako <picture> a skript: (max-aspect-ratio: 9/10), (max-width: 760px).
   Rozloženie fotky počíta CSS: cover vo veľkosti úvodu (jednotky cqw/cqh), na počítači posun --bias, na mobile stred fotky --fx. */

.pk-hero{position:relative;height:100vh;height:100svh;min-height:600px;background:var(--night);color:var(--on-night);overflow:hidden}
.pk-hero__defs{position:absolute;width:0;height:0;overflow:hidden}
.pk-hero__photo{position:absolute;inset:0;overflow:hidden;container-type:size}

/* ---------- scéna a fotka ---------- */
.pk-scene{position:absolute;inset:0;--w:var(--dw);--h:var(--dh)}
.pk-scene[hidden]{display:none}
.pk-stage{position:absolute;
  width:max(100cqw, 100cqh * var(--w) / var(--h));
  height:max(100cqh, 100cqw * var(--h) / var(--w));
  top:calc((100cqh - max(100cqh, 100cqw * var(--h) / var(--w))) / 2);
  left:calc((100cqw - max(100cqw, 100cqh * var(--w) / var(--h))) * var(--bias, 0));
  transition:opacity .45s ease}
.pk-scene.is-swap .pk-stage{opacity:0}
/* Prehliadač bez jednotiek kontajnera (napr. iOS 15 a starší): fotka cez celý úvod s orezom, bez vodičov a lupy, ktoré by nesedeli. */
@supports not (width:1cqw){
  .pk-stage{inset:0;width:auto;height:auto}
  .pk-stage picture img{object-fit:cover}
  .pk-stage>svg,.pk-xray,.pk-tags{display:none}
}
.pk-stage>picture,.pk-stage>svg,.pk-xray,.pk-xray>picture,.pk-xray>svg,.pk-tags{position:absolute;inset:0;width:100%;height:100%}
.pk-stage picture img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:fill}
.pk-stage__lit{opacity:0;transition:opacity 1.2s ease}
.pk-hero.is-lit .pk-stage__lit{opacity:1}

.pk-hero__shade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg, rgba(6,10,20,.55) 0%, rgba(6,10,20,0) 20%),
  linear-gradient(90deg, rgba(6,10,20,.7) 0%, rgba(6,10,20,.45) 28%, rgba(6,10,20,0) 50%),
  linear-gradient(0deg, rgba(6,10,20,.45) 0%, rgba(6,10,20,0) 22%)}

/* ---------- vodiče (SVG v rámci fotky, triedy ako v návrhu) ---------- */
.pk-wires{pointer-events:none;overflow:visible}
.pk-wires--m{display:none}
.pk-wires .w{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.pk-wires .cur{stroke:var(--red);stroke-width:2.2}
.pk-wires .dash{stroke-dasharray:7 7}
.pk-wires .bolt{stroke:var(--spark);stroke-width:2}
.pk-wires .sym{fill:none;stroke:var(--red);stroke-width:1.8;vector-effect:non-scaling-stroke}
.pk-wires .sym-y{fill:none;stroke:var(--spark);stroke-width:1.8;vector-effect:non-scaling-stroke}
.pk-wires .box{fill:rgba(227,20,27,.18);stroke:var(--red);stroke-width:1.8;vector-effect:non-scaling-stroke}
.pk-wires .area{fill:rgba(227,20,27,.1);stroke:var(--red);stroke-width:1.4;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.pk-wires--main{opacity:0;transition:opacity .6s}
.pk-hero.is-wired .pk-wires--main{opacity:.6}
.pk-wires--main .w,.pk-wires--main .sym,.pk-wires--main .box{filter:url(#pk-glow)}
.pk-wires .draw{stroke-dasharray:var(--len) var(--len);stroke-dashoffset:var(--len)}
.pk-hero.is-wired .pk-wires .draw{stroke-dashoffset:0;transition:stroke-dashoffset var(--dur,1s) cubic-bezier(.6,.05,.3,1) var(--delay,0s)}
.pk-hero.is-wired .pk-wires .dash.draw{stroke-dasharray:7 7;stroke-dashoffset:0;animation:pk-dashin var(--dur,1s) linear var(--delay,0s) backwards}
@keyframes pk-dashin{from{opacity:0}to{opacity:1}}
.pk-wires--main .pulse{stroke:#fff;stroke-width:2.6;stroke-dasharray:2 160;opacity:0;filter:url(#pk-glow)}
.pk-hero.is-flowing .pk-wires--main .pulse{opacity:.9;animation:pk-flow 3.6s linear infinite}
@keyframes pk-flow{to{stroke-dashoffset:-162}}

/* ---------- röntgen pod lupou ---------- */
.pk-xray{clip-path:circle(0px at -200px -200px);pointer-events:none}
.pk-xray img{filter:grayscale(1) brightness(.34) contrast(1.4)}
.pk-xray::before{content:"";position:absolute;inset:0;z-index:1;background:
  repeating-linear-gradient(0deg, rgba(150,190,255,.09) 0 1px, transparent 1px 40px),
  repeating-linear-gradient(90deg, rgba(150,190,255,.09) 0 1px, transparent 1px 40px),
  rgba(8,20,48,.35)}
.pk-xray>svg{z-index:2}
.pk-xray .w,.pk-xray .sym,.pk-xray .box{filter:url(#pk-glow2)}
.pk-xray .cur{stroke-width:2.6}

/* ---------- lupa ---------- */
.pk-lens{position:absolute;left:0;top:0;width:var(--d);height:var(--d);margin:calc(var(--d)/-2) 0 0 calc(var(--d)/-2);border-radius:50%;pointer-events:none;opacity:0;transition:opacity .5s;--d:240px;z-index:4}
.pk-hero.has-lens .pk-lens{opacity:1}
.pk-lens::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1.5px rgba(255,255,255,.9),0 0 0 7px rgba(227,20,27,.22),0 18px 60px rgba(0,0,0,.45)}
.pk-lens svg{position:absolute;inset:0;width:100%;height:100%}
.pk-readout{position:absolute;left:calc(100% + 14px);top:50%;transform:translateY(-50%);white-space:nowrap;width:max-content;background:rgba(10,17,32,.86);border:1px solid rgba(255,255,255,.2);padding:9px 12px 9px 26px;border-radius:4px;font:500 12.5px/1.35 var(--f-mono);letter-spacing:.03em;color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .25s}
.pk-readout::before{content:"";position:absolute;left:11px;top:14px;width:7px;height:7px;border-radius:50%;background:var(--red)}
.pk-readout b{display:block;font-weight:500;color:var(--spark);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:3px}
.pk-readout.off{opacity:0}
.pk-lens.flip .pk-readout{left:auto;right:calc(100% + 14px)}

/* ---------- štítky (len počítač) ---------- */
.pk-tags{pointer-events:none}
.pk-tag{position:absolute;z-index:3;transform:translate(-50%,-100%);display:flex;align-items:center;gap:8px;padding:7px 12px 7px 10px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--ink);font:500 13px/1 var(--f-body);white-space:nowrap;box-shadow:0 6px 24px rgba(0,0,0,.25);opacity:0;translate:0 8px;transition:opacity .5s,translate .5s;pointer-events:none}
.pk-tag i{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px rgba(227,20,27,.2)}
.pk-tag::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:22px;background:rgba(255,255,255,.75)}
.pk-hero.is-tagged .pk-tag{opacity:1;translate:0 -22px}
.pk-hero.has-lens .pk-tag{opacity:0;transition-delay:0s}

/* ---------- text a tlačidlá (vnorené bloky) ---------- */
.pk-hero__copy{position:absolute;inset:0;z-index:5;pointer-events:none;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--hdr-h,72px) + env(safe-area-inset-top,0px)) var(--gut-r) 64px max(var(--gut), 6vw)}
.pk-hero__txt{max-width:520px;pointer-events:auto}
.pk-hero h1{font-size:clamp(44px,4.6vw,72px);line-height:.96;letter-spacing:-.012em;max-width:5.6em;color:inherit}
.pk-hero h1 em{font-style:normal;color:var(--red-hi)}
.pk-hero__txt>p{margin-top:22px;font-size:19px;line-height:1.55;color:rgba(244,246,249,.92);max-width:34ch}
.pk-hero__txt>.wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
/* Ikony tlačidiel ako v návrhu: šípka za ponukou, slúchadlo pred telefónom (maska, farba podľa textu). */
.pk-hero .wp-block-button.is-style-pk-red .wp-block-button__link::after,
.pk-hero .wp-block-button__link[href^="tel:"]::before{content:"";flex:none;width:18px;height:18px;background:currentColor;-webkit-mask:var(--pk-ico) center/18px 18px no-repeat;mask:var(--pk-ico) center/18px 18px no-repeat}
.pk-hero .wp-block-button.is-style-pk-red .wp-block-button__link::after{--pk-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 9h12M10 4l5 5-5 5'/%3E%3C/svg%3E")}
.pk-hero .wp-block-button__link[href^="tel:"]::before{--pk-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M4 2.5h3l1.3 3.3-1.8 1.2a9 9 0 0 0 4.5 4.5l1.2-1.8 3.3 1.3v3a1.5 1.5 0 0 1-1.6 1.5A13 13 0 0 1 2.5 4.1 1.5 1.5 0 0 1 4 2.5z'/%3E%3C/svg%3E")}
.pk-hero .wp-block-button.is-style-pk-red .wp-block-button__link[href^="tel:"]::after{display:none}

.pk-hero__cue{position:absolute;z-index:5;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.7);text-decoration:none}
.pk-hero__cue i{width:2px;height:34px;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0));position:relative;overflow:hidden}
.pk-hero__cue i::after{content:"";position:absolute;left:-2px;top:-8px;width:6px;height:8px;border-radius:3px;background:var(--spark);animation:pk-cue 1.8s ease-in infinite}
@keyframes pk-cue{to{top:38px}}

/* ---------- na výšku a úzke okno: text hore, tlačidlá dole, budova medzi nimi (.hero.mob v návrhu) ---------- */
@media (max-aspect-ratio: 9/10), (max-width: 760px){
  .pk-scene{--w:var(--mw);--h:var(--mh)}
  .pk-stage{left:clamp(100cqw - max(100cqw, 100cqh * var(--w) / var(--h)), 50cqw - max(100cqw, 100cqh * var(--w) / var(--h)) * var(--fx, .5), 0px)}
  .pk-wires--d{display:none}
  .pk-wires--m{display:block}
  .pk-hero__shade{background:
    linear-gradient(180deg, rgba(6,10,20,.62) 0%, rgba(6,10,20,.35) 34%, rgba(6,10,20,0) 46%),
    linear-gradient(0deg, rgba(6,10,20,.72) 0%, rgba(6,10,20,0) 30%)}
  .pk-hero__copy{padding:calc(88px + env(safe-area-inset-top,0px)) var(--gut-r) calc(26px + env(safe-area-inset-bottom,0px)) var(--gut)}
  .pk-hero__txt{max-width:none;flex:1;display:flex;flex-direction:column}
  .pk-hero h1{font-size:clamp(40px,11vw,58px);max-width:none}
  .pk-hero__txt>p{font-size:17px;margin-top:14px;max-width:40ch}
  .pk-hero__txt>.wp-block-buttons{margin-top:auto;padding-top:14px}
  .pk-hero__txt>.wp-block-buttons>.wp-block-button{flex:1 1 100%}
  .pk-hero__txt>.wp-block-buttons .wp-block-button__link{width:100%;justify-content:center}
  .pk-hero__cue{display:none}
  .pk-lens{--d:170px}
  .pk-readout{left:50%;top:calc(100% + 10px);transform:none}
  .pk-lens.up .pk-readout{top:auto;bottom:calc(100% + 10px)}
  .pk-tags{display:none}
}
@media (max-aspect-ratio: 9/10) and (max-height: 740px), (max-width: 760px) and (max-height: 740px){
  .pk-hero__txt>p{display:none}
}

/* ---------- náhľad v editore (nadpis, text a tlačidlá sa píšu priamo na tmavej fotke) ---------- */
.pk-hero-editor{position:relative;min-height:520px;padding:96px 6vw 64px;background:var(--night) center/cover no-repeat;color:var(--on-night);display:flex;flex-direction:column;justify-content:center}
.pk-hero-editor::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(6,10,20,.75) 0%, rgba(6,10,20,.45) 40%, rgba(6,10,20,.1) 70%);pointer-events:none}
.pk-hero-editor>*{position:relative;max-width:520px}
.pk-hero-editor h1{font-size:clamp(44px,4.6vw,72px);line-height:.96;letter-spacing:-.012em;max-width:5.6em;color:inherit}
.pk-hero-editor h1 em{font-style:normal;color:var(--red-hi)}
.pk-hero-editor p{margin-top:22px;font-size:19px;line-height:1.55;color:rgba(244,246,249,.92);max-width:34ch}
.pk-hero-editor .wp-block-buttons{margin-top:30px}
.pk-hero-editor__note{position:absolute;right:16px;bottom:12px;max-width:none;font:500 11px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(244,246,249,.7)}