/*! OVARIANA ova-ui.css — new layout layer, loaded LAST (after ova-core.css and page CSS).
    Language-agnostic: no text, no per-language breakpoints. Uses logical properties (RTL-safe).
    Header modes are set on <html data-ova-hdr="full|compact|mini">: first by ova-init.js (viewport guess),
    then by ova-ui.js (measured from the real header content). Without JS the legacy header stays. */

/* ===== it1 · Header ===================================================================== */
html[data-ova-hdr]{--ova-hdr-h:80px;--ova-hdr-pad:clamp(16px,3vw,32px);scroll-padding-top:calc(var(--ova-hdr-h) + 16px)}
html[data-ova-hdr=compact],html[data-ova-hdr=mini]{--ova-hdr-h:64px}
html[data-ova-hdr] .site-header{
  position:sticky;top:0;z-index:60;height:var(--ova-hdr-h);min-height:0;
  background-color:var(--paper);border-bottom:1px solid var(--line);
  transition:transform var(--ova-dur-m) var(--ova-ease-out),box-shadow var(--ova-dur-s) linear,background-color var(--ova-dur-s) linear}
html[data-ova-hdr] .site-header.is-scrolled{
  background-color:color-mix(in srgb,var(--paper) 92%,transparent);
  -webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px);
  box-shadow:0 12px 32px -22px rgba(48,35,63,.35)}
html[data-ova-hdr] .site-header.is-hidden{transform:translateY(calc(-100% - 2px))}
html[data-ova-hdr][data-contrast=high] .site-header.is-scrolled{background-color:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}

html[data-ova-hdr] .site-header .nav-row{
  display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:20px;
  width:min(1540px,calc(100% - 2 * var(--ova-hdr-pad)));height:100%;margin-inline:auto;padding-block:0}
html[data-ova-hdr] .site-header .nav-row>*{flex-shrink:0;white-space:nowrap}
html[data-ova-hdr] .site-header .nav-actions{display:flex;align-items:center;gap:12px}
html[data-ova-hdr] .site-header .brand{font-size:26px;gap:9px;line-height:1}
html[data-ova-hdr] .site-header .brand img{width:26px;height:31px}
html:is([data-ova-hdr=compact],[data-ova-hdr=mini]) .site-header .brand{font-size:23px;gap:8px}
html:is([data-ova-hdr=compact],[data-ova-hdr=mini]) .site-header .brand img{width:23px;height:27px}

/* full: everything in the bar */
html[data-ova-hdr=full] .site-header .site-nav{display:flex;position:static;width:auto;order:0;flex-wrap:nowrap;justify-content:flex-start;flex-direction:row;align-items:center;gap:clamp(14px,1.5vw,26px);padding:0;background:none;border:0;box-shadow:none;font-size:14px}
html[data-ova-hdr=full] .site-header .nav-actions>.btn{display:inline-flex}

/* compact / mini: bar = brand · [CTA] · menu button; the rest lives in .ova-menu (moved by JS).
   Until JS moves them, hide what does not belong in the bar (no 3-row header on load). */
html:is([data-ova-hdr=compact],[data-ova-hdr=mini]) .site-header .nav-row>.site-nav,
html:is([data-ova-hdr=compact],[data-ova-hdr=mini]) .site-header .nav-actions>:is(.language-switch,.display-controls),
html[data-ova-hdr=mini] .site-header .nav-actions>.btn{display:none}
html[data-ova-hdr=compact] .site-header .nav-actions>.btn{display:inline-flex}

/* menu button: drawn icon, morphs ☰ → ✕ (the ☰ text stays for no-CSS) */
html[data-ova-hdr] .site-header .menu-toggle{
  position:relative;display:block;flex:0 0 auto;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;
  font-size:0;color:transparent;cursor:pointer;
  background:linear-gradient(var(--ink),var(--ink)) center/18px 1.5px no-repeat;
  transition:background-size var(--ova-dur-s) var(--ova-ease-out),border-color var(--ova-dur-s) linear}
html[data-ova-hdr] .site-header .menu-toggle::before,
html[data-ova-hdr] .site-header .menu-toggle::after{
  content:"";position:absolute;left:50%;top:50%;width:18px;height:1.5px;background:var(--ink);border-radius:1px;
  transform:translate(-50%,-50%) translateY(-6px);transition:transform var(--ova-dur-m) var(--ova-ease-out)}
html[data-ova-hdr] .site-header .menu-toggle::after{transform:translate(-50%,-50%) translateY(6px)}
html[data-ova-hdr] .site-header .menu-toggle[aria-expanded=true]{background-size:0 1.5px;border-color:var(--ink)}
html[data-ova-hdr] .site-header .menu-toggle[aria-expanded=true]::before{transform:translate(-50%,-50%) rotate(45deg)}
html[data-ova-hdr] .site-header .menu-toggle[aria-expanded=true]::after{transform:translate(-50%,-50%) rotate(-45deg)}
html[data-ova-hdr=full] .site-header .menu-toggle{display:none}
@media (forced-colors:active){
  html[data-ova-hdr] .site-header .menu-toggle{forced-color-adjust:none;background-image:linear-gradient(CanvasText,CanvasText);border-color:CanvasText}
  html[data-ova-hdr] .site-header .menu-toggle::before,html[data-ova-hdr] .site-header .menu-toggle::after{background:CanvasText}}

/* the menu sheet (sibling of the header, so the header's blur/transform never traps it) */
.ova-menu{display:none}
html:is([data-ova-hdr=compact],[data-ova-hdr=mini]) .ova-menu{
  display:block;position:fixed;inset-inline:0;top:var(--ova-hdr-h);bottom:0;z-index:59;
  overflow-y:auto;overscroll-behavior:contain;background:var(--paper);
  padding:8px var(--ova-hdr-pad) calc(32px + env(safe-area-inset-bottom,0px));
  visibility:hidden;opacity:0;transform:translateY(-10px);
  transition:opacity var(--ova-dur-s) var(--ova-ease-out),transform var(--ova-dur-m) var(--ova-ease-out),visibility 0s linear var(--ova-dur-m)}
