/* The opening animation (the PanScience Innovations mark drawing itself), the full-screen home (the office with no chrome), the glowing dot that
   opens the navigation, and the floating controls on top of the office. */

/* ---- intro ---- */
.intro { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; overflow: hidden; background: #f4f2ef; color: #1c1c1c; cursor: pointer; }
.intro-mark-faint { position: absolute; right: -6vmin; bottom: -14vmin; height: 110vmin; color: rgba(28, 28, 28, .05); opacity: 0; animation: pi-fade 1.4s .2s ease-out forwards; }
.intro-mark-faint svg { height: 100%; width: auto; display: block; }
.intro-stage { position: relative; display: flex; flex-direction: column; align-items: center; transition: transform .8s cubic-bezier(.6, 0, .4, 1), opacity .6s ease .1s; }
.intro-logo { height: min(38vmin, 300px); width: auto; overflow: visible; }
.il-fill path { fill: #0d0d0d; }
.il-fill { opacity: 0; animation: pi-fade .7s 1.05s ease-out forwards; }
.il-line path { fill: none; stroke: #0d0d0d; stroke-width: 10; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: pi-draw 1.2s .15s cubic-bezier(.6, 0, .3, 1) forwards; }
.intro-title { margin: min(5vmin, 38px) 0 0; font: 600 clamp(28px, 5.6vmin, 56px)/1 system-ui, -apple-system, "Helvetica Neue", sans-serif; letter-spacing: .04em; color: #1c1c1c; opacity: 0; transform: translateY(10px); animation: pi-rise .8s 1.3s cubic-bezier(.2, .8, .2, 1) forwards; }
.intro-word { display: block; height: clamp(34px, 7.4vmin, 74px); width: auto; margin: 0 auto; color: #0d0d0d; }
.intro-sub { margin: 1.4vmin 0 0; font: 500 clamp(12px, 1.7vmin, 17px)/1.4 system-ui, sans-serif; letter-spacing: .02em; color: #8a867f; opacity: 0; animation: pi-fade .7s 1.8s ease-out forwards; }
.intro-skip { position: absolute; right: 22px; bottom: 20px; padding: 6px 14px; border-radius: 99px; border: 1px solid rgba(28, 28, 28, .25); background: transparent; color: rgba(28, 28, 28, .6); font: 600 12px/1.4 system-ui, sans-serif; }
.intro.out { opacity: 0; transition: opacity .7s ease .1s; pointer-events: none; }
.intro.out .intro-stage { transform: scale(1.06); }
.intro.calm * { animation-duration: .01s !important; animation-delay: 0s !important; }
.intro.calm .intro-stage { transition: none; }
@keyframes pi-draw { to { stroke-dashoffset: 0; } }
@keyframes pi-fade { to { opacity: 1; } }
@keyframes pi-rise { to { opacity: 1; transform: none; } }
html.arrive .home .o-room { animation: arrive 1.1s cubic-bezier(.2, .8, .2, 1); }
@keyframes arrive { from { transform: translate(-50%, -50%) scale(1.08); filter: brightness(.6) blur(3px); } to { transform: translate(-50%, -50%) scale(1); filter: none; } }

/* ---- the full-screen home ---- */
html.immersive body { overflow: hidden; }
html.immersive .app { display: block; }
html.immersive .view { padding: 0; max-width: none; }
html.immersive .side { position: fixed; z-index: 80; left: 0; top: 0; width: 260px; transform: translateX(-105%); transition: transform .45s cubic-bezier(.3, 1, .35, 1); box-shadow: 20px 0 50px rgba(0, 0, 0, .4); }
html.immersive .top { position: fixed; z-index: 79; left: 0; right: 0; top: 0; padding-left: 280px; transform: translateY(-110%); transition: transform .45s cubic-bezier(.3, 1, .35, 1); }
html.immersive.nav-open .side, html.immersive.nav-open .top { transform: none; }
.nav-scrim { position: fixed; inset: 0; z-index: 78; background: rgba(5, 4, 20, .35); opacity: 0; pointer-events: none; transition: opacity .35s; }
html.immersive.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
.nav-dot { display: none; position: fixed; z-index: 90; left: 50%; top: 14px; width: 30px; height: 30px; margin-left: -15px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.nav-dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #c9b8ff 45%, #8b7bff); box-shadow: 0 0 10px 2px rgba(180, 156, 255, .9), 0 0 24px 6px rgba(139, 123, 255, .45); animation: dot-glow 2.4s ease-in-out infinite; transition: transform .3s; }
.nav-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(201, 184, 255, .7); opacity: 0; animation: dot-ring 2.4s ease-out infinite; }
.nav-dot:hover::before { transform: scale(1.3); }
.nav-dot:focus-visible { outline: 2px solid #c9b8ff; outline-offset: 3px; }
html.immersive .nav-dot { display: block; }
html.immersive.nav-open .nav-dot { left: 270px; margin-left: 0; }
html.immersive.nav-open .nav-dot::before { transform: scale(.8); }
@keyframes dot-glow { 0%, 100% { box-shadow: 0 0 8px 2px rgba(180, 156, 255, .8), 0 0 20px 5px rgba(139, 123, 255, .35); } 50% { box-shadow: 0 0 14px 4px rgba(200, 180, 255, 1), 0 0 34px 10px rgba(139, 123, 255, .55); } }
@keyframes dot-ring { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }

.home { position: fixed; inset: 0; overflow: hidden; background: linear-gradient(180deg, #e4d9fb 0 37%, #efcdae 37%); }
.home .office, .home #home-office { position: absolute; inset: 0; }
.home .o-room { position: absolute; left: 50%; top: 50%; width: max(100vw, calc(100vh * 16 / 9.6)); transform: translate(-50%, -50%); border-radius: 0; box-shadow: none; }
.home .o-caption { bottom: 2.5%; }
@media (max-aspect-ratio: 1/1) {
  /* Portrait phones: the room keeps its height and can be panned sideways. */
  .home { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .home .office, .home #home-office { position: relative; inset: auto; height: 100%; width: max-content; }
  .home .o-room { position: relative; left: 0; top: 0; transform: none; height: 100vh; width: calc(100vh * 16 / 9.6); }
  html.arrive .home .o-room { animation: none; }
}

/* ---- floating controls on the home ---- */
.hud { position: fixed; z-index: 60; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-radius: 99px; background: rgba(24, 18, 52, .72); color: #fff; backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(10, 5, 30, .35); font: 600 13px/1.3 ui-sans-serif, system-ui, sans-serif; }
.hud-status { left: 16px; bottom: 16px; max-width: min(46vw, 520px); }
.hud-status .live-dot { width: 8px; height: 8px; border-radius: 50%; background: #9aa3c4; flex: none; }
.hud-status.on .live-dot { background: #2fd27c; animation: ping 1.6s infinite; }
.hud-status span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-demo { right: 16px; bottom: 16px; padding: 6px; }
.demo-ctl { display: flex; align-items: center; gap: 6px; }
.demo-ctl button { border: 0; border-radius: 99px; padding: 7px 12px; background: rgba(255, 255, 255, .12); color: #fff; font: 700 13px/1 ui-sans-serif, system-ui, sans-serif; }
.demo-ctl button:hover { background: rgba(255, 255, 255, .22); }
.demo-ctl button.go { background: linear-gradient(135deg, #8b7bff, #ff8fb8); padding: 9px 16px; box-shadow: 0 6px 18px rgba(139, 123, 255, .45); }
.demo-ctl button[aria-pressed="true"] { background: #fff; color: #2a2140; }
.demo-bar { width: 120px; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.demo-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #8b7bff, #ff8fb8); transition: width .1s linear; }
.office-bar .demo-ctl button { background: var(--panel2); border: 1px solid var(--line2); }
.office-bar .demo-ctl button.go { border: 0; }
.office-bar .demo-ctl button[aria-pressed="true"] { background: #fff; color: #2a2140; }
.office-bar .demo-bar { background: var(--bg2); border: 1px solid var(--line); }
@media (max-width: 860px) {
  .hud-status { display: none; }
  .hud-demo { left: 50%; right: auto; transform: translateX(-50%); }
  .demo-bar { width: 70px; }
  html.immersive .side { width: 260px; }
  html.immersive .top { padding-left: 16px; }
  html.immersive.nav-open .nav-dot { left: auto; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-dot::before, .nav-dot::after { animation: none; }
  html.immersive .side, html.immersive .top { transition: none; }
}