/* =========================================================================
   Onboarding — Splash + 3 intro/feature screens + auth gate
   Modern, sales-converting dark design matching the World Healthcares theme.
   ========================================================================= */
:root{
  --ob-bg:#070e15;
  --ob-teal:#14b8a6;
  --ob-cyan:#22d3ee;
  --ob-purple:#a855f7;
  --ob-text:#eaf2f5;
  --ob-muted:#8aa1ac;
}
#ob-root{
  position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;z-index:9000;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ob-text);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(34,211,238,.14), transparent 60%),
    radial-gradient(1000px 600px at 100% 10%, rgba(168,85,247,.12), transparent 55%),
    radial-gradient(900px 500px at 50% 120%, rgba(20,184,166,.12), transparent 60%),
    var(--ob-bg);
  overflow:hidden;
  /* column so the single splash / gate child centres reliably on every size */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
#ob-root.ob-hide{opacity:0;pointer-events:none;transition:opacity .45s ease}
/* Lock BOTH <html> and <body> while onboarding shows. The desktop media query
   in styles.css re-enables document scrolling (overflow-y:auto), which would
   otherwise leave a spurious outer scrollbar for the app rendered *behind* the
   fixed overlay. !important beats that media query so there is exactly ONE
   surface on screen and no stray scrollbars during onboarding. */
html.ob-lock,body.ob-lock{overflow:hidden !important;height:100% !important}

/* floating decorative blobs */
.ob-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;pointer-events:none;animation:obFloat 9s ease-in-out infinite}
.ob-blob.b1{width:240px;height:240px;background:rgba(34,211,238,.35);top:-60px;left:-40px}
.ob-blob.b2{width:300px;height:300px;background:rgba(168,85,247,.3);bottom:-90px;right:-60px;animation-delay:1.5s}
.ob-blob.b3{width:180px;height:180px;background:rgba(20,184,166,.3);top:40%;right:12%;animation-delay:3s}
@keyframes obFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-22px) scale(1.06)}}

/* ---------------- SPLASH ---------------- */
.ob-splash{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;padding:30px;animation:obFadeIn .5s ease}
.ob-splash.ob-out{animation:obFadeOut .5s ease forwards}
.ob-logo{
  width:108px;height:108px;border-radius:30px;display:grid;place-items:center;font-size:52px;color:#04121a;
  background:linear-gradient(135deg,var(--ob-cyan),var(--ob-teal));
  box-shadow:0 20px 60px rgba(34,211,238,.45);
  animation:obPop .7s cubic-bezier(.2,.9,.3,1.3), obPulse 2.4s ease-in-out .7s infinite;
}
.ob-splash h1{font-size:30px;font-weight:800;letter-spacing:.3px}
.ob-splash h1 span{color:var(--ob-cyan)}
.ob-splash p{font-size:14px;color:var(--ob-muted);max-width:280px;line-height:1.5}
.ob-splash .ob-load{width:150px;height:5px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:8px}
.ob-splash .ob-load span{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,var(--ob-cyan),var(--ob-purple));animation:obLoad 1.9s ease forwards}
@keyframes obLoad{to{width:100%}}
@keyframes obPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes obPulse{0%,100%{box-shadow:0 20px 60px rgba(34,211,238,.45)}50%{box-shadow:0 20px 80px rgba(168,85,247,.6)}}
@keyframes obFadeIn{from{opacity:0}to{opacity:1}}
@keyframes obFadeOut{from{opacity:1}to{opacity:0}}

/* ---------------- INTRO CAROUSEL ---------------- */
.ob-intro{position:relative;width:100%;max-width:560px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:0 0 26px;margin:0 auto}
.ob-topbar{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 8px}
.ob-topbar .ob-mini{display:flex;align-items:center;gap:9px;font-weight:800;font-size:15px}
.ob-topbar .ob-mini i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,var(--ob-cyan),var(--ob-teal));color:#04121a;font-size:15px}
.ob-topbar .ob-mini span{color:var(--ob-cyan)}
.ob-skip{background:none;border:none;color:var(--ob-muted);font-size:13.5px;font-weight:700;cursor:pointer;padding:8px 10px;border-radius:8px}
.ob-skip:hover{color:var(--ob-text)}

.ob-slides{flex:1 1 auto;position:relative;overflow:hidden;min-height:0}
/* justify-content:flex-start (NOT center): when a slide's content is taller than
   the available height, `center` clips BOTH the top (unreachable) and bottom.
   We keep the content visually centred *when it fits* via auto margins on the
   first/last child (below), and let it scroll from the top when it does not —
   so the art never hides above the top edge and the last feature card never
   disappears behind the Next button. */
