/* ════════════════════════════════════════════════════════════
   10-hero-signature.css

   Hero split + HUD viewport, hero phaser, sekce Pro koho, galerie a lightbox.

   Cast verejneho stylu. Soubory se nactou v poradi podle nazvu
   (`assets.PUBLIC_CSS`) a kaskada zavisi na tom poradi - nemenit ho
   a nove pravidlo psat do souboru, kam patri obsahove.
   ════════════════════════════════════════════════════════════ */

/* ════ HERO SPLIT + HUD VIEWPORT (signature) ═══════ */
.hero-split {
  flex-direction: row; text-align: left; align-items: center;
  justify-content: space-between; gap: clamp(2rem, 5vw, 4.5rem);
  max-width: calc(var(--maxw) + 140px); margin: 0 auto;
}
.hero-split .hero-copy { flex: 1 1 50%; max-width: 600px; }
.hero-split .hero-title { max-width: 16ch; }
.hero-split .hero-sub { margin-left: 0; margin-right: 0; }
.hero-split .hero-actions { justify-content: flex-start; }

.hud { flex: 1 1 46%; max-width: 540px; width: 100%; perspective: 1200px; }
.hud-frame {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg);
  border: 1px solid var(--accent-border); background: var(--surface); overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.02);
}
.hud-photo { position: absolute; inset: 0; border-radius: inherit; }
.hud-corner { position: absolute; width: 22px; height: 22px; border: 2px solid var(--accent); z-index: 3; }
.hud-corner.tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.hud-corner.tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; border-color: var(--accent-2); }
.hud-corner.bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; border-color: var(--accent-2); }
.hud-corner.br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.hud-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 130px; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(61,169,252,.18), transparent);
  animation: hud-scan 4.2s linear infinite;
}
@keyframes hud-scan { 0% { transform: translateY(-140px); } 100% { transform: translateY(120%); } }
.hud-reticle {
  position: absolute; left: 50%; top: 50%; width: 116px; height: 116px; z-index: 3;
  transform: translate(-50%, -50%); animation: hud-lock 2.4s cubic-bezier(.2,.9,.2,1) both;
}
.hud-reticle .ring { position: absolute; inset: 0; border: 2px solid rgba(242,92,122,.7); border-radius: 50%; }
.hud-reticle .cross::before, .hud-reticle .cross::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--accent); }
.hud-reticle .cross::before { width: 2px; height: 38px; transform: translate(-50%, -50%); }
.hud-reticle .cross::after { width: 38px; height: 2px; transform: translate(-50%, -50%); }
.hud-reticle i {
  position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent-2); transform: translate(-50%, -50%); box-shadow: 0 0 12px var(--accent-2);
}
@keyframes hud-lock {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(2.3) rotate(-45deg); }
  65%  { opacity: 1; transform: translate(-50%,-50%) scale(.9) rotate(8deg); }
  100% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0); }
}
.hud-row {
  position: absolute; left: 0; right: 0; z-index: 4; display: flex;
  justify-content: space-between; align-items: center; padding: 0 16px;
  font: 600 .72rem/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .06em;
}
.hud-top { top: 16px; } .hud-bottom { bottom: 16px; }
.hud-live { color: var(--accent-2); animation: hud-blink 1.5s steps(1) infinite; }
@keyframes hud-blink { 0%,62% { opacity: 1; } 63%,100% { opacity: .35; } }
.hud-readout { color: var(--text); }
.hud-readout .b { color: var(--team-blue); } .hud-readout .r { color: var(--accent-2); }
.hud-tag {
  color: var(--muted); background: rgba(8,8,10,.6); padding: .22rem .55rem; border-radius: 6px;
  border: 1px solid var(--line); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* ════ HERO PHASER (Laserforce signature) ══════════ */
.phaser {
  flex: 1 1 50%; max-width: 600px; width: 100%; position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 440px; perspective: 1400px;
}
/* Jediná trvale běžící vrstva v heru — dýchající světlo.
   Všechno ostatní (prstence, model) se točí podle scrollu, ne samo.
   Prvek, který se hýbe sám, je spořič obrazovky; prvek, který se hýbe
   pod mou rukou, je zážitek. */
.phaser-glow {
  position: absolute; width: 78%; aspect-ratio: 1; z-index: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(61,169,252,.30), transparent 70%);
  filter: blur(26px); animation: phaser-pulse 3s ease-in-out infinite;
}
/* JEN `opacity`, zadny `transform: scale()`. Vrstva ma `filter: blur(26px)`,
   takze zvetseni znamena prerasterizovat rozmazani v kazdem snimku — a tahle
   animace bezi porad, i kdyz je hero deset obrazovek nad viewportem. Zmena
   pruhlednosti se resi na kompozitoru, tedy zadar; dychani vypada stejne. */