html.ova-menu-open .ova-menu{visibility:visible;opacity:1;transform:none;transition-delay:0s}
html.ova-menu-open{overflow:hidden}
.ova-menu-inner{width:min(640px,100%);margin-inline:auto}

.ova-menu #navigation{
  display:flex;position:static;flex-direction:column;align-items:stretch;gap:0;
  padding:0;margin:0;background:none;border:0;box-shadow:none;inset:auto;
  font-family:var(--serif);font-size:24px;font-weight:500;line-height:1.25}
.ova-menu #navigation a{display:flex;align-items:center;min-height:58px;padding:6px 2px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.ova-menu #navigation a[aria-current=page]{color:var(--deep)}
.ova-menu #navigation a[aria-current=page]::after{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;margin-inline-start:12px}
.ova-menu #navigation a:hover{color:var(--deep)}
/* one-by-one entrance of the links (stagger), only while opening */
.ova-menu #navigation a{opacity:0;transform:translateY(6px);transition:opacity var(--ova-dur-m) var(--ova-ease-out),transform var(--ova-dur-m) var(--ova-ease-out)}
html.ova-menu-open .ova-menu #navigation a{opacity:1;transform:none}
html.ova-menu-open .ova-menu #navigation a:nth-child(2){transition-delay:calc(var(--ova-stagger) * .5)}
html.ova-menu-open .ova-menu #navigation a:nth-child(3){transition-delay:calc(var(--ova-stagger) * 1)}
html.ova-menu-open .ova-menu #navigation a:nth-child(4){transition-delay:calc(var(--ova-stagger) * 1.5)}
html.ova-menu-open .ova-menu #navigation a:nth-child(5){transition-delay:calc(var(--ova-stagger) * 2)}
html.ova-menu-open .ova-menu #navigation a:nth-child(n+6){transition-delay:calc(var(--ova-stagger) * 2.5)}

