/* JiriZindulka.com · v9 vrstva ilustrací a pohybu (2. 11. 2026)
   Jeden jazyk: tenká linka v navy a sky, žlutá jen pro kurz a kóty. Animuje se jen transform,
   opacity a stroke-dashoffset. Bez skriptu, v tisku a při omezeném pohybu je vše hotové a stojí. */

:root {
  --vlna-h: 28px;
  --vlna-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='28' viewBox='0 0 720 28'%3E%3Cpath fill='%239bdaf2' fill-opacity='.7' d='M0 13Q90 3 180 13T360 13T540 13T720 13V28H0Z'/%3E%3Cpath fill='%23233a59' d='M0 19Q60 27 120 19T240 19T360 19T480 19T600 19T720 19V28H0Z'/%3E%3C/svg%3E");
  --vlna-bila: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='28' viewBox='0 0 720 28'%3E%3Cpath fill='%23fff' fill-opacity='.42' d='M0 12Q60 2 120 12T240 12T360 12T480 12T600 12T720 12V28H0Z'/%3E%3Cpath fill='%23fff' d='M0 19Q60 27 120 19T240 19T360 19T480 19T600 19T720 19V28H0Z'/%3E%3C/svg%3E");
  --more-linka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='14' viewBox='0 0 480 14'%3E%3Cpath fill='none' stroke='%239bdaf2' stroke-width='1.2' d='M0 7Q30 1 60 7T120 7T180 7T240 7T300 7T360 7T420 7T480 7'/%3E%3C/svg%3E");
}

/* ---------- vlnová hrana navy ploch a patičky: navy přetéká 28 px do sousední sekce */
.sec--navy, .site-foot { position: relative; overflow-x: clip; }
.sec--navy::before, .sec--navy::after, .site-foot::before {
  content: ""; position: absolute; left: 0; z-index: 1; pointer-events: none;
  width: calc(100% + 720px); height: var(--vlna-h);
  background: var(--vlna-navy) repeat-x 0 0 / 720px var(--vlna-h);
}
.sec--navy::before, .site-foot::before { top: calc(1px - var(--vlna-h)); }
.sec--navy::after { bottom: calc(1px - var(--vlna-h)); scale: 1 -1; }
.sec--navy + .sec--navy::before, .sec--navy:has(+ .sec--navy)::after { display: none; }
.sec--navy:last-child::after { display: none; }
main:has(> .sec--navy:last-child) + .site-foot::before { display: none; }

/* hero: bílá vlna na spodní hraně (stránka pod ním je bílá) */
.hero::before {
  content: ""; position: absolute; left: 0; bottom: -1px; z-index: 1; pointer-events: none;
  width: calc(100% + 720px); height: var(--vlna-h);
  background: var(--vlna-bila) repeat-x 0 0 / 720px var(--vlna-h);
}
.hero { overflow-x: clip; }

/* textura námořní mapy na navy plochách (izobáty a síť poledníků) */
.sec--navy:not(.bp-sec), .site-foot { background-image: url("/wow/mapa.svg"); background-size: 1280px 800px; background-position: center top; }

@media (prefers-reduced-motion: no-preference) {
  .sec--navy::before, .sec--navy::after, .site-foot::before, .hero::before { animation: vlna 36s linear infinite paused; }
  .sec--navy::after { animation-duration: 44s; animation-direction: reverse; }
  .hero::before { animation-duration: 30s; }
  .wow-vis::before, .wow-vis::after { animation-play-state: running; }
}
@keyframes vlna { to { translate: -720px 0; } }