@keyframes phaser-pulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

/* --hero-p = 0..1 scroll progress přes hero (píše motion.js) */
.phaser-ring {
  position: absolute; width: 380px; max-width: 92%; aspect-ratio: 1; z-index: 0;
  border: 1px dashed var(--accent-border); border-radius: 50%;
  transform: rotate(calc(var(--hero-p, 0) * 220deg));
  will-change: transform;
}
.phaser-ring-2 {
  width: 300px; border-style: dotted; border-color: var(--accent-2-border);
  transform: rotate(calc(var(--hero-p, 0) * -320deg));
}
/* KRUHOVÁ PLOCHA POD MODELEM.
   V návrhu sedí zbraň uprostřed kruhu v pravé části hlavního panelu (tam,
   kde má Figma šedý kroužek s nápisem „placeholder"), ne volně v rohu.
   Je to PLOCHA, ne další rámeček — zářící rámeček má na ploše být jeden
   a ten už panel kolem má.
   `::before` je bezpečné i uvnitř flexu: absolutně pozicovaný pseudoprvek
   se z toku vyřadí, takže z něj flex položka nevznikne. */
.hero-typo .phaser::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  width: min(88%, 430px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%,
    rgba(105, 188, 68, .10) 0%, rgba(0, 47, 60, .55) 58%, rgba(0, 14, 18, 0) 73%);
  border: 1px solid rgba(105, 188, 68, .16);
}
.phaser-3d { position: relative; z-index: 2; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; }
/* ZADNY `filter:` na tomhle canvasu. Je to ZIVY WebGL canvas, ktery se
   prekresluje pri kazdem snimku scrollu — a CSS filtr nad nim znamena, ze
   kompozitor musi po kazdem tom snimku pretahnout drop-shadow pres celou
   plochu (460 px pri DPR 3 = ~1,9 Mpx). Na iPhonu to bylo videt jako sekani
   pri projizdeni hero. Zar dodava `.phaser-glow` POD canvasem, ktera se
   kresli jednou a pak uz jen sedi. */
.phaser-3d canvas {
  display: block; width: 100% !important; height: 100% !important;
}
/* ── 2D fallback: taktický zaměřovač ──────────────────
   Model má 211 kB, takže 3D jede na mobilu i na desktopu. Zaměřovač
   nastupuje jen když se model nenačte (chyba, úsporný režim, bez WebGL):
   místo prázdného místa dostane uživatel plnohodnotnou signature scénu —
   čistě SVG, 0 kB navíc. Dolaďuje se podle scrollu, stejně jako 3D model. */