.ova-menu .btn{display:flex;width:100%;justify-content:center;min-height:52px;margin-top:24px;font-size:16px}
.ova-menu .language-switch{display:block;margin-top:24px;font-size:15px}
.ova-menu .language-menu{position:static}
.ova-menu .language-menu>summary{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 16px;border-radius:14px}
.ova-menu .language-menu>summary>span{flex:1}
.ova-menu .language-panel{position:static;transform:none;inset:auto;width:auto;max-height:none;overflow:visible;margin-top:8px;padding:4px 0 0;border:0;border-radius:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.ova-menu .display-controls{display:flex;gap:10px;margin-top:16px}
.ova-menu .display-controls .display-toggle{flex:1 1 0;flex-direction:row;gap:8px;min-height:48px;padding:8px 14px;font-size:15px}

/* ===== it2 · Hero ======================================================================= */
/* Fit the first screen: CTA visible on common laptops (1280×800, 1366×768) and small phones (360×740).
   Sizes follow viewport width AND height; language-specific overrides in legacy CSS (ar, zh, en) keep priority. */
@media (min-width:801px){
  .hero .hero-grid{min-height:clamp(560px,calc(100svh - var(--ova-hdr-h,80px)),770px);padding-block:clamp(28px,5svh,64px) clamp(32px,6svh,78px)}
  .hero .hero-copy h1{font-size:clamp(56px,min(6.4vw,9.4svh),92px)}
  .hero .hero-copy>p{font-size:clamp(19px,2.6svh,23px)}
  .hero .hero-copy .eyebrow{margin-bottom:clamp(14px,2.6svh,24px)}
  .hero .hero-copy h1{margin-bottom:clamp(16px,3svh,27px)}
  .hero .hero-copy .button-row{margin-top:clamp(20px,3.6svh,32px)}
}
@media (max-width:800px){
  .hero .hero-grid{padding-block:clamp(20px,4svh,44px) 53px}
  .hero .hero-copy h1{font-size:clamp(40px,min(13vw,7svh),58px)}
}
/* Petals: fade the bottom edge (no hard cut line). Horizontal fade from legacy CSS is kept.
   Shape intentionally unchanged (the image is drawn 1254px tall by its HTML height attribute — see backlog). */
.hero .hero-petals{
  -webkit-mask-image:linear-gradient(to right,transparent 5%,#000 43%),linear-gradient(to bottom,#000 62%,transparent 96%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 5%,#000 43%),linear-gradient(to bottom,#000 62%,transparent 96%);
  mask-composite:intersect}
@media (max-width:800px){
  /* readability: lead text sits over the petals on phones -> lighter, further right (text contrast ≥ 4.5:1) */
  .hero .hero-petals{opacity:.5;right:-180px}
  html[dir=rtl] .hero .hero-petals{right:auto;left:-180px}
}

/* Hero entrance — the page's single orchestrated moment. Runs on every page load
   (html.ova-intro is set by ova-init.js, removed by ova-ui.js when done). No JS -> no animation.
   Individual transform properties (translate/scale) so RTL `transform:scaleX(-1)` on petals is not overridden. */
@keyframes ova-rise{from{opacity:0;translate:0 var(--ova-rise)}}
@keyframes ova-settle{from{opacity:.55;scale:1.035}}
@keyframes ova-bloom{from{translate:0 24px;scale:.97}}
html.ova-intro .hero .hero-copy>*{animation:ova-rise var(--ova-dur-l) var(--ova-ease-out) both}
html.ova-intro .hero .hero-copy>:nth-child(2){animation-delay:calc(var(--ova-stagger) * 1)}
html.ova-intro .hero .hero-copy>:nth-child(3){animation-delay:calc(var(--ova-stagger) * 2)}
html.ova-intro .hero .hero-copy>:nth-child(n+4){animation-delay:calc(var(--ova-stagger) * 3)}
html.ova-intro .hero .hero-photo{animation:ova-settle var(--ova-dur-xl) var(--ova-ease-out) both;transform-origin:50% 100%}
html.ova-intro .hero .hero-petals{animation:ova-bloom calc(var(--ova-dur-xl) * 1.6) var(--ova-ease-out) calc(var(--ova-stagger) * 3) both}

/* ===== it3 · Portraits O-V-A-R-I-A-N-A ================================================== */
/* Framing: the letter shape is clipped on .letter-clip; the photo moves/zooms inside it.
   Per-letter values (--pp object-position + --pz transform for desktop/tablet; --ppm/--pzm phone;
   --pph/--pzh, --pphm/--pzhm = hover "zoom out") are inline on .letter-frame,
   computed by tools/portrait_framing.py from the owner's corrections. */
.letter-frame .letter-clip{position:relative;height:100%;overflow:hidden}
.letter-frame .letter-clip img{width:100%;height:100%;object-fit:cover;object-position:var(--pp,var(--portrait-focus,50% 50%));
  transform:var(--pz,none);transform-origin:50% 50%;will-change:transform;
  transition:transform 900ms var(--ova-ease-out),object-position 900ms var(--ova-ease-out)}
@media (max-width:480px){.letter-frame .letter-clip img{object-position:var(--ppm,var(--pp,50% 50%));transform:var(--pzm,var(--pz,none))}}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .portrait-mosaic.is-in .letter-portrait:hover .letter-clip img{object-position:var(--pph,var(--pp));transform:var(--pzh,none)}
}
@media (max-width:480px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .portrait-mosaic.is-in .letter-portrait:hover .letter-clip img{object-position:var(--pphm,var(--pph));transform:var(--pzhm,var(--pzh,none))}
}

/* Reveal: the one scroll moment — letters arrive one by one and form the word.
   Hidden state only once ova-ui.js is running (html.ova-ui-ready), so a JS failure never hides the photos. */
html.ova-ui-ready .portrait-mosaic:not(.is-in) .letter-portrait{opacity:0;translate:0 26px;scale:.965}
html.ova-ui-ready .portrait-mosaic:not(.is-in) .letter-portrait figcaption{opacity:0}
.portrait-mosaic .letter-portrait{transition:opacity var(--ova-dur-l) var(--ova-ease-out),translate var(--ova-dur-xl) var(--ova-ease-out),scale var(--ova-dur-xl) var(--ova-ease-out)}
.portrait-mosaic .letter-portrait figcaption{transition:opacity var(--ova-dur-l) var(--ova-ease-out)}
.portrait-mosaic.is-in .letter-portrait:nth-child(1){transition-delay:0ms}
.portrait-mosaic.is-in .letter-portrait:nth-child(2){transition-delay:calc(var(--ova-stagger) * 1.4)}
.portrait-mosaic.is-in .letter-portrait:nth-child(3){transition-delay:calc(var(--ova-stagger) * 2.8)}
.portrait-mosaic.is-in .letter-portrait:nth-child(4){transition-delay:calc(var(--ova-stagger) * 4.2)}
.portrait-mosaic.is-in .letter-portrait:nth-child(5){transition-delay:calc(var(--ova-stagger) * 5.6)}
.portrait-mosaic.is-in .letter-portrait:nth-child(6){transition-delay:calc(var(--ova-stagger) * 7)}
.portrait-mosaic.is-in .letter-portrait:nth-child(7){transition-delay:calc(var(--ova-stagger) * 8.4)}
.portrait-mosaic.is-in .letter-portrait:nth-child(8){transition-delay:calc(var(--ova-stagger) * 9.8)}
.portrait-mosaic.is-in .letter-portrait figcaption{transition-delay:calc(var(--ova-stagger) * 10.5)}

/* ===== it4 · Buttons, links, cards ====================================================== */
/* Primary (.btn): clear filled "jewel" button (was a pale glass pill that read as disabled). White on #8d00e2 = 6.5:1.
   Secondary (.btn.outline / .btn.white): keeps the pearl glass, gains an edge and darker text.
   High-contrast mode keeps the legacy black/yellow styles (all rules below exclude it). */
:root{--ova-btn-1:#a32cf2;--ova-btn-2:#8d00e2;--ova-btn-3:#6c0bb3;--ova-btn-fg:#fff;--ova-btn-glow:rgba(112,10,180,.5)}
html[data-theme=dark]{--ova-btn-1:#e6c8ff;--ova-btn-2:#d4a8fa;--ova-btn-3:#b886ec;--ova-btn-fg:#191321;--ova-btn-glow:rgba(212,168,250,.35)}
html:not([data-contrast=high]) .btn:not(.outline):not(.white){
  color:var(--ova-btn-fg);border:0;
  background:linear-gradient(160deg,var(--ova-btn-1) 0%,var(--ova-btn-2) 48%,var(--ova-btn-3) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -8px 16px -12px rgba(40,0,70,.45),0 12px 26px -14px var(--ova-btn-glow);
  font-size:16px;font-weight:600;letter-spacing:.01em;min-height:52px;padding:14px 26px;gap:14px}
html:not([data-contrast=high]) :is(.btn.outline,.btn.white){color:var(--ink);box-shadow:inset 0 0 0 1px var(--line),inset 0 8px 15px -10px #fff,0 6px 20px -12px rgba(118,84,149,.28);font-weight:600}
html[data-theme=dark]:not([data-contrast=high]) :is(.btn.outline,.btn.white){color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
html:not([data-contrast=high]) .btn:not(:focus-visible){outline:0}   /* Cennik: page CSS drew a 1px outline in text colour */
/* menu sheet: the CTA is the main action -> primary look */
html:not([data-contrast=high]) .ova-menu .btn.outline{color:var(--ova-btn-fg);background:linear-gradient(160deg,var(--ova-btn-1) 0%,var(--ova-btn-2) 48%,var(--ova-btn-3) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 12px 26px -14px var(--ova-btn-glow)}

/* motion that answers the user: lift on hover, press on click, arrow nudges toward its direction */
.btn{transition:translate var(--ova-dur-s) var(--ova-ease-out),scale var(--ova-dur-xs) var(--ova-ease-out),box-shadow var(--ova-dur-s) linear,filter var(--ova-dur-s) linear,background-color var(--ova-dur-s) linear}
.btn .arrow,.text-link>span[aria-hidden]{display:inline-block;transition:translate var(--ova-dur-s) var(--ova-ease-out)}
@media (hover:hover){
  html:not([data-contrast=high]) .btn:hover{transform:none;translate:0 -2px;filter:saturate(1.08) brightness(1.04)}
  html:not([data-contrast=high]) .btn:not(.outline):not(.white):hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.36),inset 0 -8px 16px -12px rgba(40,0,70,.45),0 16px 30px -14px var(--ova-btn-glow)}
  .btn:hover .arrow{translate:2px -2px}
  .text-link:hover>span[aria-hidden]{translate:4px 0}
  html[dir=rtl] .text-link:hover>span[aria-hidden]{translate:-4px 0}
}
.btn:active{translate:0 0;scale:.98}
html:not([data-contrast=high]) .btn:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* text links: a darker line grows from the start edge on hover (the resting hairline stays) */
html:not([data-contrast=high]) .text-link{
  background:linear-gradient(var(--deep),var(--deep)) no-repeat 0 100%/0 1px;
  transition:background-size var(--ova-dur-m) var(--ova-ease-out),color var(--ova-dur-s) linear}
html[dir=rtl]:not([data-contrast=high]) .text-link{background-position:100% 100%}
@media (hover:hover){html:not([data-contrast=high]) .text-link:hover{background-size:100% 1px;color:var(--deep)}}
.text-link:focus-visible{outline:3px solid var(--focus);outline-offset:4px}

/* knowledge tiles (links): lift + edge in brand colour on hover */
html:not([data-contrast=high]) a.topic{transition:translate var(--ova-dur-s) var(--ova-ease-out),border-color var(--ova-dur-s) linear,box-shadow var(--ova-dur-s) linear}
@media (hover:hover){html:not([data-contrast=high]) a.topic:hover{translate:0 -3px;border-color:var(--deep);box-shadow:0 14px 28px -20px rgba(88,61,197,.45)}}

/* ===== it4b · Home topic cards are links (owner decision) =============================== */
a.health-topic{display:block;color:inherit;text-decoration:none;border-top:1px solid var(--line);
  transition:border-color var(--ova-dur-s) linear,translate var(--ova-dur-s) var(--ova-ease-out)}
a.health-topic h3{position:relative;transition:color var(--ova-dur-s) linear}
a.health-topic h3::after{content:"→";position:absolute;margin-inline-start:.35em;font-size:.7em;opacity:0;translate:-6px 0;
  transition:opacity var(--ova-dur-s) linear,translate var(--ova-dur-s) var(--ova-ease-out)}
html[dir=rtl] a.health-topic h3::after{content:"←";translate:6px 0}
@media (hover:hover){
  html:not([data-contrast=high]) a.health-topic:hover{border-top-color:var(--deep);translate:0 -2px}
  html:not([data-contrast=high]) a.health-topic:hover h3{color:var(--deep)}
  a.health-topic:hover h3::after{opacity:1;translate:0 0}
}
a.health-topic:focus-visible{outline:3px solid var(--focus);outline-offset:6px;border-radius:2px}
a.health-topic:focus-visible h3::after{opacity:1;translate:0 0}

/* ===== it4c · Pasek „Ścieżka” (S1, owner choice) ======================================== */
/* Larger serif labels, numbers hidden, a line + dot draws between steps: observations → knowledge → questions. */
html:not([data-contrast=high]) .chapter-strip{background:linear-gradient(115deg,#f6f0fe,#efe5fc 60%,#f7f1ff);border-block:0;padding:30px 0}
html[data-theme=dark]:not([data-contrast=high]) .chapter-strip{background:linear-gradient(115deg,var(--hero-start),var(--hero-end))}
.chapter-strip .wrap{--ova-step-pad:clamp(18px,3vw,46px);gap:0;justify-content:center;align-items:center;font-family:var(--serif);font-size:clamp(20px,2.4vw,34px);line-height:1.2}
.chapter-strip b{display:none}
.chapter-strip span{position:relative;gap:0;padding-inline:var(--ova-step-pad);color:var(--ink)}
.chapter-strip span:nth-child(2){font-style:italic;color:var(--brand-purple)}
.chapter-strip span+span::before{content:"";position:absolute;inset-inline-start:calc(10px - var(--ova-step-pad));top:52%;width:calc(2 * var(--ova-step-pad) - 20px);height:1px;
  background:linear-gradient(90deg,transparent,var(--brand-purple));transform-origin:0 50%}
.chapter-strip span+span::after{content:"";position:absolute;inset-inline-start:calc(var(--ova-step-pad) - 13px);top:calc(52% - 3px);width:7px;height:7px;border-radius:50%;background:var(--brand-purple)}
html[dir=rtl] .chapter-strip span+span::before{background:linear-gradient(270deg,transparent,var(--brand-purple));transform-origin:100% 50%}
@media (max-width:600px){
  .chapter-strip{padding:22px 0}
  .chapter-strip .wrap{font-size:18px;justify-content:space-between;--ova-step-pad:6px}
  .chapter-strip span+span::before{display:none}
  .chapter-strip span+span::after{inset-inline-start:-6px}
}
/* reveal once, when the strip is in view (hidden state only while ova-ui.js runs) */
html.ova-ui-ready .chapter-strip:not(.is-in) span{opacity:0;translate:0 10px}
html.ova-ui-ready .chapter-strip:not(.is-in) span+span::before{scale:0 1}
html.ova-ui-ready .chapter-strip:not(.is-in) span+span::after{scale:0}
.chapter-strip span{transition:opacity calc(var(--ova-dur-l) * 2.5) var(--ova-ease-out),translate calc(var(--ova-dur-l) * 2.5) var(--ova-ease-out)}
.chapter-strip span+span::before{transition:scale calc(var(--ova-dur-l) * 2.5) var(--ova-ease-in-out)}
.chapter-strip span+span::after{transition:scale calc(var(--ova-dur-s) * 2.5) var(--ova-ease-out)}
/* it4g: 2.5× slower and smoother (owner): ~3.3 s in total — each step overlaps the previous one */
.chapter-strip.is-in span:nth-child(2),.chapter-strip.is-in span:nth-child(2)::before{transition-delay:calc(var(--ova-stagger) * 12.5)}
.chapter-strip.is-in span:nth-child(3),.chapter-strip.is-in span:nth-child(3)::before{transition-delay:calc(var(--ova-stagger) * 25)}
.chapter-strip.is-in span:nth-child(2)::after{transition-delay:calc(var(--ova-stagger) * 27.5)}
.chapter-strip.is-in span:nth-child(3)::after{transition-delay:calc(var(--ova-stagger) * 40)}

/* ===== it4d · Sekcja zaproszenia „Oddech” (I1, owner choice) ============================ */
/* Petals sway slowly, drift with scroll (parallax via --ova-par from ova-ui.js), the background slowly shifts,
   a mirrored petal rises top-left. Runs only while the section is on screen (.is-live); off with reduced motion. */
html:not([data-contrast=high]) .invitation{background:linear-gradient(115deg,var(--invite-start),var(--invite-end) 40%,var(--invite-start) 62%,var(--invite-end));background-size:220% 220%;background-position:0% 30%}
html:not([data-contrast=high]) .invitation::before{content:"";position:absolute;left:-160px;top:-140px;width:520px;height:520px;pointer-events:none;
  background:url(/assets/img/organic.webp?v=e1f9a4a9e4) center/contain no-repeat;transform:scaleX(-1) rotate(160deg);opacity:.28;mix-blend-mode:multiply;translate:0 calc(var(--ova-par,0px) * -.6);
  -webkit-mask-image:radial-gradient(closest-side,#000 45%,transparent 100%);mask-image:radial-gradient(closest-side,#000 45%,transparent 100%)}
html[data-theme=dark]:not([data-contrast=high]) .invitation::before{background-image:url(/assets/organic-sage-night.webp);mix-blend-mode:screen;opacity:.16}
html[dir=rtl]:not([data-contrast=high]) .invitation::before{left:auto;right:-160px;transform:rotate(-160deg)}
.invitation .organic{transform-origin:70% 90%;translate:0 var(--ova-par,0px)}
@media (max-width:600px){html:not([data-contrast=high]) .invitation::before{width:300px;height:300px;left:-170px;top:-170px;opacity:.18}}
@keyframes ova-aurora{from{background-position:0% 30%}to{background-position:100% 70%}}
@keyframes ova-breath{from{rotate:-2deg;scale:1}to{rotate:2.5deg;scale:1.05}}
@keyframes ova-breath2{from{rotate:0deg}to{rotate:-4deg}}
@media (prefers-reduced-motion:no-preference){
  html:not([data-contrast=high]) .invitation{animation:ova-aurora 18s ease-in-out infinite alternate}
  .invitation .organic{animation:ova-breath 9s ease-in-out infinite alternate}
  html:not([data-contrast=high]) .invitation::before{animation:ova-breath2 11s ease-in-out infinite alternate}
  .invitation:not(.is-live),.invitation:not(.is-live) .organic,.invitation:not(.is-live)::before{animation-play-state:paused}
}

/* ===== it4e · Kwiat „oddycha” także w hero i w Tematach (owner request) ================= */
/* Same calm sway as the invitation section; starts from the neutral pose (no jump after the hero intro),
   pauses when the section is off screen (.is-live), off with reduced motion and in high contrast. */
@keyframes ova-sway{from{rotate:0deg;scale:1}to{rotate:2.5deg;scale:1.04}}
.hero .hero-petals{transform-origin:80% 100%}
.health-topics .topics-organic{transform-origin:85% 0%}
@media (prefers-reduced-motion:no-preference){
  html:not(.ova-intro):not([data-contrast=high]) .hero .hero-petals{animation:ova-sway 9s ease-in-out infinite alternate}
  html:not([data-contrast=high]) .health-topics .topics-organic{animation:ova-sway 10s ease-in-out -3s infinite alternate}
  .hero:not(.is-live) .hero-petals,.health-topics:not(.is-live) .topics-organic{animation-play-state:paused}
}
/* Tematy: the white box behind the topic grid hid the flower with hard edges -> feathered veil instead */
html:not([data-contrast=high]) .health-topics .health-topic-grid{
  background:color-mix(in srgb,var(--ova-veil,#fff) 84%,transparent);
  box-shadow:0 0 60px 46px color-mix(in srgb,var(--ova-veil,#fff) 84%,transparent)}
html[data-theme=dark] .health-topics{--ova-veil:var(--surface)}
.health-topics .wrap>:not(.health-topic-grid){position:relative;z-index:1}   /* keep heading/intro above the veil glow */

/* ===== it4f · „OVARIANA na telefonie i tablecie” — wjazd i delikatne pochylenie ========= */
/* Entrance once in view: the disc grows in, the devices rise and straighten from a slight 3D tilt.
   Hover (mouse only): the devices tilt gently toward the pointer (max 4°) and lift; return on leave. */
.product-art{perspective:1000px}
.product-art img{transform:rotateX(var(--ova-rx,0deg)) rotateY(var(--ova-ry,0deg)) translateY(var(--ova-lift,0px));
  transition:transform 600ms var(--ova-ease-out),opacity var(--ova-dur-xl) var(--ova-ease-out),translate var(--ova-dur-xl) var(--ova-ease-out),rotate var(--ova-dur-xl) var(--ova-ease-out)}
.product-art{transition:scale var(--ova-dur-xl) var(--ova-ease-out),opacity var(--ova-dur-l) var(--ova-ease-out)}
html.ova-ui-ready .product-art:not(.is-in){opacity:0;scale:.94}
html.ova-ui-ready .product-art:not(.is-in) img{opacity:0;translate:0 44px;rotate:x 12deg}
.product-art.is-in img{transition-delay:0s,140ms,140ms,140ms}
.product-art.is-tilting img{transition-duration:180ms,var(--ova-dur-xl),var(--ova-dur-xl),var(--ova-dur-xl)}

/* ===== it5 · FAQ, wybór języka, Noc/Kontrast =========================================== */
/* FAQ: smooth open/close (height animated by ova-ui.js), answer fades in, the + morphs into − (drawn, not a glyph). */
.faq details>p{transition:opacity var(--ova-dur-m) var(--ova-ease-out)}
.faq details:not([open])>p,.faq details.is-closing>p{opacity:0}
.faq summary::after{content:"";flex:0 0 16px;width:16px;height:16px;margin-top:.45em;
  background:linear-gradient(var(--deep),var(--deep)) center/16px 1.5px no-repeat,linear-gradient(var(--deep),var(--deep)) center/1.5px 16px no-repeat;
  transition:background-size var(--ova-dur-m) var(--ova-ease-out),rotate var(--ova-dur-m) var(--ova-ease-out)}
.faq details[open]:not(.is-closing) summary::after{content:"";background-size:16px 1.5px,1.5px 0;rotate:180deg}
@media (forced-colors:active){.faq summary::after{forced-color-adjust:none;background-image:linear-gradient(CanvasText,CanvasText),linear-gradient(CanvasText,CanvasText)}}
@media (hover:hover){html:not([data-contrast=high]) .faq summary:hover .public-faq-question{color:var(--deep)}}
.faq .public-faq-question{transition:color var(--ova-dur-s) linear}

/* language menu: the dropdown fades/slides in (desktop); options fade in inside the menu sheet */
@keyframes ova-pop{from{opacity:0;translate:0 -8px}}
@keyframes ova-fade{from{opacity:0}}
.site-header .language-menu[open]>.language-panel{animation:ova-pop var(--ova-dur-m) var(--ova-ease-out)}
.ova-menu .language-menu[open]>.language-panel{animation:ova-fade var(--ova-dur-m) var(--ova-ease-out)}

/* Noc/Kontrast: whole page cross-fades (View Transitions, ova-ui.js adds html.ova-vt-theme); others switch instantly */
@keyframes ova-vt-fade-out{to{opacity:0}}
@keyframes ova-vt-fade-in{from{opacity:0}}
html.ova-vt-theme::view-transition-old(*){animation:ova-vt-fade-out .45s cubic-bezier(.65,0,.35,1) both}
html.ova-vt-theme::view-transition-new(*){animation:ova-vt-fade-in .45s cubic-bezier(.65,0,.35,1) both}

/* ===== it6 · Przejścia między podstronami (cross-document View Transitions) ============== */
/* Same-origin navigations: the old page fades out, the new one fades in rising 10 px; the header is its own layer,
   so it stays in place (only what changed in it cross-fades). Chrome/Edge 126+, Safari 18.2+; others: normal load. */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
.site-header{view-transition-name:ova-header}
@keyframes ova-vt-out{to{opacity:0}}
@keyframes ova-vt-in{from{opacity:0;translate:0 10px}}
html:not(.ova-vt-theme)::view-transition-old(root){animation:ova-vt-out .22s cubic-bezier(.4,0,1,1) both}
html:not(.ova-vt-theme)::view-transition-new(root){animation:ova-vt-in .42s cubic-bezier(.22,.8,.24,1) .06s both}
html:not(.ova-vt-theme)::view-transition-group(ova-header){animation-duration:.3s}

/* ===== it6b/it6c · Globus — obracająca się Ziemia w przycisku języka ==================== */
/* Continents scroll inside the circle (equirectangular map, 36 units = one turn; 4 copies for seamless turns).
   Rotation is driven by ova-ui.js: on load the Earth turns to face the visitor's own longitude (from the browser's
   time zone — nothing is sent anywhere); on hover / keyboard focus / open it keeps turning, and glides to a stop
   facing the visitor again. No JS: Europe in front, static. Size (it6c): logo height + 2 px. */
.ova-globe .ova-globe-ocean{fill:currentColor;fill-opacity:.1;stroke:none}
.ova-globe .ova-globe-land{fill:currentColor;fill-opacity:.82;stroke:none}
.ova-globe .ova-globe-rim{fill:none;stroke:currentColor;stroke-width:1}
.ova-globe .ova-globe-map{translate:-7.5px 0}
html[data-ova-hdr] .site-header .language-menu>summary{padding-block:4px;padding-inline-start:5px;min-height:44px;gap:8px}
html[data-ova-hdr] .site-header .app42-languages summary .ova-globe{width:33px;height:33px;flex:0 0 33px}
.ova-menu .app42-languages summary .ova-globe,.ova-menu .language-menu>summary .ova-globe{width:29px;height:29px;flex:0 0 29px}

/* ===== it6c · Znak ® w logo: środek na wysokości górnej krawędzi „A” (jak przy znaku towarowym) */
html[lang] :is(.site-header,.site-footer) .brand>sup{align-self:center;margin:0 0 0 -.75em;font-size:.36em;line-height:1;position:relative;top:var(--ova-reg-top,-.645em)}
.site-footer .brand>sup{--ova-reg-top:-.71em}
html:is([data-ova-hdr=compact],[data-ova-hdr=mini]) .site-header .brand>sup{--ova-reg-top:-.84em}

/* ===== it7 · Tytuł hero: wiersze wysuwają się kolejno + refleks światła na słowie-akcencie ===== */
/* ova-ui.js wraps each line of .hero h1 (split at <br>, any language) in .ova-line > .ova-line-in and adds .ova-split.
   Lines rise from behind an invisible edge (1 s each, 120 ms apart); then one light sweep runs across the <em> word.
   Failsafe: if the script never runs, the heading still appears after 3 s. */
@keyframes ova-failsafe{to{opacity:1}}
@keyframes ova-line-up{from{translate:0 112%}}
@keyframes ova-sheen{from{background-position:100% 0}to{background-position:0% 0}}
html.ova-intro .hero h1:not(.ova-split){opacity:0;animation:ova-failsafe 0s linear 3s forwards}
html.ova-intro .hero .hero-copy>h1.ova-split{animation:none;opacity:1}
.hero h1 .ova-line{display:block;clip-path:inset(-.16em -.12em -.24em -.12em)}
.hero h1 .ova-line-in{display:block}
.hero h1.ova-split .ova-line-in{animation:ova-line-up calc(var(--ova-dur-l) * 1.8) var(--ova-ease-out) both}
.hero h1.ova-split .ova-line:nth-child(2) .ova-line-in{animation-delay:calc(var(--ova-stagger) * 1.7)}
.hero h1.ova-split .ova-line:nth-child(3) .ova-line-in{animation-delay:calc(var(--ova-stagger) * 3.4)}
.hero h1.ova-split .ova-line:nth-child(n+4) .ova-line-in{animation-delay:calc(var(--ova-stagger) * 5.1)}
html:not([data-contrast=high]) .hero h1.ova-split em{
  --ova-sheen:#e9d3ff;
  background:linear-gradient(100deg,var(--brand-purple) 0 34%,var(--ova-sheen) 46% 52%,var(--brand-purple) 66% 100%) 100% 0/280% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:ova-sheen calc(var(--ova-dur-xl) * 2) cubic-bezier(.45,0,.25,1) calc(var(--ova-stagger) * 19) both}
html[data-theme=dark]:not([data-contrast=high]) .hero h1.ova-split em{--ova-sheen:#ffffff}
@media (prefers-reduced-motion:reduce){html.ova-intro .hero h1:not(.ova-split){opacity:1;animation:none}}

/* ===== it7b…it7g · Stopka: refleks przez znak, napis OVARIANA® i hasło — co 10 s ================ */
/* it7g: no clip/blend tricks at all (night mode in some browsers showed no sweep on the letters). ova-ui.js wraps
   each letter of "OVARIANA" and of the line under the logo in a span (screen readers get the original text once);
   every letter brightens in turn (staggered delays) -> a light wave travels mark → OVARIANA → ® → line.
   One 10-s cycle, starts when the logo is fully visible (.is-shine), pauses off screen (.is-off).
   Off with reduced motion and in high contrast. */
@keyframes ova-glint{0%,100%{color:inherit;text-shadow:0 0 0 transparent}
  4%{color:var(--ova-glint,#a64df0);text-shadow:0 0 10px var(--ova-glint-glow,rgba(166,77,240,.45))}
  9%{color:inherit;text-shadow:0 0 0 transparent}}
@keyframes ova-mark-glint{0%,100%{filter:none}4%{filter:brightness(1.35) drop-shadow(0 0 6px var(--ova-glint-glow,rgba(166,77,240,.45)))}9%{filter:none}}
html[data-theme=dark] .site-footer{--ova-glint:#c99cff;--ova-glint-glow:rgba(201,156,255,.85)}
.ova-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.site-footer .ova-ch{display:inline;white-space:pre}
@media (prefers-reduced-motion:no-preference){
  html:not([data-contrast=high]) .site-footer .is-shine .ova-ch{animation:ova-glint 10s linear calc(.35s + var(--i) * 55ms) infinite both}
  html:not([data-contrast=high]) .site-footer .brand.is-shine>img{animation:ova-mark-glint 10s linear .1s infinite both}
  html:not([data-contrast=high]) .site-footer .is-shine.is-off .ova-ch,
  html:not([data-contrast=high]) .site-footer .brand.is-shine.is-off>img{animation-play-state:paused}
}
@media (max-width:640px){.site-footer .brand{--ova-mark-w:25px;--ova-mark-h:29px}}

/* ===== it7f/it7h · Wiedza: karta „Moja lista na wizytę” — zdjęcie i „Czytaj dalej” ============== */
/* it7h: the photo starts already slightly zoomed (1.08) while ova-ui.js runs, and only after the image has loaded
   and the card is in view (.is-in) it eases to 1 (1.6 s) — no jump. Hover (mouse): 1.05. "Czytaj dalej": one soft
   flash in brand colour after the photo settles, again on hover. Off with reduced motion / high contrast. */
@keyframes ova-glow{0%,100%{text-shadow:0 0 0 transparent}40%{color:var(--deep);text-shadow:0 0 14px color-mix(in srgb,var(--deep) 55%,transparent),0 0 2px color-mix(in srgb,var(--deep) 35%,transparent)}}
.featured-article{overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  html.ova-ui-ready:not([data-contrast=high]) .featured-article .featured-photo{scale:1.08}
  html.ova-ui-ready:not([data-contrast=high]) .featured-article.is-in .featured-photo{scale:1;transition:scale 1.6s var(--ova-ease-out)}
  html:not([data-contrast=high]) .featured-article.is-in .text-link{animation:ova-glow 1.4s ease-in-out 1.1s both}
  @media (hover:hover) and (pointer:fine){
    html.ova-ui-ready:not([data-contrast=high]) .featured-article.is-in:hover .featured-photo{scale:1.05;transition-duration:.9s}
    html:not([data-contrast=high]) .featured-article.is-in:hover .text-link{animation:ova-glow 1.1s ease-in-out both}
  }
}

/* ===== it8 · Tryb Kontrast = bez ruchu (WCAG 2.2: 2.2.2 Pauza/Zatrzymanie/Ukrycie, 2.3.3 Animacje z interakcji) ===== */
/* High contrast is the accessibility mode: no CSS animations or transitions anywhere, no smooth scrolling,
   every "reveal" shows its final state at once, the header never slides away. JS (ova-ui.js / ova-init.js) skips
   the Web Animations (globe, FAQ), page/theme view transitions and the pointer tilt in this mode as well. */
html[data-contrast=high],html[data-contrast=high] *,html[data-contrast=high] *::before,html[data-contrast=high] *::after{
  animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-contrast=high] .hero h1,
html[data-contrast=high] .portrait-mosaic .letter-portrait,
html[data-contrast=high] .portrait-mosaic .letter-portrait figcaption,
html[data-contrast=high] .chapter-strip span,
html[data-contrast=high] .product-art,
html[data-contrast=high] .product-art img{opacity:1!important;translate:none!important;scale:none!important;rotate:none!important}
html[data-contrast=high] .chapter-strip span+span::before,html[data-contrast=high] .chapter-strip span+span::after{scale:none!important}
html[data-contrast=high] .site-header.is-hidden{transform:none!important}
html[data-contrast=high] .letter-portrait:hover .letter-clip img{transform:var(--pz,none)!important;object-position:var(--pp,50% 50%)!important}
@media (max-width:480px){html[data-contrast=high] .letter-portrait:hover .letter-clip img{transform:var(--pzm,var(--pz,none))!important;object-position:var(--ppm,var(--pp,50% 50%))!important}}
html[data-contrast=high] .product-art img{transform:none!important}
html[data-contrast=high] .featured-article .featured-photo{scale:none!important}

/* ===== a1 · /aplikacja/: urządzenia + dostępność ======================================= */
.ova-devices-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
@media (max-width:860px){.ova-devices-grid{grid-template-columns:1fr}}
.ova-devices-art,.ova-a11y-art{margin:0;border-radius:clamp(18px,2.4vw,30px);overflow:hidden;background:var(--lavender);
  box-shadow:0 34px 70px -46px rgba(48,35,63,.55),0 2px 0 rgba(255,255,255,.6) inset}
.ova-devices-art img,.ova-a11y-art img{display:block;width:100%;height:auto;transition:scale .9s var(--ova-ease-out)}
.ova-a11y-art{max-width:820px;margin:clamp(8px,2vw,24px) auto clamp(32px,4vw,56px)}

/* a2 · three display modes side by side (equal heights: columns follow each image's aspect ratio);
   the card of the mode that is currently on for this website is outlined and labelled. Phones: swipeable row. */
.ova-modes{display:grid;grid-template-columns:.538fr 1.43fr 1.648fr;gap:clamp(14px,2vw,28px);align-items:start;margin:clamp(8px,2vw,24px) 0 clamp(36px,4vw,60px)}
.ova-mode{margin:0;display:flex;flex-direction:column;gap:12px;--ar:1}
.ova-mode[data-mode=day]{--ar:.538}.ova-mode[data-mode=night]{--ar:1.43}.ova-mode[data-mode=contrast]{--ar:1.648}
.ova-mode img{display:block;width:100%;height:auto;border-radius:clamp(14px,1.6vw,22px);background:var(--lavender);
  box-shadow:0 26px 50px -36px rgba(48,35,63,.55);outline:2px solid transparent;outline-offset:5px;transition:outline-color var(--ova-dur-m) linear,scale .9s var(--ova-ease-out)}
.ova-mode figcaption{font-size:16px;line-height:1.45;color:var(--muted)}
.ova-mode figcaption b{display:block;font-family:var(--serif);font-weight:500;font-size:22px;color:var(--ink)}
.ova-mode-now{display:none;margin-top:8px;padding:3px 10px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.02em;
  color:var(--ova-btn-fg,#fff);background:var(--brand-purple)}
html:not([data-theme=dark]):not([data-contrast=high]) .ova-mode[data-mode=day] img,
html[data-theme=dark]:not([data-contrast=high]) .ova-mode[data-mode=night] img,
html[data-contrast=high] .ova-mode[data-mode=contrast] img{outline-color:var(--brand-purple)}
html:not([data-theme=dark]):not([data-contrast=high]) .ova-mode[data-mode=day] .ova-mode-now,
html[data-theme=dark]:not([data-contrast=high]) .ova-mode[data-mode=night] .ova-mode-now,
html[data-contrast=high] .ova-mode[data-mode=contrast] .ova-mode-now{display:block;width:fit-content}
html[data-contrast=high] .ova-mode[data-mode=contrast] img{outline-color:var(--ink)}
html[data-contrast=high] .ova-mode-now{color:var(--paper);background:var(--ink)}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){html:not([data-contrast=high]) .ova-mode:hover img{scale:1.02}}
@media (max-width:760px){
  .ova-modes{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:6px 6px 12px;margin-inline:-6px;overscroll-behavior-x:contain}
  .ova-mode{flex:0 0 calc(280px * var(--ar));max-width:86vw;scroll-snap-align:start}
  .ova-mode img{height:auto}
}
.ova-a11y .section-intro p{max-width:46ch}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  html:not([data-contrast=high]) :is(.ova-devices-art,.ova-a11y-art):hover img{scale:1.03}
}
/* reveal once in view, after the image has loaded (same pattern as the Knowledge card) */
html.ova-ui-ready .ova-reveal:not(.is-in){opacity:0;translate:0 28px}
.ova-reveal{transition:opacity .9s var(--ova-ease-out),translate 1.1s var(--ova-ease-out)}
html[data-contrast=high] .ova-reveal{opacity:1!important;translate:none!important}
html[data-contrast=high] :is(.ova-devices-art,.ova-a11y-art) img{scale:none!important}