/* Hero v3 — makieta „Calm Healing Massage Website Hero” (Layouts v3/Hero 1).
   Własne klasy hv-*, żeby nie dziedziczyć starych warstw hero (R03–R22).
   Zdjęcia: oryginały klientki (DSCF5309, DSCF5207, zdjęcie gabinetu 03).
   Na desktopie wymiary są w pikselach makiety 1600 × 1000 (--px). */

@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('assets/fonts/bodoni-moda-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('assets/fonts/bodoni-moda-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400 500; font-display: swap; src: url('assets/fonts/bodoni-moda-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400 500; font-display: swap; src: url('assets/fonts/bodoni-moda-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('assets/fonts/dm-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('assets/fonts/dm-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

.hv, .hv-header {
  --hv-paper: #f7f3ec;
  --hv-ink: #10261f;
  --hv-green: #0b3b2b;
  --hv-green-hover: #155441;
  --hv-copper: #b27b55;
  --hv-line: #c9a68a;
  --hv-muted: #a39d93;
  --hv-sans: 'DM Sans', Arial, Helvetica, sans-serif;
  --hv-serif: 'Bodoni Moda', Didot, 'Bodoni MT', 'Times New Roman', serif;
  --hv-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Wspólne (wszystkie szerokości) ---------- */
.hv { position: relative; isolation: isolate; overflow: hidden; background: var(--hv-paper); color: var(--hv-ink); font-family: var(--hv-sans); -webkit-font-smoothing: antialiased; }
.hv-art { pointer-events: none; user-select: none; }
.hv-art img { display: block; max-width: none; }
.hv-photo, .hv-room { position: absolute; overflow: hidden; }
.hv-photo picture { display: block; height: 100%; }
.hv-photo img, .hv-room img { width: 100%; height: 100%; object-fit: cover; }
.hv-panel { position: absolute; left: 0; top: 0; fill: var(--hv-paper); z-index: 2; }
.hv-lines { position: absolute; left: 0; top: 0; z-index: 3; fill: none; overflow: visible; }
.hv-lines path { vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.hv-ring { stroke: #c79574; stroke-width: 1.3; stroke-opacity: .85; }
.hv-sprig path { stroke: #c49a77; stroke-width: 1.15; stroke-opacity: .8; }
.hv-detail { position: absolute; z-index: 4; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #d9c9b8; }
.hv-detail img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hv-arc { position: absolute; z-index: 5; aspect-ratio: 1; border-radius: 50%; border-style: solid; border-color: var(--hv-paper); }
.hv-medallion { position: absolute; z-index: 6; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; margin: 0; background: #8d674ef2; color: #fcf5eb; font-family: var(--hv-serif); font-style: italic; font-weight: 450; font-variation-settings: 'opsz' 14; text-align: center; }
.hv-medallion span::after { content: ''; display: block; margin: .8em auto 0; width: 2.1em; height: 1px; background: #e6c7a8; }
.hv-bokeh { position: absolute; z-index: 5; left: 0; bottom: 0; }
.hv-bokeh i { position: absolute; border-radius: 50%; }

.hv-copy { position: relative; z-index: 7; }
.hv-eyebrow { margin: 0; text-transform: uppercase; font-weight: 500; color: #1d2723; }
/* 'opsz' 28 i grubość 450: przy dużym rozmiarze włoskowe kreski Bodoni nie znikają (uwaga Marcina 26.10). */
.hv h1 { margin: 0; font-family: var(--hv-serif); font-weight: 450; font-variation-settings: 'opsz' 28; color: var(--hv-ink); letter-spacing: -.035em; }
.hv-line { display: block; overflow: hidden; padding: .1em 0 .2em; margin: -.1em 0 -.2em; }
.hv-line > span { display: block; }
.hv-rule { display: block; background: var(--hv-copper); transform-origin: left center; }
.hv-lead { margin: 0; font-family: var(--hv-serif); font-weight: 450; font-variation-settings: 'opsz' 14; color: #1a2622; letter-spacing: -.01em; }
.hv .hv-cta { display: inline-flex; align-items: center; justify-content: center; background: var(--hv-green); color: #fbf8f2; border-radius: 999px; font-family: var(--hv-sans); font-weight: 500; letter-spacing: .005em; box-shadow: 0 10px 26px #0b3b2b1f; }
.hv .hv-cta:hover { background: var(--hv-green-hover); }
.hv-arrow { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: translate .25s; }
.hv-cta:hover .hv-arrow { translate: 4px 0; }
.hv-facts { list-style: none; margin: 0; padding: 0; display: grid; }
.hv-facts li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hv-facts li + li { border-left: 1px solid var(--hv-line); }
.hv-facts .icon { background: var(--hv-copper); }
.hv-facts .icon-hand-finger { --icon: url('assets/hero-r03/08-ikona-dlon.svg'); }
.hv-facts .icon-clock { --icon: url('assets/hero-r03/09-ikona-zegar.svg'); }
.hv-facts .icon-leaf { --icon: url('assets/hero-r03/10-ikona-lisc.svg'); }
.hv-facts strong { font-weight: 500; color: #18211d; }
.hv-facts small { display: block; color: #2f3531; }
.hv-scroll { position: absolute; z-index: 7; display: flex; align-items: center; color: var(--hv-muted); }
.hv-scroll:hover { color: var(--hv-copper); }
.hv-scroll-stem { position: absolute; background: var(--hv-line); }
.hv-scroll-stem::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 7px; height: 7px; border: solid var(--hv-line); border-width: 0 1px 1px 0; transform: translate(-50%, 0) rotate(45deg); transform-origin: center; }
.hv-scroll-dot { display: grid; place-items: center; border: 1px solid var(--hv-line); border-radius: 50%; flex: none; }
.hv-scroll-dot svg { width: 45%; height: 45%; fill: none; stroke: var(--hv-copper); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.hv-header { font-family: var(--hv-sans); }
.hv-header .brand img { clip-path: none; }

/* ---------- Desktop: geometria makiety 1600 × 1000 ---------- */
@media (min-width: 1100px) {
  :root { --px: calc(min(1vw, 1.6vh) / 16); }
  html { scroll-padding-top: 80px; }

  /* Nagłówek: 110 px na starcie, płynnie do ~72 px; logo maleje razem z nim. */
  .hv-header, .hv-header.scrolled {
    height: max(64px, calc((110 - 38 * var(--hv-p, 0)) * var(--px)));
    padding: 0 calc(63 * var(--px)) 0 calc(90 * var(--px));
    gap: 0;
    background: #f7f3ecf2;
    border-bottom: 1px solid #10261f12;
    box-shadow: 0 10px 30px rgb(25 45 35 / calc(.07 * var(--hv-p, 0)));
    backdrop-filter: blur(14px);
    transition: none;
  }
  .hv-header .brand { width: auto; flex: none; gap: calc(20 * var(--px)); }
  .hv-header .brand img { width: auto; height: max(48px, calc((102 - 44 * var(--hv-p, 0)) * var(--px))); aspect-ratio: 842 / 785; object-fit: contain; transform: none; }
  .hv-header .brand > span { transform: none; text-align: center; font-weight: 700; font-size: max(14px, calc(18.5 * var(--px))); letter-spacing: .055em; color: #16201c; line-height: 1; }
  .hv-header .brand small { margin-top: calc(6 * var(--px)); font-weight: 600; font-size: max(11px, calc(13.5 * var(--px))); letter-spacing: .01em; color: #0f4a37; }
  .hv-header nav { flex: none; justify-content: flex-start; margin: 0 0 0 calc(108 * var(--px)); gap: calc(35 * var(--px)); font-size: max(14px, calc(16.5 * var(--px))); color: #1b1f1d; }
  .hv-header nav > a, .hv-header nav summary { font-size: inherit; padding: 12px 0; }
  .hv-header nav .icon { width: max(13px, calc(15 * var(--px))); height: max(13px, calc(15 * var(--px))); }
  .hv-header .languages { margin: 0 0 0 auto; gap: calc(12 * var(--px)); font-size: max(13px, calc(15.5 * var(--px))); color: #b9b3a8; transition: margin-right .55s var(--hv-ease); }
  .hv-header .languages [aria-current] { color: #111a16; font-weight: 700; }
  .hv-header .languages button, .hv-header .languages a { color: #696257; font-size: inherit; }
  .hv-header .languages button:hover, .hv-header .languages a:hover { color: var(--hv-green); }
  /* Instagram między menu a wyborem języka; sama ikona, nazwa dla czytników ekranu. */
  .hv-header .insta { margin-left: auto; color: #1b1f1d; transition: color .25s; }
  .hv-header .insta { padding-left: calc(28 * var(--px)); }
  .hv-header .insta:hover { color: var(--hv-green); }
  .hv-header .insta svg { width: max(18px, calc(20 * var(--px))); height: max(18px, calc(20 * var(--px))); }
  .hv-header .insta span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hv-header .insta + .languages { margin-left: calc(28 * var(--px)); }

  /* Przycisk w nagłówku przejmuje rolę dopiero, gdy ten z hero schowa się pod menu. */
  .hv-header > .button {
    position: absolute; right: calc(63 * var(--px)); top: 50%;
    width: max(196px, calc(222 * var(--px))); height: max(44px, calc(52 * var(--px)));
    margin: 0; padding: 0 calc(24 * var(--px)); gap: calc(14 * var(--px));
    background: var(--hv-green); font-weight: 500; font-size: max(14px, calc(16 * var(--px)));
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translate(14px, -50%);
    transition: opacity .45s ease, transform .6s var(--hv-ease), visibility .45s, background .25s;
  }
  .hv-header > .button:hover { background: var(--hv-green-hover); translate: none; }
  .hv-header.booking-visible > .button { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(0, -50%); }
  .hv-header.booking-visible .languages { margin-right: calc(max(196px, calc(222 * var(--px))) + 48 * var(--px)); }

  /* --hv-h: wysokość pola zdjęcia; --hv-x: lewy brzeg kadru (opis niżej). cqw liczone względem .hv. */
  .hv {
    height: max(100vh, calc(1000 * var(--px))); min-height: 640px; container-type: inline-size;
    --hv-h: calc(max(100vh, 1000 * var(--px), 640px) - 110 * var(--px));
    --hv-x: calc(min(max(50cqw + 209 * var(--px), 870 * var(--px) + .234 * var(--hv-h)), 100cqw - 12 * var(--px) - .574 * var(--hv-h)) - .744 * var(--hv-h));
  }
  .hv-art { position: absolute; inset: calc(110 * var(--px)) 0 0 0; z-index: 0; overflow: hidden; background: #17342a; }

  /* Jedno szerokie zdjęcie gabinetu (proporcje 1672 × 941, scripts/hero-v3-gabinet.sh) w pełnej wysokości jak w makiecie.
     Względem wysokości kadru H: głowa Wiolety 0.744 H od lewego brzegu, lewy brzeg włosów 0.234 H na lewo
     od głowy, koniec prawej dłoni 0.574 H na prawo. Głowa stoi pośrodku między krzywą panelu (~838)
     a kołem z detalem (prawa krawędź − 420), ale krzywa nie ucina włosów (≥ 870), a prawa dłoń
     nie wychodzi za ekran. Uwagi Marcina 26–27.10: „nie ucinaj po lewej”, głowa na górze. */
  .hv-photo { left: 0; top: 0; bottom: 0; right: 0; }
  .hv-photo img {
    position: absolute; top: 0; left: var(--hv-x); height: 100%;
    width: max(1.777 * var(--hv-h), 100cqw - var(--hv-x)); max-width: none; object-fit: cover; object-position: left top;
  }
  .hv-panel, .hv-lines { width: calc(1600 * var(--px)); height: calc(1600 * var(--px)); }

  .hv-detail { right: calc(-112 * var(--px)); top: calc(-40 * var(--px)); width: calc(522 * var(--px)); box-shadow: 0 0 0 calc(10 * var(--px)) var(--hv-paper); }
  .hv-arc { right: calc(-415 * var(--px)); top: calc(-245 * var(--px)); width: calc(510 * var(--px)); border-width: calc(7 * var(--px)); }
  .hv-medallion { right: calc(217 * var(--px)); top: calc(309 * var(--px)); width: calc(186 * var(--px)); font-size: calc(21.5 * var(--px)); line-height: 1.12; box-shadow: 0 0 0 calc(2 * var(--px)) #f7f3ec66; }

  .hv-bokeh { width: calc(1000 * var(--px)); height: calc(460 * var(--px)); filter: blur(calc(15 * var(--px))); }
  .hv-bokeh i:nth-child(1) { left: calc(-60 * var(--px)); bottom: calc(190 * var(--px)); width: calc(110 * var(--px)); height: calc(250 * var(--px)); background: #6f8667; opacity: .5; rotate: 18deg; }
  .hv-bokeh i:nth-child(2) { left: calc(-30 * var(--px)); bottom: calc(-60 * var(--px)); width: calc(230 * var(--px)); height: calc(140 * var(--px)); background: #7f9273; opacity: .42; rotate: -12deg; }
  .hv-bokeh i:nth-child(3) { left: calc(480 * var(--px)); bottom: calc(-50 * var(--px)); width: calc(230 * var(--px)); height: calc(150 * var(--px)); background: #5e785a; opacity: .5; rotate: -25deg; }
  .hv-bokeh i:nth-child(4) { left: calc(640 * var(--px)); bottom: calc(-40 * var(--px)); width: calc(170 * var(--px)); height: calc(140 * var(--px)); background: #fffdf8; opacity: .85; }
  .hv-bokeh i:nth-child(5) { left: calc(760 * var(--px)); bottom: calc(-60 * var(--px)); width: calc(120 * var(--px)); height: calc(110 * var(--px)); background: #fbf8f1; opacity: .55; }
  .hv-bokeh i:nth-child(6) { left: calc(600 * var(--px)); bottom: calc(110 * var(--px)); width: calc(70 * var(--px)); height: calc(60 * var(--px)); background: #fffef9; opacity: .45; }
  .hv-bokeh i:nth-child(7) { left: calc(860 * var(--px)); bottom: calc(-70 * var(--px)); width: calc(170 * var(--px)); height: calc(130 * var(--px)); background: #4f6b51; opacity: .45; }

  .hv-copy { position: absolute; left: calc(93 * var(--px)); top: calc(110 * var(--px) + (100% - 1000 * var(--px)) * .5 + 140 * var(--px)); width: calc(600 * var(--px)); }
  .hv-eyebrow { font-size: calc(13.5 * var(--px)); letter-spacing: .42em; line-height: 1.3; }
  .hv h1 { margin-top: calc(18 * var(--px)); font-size: calc(98 * var(--px)); line-height: .9; }
  .hv-rule { width: calc(79 * var(--px)); height: calc(4 * var(--px)); margin-top: calc(34 * var(--px)); }
  .hv-lead { margin-top: calc(27 * var(--px)); font-size: calc(26.2 * var(--px)); line-height: 1.15; }
  .hv .hv-cta { margin-top: calc(32 * var(--px)); height: calc(64 * var(--px)); padding: 0 calc(38 * var(--px)) 0 calc(40 * var(--px)); gap: calc(20 * var(--px)); font-size: calc(18 * var(--px)); }
  .hv-arrow { width: calc(26 * var(--px)); height: calc(12 * var(--px)); }
  .hv-facts { margin: calc(31 * var(--px)) 0 0 calc(-29 * var(--px)); grid-template-columns: calc(210 * var(--px)) calc(188 * var(--px)) calc(194 * var(--px)); }
  .hv-facts li { height: calc(90 * var(--px)); }
  .hv-facts .icon { width: calc(34 * var(--px)); height: calc(34 * var(--px)); margin-bottom: calc(18 * var(--px)); }
  .hv-facts strong { font-size: calc(15.5 * var(--px)); line-height: 1.3; }
  .hv-facts small { font-size: calc(13.8 * var(--px)); line-height: 1.5; margin-top: calc(3 * var(--px)); }

  .hv-scroll { left: calc(128 * var(--px)); bottom: calc((100% - 1000 * var(--px)) * .5 + 64 * var(--px)); gap: calc(13 * var(--px)); font-size: calc(15 * var(--px)); }
  .hv-scroll-stem { left: calc(-29 * var(--px)); top: calc(-28 * var(--px)); width: 1px; height: calc(86 * var(--px)); }
  .hv-scroll-dot { width: calc(36 * var(--px)); height: calc(36 * var(--px)); }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .hv-header .brand > span { display: none; }
  .hv-header nav { margin-left: calc(70 * var(--px)); }
}

/* ---------- Tablet i telefon: tekst, potem zdjęcie, potem 3 informacje ---------- */
@media (max-width: 1099px) {
  .hv { display: flex; flex-direction: column; padding-top: var(--mobile-header, 80px); padding-bottom: 36px; }
  .hv-copy { display: contents; }
  .hv-copy > *, .hv .hv-copy > h1 { margin-inline: 24px; }
  .hv-lead br { display: none; }
  .hv-eyebrow { order: 1; margin-top: 24px; font-size: 11px; letter-spacing: .32em; }
  .hv h1 { order: 1; margin-top: 12px; font-size: clamp(46px, 13.5vw, 96px); line-height: .84; }
  .hv-rule { order: 1; width: 56px; height: 3px; margin-top: 18px; }
  .hv-lead { order: 1; margin-top: 14px; font-size: clamp(18px, 4.9vw, 28px); line-height: 1.18; max-width: 34ch; }
  .hv .hv-cta { order: 1; align-self: flex-start; margin-top: 20px; height: 56px; padding: 0 26px 0 28px; gap: 16px; font-size: 16px; }
  .hv-arrow { width: 24px; height: 12px; }
  .hv-art { order: 2; position: relative; margin-top: 26px; height: min(124vw, 560px); }
  .hv-photo { left: 0; right: 0; top: 0; bottom: 0; border-top-left-radius: 46% 34%; }
  .hv-photo img { object-position: 0 0; }
  .hv-panel, .hv-lines, .hv-room, .hv-bokeh, .hv-arc { display: none; }
  .hv-detail { right: -12vw; top: -9vw; width: 46vw; box-shadow: 0 0 0 6px var(--hv-paper); }
  .hv-medallion { right: 29vw; top: 23vw; width: 25vw; font-size: 3.3vw; line-height: 1.1; box-shadow: 0 0 0 2px #f7f3ec66; }
  .hv-facts { order: 3; margin-top: 26px; margin-inline: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hv-facts li { padding: 0 6px; }
  .hv-facts .icon { width: 28px; height: 28px; margin-bottom: 10px; }
  .hv-facts strong { font-size: 12.5px; line-height: 1.3; }
  .hv-facts small { font-size: 11.5px; line-height: 1.45; margin-top: 2px; }
  .hv-scroll { display: none; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .hv-copy > *, .hv .hv-copy > h1 { margin-inline: 48px; }
  .hv-lead br { display: inline; }
  .hv-eyebrow { margin-top: 56px; font-size: 13px; }
  .hv h1 { font-size: clamp(84px, 11vw, 112px); }
  .hv-art { height: min(82vw, 760px); margin-top: 48px; }
  .hv-photo img { object-position: 22% 14%; }
  .hv-detail { right: -8vw; top: -7vw; width: 44vw; box-shadow: 0 0 0 8px var(--hv-paper); }
  .hv-medallion { right: 32vw; top: 22vw; width: 17vw; font-size: 2.2vw; }
  .hv-facts { margin: 40px 48px 0; }
  .hv-facts strong { font-size: 15px; }
  .hv-facts small { font-size: 13.5px; }
}

/* ---------- Wejście: kolejno, spokojnie; bez ruchu przy prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hv-header > :not(.button) { animation: hv-fade .9s .05s ease both; }
  .hv-photo { animation: hv-photo 1.7s var(--hv-ease) both; }
  .hv-line > span { animation: hv-rise 1.15s var(--hv-ease) both; }
  .hv-line:first-child > span { animation-delay: .25s; }
  .hv-line:last-child > span { animation-delay: .4s; }
  .hv-eyebrow { animation: hv-up .9s .1s var(--hv-ease) both; }
  .hv-rule { animation: hv-scale-x .8s .78s var(--hv-ease) both; }
  .hv-lead { animation: hv-up .95s .88s var(--hv-ease) both; }
  .hv .hv-cta { animation: hv-up .95s 1.02s var(--hv-ease) both; }
  .hv-facts li { animation: hv-up .9s var(--hv-ease) both; }
  .hv-facts li:nth-child(1) { animation-delay: 1.18s; }
  .hv-facts li:nth-child(2) { animation-delay: 1.28s; }
  .hv-facts li:nth-child(3) { animation-delay: 1.38s; }
  .hv-detail { animation: hv-iris 1.4s .5s var(--hv-ease) both; }
  .hv-arc { animation: hv-fade 1.2s 1.1s ease both; }
  .hv-medallion { animation: hv-pop 1s 1.45s var(--hv-ease) both; }
  .hv-lines path { stroke-dasharray: 1; animation: hv-draw 2.6s 1s cubic-bezier(.45, 0, .2, 1) both; }
  .hv-sprig path + path { animation-delay: 1.6s; }
  .hv-bokeh { animation: hv-fade 2.2s .3s ease both; }
  .hv-bokeh i:nth-child(odd) { animation: hv-drift 14s ease-in-out infinite alternate; }
  .hv-bokeh i:nth-child(even) { animation: hv-drift 17s -5s ease-in-out infinite alternate-reverse; }
  .hv-scroll { animation: hv-fade 1s 1.9s ease both; }
  .hv-scroll-dot svg { animation: hv-bob 2.4s 3s ease-in-out infinite; }

  /* Delikatna paralaksa przy przewijaniu (Chrome, Edge, Safari 26+); reszta bez niej. */
  @supports (animation-timeline: scroll()) {
    @media (min-width: 1100px) {
      .hv-art { animation: hv-parallax linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
      .hv-copy { animation: hv-copy-out linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    }
  }
}
@keyframes hv-fade { from { opacity: 0; } }
@keyframes hv-up { from { opacity: 0; transform: translateY(20px); } }
@keyframes hv-rise { from { transform: translateY(108%); } }
@keyframes hv-scale-x { from { transform: scaleX(0); } }
@keyframes hv-photo { from { opacity: 0; transform: scale(1.07) translateX(-1.5%); } }
@keyframes hv-iris { from { clip-path: circle(0% at 22% 78%); } to { clip-path: circle(72% at 50% 50%); } }
@keyframes hv-pop { from { opacity: 0; transform: scale(.82); } }
@keyframes hv-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hv-drift { to { transform: translate3d(14px, -10px, 0); } }
@keyframes hv-bob { 50% { transform: translateY(3px); } }
@keyframes hv-parallax { to { transform: translateY(9%); } }
@keyframes hv-copy-out { to { transform: translateY(-5%); } }

/* NO i EN: „Terapeutisk” i „Therapeutic” są dłuższe niż „leczniczy”, nagłówek o stopień mniejszy, żeby nie wchodził pod zdjęcie. */
@media (min-width: 1100px) { .hv h1.hv-dlugi { font-size: calc(84 * var(--px)); } }
@media (min-width: 700px) and (max-width: 1099px) { .hv h1.hv-dlugi { font-size: clamp(72px, 9.5vw, 100px); } }
@media (max-width: 699px) { .hv h1.hv-dlugi { font-size: clamp(40px, 11.5vw, 84px); } }