.phaser-scope { display: none; position: relative; z-index: 2; width: 100%; max-width: 400px; height: auto; }
.phaser.no-img .phaser-3d { display: none; }
.phaser.no-img .phaser-scope { display: block; }
@media (max-width: 980px) {
  .phaser-3d { max-width: 340px; }
  .phaser.no-img .phaser-scope { max-width: 300px; }
}
.phaser-scope circle, .phaser-scope line, .phaser-scope path { fill: none; }
.phaser-scope .ps-r1 { stroke: var(--accent-border); stroke-width: 1; }
.phaser-scope .ps-r2 { stroke: rgba(61,169,252,.30); stroke-width: 1; stroke-dasharray: 3 7; }
.phaser-scope .ps-arc {
  stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round;
  transform-origin: 100px 100px;
  transform: rotate(calc(var(--hero-p, 0) * 300deg));
}
.phaser-scope .ps-cross line { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; opacity: .75; }
.phaser-scope .ps-lock {
  stroke: var(--accent-2); stroke-width: 1.5; stroke-dasharray: 14 10;
  transform-origin: 100px 100px;
  transform: rotate(calc(var(--hero-p, 0) * -260deg)) scale(calc(1 - var(--hero-p, 0) * .18));
}
.phaser-scope .ps-core { fill: var(--accent-2); stroke: none; }
.phaser-scope .ps-halo { fill: rgba(242,92,122,.18); stroke: none; }
/* HUD chips kolem zbrane */
/* ── HERO „typo" + zbran ──
   Panel v neonovem ramecku ma vpravo tentyz 3D phaser jako varianta
   `hero_phaser`, jen bez HUD chipu — v ramecku by z toho byla druha vrstva
   informaci pres prvni. Zare je ZELENA, ne modra: manual ma jednu svitici
   barvu a dve zare v jednom pohledu rusi obe. */
.hero-typo .phaser { flex: none; width: 100%; max-width: none; min-height: clamp(300px, 40vh, 440px); }
.hero-typo .phaser-glow {
  background: radial-gradient(50% 50% at 50% 50%, rgba(105, 188, 68, .26), transparent 70%);
}
.hero-typo .phaser-ring { border-color: var(--accent-border); }
.hero-typo .phaser-ring-2 { border-color: var(--line-neon); }
.hero-typo .phaser-3d { max-width: 460px; }

.phaser-hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ph-chip {
  position: absolute; display: inline-flex; align-items: center; gap: .4rem;
  font: 600 .68rem/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .06em;
  color: var(--muted); background: rgba(8,8,10,.55); border: 1px solid var(--line);
  padding: .3rem .55rem; border-radius: 7px;
}
/* Chipy lezi NAD canvasem. `backdrop-filter` znamena, ze se pri kazdem
   prekresleni canvasu musi znovu vzorkovat a rozmazat podklad pod nimi —
   na telefonu je to ta nejdrazsi vec v celem heru. Na dotykovych zarizenich
   proto jen o neco krycejsi pozadi; na tmave scene je rozdil neviditelny. */
@media (hover: hover) and (pointer: fine) {
  .ph-chip { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
}
@media (pointer: coarse) {
  .ph-chip { background: rgba(8,8,10,.78); }
}
.ph-tl { top: 6%; left: 0; color: var(--accent); }
.ph-tr { top: 12%; right: 0; }
.ph-bl { bottom: 14%; left: 2%; }
.ph-br { bottom: 6%; right: 0; }
.ph-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); animation: hud-blink 1.5s steps(1) infinite; }
.ph-chip .led { width: 7px; height: 7px; border-radius: 50%; }
.ph-chip .led.b { background: var(--team-blue); box-shadow: 0 0 8px var(--team-blue); }
.ph-chip .led.r { background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); }

/* ════ PRO KOHO ════════════════════════════════════ */
.occasions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
/* KARTA S OBRAZKEM — uzka, vysoka, zarici ramecek s prerusenim.
   Navrh („design v2"): obrazek vyplni CELOU kartu a text sedi dole na nem,
   oddeleny stinovym prechodem. Proto ne dva bloky pod sebou (fotka + telo),
   ale vrstvy: `.occasion-photo` je na pozadi, `.occasion-body` nad ni.

   `overflow: hidden` tu byt NESMI — ramecek kresli `::before` se zari pres
   `filter: drop-shadow`, ktera lezi VNE prvku, a orez by ji ustrihl. Orez
   proto prebira fotka (ma vlastni polomer), presne jako u `.event-card`. */
