/* ==================== Opening animation (homepage) ====================
   The inline script in <head> sets html[data-intro="a"] when the intro should play: once per browser session,
   never under prefers-reduced-motion (?intro=a forces it for a preview). intro.js builds the scene: the logo
   draws itself in white, its colours fade in with the company name, then the scene lifts away like a curtain.
   A tap, click or key press skips it. */

/* Cover the page from the first paint until intro.js has built the scene; it gives up on its own after 3s. */
html[data-intro] body::before {
    content: ''; position: fixed; inset: 0; z-index: 199; background: #102a43;
    animation: iw-cover-out .3s 3s forwards;
}
html[data-intro][data-intro-ready] body::before { content: none; }
@keyframes iw-cover-out { to { opacity: 0; visibility: hidden; } }

/* Hold the hero's entrance until the scene starts to leave. */
html[data-intro] { --iw-hold: 1.4s; }
html[data-intro] #hero .hospital-hero-copy .t-eyebrow { animation-delay: calc(.1s + var(--iw-hold)); }
html[data-intro] #hero .hospital-hero-copy h1 { animation-delay: calc(.15s + var(--iw-hold)); }
html[data-intro] #hero .hospital-hero-description { animation-delay: calc(.35s + var(--iw-hold)); }
html[data-intro] #hero .hospital-hero-shortcuts { animation-delay: calc(.5s + var(--iw-hold)); }

/* ---------- The scene ---------- */
.iw-intro { position: fixed; inset: 0; z-index: 200; overflow: hidden; color: #fff; cursor: pointer;
    background-color: #102a43; background-image: radial-gradient(ellipse 70% 60% at 50% 46%, #1b4a73 0%, #102a43 62%, #0b1f33 100%);
    border-radius: 0 0 50% 50% / 0 0 0 0; animation: iw-lift .62s 1.36s cubic-bezier(.7,0,.25,1) forwards; }
.iw-intro-stage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.iw-intro-logo { width: min(46vw, 250px); height: auto; overflow: visible; filter: drop-shadow(0 0 22px rgba(138,184,230,.28)); }
.iw-intro-word { font-family: 'Prompt', system-ui, sans-serif; font-weight: 600; font-size: clamp(20px, 2.6vw, 30px); letter-spacing: .01em; white-space: nowrap;
    opacity: 0; animation: iw-up .55s .78s cubic-bezier(.22,1,.36,1) forwards; }
.iw-intro-word span { color: #8AB8E6; }
.iw-intro-tag { font-family: 'Prompt', system-ui, sans-serif; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: rgba(255,255,255,.62); margin-top: -10px;
    opacity: 0; animation: iw-up .55s .9s cubic-bezier(.22,1,.36,1) forwards; }
.iw-intro.is-skipping { transition: opacity .25s ease; opacity: 0 !important; }
.iw-intro.is-skipping * { animation-play-state: paused !important; }

/* The logo appears in white first (each stroke drawn through a mask), then its colours fade in. */
.iw-draw { fill: none; stroke: #fff; stroke-width: 34; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.iw-draw:nth-of-type(1) { animation: iw-stroke .5s .1s cubic-bezier(.45,0,.2,1) forwards; }
.iw-draw:nth-of-type(2) { animation: iw-stroke .4s .28s cubic-bezier(.45,0,.2,1) forwards; }
.iw-draw:nth-of-type(3) { animation: iw-stroke .4s .4s cubic-bezier(.45,0,.2,1) forwards; }
.iw-draw:nth-of-type(4) { animation: iw-stroke .45s .52s cubic-bezier(.45,0,.2,1) forwards; }
.iw-dot { fill: #fff; transform-box: fill-box; transform-origin: center; transform: scale(0); animation: iw-pop .3s cubic-bezier(.3,1.6,.5,1) forwards; }
.iw-dot:nth-of-type(1) { animation-delay: .5s; } .iw-dot:nth-of-type(2) { animation-delay: .6s; }
.iw-dot:nth-of-type(3) { animation-delay: .7s; } .iw-dot:nth-of-type(4) { animation-delay: .8s; }
.iw-logo-color { opacity: 0; animation: iw-fade .45s .88s ease forwards; }

@keyframes iw-lift { 0% { transform: translateY(0); border-radius: 0 0 50% 50% / 0 0 0 0; } 100% { transform: translateY(-104%); border-radius: 0 0 50% 50% / 0 0 22vh 22vh; } }
@keyframes iw-stroke { to { stroke-dashoffset: 0; } }
@keyframes iw-pop { to { transform: scale(1); } }
@keyframes iw-fade { to { opacity: 1; } }
@keyframes iw-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .iw-intro { display: none; }
}
/* preview helper: ?intro=a&freeze stops every animation so frames can be captured at chosen times */
html.iw-intro-freeze *, html.iw-intro-freeze *::before, html.iw-intro-freeze *::after { animation-play-state: paused !important; }