/* intro.<home>: the tour. The windows are viha's own (style.css); this is the stage they play on, the captions over
   it, the taskbar and the scroller under it, the pointer, and how one setup turns into the next (intro.js). */

.intro { --cap: 8.5rem; --bar: 2.75rem; --scroll: 3.25rem; }

/* Without JavaScript the last chapter is the page: its window in the middle, the caption over it */
.intro-stage { position: relative; z-index: 1; display: grid; place-items: center; min-height: 100svh; padding: var(--cap) 1rem 2rem; }
html:not(.js) .taskbar, html:not(.js) .scroller, html:not(.js) .intro-cursor, html:not(.js) .cap-n { display: none; }

/* With it, a stage between the captions and the taskbar that never scrolls: the camera (intro.js) moves the shot */
.js .intro { overflow: hidden; }
.js .intro-stage { position: fixed; left: 0; right: 0; top: var(--cap); bottom: var(--bar); display: block; min-height: 0; padding: 0; }
.js .shot { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: center; align-items: flex-start; gap: 1.25rem; padding: 0 1rem; will-change: translate; }
.shot.shot-enter { bottom: 0; align-items: center; }
.shot-enter .enter-go { margin: 0; }
/* Until the tour starts (and should its script never run, after a moment all the same) */
.js .intro:not(.on) .intro-stage { visibility: hidden; animation: seen 0s 3s forwards; }

/* The captions: which chapter, its name and what it shows, on the page's own ground */
.intro-cap {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 3;
  height: var(--cap);
  padding: .9rem 1rem 0;
  text-align: center;
  color: var(--page-ink);
  pointer-events: none;
  /* (the page's own ground, pattern and all, over a window too tall for the stage, fading out at its foot) */
  background: var(--page) var(--page-art) 0 0 / 14px 14px;
  mask-image: linear-gradient(#000 88%, transparent);
}
.intro-cap p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-n { font-size: 1.0625rem; letter-spacing: .3em; opacity: .65; }
.cap-t { min-height: 1em; font-size: clamp(2rem, 6vw, 2.75rem); line-height: 1; letter-spacing: .06em; text-transform: uppercase; }
.cap-t.caret::after { content: "_"; animation: blink .6s steps(1) infinite; }
.cap-s { max-width: 44rem; margin: .2rem auto 0 !important; font-size: 1.25rem; opacity: .85; white-space: normal !important; text-wrap: balance; }
.cap-x { min-height: 1.2em; margin-top: .15rem !important; font-size: 1.25rem; letter-spacing: .12em; text-transform: uppercase; }
@keyframes blink { 50% { opacity: 0; } }

/* The taskbar, as Windows 95 has it: a button for each chapter, the one playing pressed in (and how far it has got
   along its foot), and a tray at the end for sound, pause, the start again, the language and the time */
.taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--bar);
  padding: 4px 4px 3px;
  background: var(--face);
  color: var(--ink);
  border-top: 1px solid var(--mid);
  box-shadow: inset 0 1px 0 var(--hi);
}
.tasks { display: flex; flex: 1 1 auto; gap: 3px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.tasks li { flex: 0 1 10.5rem; min-width: 0; }
.task {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: calc(var(--bar) - 9px);
  padding: 0 7px;
  overflow: hidden;
  background: var(--face);
  color: var(--ink);
  border: 2px solid;
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow: inset -1px -1px 0 var(--shade), inset 1px 1px 0 var(--mid);
  font: inherit;
  font-size: 1.125rem;
  text-align: left;
  cursor: pointer;
}
.task[aria-current] {
  border-color: var(--lo) var(--hi) var(--hi) var(--lo);
  box-shadow: inset 1px 1px 0 var(--shade);
  background: repeating-conic-gradient(var(--hi) 0 25%, var(--face) 0 50%) 0 0 / 2px 2px;
}
.task:focus-visible { outline: 1px dotted var(--ink); outline-offset: -5px; }
.task-icon { flex: none; line-height: 0; }
.task-icon .px, .tray .px { width: 16px; height: 16px; }
.task-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-n { display: none; }
.task-done { position: absolute; left: 2px; bottom: 1px; width: calc((100% - 4px) * var(--done, 0)); height: 2px; background: var(--ink); }
.task:not([aria-current]) .task-done { display: none; }

.tray {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
  height: calc(var(--bar) - 9px);
  padding: 0 8px 0 4px;
  border: 1px solid;
  border-color: var(--shade) var(--hi) var(--hi) var(--shade);
  font-size: 1.125rem;
}
.tray-btn { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; background: none; border: 0; color: var(--ink); cursor: pointer; }
.tray-btn:focus-visible { outline: 1px dotted var(--ink); outline-offset: -2px; }
.tray-btn:active { padding: 1px 0 0 1px; }
#intro-pause .i-play, .paused #intro-pause .i-pause, #intro-sound .i-sound, #intro-sound[aria-pressed="true"] .i-muted { display: none; }
.paused #intro-pause .i-play, #intro-sound[aria-pressed="true"] .i-sound { display: block; }
.tray .lang { margin: 0 4px; }
.tray-clock { min-width: 4ch; text-align: right; color: var(--ink); }

@media (max-width: 52rem) {
  .tasks li { flex: 1 1 0; }
  .task { justify-content: center; gap: 4px; padding: 0 2px; }
  .task-name { display: none; }
  .task-n { display: inline; }
}
@media (max-width: 30rem) {
  .task-icon { display: none; }
  .tray-clock { display: none; }
}

/* A sine scroller over the taskbar, as every intro had, behind the windows */
.scroller { position: fixed; left: 0; bottom: var(--bar); z-index: 0; display: block; width: 100%; height: var(--scroll); pointer-events: none; }

/* Short screens keep the window and drop the frills */
@media (max-height: 40rem) {
  .intro { --cap: 5rem; --scroll: 0rem; }
  .cap-s, .cap-n { display: none; }
  .scroller { display: none; }
}
@media (max-width: 34rem) {
  .intro { --cap: 7.5rem; }
  .cap-s { font-size: 1.125rem; }
  .js .shot { padding: 0 .5rem; }
}

/* The pointer that does the clicking */
.intro-cursor { position: fixed; left: 0; top: 0; z-index: 10; line-height: 0; pointer-events: none; opacity: 0; transition: opacity .3s; view-transition-name: cursor; }
.intro-cursor.on { opacity: 1; }
.intro-cursor svg { display: block; filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, .35)); transform-origin: 0 0; transition: transform .08s; }
.intro-cursor.click svg { transform: scale(.82); }

