/* PathoHub engineer + space "time travel" entry — shared by /lab-planner/ and /plan/ */
:root{ --entry-on:#13232f; --entry-ease:cubic-bezier(.2,0,0,1); --entry-decel:cubic-bezier(.05,.7,.1,1); --entry-spring:cubic-bezier(.34,1.3,.64,1); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
/* ---------- the engineer (emoji style, drawn in SVG) ---------- */
.eng{ display:block; width:100%; height:100%; overflow:visible; }
.eng .arm{ transform-box:fill-box; transition:transform .38s var(--entry-spring); }
.eng .aL{ transform-origin:80% 6%; } .eng .aR{ transform-origin:20% 6%; }
.eng .helm, .eng .jet{ opacity:0; transition:opacity .4s; }
.eng.space .helm, .eng.space .jet{ opacity:1; }
.eng .fl{ transform-box:fill-box; transform-origin:50% 0; animation:flame .18s ease-in-out infinite alternate; }
@keyframes flame{ from{ transform:scaleY(.7); } to{ transform:scaleY(1.15); } }
.eng .blink{ transform-box:fill-box; transform-origin:50% 50%; animation:blink 4.2s infinite; }
@keyframes blink{ 0%,46%,50%,100%{ transform:scaleY(1); } 48%{ transform:scaleY(.1); } }
.eng.catch .aL{ transform:rotate(128deg); } .eng.catch .aR{ transform:rotate(-128deg); }
.eng.place .aL{ transform:rotate(58deg); } .eng.place .aR{ transform:rotate(-58deg); }
.eng.wave .aR{ animation:wave .5s ease-in-out 3 alternate; transform:rotate(-140deg); }
@keyframes wave{ from{ transform:rotate(-120deg); } to{ transform:rotate(-160deg); } }
.eng.happy .mouth{ d:path("M47 46 Q60 58 73 46"); }

/* ---------- entry: space travel ---------- */
.entry{ position:fixed; inset:0; z-index:100; overflow:hidden; background:radial-gradient(70% 60% at 50% 50%, #0b1e33 0%, #050c18 60%, #02060d 100%); color:#fff; }
.entry.out{ animation:entryOut .6s var(--entry-ease) forwards; }
@keyframes entryOut{ to{ opacity:0; visibility:hidden; } }
.stars{ position:absolute; inset:0; width:100%; height:100%; }
.portal{ position:absolute; left:50%; top:50%; width:min(46vmin,360px); aspect-ratio:1; translate:-50% -50%; scale:0; border-radius:50%; transition:scale 1.1s var(--entry-decel); }
.portal.on{ scale:1; }
.portal i{ position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, #3cc8ff, #0e5b78, #8cc63f, #2aa3c8, #7c5cff, #3cc8ff);
  -webkit-mask:radial-gradient(closest-side, transparent 80%, #000 82%, #000 97%, transparent 100%); mask:radial-gradient(closest-side, transparent 80%, #000 82%, #000 97%, transparent 100%);
  animation:spin 2.4s linear infinite; filter:blur(.4px) drop-shadow(0 0 18px #3cc8ff); }
.portal b{ position:absolute; inset:9%; border-radius:50%; background:radial-gradient(circle, rgba(220,245,255,.95) 0%, rgba(120,210,255,.45) 35%, rgba(14,91,120,.25) 62%, rgba(5,12,24,0) 72%);
  animation:breathe 1.6s ease-in-out infinite alternate; }
@keyframes spin{ to{ rotate:360deg; } }
@keyframes breathe{ from{ opacity:.65; scale:.94; } to{ opacity:1; scale:1.04; } }
.portal.burst{ transition:scale .9s cubic-bezier(.7,0,.84,0); scale:16; }
.entryText{ position:absolute; left:0; right:0; top:9vh; text-align:center; padding:0 18px; transition:opacity .5s; }
.entryText .kicker{ margin:0; font-size:13px; letter-spacing:.3em; text-transform:uppercase; color:#8fd4ea; opacity:0; animation:fadeUp .8s var(--entry-decel) .2s forwards; }
.entryText h1{ margin:8px 0 6px; font-size:clamp(30px,6vw,60px); font-weight:500; letter-spacing:-.02em;
  background:linear-gradient(92deg,#ffffff 0%,#bfeaff 40%,#c4e8a0 80%,#ffffff 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0; animation:fadeUp .9s var(--entry-decel) .4s forwards; }
.entryLine{ margin:0; color:#b7cad6; font-size:15px; opacity:0; animation:fadeUp .8s var(--entry-decel) .8s forwards; }
.entryText.dim{ opacity:0; }
.traveller{ position:absolute; left:0; top:0; width:min(26vmin,180px); aspect-ratio:3/5; will-change:transform; filter:drop-shadow(0 0 22px rgba(60,200,255,.35)); }
.entryBubble{ position:absolute; left:50%; top:calc(50% + min(26vmin,190px)); translate:-50% 0; text-align:center; background:#fff; color:var(--entry-on); border-radius:20px; padding:10px 18px; font-size:15px; line-height:1.4; box-shadow:0 10px 30px rgba(0,0,0,.4);
  opacity:0; transform:translateY(10px) scale(.95); transition:opacity .3s, transform .4s var(--entry-spring); white-space:nowrap; }
.entryBubble.on{ opacity:1; transform:none; }
.flash{ position:absolute; inset:0; background:#f4f8fa; opacity:0; pointer-events:none; }
.flash.on{ transition:opacity .45s ease-in; opacity:1; }
.skip{ position:absolute; right:16px; bottom:max(18px, env(safe-area-inset-bottom)); border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08); color:#fff; border-radius:999px; padding:10px 18px; font-weight:600; cursor:pointer; }
.skip:hover{ background:rgba(255,255,255,.18); }
@media (max-width:640px){ .entryBubble{ white-space:normal; width:min(320px, 86vw); font-size:14px; } }

@media (prefers-reduced-motion:reduce){ .entry{ display:none; } }
.portal.fade{ transition:opacity .6s, scale .8s var(--entry-decel); opacity:0; scale:1.6; }
.finale{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:0 20px; pointer-events:none; z-index:3; }
.finale b{ font-size:clamp(30px,6.5vw,72px); font-weight:600; letter-spacing:-.02em; color:#fff; line-height:1.05; text-shadow:0 0 30px rgba(60,200,255,.55); animation:finIn .7s var(--entry-spring) both; }
.finale em{ font-style:normal; background:linear-gradient(92deg,#3cc8ff,#8cc63f 50%,#ff4fd8); -webkit-background-clip:text; background-clip:text; color:transparent; }
@keyframes finIn{ from{ opacity:0; transform:scale(.6); filter:blur(10px); } to{ opacity:1; transform:none; filter:blur(0); } }
.sticker{ position:absolute; left:50%; top:50%; z-index:2; line-height:1; pointer-events:none; animation:stick 1.3s cubic-bezier(.2,.8,.3,1) both; filter:drop-shadow(0 0 10px rgba(255,255,255,.35)); }
@keyframes stick{ from{ opacity:0; transform:translate(-50%,-50%) scale(.2) rotate(0); } 25%{ opacity:1; } to{ opacity:1; transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1) rotate(var(--r)); } }
.eng.point .aL{ transform:rotate(100deg); } .eng.point .aR{ transform:rotate(-20deg); }
.eng .hat{ transition:opacity .4s; } .eng.space .hat{ opacity:0; }

/* 3D-style engineer picture: poses move the whole figure */
.eng3d{ position:relative; display:block; height:100%; width:auto; aspect-ratio:336/681; margin:0 auto; transform-origin:50% 100%; transition:transform .45s var(--entry-spring); }
.eng3d img{ width:100%; height:100%; display:block; filter:drop-shadow(0 10px 12px rgba(0,0,0,.28)); -webkit-user-drag:none; user-select:none; transition:transform .3s var(--entry-ease); }
.eng3d.flip img{ transform:scaleX(-1); }
.eng3d.catch{ transform:translateY(-6px) scale(1.05) rotate(-3deg); }
.eng3d.place{ transform:translateY(3px) rotate(4deg); }
.eng3d.point{ transform:scale(1.03) rotate(-4deg); }
.eng3d.wave{ animation:eng3dWave .45s ease-in-out 4 alternate; }
@keyframes eng3dWave{ from{ transform:rotate(-5deg); } to{ transform:rotate(5deg) translateY(-3px); } }
.eng3d .helm3d, .eng3d .jet3d{ display:none; }
.eng3d.space .helm3d{ display:block; position:absolute; left:9%; top:-4%; width:76%; aspect-ratio:1; border-radius:50%; border:3px solid rgba(255,255,255,.9);
  background:radial-gradient(circle at 35% 28%, rgba(255,255,255,.45), rgba(190,235,255,.14) 42%, rgba(190,235,255,.06) 70%);
  box-shadow:inset 0 0 18px rgba(120,210,255,.4), 0 0 18px rgba(120,210,255,.45); }
.eng3d.space .jet3d{ display:flex; justify-content:space-around; position:absolute; left:10%; right:14%; bottom:-11%; height:12%; }
.eng3d.space .jet3d b{ width:22%; height:100%; background:linear-gradient(#fff6b0, #ffb43c 45%, rgba(255,90,42,0)); clip-path:polygon(0 0, 100% 0, 50% 100%);
  transform-origin:50% 0; animation:flame .18s ease-in-out infinite alternate; }
.face3d{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; display:block; }
@media (prefers-reduced-motion:reduce){ .eng3d.wave{ animation:none; } }