.ob-slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:24px 30px;gap:18px;opacity:0;transform:translateX(40px);transition:opacity .45s ease,transform .45s ease;pointer-events:none;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ob-slide::-webkit-scrollbar{width:0;height:0}
/* auto margins centre the block when it fits, but collapse (allowing full
   scroll from the top) once the content is taller than the viewport. */
.ob-slide > :first-child{margin-top:auto}
.ob-slide > :last-child{margin-bottom:auto}
.ob-slide.active{opacity:1;transform:none;pointer-events:auto}
.ob-slide.leaving{opacity:0;transform:translateX(-40px)}

.ob-art{position:relative;width:230px;height:230px;display:grid;place-items:center}
.ob-art .ob-ring{position:absolute;inset:0;border-radius:50%;border:2px dashed rgba(255,255,255,.12);animation:obSpin 26s linear infinite}
.ob-art .ob-ring.r2{inset:26px;border-color:rgba(34,211,238,.2);animation-duration:18s;animation-direction:reverse}
@keyframes obSpin{to{transform:rotate(360deg)}}
.ob-art .ob-core{
  width:140px;height:140px;border-radius:38px;display:grid;place-items:center;font-size:62px;color:#fff;
  box-shadow:0 20px 55px rgba(0,0,0,.45);animation:obPop .6s cubic-bezier(.2,.9,.3,1.3)
}
.ob-art .ob-chip{position:absolute;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:20px;color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.4);animation:obFloat 5s ease-in-out infinite}
.ob-art .ob-chip.c1{top:4px;right:8px;background:linear-gradient(135deg,#f59e0b,#ef4444)}
.ob-art .ob-chip.c2{bottom:14px;left:0;background:linear-gradient(135deg,#3b82f6,#22d3ee);animation-delay:1s}
.ob-art .ob-chip.c3{bottom:4px;right:26px;background:linear-gradient(135deg,#a855f7,#6366f1);animation-delay:2s}

.ob-slide h2{font-size:25px;font-weight:800;line-height:1.2;max-width:330px}
.ob-slide h2 span{color:var(--ob-cyan)}
.ob-slide p{font-size:14.5px;color:var(--ob-muted);line-height:1.6;max-width:320px}
.ob-feats{display:flex;flex-direction:column;gap:10px;width:100%;max-width:320px;margin-top:4px}
.ob-feat{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:11px 14px;text-align:left}
.ob-feat i{width:34px;height:34px;flex-shrink:0;border-radius:10px;display:grid;place-items:center;font-size:15px}
.ob-feat b{font-size:13.5px;font-weight:700;display:block}
.ob-feat small{font-size:11.5px;color:var(--ob-muted)}

/* dots + buttons */
.ob-foot{padding:14px 26px 0;display:flex;flex-direction:column;gap:18px}
.ob-dots{display:flex;justify-content:center;gap:8px}
.ob-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18);transition:.3s}
.ob-dot.on{width:26px;border-radius:5px;background:linear-gradient(90deg,var(--ob-cyan),var(--ob-teal))}
.ob-actions{display:flex;gap:12px;align-items:center}
.ob-btn{flex:1;padding:15px;border-radius:14px;border:none;font-size:15px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:.15s}
.ob-btn.primary{background:linear-gradient(135deg,var(--ob-cyan),var(--ob-teal));color:#04121a;box-shadow:0 12px 30px rgba(34,211,238,.35)}
.ob-btn.primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.ob-btn.ghost{flex:0 0 auto;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--ob-text);padding:15px 20px}

/* ---------------- AUTH GATE ---------------- */
.ob-gate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 28px;gap:16px;animation:obFadeIn .4s ease;overflow-y:auto;scrollbar-width:none}
.ob-gate::-webkit-scrollbar{width:0;height:0}
.ob-gate .ob-glogo{width:84px;height:84px;border-radius:24px;display:grid;place-items:center;font-size:40px;color:#04121a;background:linear-gradient(135deg,var(--ob-cyan),var(--ob-teal));box-shadow:0 16px 46px rgba(34,211,238,.4);margin-bottom:4px}
.ob-gate h2{font-size:25px;font-weight:800;line-height:1.2;max-width:340px}
.ob-gate h2 span{color:var(--ob-cyan)}
.ob-gate p{font-size:14px;color:var(--ob-muted);max-width:320px;line-height:1.55}
.ob-trust{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin:6px 0 4px}
.ob-trust .t{display:flex;flex-direction:column;align-items:center;gap:2px}
.ob-trust .t b{font-size:19px;font-weight:800;color:var(--ob-cyan)}
.ob-trust .t small{font-size:11px;color:var(--ob-muted)}
.ob-gate-actions{display:flex;flex-direction:column;gap:11px;width:100%;max-width:330px;margin-top:6px}
.ob-gate-actions .ob-btn{width:100%}
.ob-gate .ob-fine{font-size:11.5px;color:var(--ob-muted);max-width:300px;margin-top:4px}

@media (max-width:640px){
  #ob-root{align-items:stretch}
  .ob-intro{max-width:100%}
}

/* Desktop / large screens: use the FULL viewport. The intro, splash and gate
   fill the whole screen and content is always fully visible (scrolls if the
   window is very short) — no clipped card. */
@media (min-width:641px){
  #ob-root{align-items:stretch;justify-content:stretch}
  .ob-intro{
    max-width:720px;width:100%;margin:0 auto;
    min-height:100vh;min-height:100dvh;height:auto;overflow:visible;
    background:transparent;box-shadow:none;border-radius:0;
  }
  .ob-slide{padding:24px 40px;gap:22px}
  .ob-slide h2{font-size:34px;max-width:560px}
  .ob-slide p{font-size:16px;max-width:520px}
  .ob-feats{max-width:420px}
  .ob-art{width:260px;height:260px}
  .ob-art .ob-core{width:160px;height:160px;font-size:70px}
  .ob-foot{max-width:520px;width:100%;margin:0 auto;padding-left:0;padding-right:0}
  .ob-topbar{max-width:640px;width:100%;margin:0 auto;padding-left:0;padding-right:0}
  .ob-gate{max-width:560px;margin:0 auto}
  .ob-gate h2{font-size:32px;max-width:520px}
  .ob-gate p{font-size:16px;max-width:460px}
}

/* Short / laptop heights: compact the intro so the art, headline, copy, all
   three feature cards AND the Next button fit WITHOUT clipping the top or
   bottom. Triggered by viewport height (independent of width) so it also helps
   a short desktop window like a side-by-side / recorded window. */
@media (max-height:760px){
  .ob-topbar{padding:12px 24px 4px}
  .ob-slide{padding:10px 30px;gap:10px}
  .ob-art{width:132px;height:132px}
  .ob-art .ob-ring.r2{inset:18px}
  .ob-art .ob-core{width:84px;height:84px;border-radius:24px;font-size:38px}
  .ob-art .ob-chip{width:38px;height:38px;font-size:16px}
  .ob-slide h2{font-size:22px}
  .ob-slide p{font-size:13px;line-height:1.45}
  .ob-feats{gap:8px}
  .ob-feat{padding:8px 12px}
  .ob-feat i{width:30px;height:30px;font-size:13px}
  .ob-foot{padding-top:8px;gap:10px}
  .ob-btn{padding:12px}
}
@media (min-width:641px) and (max-height:760px){
  .ob-slide h2{font-size:26px}
  .ob-slide p{font-size:14px}
  .ob-art{width:150px;height:150px}
  .ob-art .ob-core{width:96px;height:96px;font-size:44px}
}
/* Extra-short windows (≈520px recorded / split-screen): shrink further so the
   whole slide still fits with no scroll and nothing hides top or bottom. */
@media (max-height:560px){
  .ob-topbar{padding:8px 24px 2px}
  .ob-slide{padding:6px 30px;gap:7px}
  .ob-art{width:104px;height:104px}
  .ob-art .ob-core{width:66px;height:66px;border-radius:20px;font-size:30px}
  .ob-art .ob-chip{width:32px;height:32px;font-size:13px}
  .ob-slide h2{font-size:19px}
  .ob-slide p{font-size:12px;line-height:1.35}
  .ob-feats{gap:6px}
  .ob-feat{padding:6px 11px}
  .ob-feat small{font-size:11px}
  .ob-foot{padding-top:6px;gap:7px}
  .ob-btn{padding:10px;font-size:14px}
  .ob-dot{height:7px}
}

/* Safety net for very short windows on any size: let the whole overlay scroll
   rather than clipping the splash / gate content. The overlay (#ob-root) is the
   ONLY scroller here and its own scrollbar is hidden, so there is never a stack
   of parallel scrollbars. align-items stays `center` (flex-direction:column) so
   the splash / gate remain horizontally centred instead of sliding to the left. */
@media (max-height:720px){
  #ob-root{justify-content:flex-start;overflow-y:auto;scrollbar-width:none}
  #ob-root::-webkit-scrollbar{width:0;height:0}
  /* in-flow, full-width, auto height so they centre horizontally and stack */
  .ob-splash,.ob-gate{position:relative;inset:auto;width:100%;min-height:100dvh}
  .ob-slide{overflow-y:visible}
}