/* Windows 95 opening a window: outlines from the taskbar to where it opens */
.zoom-rect { position: fixed; z-index: 9; border: 2px solid var(--page-ink); pointer-events: none; }

/* What the tour does in the windows: a field being typed in, a button pressed, a chapter's tab picked, a row lit */
.intro .typing { box-shadow: inset 1px 1px 0 var(--lo), 0 0 0 1px var(--ink); }
/* (what a chapter shows one by one waits in its place, unseen; text typed in keeps the room it will take) */
.shot .wait, .ghost { visibility: hidden; }
.kbtn.down { border-color: var(--lo) var(--hi) var(--hi) var(--lo); box-shadow: inset 1px 1px 0 var(--shade); padding: 4px 11px 2px 13px; }
.kbtn.primary.down { box-shadow: 0 0 0 1px var(--ring), inset 1px 1px 0 var(--shade); }
.check.down span::before { box-shadow: inset 1px 1px 0 var(--lo), 0 0 0 1px var(--ink); }
.name-row.lit { background: var(--sel); }
.name-row.lit > .name-addr { color: var(--sel-ink); }
.shot .aka.lit .aka-names { color: var(--panel-hi); text-decoration: underline; text-underline-offset: .2em; }

/* The logo printing a row at a time, and the picture loading line by line, as on a modem */
.printing .banner-fx { animation: print .8s steps(22) both; }
.loading .pic-fx, .loading .avatar { animation: print 1s steps(16) both; }
@keyframes print { from { clip-path: inset(0 0 100% 0); } }