.occasion {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(300px, 27vw, 380px);
  background: transparent;
  border-radius: var(--radius-lg);
  transition: transform var(--d-hover) var(--ease-out);
}
.occasion-photo {
  position: absolute; inset: 0; aspect-ratio: auto;
  border-radius: calc(var(--radius-lg) - var(--frame-w));
}
/* Kolečko „chybí obrázek" a popisek FOTO tady nemají co dělat: médium vyplňuje
   celou kartu a v návrhu je na jeho místě prostý přechod. Jakmile přijde
   `<img class="ph-fill">`, schová si je `.ph:has(img.ph-fill)` samo. */
.occasion .ph-fill::after,
.occasion .ph-note { display: none; }
/* Bez fotky kreslí `.ph-fill` mřížku a dvě radiální skvrny — na plné ploše
   karty to čte jako „chybí obrázek". Návrh má na tom místě prostý přechod,
   takže dokud fotka není, kreslí se ten. `:not(img)` proto, že skutečná
   fotka (`img.ph-fill`) si pozadím nepomůže a překryla by ho stejně. */
.occasion .ph-fill:not(img) {
  background: linear-gradient(180deg,
    var(--surface) 0%, rgba(0, 47, 60, .55) 48%, rgba(0, 14, 18, .2) 100%);
}
/* STINOVY PRECHOD („shadow fade") — cely duvod, proc je text citelny i na
   svetle fotce. Zacina pruhledny, takze horni polovina obrazku zustava
   videt, a konci plnou barvou pozadi pod textem. */
.occasion-body {
  position: relative; z-index: 1;
  padding: 3.5rem 1.2rem 1.35rem;
  background: linear-gradient(180deg,
    rgba(0, 14, 18, 0) 0%,
    rgba(0, 14, 18, .78) 42%,
    rgba(0, 14, 18, .95) 100%);
  border-radius: 0 0 calc(var(--radius-lg) - var(--frame-w)) calc(var(--radius-lg) - var(--frame-w));
}
.occasion-body h3 {
  font-family: var(--font-head); font-size: 1.02rem; font-weight: 600;
  letter-spacing: -.01em; color: var(--accent); margin: 0 0 .45rem;
}
.occasion-body p { color: var(--muted); font-size: .88rem; line-height: 1.55; margin: 0; }

/* ════ GALERIE ═════════════════════════════════════ */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 158px; gap: 14px; }
/* Dlazdice je <button> kvuli klavesnici, takze potrebuje shodit vychozi
   vzhled tlacitka; vzhled si nese trida .ph. */
.gallery-tile {
  transition: transform var(--d-hover) var(--ease-out); cursor: pointer;
  appearance: none; -webkit-appearance: none; border: 0; padding: 0;
  font: inherit; color: inherit; text-align: inherit; width: 100%;
}
.gallery-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gallery-tile:active { transform: scale(.985); }
.gallery-tile.g-tall { grid-row: span 2; }
.gallery-tile.g-wide { grid-column: span 2; }

/* ── LIGHTBOX ──────────────────────────────────────── */
.lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.88); opacity: 0; pointer-events: none; transition: opacity .22s; backdrop-filter: blur(8px); }
.lightbox.open { opacity: 1; pointer-events: all; }
.lightbox-inner { position: relative; max-width: 92vw; max-height: 90vh; display: flex; align-items: center; justify-content: center; }
.lightbox-inner img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: var(--radius-lg); box-shadow: 0 0 80px rgba(0,0,0,.7); display: block; }
.lightbox-ph { width: 80vw; height: 65vh; border-radius: var(--radius-lg); background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .95rem; }
.lightbox-close { position: absolute; top: -2.8rem; right: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text); font-size: 1.1rem; transition: background .2s; line-height: 1; }

.price-note { margin-top: 1.3rem; }