/* A short first-visit arrival and a fictional retro pixel companion. */
.startup-screen[hidden] { display: none; }
.startup-screen {
  position: fixed; inset: 0; z-index: 500; display: grid; place-items: center;
  padding: 1.5rem; color: #e5f4ff; background: #101b2b;
  background-image: radial-gradient(ellipse at center,#45627b55,transparent 65%),linear-gradient(#91bfe410 1px,transparent 1px),linear-gradient(90deg,#91bfe410 1px,transparent 1px);
  background-size: 100% 100%,48px 48px,48px 48px;
  transition: opacity .22s ease;
}
.startup-console { display: grid; justify-items: center; gap: 1rem; text-align: center; }
.startup-mark { position: relative; display: grid; place-items: center; width: 12.5rem; height: 9.375rem; }
.startup-mark img { width: 7rem; height: 5.5rem; object-fit: contain; filter: drop-shadow(0 0 8px #91d3ff66); }
.startup-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.startup-wire { stroke: #80b8e860; stroke-width: 1.5; }
.startup-current { stroke: #d1f4ff; stroke-width: 2.5; stroke-dasharray: 75 550; filter: drop-shadow(0 0 5px #86cfff); animation: startup-trace 1.5s linear infinite; }
@keyframes startup-trace { to { stroke-dashoffset: -625; } }
.personal-edition .startup-status { font-size: .875rem; }
#skip-startup { min-height: 2.75rem; padding: .6rem .85rem; color: #e5f4ff; background: #23354c; border: 1px solid #92b9d7; border-radius: 2px; font: inherit; font-size: .875rem; cursor: pointer; }
.personal-edition #skip-startup:focus-visible { outline-color: #d1f4ff; }
.startup-screen.is-leaving { opacity: 0; pointer-events: none; }
html.startup-active { overflow: hidden; }
html.startup-active body > :is(.app-bar,.app-dock,main,footer,.skip-link) { visibility: hidden; }
.personal-edition main > #home .intro-content { grid-template-columns: minmax(0,1fr) 10rem; }
.intro-visuals { display: grid; justify-items: center; align-self: start; gap: .4rem; min-width: 0; }
.personal-edition .intro-visuals .portrait-frame { width: 8rem; max-width: 100%; }
.film-companion { display: block; width: 10rem; max-width: 100%; aspect-ratio: 1; margin: -.6rem 0 -1.2rem;
  padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; perspective: 650px; }
.film-orbit { display: block; width: 100%; height: 100%; transform-style: preserve-3d; animation: film-drift 7s ease-in-out infinite; }
.film-hologram { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 4px #81caff66); transition: filter .2s ease; }
.pixel-companion { margin: .25rem 0 0; perspective: none; }
@media (min-width: 40.001em) { .pixel-companion { width: 7.5rem; } }
.pixel-companion .film-hologram { image-rendering: pixelated; }
.pixel-companion .film-orbit { animation-name: pixel-drift; transform-style: flat; }
@keyframes pixel-drift {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-5px) rotate(2deg); }
}
@keyframes film-drift {
  0%,100% { transform: translateY(0) rotateY(-15deg) rotateZ(-2deg); }
  50% { transform: translateY(-6px) rotateY(15deg) rotateZ(2deg); }
}
.film-companion:is(.is-charged,:focus-visible) .film-hologram { filter: brightness(1.2) drop-shadow(0 0 10px #81caffaa); }
.grid-paused .film-orbit,.film-offscreen .film-orbit { animation-play-state: paused; }
html:is(.project-modal-open,.room-modal-open,.startup-active) .film-orbit { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) { .film-companion:hover .film-hologram { filter: brightness(1.2) drop-shadow(0 0 10px #81caffaa); } }
@media (max-width: 40em) {
  .personal-edition main > #home .intro-content { grid-template-columns: minmax(0,1fr) 5.5rem; gap: .65rem; }
  .personal-edition .intro-visuals .portrait-frame { width: 4.5rem; }
  .film-companion { width: 5.5rem; margin: 0; }
  .film-orbit { animation-name: film-drift-mobile; }
  .pixel-companion .film-orbit { animation-name: film-drift-mobile; }
  @keyframes film-drift-mobile { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
}
@media (prefers-reduced-motion: reduce) {
  .film-orbit,.startup-current { animation: none; }
  .film-hologram,.startup-screen { transition: none; }
}
/* Clip the lower locs at the window edge so the single visitor peeks from behind it. */
.has-scroll-companion .personal-edition main { margin-top: 5.5rem; row-gap: 5rem; }
.film-companion.scroll-companion {
  position: absolute; left: 1rem; right: auto; bottom: 100%; z-index: 0;
  width: 6rem; height: 4.5rem; max-width: none; aspect-ratio: auto;
  margin: 0; overflow: hidden; border-radius: 0; perspective: none;
}
.scroll-companion .film-orbit { width: 6rem; height: 6rem; animation: none; }
.scroll-companion .film-hologram { transition: transform .34s cubic-bezier(.16,1,.3,1), filter .2s ease, opacity .28s ease-out; transform: translateY(0); }
.scroll-companion.is-ducking .film-hologram { transform: translateY(85%); opacity: 0; }
.scroll-companion.is-ducking .film-hologram { transition-duration: .14s, .2s, .14s; transition-timing-function: ease-in, ease, ease-in; }
.scroll-companion.is-moving.is-ducking .film-hologram { transition-duration: .24s, .2s, .22s; }
.scroll-companion.is-talking:not(.is-ducking) .film-hologram { transform: translateY(-15%); }
.scroll-companion:focus-visible { outline: 2px dashed var(--ink); outline-offset: 3px; }
html:is(.project-modal-open,.room-modal-open,.startup-active) .scroll-companion { visibility: hidden; pointer-events: none; }
@media (max-width: 40em) {
  .has-scroll-companion .personal-edition main { margin-top: 4.5rem; row-gap: 3.75rem; }
  .film-companion.scroll-companion { left: .75rem; width: 4.5rem; height: 3.375rem; }
  .scroll-companion .film-orbit { width: 4.5rem; height: 4.5rem; }
}
.grid-paused .scroll-companion .film-hologram { transition: none; }
/* The same visitor enters the native dialog layer; no duplicate heads. */
html:is(.project-modal-open,.room-modal-open) dialog[open] .scroll-companion { visibility: visible; pointer-events: auto; }
.has-scroll-companion .projects-dialog .project-tree { padding-top: 4.75rem; row-gap: 5rem; }
.has-scroll-companion .personal-edition #room-dialog.room-dialog {
  overflow: visible;
}
.has-scroll-companion .room-dialog .room-cabinet { overflow: hidden; border-radius: inherit; }
.room-dialog > .film-companion.scroll-companion { top: auto; bottom: 100%; left: 1.25rem; width: 4.5rem; height: 3.375rem; }
.room-dialog > .scroll-companion .film-orbit { width: 4.5rem; height: 4.5rem; }
dialog .companion-pulse { animation: companion-card-pulse .7s ease-out; }
@keyframes companion-card-pulse {
  0%,100% { filter: brightness(1); }
  35% { filter: brightness(1.15) drop-shadow(0 0 7px #81caff88); }
}
@media (max-width: 40em) {
  .has-scroll-companion .projects-dialog .project-tree { padding-top: 3.75rem; row-gap: 4rem; }
}
.grid-paused dialog .companion-pulse { animation: none; }
@media (prefers-reduced-motion: reduce) { dialog .companion-pulse { animation: none; } }
@media (prefers-reduced-motion: reduce) { .scroll-companion .film-hologram { transition: none; } }
@media print { .startup-screen,.film-companion { display: none !important; } }
.companion-speech {
  position: fixed; z-index: 1000; box-sizing: border-box; width: 16.25rem;
  padding: .7rem .85rem; color: var(--ink, #1e2c3d); background: var(--paper, #dbe6f0);
  border: 1px solid #8dc5ed; border-radius: 2px;
  box-shadow: 3px 3px 0 #15223766, inset 1px 1px 0 #ffffff70, 0 0 12px #81caff30;
  font-family: inherit; font-size: .8125rem; line-height: 1.5; overflow-wrap: break-word;
}
.companion-speech[hidden] { display: none; }
.companion-speech::before { content: ''; position: absolute; left: -6px; top: 14px;
  width: 9px; height: 9px; background: inherit; border-left: 1px solid #8dc5ed; border-bottom: 1px solid #8dc5ed; transform: rotate(45deg); }
.companion-speech.speech-below::before { left: 18px; top: -6px; transform: rotate(135deg); }
.scroll-companion.is-charged .film-orbit { animation: companion-hello .45s ease-out; }
@keyframes companion-hello { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-5px); } }
.grid-paused .scroll-companion.is-charged .film-orbit { animation: none; }
@media (prefers-reduced-motion: reduce) { .scroll-companion.is-charged .film-orbit { animation: none; } }
@media print { .companion-speech { display: none !important; } }