/* The dashboard and the page beside it, as on a wide screen; narrower, the dashboard alone */
.shot-desk .desk-win { flex: 0 1 46rem; width: auto; min-width: 0; }
.shot-desk .preview-win { flex: 0 0 min(31rem, 42%); width: auto; }
.shot-desk .pv-page { max-height: none; overflow: visible; }
@media (min-width: 70rem) { .shot-desk .preview-win { display: block; } }
@media (max-width: 69.99rem) { .shot-desk .desk-win { flex-basis: 100%; } }
/* (its save bar stays in its window, wherever the screen would put it on a phone) */
.intro .ed-bar { position: static; }
.intro .ed-save { position: static; flex-direction: row; padding: 0; background: none; border: 0; box-shadow: none; }

/* Paused: everything on the stage holds still */
.paused .shot, .paused .shot * { animation-play-state: paused !important; }

/* Moving from one setup to the next (intro.js, with view transitions). The window keeps its name from setup to
   setup, so it moves and changes size; its frame is drawn by the transition itself, so its edges stay sharp as it
   does, and its title bar, banner, body and status bar each go across on their own, cropped, never stretched. The
   dashboard comes in from the side when the page moves over beside it. */
html:not(.vt-flat) .shot .kg { view-transition-name: win; }
html:not(.vt-flat) .shot .kg-title { view-transition-name: win-title; }
html:not(.vt-flat) .shot .kg-banner { view-transition-name: win-banner; }
html:not(.vt-flat) .shot .kg-body { view-transition-name: win-body; }
html:not(.vt-flat) .shot .kg-status { view-transition-name: win-status; }
@media (min-width: 70rem) {
  html:not(.vt-flat) .shot-desk .desk-win { view-transition-name: desk; }
  html:not(.vt-flat) .shot-desk .desk-win :is(.kg-title, .kg-body, .kg-status) { view-transition-name: none; }
}

::view-transition-group(*) { animation-duration: .7s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
/* (the page behind goes on moving: no picture of it is taken) */
::view-transition-old(root) { display: none; }
::view-transition-new(root) { animation: none; }
::view-transition-group(win) {
  box-sizing: border-box;
  background: var(--face);
  border: 2px solid;
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow: inset -1px -1px 0 var(--shade), inset 1px 1px 0 var(--mid), 0 0 0 1px var(--ring), 0 1.5rem 4rem var(--drop);
}
::view-transition-old(win), ::view-transition-new(win) { animation: none; opacity: 0; }
::view-transition-old(win-title), ::view-transition-new(win-title),
::view-transition-old(win-banner), ::view-transition-new(win-banner),
::view-transition-old(win-body), ::view-transition-new(win-body),
::view-transition-old(win-status), ::view-transition-new(win-status) { width: 100%; height: 100%; object-fit: none; overflow: clip; }
::view-transition-old(win-title), ::view-transition-new(win-title),
::view-transition-old(win-status), ::view-transition-new(win-status) { object-position: 0 50%; }
::view-transition-old(win-body), ::view-transition-new(win-body) { object-position: 50% 0; }
::view-transition-old(*) { animation-duration: .35s; }
::view-transition-new(desk):only-child { animation: desk-in .7s cubic-bezier(.2, .8, .2, 1) both; }
::view-transition-old(desk):only-child { animation: desk-out .35s ease-in both; }
@keyframes desk-in { from { opacity: 0; transform: translateX(-4rem); } }
@keyframes desk-out { to { opacity: 0; transform: translateX(-4rem); } }
/* The pointer just goes on pointing */
::view-transition-group(cursor), ::view-transition-new(cursor) { animation: none; }
::view-transition-old(cursor) { display: none; }

/* A theme, or a page emptied for its enter screen, comes over the whole screen at once, dithered in as the pictures
   are: the new screen through a 4×4 Bayer mask that fills in a sixteenth at a time (intro.js steps it), 2 px a cell */
html.vt-flat::view-transition-old(root) { display: block; animation: none; }
html.vt-flat::view-transition-new(root) { mask-size: 8px 8px; mask-repeat: repeat; }