/* ---------- technický výkres Boomerangu */
.bp-sec {
  background-color: var(--navy);
  background-image:
    linear-gradient(rgba(155, 218, 242, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155, 218, 242, .09) 1px, transparent 1px),
    linear-gradient(rgba(155, 218, 242, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155, 218, 242, .035) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: center top;
}
.bp { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px 64px; align-items: center; }
.bp figure { margin: 0; }
.bp svg { display: block; width: 100%; height: auto; overflow: visible; }
.bp-plan { max-width: 640px; justify-self: center; width: 100%; }
.bp-bok-sloupec { display: grid; gap: 40px; align-content: center; }
.bp-nar-box { border: 1px solid rgba(155, 218, 242, .28); border-radius: var(--r); padding: 20px 20px 16px; background: var(--navy); }
.bp-nar-box figcaption { margin-top: 12px; font-size: var(--t-sm); color: var(--sky); text-align: center; }

.bp .d, .kompas .d { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bp .bp-tenka, .kompas .bp-tenka { stroke: var(--sky); stroke-width: 1; }
.bp .bp-stezen { stroke-width: 2.4; }
.bp .bp-rahno { stroke-width: 2.2; }
.bp .bp-plachta { stroke: var(--sky); }
.bp .bp-vypln { fill: rgba(155, 218, 242, .1); stroke: none; }
.bp .bp-kota { stroke: var(--cta); stroke-width: 1.2; }
.bp .bp-pom { fill: none; stroke: var(--sky); stroke-width: 1; stroke-dasharray: 2 5; stroke-opacity: .55; stroke-linecap: round; }
.bp-pomoc path { stroke: var(--sky); stroke-width: 1.2; stroke-dasharray: 10 6; fill: none; vector-effect: non-scaling-stroke; }
.bp .bp-tecka { fill: var(--cta); }
/* --fs je velikost v jednotkách výkresu; --bp-z (z wow.js) převádí spodní mez na pixely obrazovky:
   kóty nikdy pod 13 px, štítek pohledu pod 11 px. Jméno lodi je namalované na trupu a roste s kresbou. Bez skriptu platí samotné --fs. */
.bp-k { --fs: 15px; --min: 13px; fill: var(--cta); font-size: max(var(--fs), calc(var(--min) * var(--bp-z, 0))); font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.bp-jmeno { --fs: 17px; fill: #fff; font-size: var(--fs); font-weight: 700; font-style: italic; letter-spacing: .04em; }
.bp-pohled { --fs: 12px; fill: var(--sky); fill-opacity: .8; font-size: max(var(--fs), calc(11px * var(--bp-z, 0))); font-weight: 700; letter-spacing: .16em; }
/* nárys se škáluje víc než bokorys (užší viewBox v širším sloupci): popisky menší, aby na obrazovce měly stejnou velikost */
.bp-nar .bp-k { --fs: 10.5px; }
.bp-nar .bp-pohled { --fs: 8.5px; }
.bp-lod .f path { fill: none; stroke: var(--sky); stroke-width: 1; }
.bp-lod .f circle { fill: var(--sky); }
.bp-voda rect { fill: rgba(155, 218, 242, .16); }
.bp-hladina { fill: none; stroke: var(--sky); stroke-width: 1.4; }
.bp-voda { transform: translateY(40px); }

.bp-rozpis { border: 1px solid rgba(155, 218, 242, .28); border-radius: var(--r); font-size: var(--t-sm); background: var(--navy); }
.bp-r-hlava { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 14px 20px; border-bottom: 1px solid rgba(155, 218, 242, .28); }
.bp-r-hlava span { font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); }
.bp-r-hlava b { font-size: 20px; color: #fff; margin-right: auto; }
.bp-r-hlava span:first-child { flex-basis: 100%; }
.bp-rozpis dl { display: grid; margin: 0; }
.bp-rozpis dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 20px; }
.bp-rozpis dl > div + div { border-top: 1px solid rgba(155, 218, 242, .14); }
.bp-rozpis dt { color: rgba(255, 255, 255, .78); }
.bp-rozpis dd { margin: 0; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

/* tablet: výkres se zmenšuje, popisky rostou s ním (bez skriptu; se skriptem drží spodní mez výše) */
@media (max-width: 1100px) {
  .bp-k { --fs: 17px; }
  .bp-jmeno { --fs: 19px; }
  .bp-pohled { --fs: 14px; }
  .bp-nar .bp-k { --fs: 12px; }
  .bp-nar .bp-pohled { --fs: 10px; }
}
@media (max-width: 960px) {
  .bp { grid-template-columns: minmax(0, 1fr); }
  .bp-plan { max-width: 520px; }
  .bp-bok-sloupec { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
}
@media (max-width: 640px) {
  .bp-bok-sloupec { grid-template-columns: minmax(0, 1fr); }
  .bp-k { --fs: 24px; }
  /* kóta ponoru stojí u pravého okraje sloupce: pod 390 px spodní mez klesá s šířkou, aby se vešla */
  .bp-bok .bp-k { --min: min(13px, calc((100vw - 32px) * .037)); }
  .bp-jmeno { --fs: 22px; }
  .bp-bok .bp-pohled { --fs: 21px; }
  .bp-plan .d { stroke-width: 2.6; }
  .bp-plan .bp-tenka, .bp-plan .bp-kota { stroke-width: 1.8; }
  .bp-plan .bp-stezen { stroke-width: 3.6; }
  .bp-plan .bp-pom { stroke-width: 1.8; }
}

/* kreslení: --L doplní skript (délka tahu), pak se čára vytáhne; výplně a popisky se prolnou */
.wow-armed .d { stroke-dasharray: var(--L, 2000) var(--L, 2000); stroke-dashoffset: var(--L, 2000); }
.wow-armed .f { opacity: 0; }
.wow-armed.is-in .d { stroke-dashoffset: 0; transition: stroke-dashoffset var(--t, 1400ms) cubic-bezier(.45, 0, .2, 1) var(--dl, 0ms); }
.wow-armed.is-in .f { opacity: 1; transition: opacity 600ms var(--easing) var(--dl, 0ms); }
.wow-armed.is-in .bp-vypln { transition-duration: 900ms; }

/* příliv a odliv: hladina klesne, loď s ní sedne na oba kýly a zůstane stát na dně;
   mimo obrazovku stojí a po návratu pokračuje tam, kde přestala */
@media (prefers-reduced-motion: no-preference) {
  .bp-nar-box.is-in .bp-voda { animation: odliv-voda 7s ease-in-out 2.6s infinite alternate both paused; }
  .bp-nar-box.is-in .bp-nar-lod { animation: odliv-lod 7s ease-in-out 2.6s infinite alternate both paused; }
  .bp-nar-box.is-in .bp-hladina { animation: hladina 3.2s linear infinite paused; }
  .bp-sec.wow-vis .bp-nar-box.is-in :is(.bp-voda, .bp-nar-lod, .bp-hladina) { animation-play-state: running; }
}
@keyframes odliv-voda { 0%, 8% { transform: translateY(0); } 40% { transform: translateY(19px); } 92%, 100% { transform: translateY(64px); } }
@keyframes odliv-lod { 0%, 8% { transform: translateY(-19px); } 40%, 100% { transform: translateY(0); } }
@keyframes hladina { to { transform: translateX(-40px); } }
.bp-nar-lod { transform: translateY(0); }

/* ---------- loď na kurzu ke kapitánskému průkazu */
.kurz { position: relative; }
.kurz-stopa, .kurz-lod { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; opacity: 0; }
.kurz.is-live .kurz-stopa, .kurz.is-live .kurz-lod { opacity: 1; transition: opacity 400ms var(--easing); }
.kurz-stopa { height: 2px; background: var(--cta); border-radius: 2px; transform-origin: left center; scale: var(--p, 0) 1; }
.kurz.is-v .kurz-stopa { width: 2px; transform-origin: center top; scale: 1 var(--p, 0); }
.kurz-lod { width: 99px; height: 44px; margin: -22px 0 0 -49.5px; will-change: transform; }
.kurz-lod svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kurz.is-v .kurz-lod svg { rotate: 90deg; }
.kl-trup { fill: var(--navy); stroke: #fff; stroke-width: 1.2; }
.kl-paluba { fill: none; stroke: var(--sky); stroke-width: .8; opacity: .7; }
.kl-salon { fill: var(--sky); }
.kl-hl { fill: var(--sky); stroke: var(--navy); stroke-width: 1; stroke-linejoin: round; }
.kl-ko { fill: #fff; stroke: var(--navy); stroke-width: 1; stroke-linejoin: round; }
.kl-rahno { fill: none; stroke: var(--cta); stroke-width: 1.6; stroke-linecap: round; }
.kl-stezen { fill: var(--cta); }
.kl-bram { fill: none; stroke: url(#kl-bram-g); stroke-width: 1.3; stroke-linecap: round;
  transform-box: fill-box; transform-origin: 100% 50%; scale: calc(.5 + .5 * var(--v, 0)) 1; }
.kl-bram-a { stop-color: var(--blue); stop-opacity: .75; }
.kl-bram-b { stop-color: var(--blue); stop-opacity: 0; }
.kurz-kruh { position: absolute; left: 0; top: 0; z-index: 3; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
  border: 1px solid var(--cta); box-shadow: 0 0 0 3px rgba(242, 203, 5, .18); pointer-events: none; opacity: 0; transition: opacity 300ms var(--easing); }
.kurz-kruh.is-pass { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .kurz-stopa, .kurz-lod, .kurz-kruh { display: none; } }
/* čtyři karty vedle sebe: nadpis drží dva řádky, aby termíny a popisy ve všech kartách lícovaly */
@media (min-width: 961px) { .path .step h3 { min-height: calc(2em * 1.3); min-height: 2lh; } }

/* ---------- kompasová růžice v sekci Kolem kurzů a plaveb */
.wrap:has(> .kompas) { position: relative; }
.wrap:has(> .kompas) > .sec-head { position: relative; z-index: 1; }
.kompas { position: absolute; right: var(--gut); top: -54px; width: 200px; aspect-ratio: 1; pointer-events: none; opacity: .5; }
.kompas svg { display: block; width: 100%; height: 100%; }
.kompas .d { stroke: var(--sky); stroke-width: 1.1; }
.kompas .k-plny { fill: var(--sky); fill-opacity: .55; }
.kompas .k-pismena text { fill: var(--sky); font-size: 15px; font-weight: 700; letter-spacing: .06em; }
.kompas .k-hvezda { transform-origin: 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .kompas.wow-armed .k-hvezda { rotate: -38deg; }
  .kompas.wow-armed.is-in .k-hvezda { animation: strelka 2600ms cubic-bezier(.25, .1, .25, 1) 700ms both; }
}
@keyframes strelka { 0% { rotate: -38deg; } 32% { rotate: 14deg; } 52% { rotate: -7deg; } 70% { rotate: 3deg; } 85% { rotate: -1deg; } 100% { rotate: 0deg; } }
/* na úzké šířce růžice nad nadpisem, vpravo od nadtitulku: nikdy pod textem */
@media (max-width: 760px) {
  .kompas { width: 80px; top: -56px; right: 0; opacity: .55; }
  .kompas .k-pismena { display: none; }
}

/* ---------- signální vlajky nad kontaktním pásem */
.vlajky { --sag: clamp(6px, 1.9vw, 12px); position: relative; display: flex; align-items: flex-start; gap: clamp(4px, 1vw, 10px);
  width: max-content; max-width: 100%; margin: 0 0 40px; padding-top: 3px; }
.vl-lano { position: absolute; z-index: 1; left: -12px; right: -12px; top: 3px; height: var(--sag); }
.vl-lano svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vl-lano path { fill: none; stroke: color-mix(in srgb, var(--navy) 50%, white); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.vl-lano::before, .vl-lano::after { content: ""; position: absolute; top: -3px; width: 6px; height: 6px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--navy) 50%, white); background: var(--tint); }
.vl-lano::before { left: -3px; }
.vl-lano::after { right: -3px; }
.vl { position: relative; display: grid; justify-items: center; gap: 8px; margin-top: calc(var(--y) * var(--sag)); }
.vl svg { display: block; width: clamp(30px, 7.4vw, 56px); height: auto; aspect-ratio: 30 / 24; rotate: var(--r); transform-origin: 50% 0; }
.vl-obrys { fill: none; stroke: rgba(35, 58, 89, .35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vl b { font-size: clamp(12px, 1.1vw, 15px); font-weight: 700; color: var(--blue); letter-spacing: .04em; }
@media (prefers-reduced-motion: no-preference) {
  .vlajky.is-in .vl svg { animation: vlaje 4.8s ease-in-out infinite alternate paused; animation-delay: calc(var(--i) * -530ms); }
  .vlajky.is-in.wow-vis .vl svg { animation-play-state: running; }
  .wow-armed .vl { opacity: 0; translate: 0 -8px; }
  .wow-armed.is-in .vl { opacity: 1; translate: 0 0; transition: opacity 500ms var(--easing), translate 600ms var(--easing); transition-delay: calc(var(--i) * 70ms); }
}
/* vlajka visí horní hranou na laně, vítr jí posouvá jen spodní okraj */
@keyframes vlaje { from { transform: skewX(-5deg); } to { transform: skewX(4deg); } }

/* ---------- ilustrovaný horizont v patičce: noc, maják, Boomerang pod plachtami */
.horizont { position: relative; height: 128px; overflow: hidden; pointer-events: none; }
.h-hvezdy { position: absolute; inset: 0; }
.h-hvezdy i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: .55; }
.h-hvezdy i:nth-child(3n) { width: 3px; height: 3px; opacity: .75; }
.h-majak { position: absolute; bottom: 14px; right: max(var(--gut), calc((100% - var(--wrap)) / 2 + var(--gut))); width: 240px; height: 110px; overflow: visible; z-index: 2; }
/* ostrov se těsně nad hladinou rozplyne, pod přední vlnou nezůstane rovná hrana */
.h-zeme { fill: url(#hZemeG); }
/* gradient na tahu: bez non-scaling-stroke, s ním WebKit počítá gradient jinde a linka zmizí */
.h-pobrezi { fill: none; stroke: url(#hPobreziG); stroke-width: 1.2; stroke-linecap: round; }
.h-vez { fill: #2a4462; stroke: #e9eef3; stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.h-vez-pas { fill: #c4383a; }
.h-lucerna { fill: none; stroke: #e9eef3; stroke-width: 1.4; stroke-linejoin: round; }
.h-svetlo { fill: var(--cta); }
.h-halo { fill: var(--cta); opacity: .22; }
.h-papr { transform-origin: 170px 25px; opacity: .9; mix-blend-mode: screen; }
.h-papr--p { opacity: 0; }
.h-lod { position: absolute; left: 0; bottom: 18px; width: 54px; z-index: 1; translate: 18vw 0; }
.h-lod-in { transform-origin: 50% 90%; }
.h-lod svg { display: block; width: 100%; height: auto; }
.hs-plachta { fill: rgba(155, 218, 242, .16); stroke: var(--sky); stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hs-kosatka { fill: rgba(155, 218, 242, .3); }
.hs-trup { fill: #2a4462; stroke: #e9eef3; stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hs-lano { fill: none; stroke: rgba(233, 238, 243, .55); stroke-width: 1; vector-effect: non-scaling-stroke; }
.h-more { position: absolute; left: 0; height: 14px; width: calc(100% + 480px); background: var(--more-linka) repeat-x 0 0 / 480px 14px; }
.h-more--zad { bottom: 22px; opacity: .3; }
.h-more--pred { bottom: 8px; opacity: .55; z-index: 3; }
@media (prefers-reduced-motion: no-preference) {
  .horizont.wow-vis .h-more--zad { animation: more 26s linear infinite; }
  .horizont.wow-vis .h-more--pred { animation: more 17s linear infinite; }
  .horizont.wow-vis .h-lod { animation: plavba 80s linear infinite; }
  .horizont.wow-vis .h-lod-in { animation: houpe 4.2s ease-in-out infinite alternate; }
  .horizont.wow-vis .h-papr--l { animation: paprsek 9s ease-in-out infinite; }
  .horizont.wow-vis .h-papr--p { animation: paprsek 9s ease-in-out -4.5s infinite; }
  .horizont.wow-vis .h-halo { animation: halo 4.5s ease-in-out infinite; transform-origin: 170px 25px; }
  .horizont.wow-vis .h-hvezdy i { animation: trpyt 5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.7s); }
}
@keyframes more { to { translate: -480px 0; } }
@keyframes plavba { from { translate: 3vw 0; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } to { translate: calc(97vw - 54px) 0; opacity: 0; } }
@keyframes houpe { from { rotate: -2deg; translate: 0 1px; } to { rotate: 2deg; translate: 0 -1px; } }
@keyframes paprsek { 0%, 100% { transform: scaleX(.04); opacity: 0; } 12% { opacity: .9; } 50% { transform: scaleX(1); opacity: .9; } 88% { opacity: .9; } }
@keyframes halo { 50% { transform: scale(1.6); opacity: .1; } }
@keyframes trpyt { from { opacity: .2; } to { opacity: .8; } }
@media (max-width: 720px) {
  .horizont { height: 96px; }
  .h-majak { width: 180px; height: 82px; bottom: 12px; }
  .h-pobrezi { stroke-width: 1.6; }
  .h-lod { width: 42px; bottom: 16px; }
}

@media print {
  .horizont, .kurz-stopa, .kurz-lod, .kurz-kruh, .kompas, .vlajky, .sec--navy::before, .sec--navy::after, .site-foot::before, .hero::before { display: none !important; }
  .wow-armed .d { stroke-dashoffset: 0 !important; }
  .wow-armed .f { opacity: 1 !important; }
}