/* hero wsuwa się pod półprzezroczysty nagłówek (--naglowek-h), żeby zajmował cały pierwszy ekran */
.opw { position: relative; margin-top: calc(-1 * var(--naglowek-h)); background: #1B2C63; color: #fff; }
.opw-scena { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; }
.opw-warstwa { position: absolute; inset: 0; }

/* układ: znak (środek --cx, --cy, rozmiar --s). Telefon pionowo: linia u góry, hasło pod nią — zawsze na pierwszym ekranie. */
.opw-1 { --s: min(70vw, 42svh); --cx: 50vw; --cy: calc(var(--naglowek-h) + 16px + var(--s) / 2 + 2svh);
  display: grid; align-content: center; justify-items: center;
  padding: calc(var(--cy) + clamp(24px, 5svh, 56px)) 16px max(4svh, 16px); }
.opw-1:has(.opw-sygnal) { --cy: max(150px, 34svh); }
/* komputer i telefon poziomo: hasło z lewej, znak z prawej */
@media (min-width: 900px), (orientation: landscape) and (max-height: 520px) {
  .opw-1, .opw-1:has(.opw-sygnal) { --s: min(34vw, 60svh); --cx: 68vw; --cy: 54svh;
    align-content: center; justify-items: start; padding: var(--naglowek-h) 0 0 max(20px, 6vw); }
}

/* hasło */
.opw-napis { position: relative; z-index: 2; text-align: center; }
.opw-napis h1 { font-size: clamp(2rem, min(7vw, 8svh) + 0.5rem, 5.6rem); line-height: 1.05; letter-spacing: -0.02em;
  font-weight: 600; max-width: min(14ch, 100%); margin: 0 auto; color: #fff; overflow-wrap: break-word; }
.opw-os { margin: clamp(12px, 3svh, 24px) 0 0; font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.35rem); color: #DCE3F5; max-width: 100%; }
.opw-os .os-kropka { margin: 0 0.2em; }
@media (min-width: 900px), (orientation: landscape) and (max-height: 520px) {
  .opw-napis { text-align: left; max-width: 46vw; }
  .opw-napis h1 { margin: 0; }
}

/* znak na linii pulsu */
.opw-1 .opw-silnik { position: absolute; width: var(--s); height: var(--s); z-index: 1;
  left: calc(var(--cx) - var(--s) / 2); top: calc(var(--cy) - var(--s) / 2); }
/* migoczący czerwony punkt (objaw): spokojne pulsowanie ~0,55 Hz, bez błysków */
.opw-sygnal { display: grid; place-items: center; }
.opw-kropka { position: relative; z-index: 2; width: clamp(14px, 1.4vw + 8px, 22px); aspect-ratio: 1; border-radius: 50%;
  background: #F97066; box-shadow: 0 0 0 6px rgb(249 112 102 / 0.16); animation: opw-miga 1.8s ease-in-out infinite; }
.opw-kropka::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #F97066;
  animation: opw-fala 1.8s ease-out infinite; }
@keyframes opw-miga { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes opw-fala { from { transform: scale(1); opacity: 0.8; } to { transform: scale(3.4); opacity: 0; } }

/* złota linia pulsu przez znak */
.opw-puls { position: absolute; left: 0; right: 0; top: var(--cy); height: 0; z-index: 1; }
.opw-puls svg { position: absolute; left: 0; width: 100%; height: 120px; top: -60px; overflow: visible; }
.opw-puls path { fill: none; stroke: #C39A44; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.opw-puls .opw-pol { display: none; stroke: url(#opw-zanik); }
@media (min-width: 900px), (orientation: landscape) and (max-height: 520px) {
  /* na komputerze linia zaczyna się za hasłem (nie przecina tekstu) */
  .opw-puls .opw-pol { display: inline; }
  .opw-puls .opw-cala { display: none; }
}

/* wariant „pas startowy nocą” (strona robocza /prototyp-pas/): jedna nieruchoma warstwa, horyzont na linii pulsu */
.opw-pas { position: absolute; z-index: 0; left: calc(var(--cx) - 100vw); top: var(--cy); width: 200vw; height: calc(100svh - var(--cy));
  -webkit-mask: linear-gradient(#000 0 28%, transparent 52%); mask: linear-gradient(#000 0 28%, transparent 52%); }
@media (min-width: 900px), (orientation: landscape) and (max-height: 520px) {
  .opw-pas { -webkit-mask: linear-gradient(to right, transparent 0 40%, #000 54%); mask: linear-gradient(to right, transparent 0 40%, #000 54%); }
}
.opw-pas svg { width: 100%; height: 100%; overflow: visible; }
.opw-pas line, .opw-pas path { vector-effect: non-scaling-stroke; fill: none; stroke-linecap: round; }
.opw-pas .pas-linia { stroke: #FFFFFF; stroke-width: 1; opacity: 0.1; }
.opw-pas .pas-pobocze { stroke: #5B86C9; stroke-width: 1; opacity: 0.12; }
.opw-pas .pas-bialy { stroke: #FFFFFF; opacity: 0.15; }
.opw-pas .pas-niebieski { stroke: #5B86C9; opacity: 0.15; }
.opw-pas .pas-zloty { stroke: #C39A44; opacity: 0.15; }

/* bez ruchu: punkt nieruchomy */
@media (prefers-reduced-motion: reduce) { .opw-kropka, .opw-kropka::after { animation: none; } }