/* hospita.si's opening over the home page (30-10). Written by .work/tabs/build.py from intro_kit.py - change it there. */
.hx-word{white-space:nowrap;line-height:1}
.hx-i{position:relative;display:inline-block;line-height:1}
.hx-dot{position:absolute;left:calc(50% + .015em);top:.1em;width:.2em;height:.2em;transform:translateX(-50%);display:block}
.hx-mark{display:block;flex:none}
html[data-theme="dark"] :is(.hx-mark,.lg-m,.wl-m) path[fill="#0d9488"]{fill:#14b8a6;stroke:#14b8a6}
html[data-theme="dark"] :is(.hx-mark,.lg-m,.wl-m) path[fill="#2f6be4"]{fill:#4f86ef;stroke:#4f86ef}
html[data-theme="dark"] :is(.hx-mark,.lg-m,.wl-m) path[fill="#5546d8"]{fill:#7a6cf0;stroke:#7a6cf0}
html[data-theme="dark"] :is(.hx-mark,.lg-m,.wl-m) path[fill="#d23a6e"]{fill:#ec5b8c;stroke:#ec5b8c}
html[data-theme="dark"] :is(.hx-mark,.lg-m,.wl-m) path[opacity="0.26"]{opacity:0.4}
html[data-theme="dark"] :is(.hx-dot,.wl-w) path[fill="#0d9488"]{fill:#14b8a6}
html[data-theme="dark"] :is(.hx-dot,.wl-w) path[fill="#2f6be4"]{fill:#4f86ef}
html[data-theme="dark"] :is(.hx-dot,.wl-w) path[fill="#5546d8"]{fill:#7a6cf0}
html[data-theme="dark"] :is(.hx-dot,.wl-w) path[fill="#d23a6e"]{fill:#ec5b8c}
/* the film is drawn only when the page has decided to show it (the script in the head), so nothing flashes */
.hxi{display:none}
html.hx-intro,html.hx-intro body{overflow:hidden}
html.hx-hold .ecg .base{animation-play-state:paused}
html.hx-intro .hxi{display:block}
.hxi{position:fixed;inset:0;z-index:2000;overflow:hidden;outline:none;color:#0f2f2c;
  font-family:'Figtree',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5;
  --paper:#f3f9f7;--ink:#0f2f2c;--muted:#557570;--line:#dde9e6;--fs:clamp(150px,26vmin,290px);--fy:44%;--fly:28%}
.hxi *,.hxi *::before,.hxi *::after{box-sizing:border-box}
/* the ground: the home page's own mint-white and three soft lights breathing on their own time */
.hxi-ground{position:absolute;inset:0;background:var(--paper);overflow:hidden}
.hxi-ground i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:hxiBreathe 9s ease-in-out infinite alternate}
.hxi-ground i:nth-child(1){width:60vmax;height:60vmax;left:50%;top:40%;margin:-30vmax 0 0 -30vmax;background:radial-gradient(closest-side,#d6efeb,transparent)}
.hxi-ground i:nth-child(2){width:44vmax;height:44vmax;right:-8vmax;bottom:-18vmax;background:radial-gradient(closest-side,#e4e2fa,transparent);animation-delay:-3s}
.hxi-ground i:nth-child(3){width:40vmax;height:40vmax;left:-12vmax;top:-14vmax;background:radial-gradient(closest-side,#fbe3ea,transparent);animation-delay:-6s;opacity:.4}
@keyframes hxiBreathe{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-1.5vmax,1.5vmax,0) scale(1.07)}}
.hxi-gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity .35s ease}
.hxi.go .hxi-gl{opacity:1}
/* the edges of the frame held a touch darker, as a lens does, so the eye stays in the middle */
.hxi-veil{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(15,47,44,.07))}
/* where the strand cannot be drawn (no WebGL), the four petals stand in its place */
.hxi-alt{display:none;position:absolute;left:50%;top:40%;width:min(26vmin,260px);transform:translate(-50%,-50%)}
.hxi.nogl .hxi-alt{display:block}
.hxi.nogl.gather .hxi-alt{display:none}
.hxi-alt .hx-mark{width:100%;height:auto}
/* each side's name on the left, as a title comes up in a film, while the strand stands at 45 degrees on the right */
.hxi-cap{position:absolute;inset-inline-start:max(24px,5vw,env(safe-area-inset-left,0px));top:calc(var(--fly) + var(--fs) * .32 + clamp(18px,3vh,34px));
  width:min(40vw,800px);text-align:center;pointer-events:none;opacity:0;filter:blur(12px);transform:translateY(22px);
  transition:opacity .45s ease,filter .5s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.hxi-cap.on{opacity:1;filter:blur(0);transform:none;transition:opacity .7s ease,filter .75s ease,transform 1.3s cubic-bezier(.16,.84,.24,1)}
.hxi-cap .hx-mark{display:none}
.hxi-cap h2{margin:0;font-size:clamp(58px,6.6vw,150px);line-height:.96;letter-spacing:-.045em;font-weight:800;text-wrap:balance}
.hxi-cap p{margin:clamp(14px,2.2vh,28px) auto 0;color:var(--muted);font-size:clamp(19px,1.75vw,34px);font-weight:500;max-width:26ch;text-wrap:balance}
/* the words are FORMED: a wave runs through the title, each letter rising into place through the four colours of Hospita
   and settling in its side's own; then the line under it comes up word by word */
.hxi-src{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hxi-fx .w{display:inline-block;white-space:nowrap}
.hxi-fx .u{display:inline-block;white-space:pre}
.hxi-cap.on h2 .u{animation:hxiWave 1.25s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 48ms + 120ms)}
.hxi-cap.on p .u{animation:hxiRise .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 40ms + 520ms)}
@keyframes hxiWave{0%{opacity:0;transform:translateY(.62em) rotate(9deg) scale(.82);filter:blur(8px);color:var(--w1)}
  30%{opacity:1;filter:blur(0);color:var(--w2)}52%{transform:translateY(-.09em) rotate(-2deg) scale(1.05);color:var(--w3)}
  76%{transform:translateY(.02em);color:var(--w4)}100%{opacity:1;transform:none;filter:none;color:var(--fin)}}
@keyframes hxiRise{0%{opacity:0;transform:translateY(.8em);filter:blur(5px);color:var(--fin)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:none;color:var(--muted)}}
.hxi-cap[data-k="pat"]{--w1:#d23a6e;--w2:#5546d8;--w3:#2f6be4;--w4:#14b8a6;--fin:#0b7d73}
.hxi-cap[data-k="cli"]{--w1:#0d9488;--w2:#d23a6e;--w3:#5546d8;--w4:#4f86ef;--fin:#2559c9}
.hxi-cap[data-k="hosp"]{--w1:#2f6be4;--w2:#0d9488;--w3:#d23a6e;--w4:#7a6cf0;--fin:#4a3cc4}
.hxi-cap[data-k="lab"]{--w1:#5546d8;--w2:#2f6be4;--w3:#0d9488;--w4:#ec5b8c;--fin:#b32a5b}
html[data-theme="dark"] .hxi-cap[data-k="pat"]{--fin:#14b8a6}html[data-theme="dark"] .hxi-cap[data-k="cli"]{--fin:#4f86ef}
html[data-theme="dark"] .hxi-cap[data-k="hosp"]{--fin:#7a6cf0}html[data-theme="dark"] .hxi-cap[data-k="lab"]{--fin:#ec5b8c}
.hxi-cap[data-k="pat"] h2{color:#0b7d73}.hxi-cap[data-k="cli"] h2{color:#2559c9}
.hxi-cap[data-k="hosp"] h2{color:#4a3cc4}.hxi-cap[data-k="lab"] h2{color:#b32a5b}
/* the close: the four petals in the middle, the name under them */
.hxi-flower{position:absolute;left:50%;top:var(--fy);width:var(--fs);height:var(--fs);margin:calc(var(--fs) / -2) 0 0 calc(var(--fs) / -2);pointer-events:none}
.hxi-fl{width:100%;height:100%}
.hxi-fl .hx-mark{width:100%;height:100%;overflow:visible}
/* the ONE flower, in the middle from the first side to the last: it never leaves, only its colour moves - the side being
   told solid, the others faint; all four when the strand is whole */
.hxi-fl path{transition:opacity .8s ease}
.hxi-flower{will-change:transform}
.hxi-wv{position:absolute;left:0;right:0;bottom:0;height:clamp(110px,13vw,230px);pointer-events:none}
.hxi-wv svg{position:absolute;left:0;bottom:0;width:200%;height:100%;display:block;opacity:.55;transition:opacity .8s ease;
  animation:hxiDrift var(--d,30s) linear infinite var(--r,normal)}
.hxi-wv svg.front{opacity:1}
@keyframes hxiDrift{to{transform:translateX(-50%)}}
.hxi[data-lit="0"] .hxi-wv svg:nth-child(4),.hxi[data-lit="1"] .hxi-wv svg:nth-child(3),.hxi[data-lit="2"] .hxi-wv svg:nth-child(2),
.hxi[data-lit="3"] .hxi-wv svg:nth-child(1),.hxi[data-lit="4"] .hxi-wv svg{opacity:1}
.hxi-name{position:absolute;left:50%;top:calc(var(--fy) + var(--fs) / 2 + clamp(20px,3.2vh,38px));pointer-events:none;
  opacity:0;filter:blur(10px);transform:translate(-50%,16px);transition:opacity .4s ease,filter .4s ease,transform .5s ease}
.hxi-name.on{opacity:1;filter:blur(0);transform:translate(-50%,0);transition:opacity .6s ease,filter .6s ease,transform .9s cubic-bezier(.16,.84,.24,1)}
.hxi-name .hx-word{font-size:clamp(42px,4.6vw,78px);font-weight:800;letter-spacing:-.03em;color:var(--ink)}
/* the one way out: a small round button in a corner (its name for the reader and on hover; Esc does the same) */
.hxi-skip{position:absolute;z-index:3;right:max(18px,env(safe-area-inset-right,0px));bottom:max(18px,env(safe-area-inset-bottom,0px));
  display:grid;place-items:center;width:42px;height:42px;padding:0;color:var(--ink);cursor:pointer;
  background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:50%;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .2s,box-shadow .2s,opacity .3s}
.hxi-skip svg{width:17px;height:17px}
.hxi-skip:hover{background:#fff;box-shadow:0 8px 22px -14px rgba(15,47,44,.5)}
.hxi-skip:focus-visible{outline:3px solid #2f6be4;outline-offset:3px}
/* dark (the visitor's device, js/site.js): the film on the brand's dark ground, its lights dim and deep, each side's name in its
   bright colour; js/intro-gl.js fogs the strand into the same ground */
html[data-theme="dark"] .hxi{color:#e4efed;--paper:#0e1620;--ink:#e4efed;--muted:#93aaa6;--line:#263640}
html[data-theme="dark"] .hxi-ground i:nth-child(1){background:radial-gradient(closest-side,#0f3a35,transparent)}
html[data-theme="dark"] .hxi-ground i:nth-child(2){background:radial-gradient(closest-side,#221f50,transparent)}
html[data-theme="dark"] .hxi-ground i:nth-child(3){background:radial-gradient(closest-side,#3e1a2a,transparent)}
html[data-theme="dark"] .hxi-veil{background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.35))}
html[data-theme="dark"] .hxi-cap[data-k="pat"] h2{color:#14b8a6}
html[data-theme="dark"] .hxi-cap[data-k="cli"] h2{color:#4f86ef}
html[data-theme="dark"] .hxi-cap[data-k="hosp"] h2{color:#7a6cf0}
html[data-theme="dark"] .hxi-cap[data-k="lab"] h2{color:#ec5b8c}
html[data-theme="dark"] .hxi-skip{background:rgba(20,30,40,.72)}
html[data-theme="dark"] .hxi-skip:hover{background:#1a2832;box-shadow:0 8px 22px -14px rgba(0,0,0,.8)}
@media (max-width:760px){
  .hxi{--fs:clamp(140px,44vw,220px);--fy:42%;--fly:15%}
  .hxi-cap{width:calc(100% - 44px);top:calc(var(--fly) + var(--fs) * .3 + 14px)}
  .hxi-cap h2{font-size:clamp(46px,13.5vw,66px)}
  .hxi-cap p{font-size:17px;max-width:28ch}
}