/* Page shell: the fixed header (desktop bar, dropdowns, phone bar), the phone menu, what sits inside the
   contact and watch dialogs, the sound toggle and the toast. Buttons, frames, type, the dialog shell and
   the fixed layers come from site.css; this file places and sizes them.
   The full desktop bar needs about 860px with our labels, so the phone bar runs below 1024. */

/* Header: fixed 12px from the top; the bar is the page container's width */
.hdr {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
  padding-top: 12px;
}
.hdr-bar {
  --bw: 4px;
  --pb-color: var(--stone-700);
  --pb-fill: var(--surface);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px;
}
.hdr-left {
  display: none;
  align-items: center;
  gap: 8px;
}
.hdr-li {
  position: relative;
  display: flex;
}
.hdr-trig .pbtn-face {
  gap: 4px; /* label to chevron */
}
.hdr-chev {
  width: 12px;
  height: 12px;
}
.hdr-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hdr-talk {
  display: none;
}
@media (min-width: 1024px) {
  .hdr-bar {
    justify-content: space-between;
  }
  .hdr-left {
    display: flex;
  }
  .hdr-talk {
    display: inline-flex;
  }
  .hdr-menu {
    display: none;
  }
}

/* Logo: left on the phone bar; between the groups from 1024; centred on the bar from 1280, once the
   left group clears the middle. Three dithered frames are stacked: the idle shimmer shows the two
   shifted frames for 120ms each at the end of every 3.6s, and hover swaps in the lit frame. */
.hdr-logo {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 37px;
  height: 32px;
  transform: translateY(-50%);
}
@media (min-width: 1024px) {
  .hdr-logo {
    position: relative;
    top: auto;
    left: auto;
    flex: none;
    transform: none;
  }
}
@media (min-width: 1280px) {
  .hdr-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.hdr-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.hdr-logo-f1,
.hdr-logo-f2,
.hdr-logo-lit {
  opacity: 0;
}
.hdr-logo-f {
  animation: 3.6s steps(1, end) infinite;
}
.hdr-logo-f0 { animation-name: hdr-logo-f0; }
.hdr-logo-f1 { animation-name: hdr-logo-f1; }
.hdr-logo-f2 { animation-name: hdr-logo-f2; }
@keyframes hdr-logo-f0 {
  0% { opacity: 1; }
  93.33%, 100% { opacity: 0; }
}
@keyframes hdr-logo-f1 {
  0% { opacity: 0; }
  93.33% { opacity: 1; }
  96.67%, 100% { opacity: 0; }
}
@keyframes hdr-logo-f2 {
  0% { opacity: 0; }
  96.67%, 100% { opacity: 1; }
}
@media (hover: hover) {
  .hdr-logo:hover .hdr-logo-f {
    visibility: hidden;
  }
  .hdr-logo:hover .hdr-logo-lit {
    opacity: 1;
  }
}

/* Dropdown: hangs from its trigger's item, 8px left of it. The 16px top padding bridges trigger and
   panel for the pointer (the frame starts 4px under the bar). It stays mounted so closing animates;
   hidden, it cannot be focused or hit. The narrow item makes it shrink to fit: 160px minimum, and
   two-word labels may wrap. */
.hdr-dd {
  position: absolute;
  top: 100%;
  left: -8px;
  z-index: 99;
  min-width: 160px;
  padding-top: 16px;
  visibility: hidden;
  opacity: 0;
  transform: scale(.95);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 0s linear 200ms;
}
.hdr-dd.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 0s;
}
.hdr-dd-frame,
.mm-frame {
  position: relative;
  padding: 12px;
}
.hdr-dd-frame > .pframe,
.mm-frame > .pframe {
  color: #fff;
}
.hdr-dd-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: #fff;
}
.hdr-dd-list > li + li::before {
  content: "";
  display: block;
  height: 4px;
  margin-bottom: 16px;
  background: var(--stone-300);
}
.hdr-dd .pbtn-face,
.mm-row .pbtn-face {
  justify-content: flex-start;
  text-align: left;
}

/* Phone menu: opens instantly over the blurred page (which keeps its scroll). The card's top row stays
   put and the list scrolls. Rows are block-level, so a row's 8px and a rule's 16px margins collapse. */
.mm {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  padding: 16px;
  background: rgba(22, 18, 15, .5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.mm.is-open {
  display: block;
}
@media (min-width: 1024px) {
  .mm.is-open {
    display: none;
  }
}
.mm-frame {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.mm-card {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  background: #fff;
  color: var(--surface);
}
.mm-top {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px;
}
.mm-nav {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 16px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mm-row {
  margin-bottom: 8px;
}
.mm-sub {
  width: calc(100% - 8px);
  margin-left: 8px;
}
.mm-label {
  display: block;
  padding: 12px 8px;
  color: var(--text-3);
}
.mm-rule {
  display: block;
  height: 4px;
  margin: 16px 0;
  background: var(--stone-300);
}

/* On the white card a white bracket would vanish: the copper button there takes the light-surface
   bracket, as every dialog button does in site.css. */
.mm-card .pbtn {
  --pbtn-bracket: rgba(32, 28, 25, .4);
}

/* Dialog contents. The head row shares the CLOSE button's 40px line, 16px from the panel top. */
.dlg-head {
  display: flex;
  align-items: center;
  min-height: 40px;
  margin-top: -8px;
  padding-right: 112px;
}
.dlg-line {
  margin-top: 16px;
  color: var(--stone-600);
}
.dlg-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.dlg-mail {
  margin-top: 24px;
  color: var(--stone-600);
}
.dlg-addr {
  color: var(--surface);
  -webkit-user-select: all;
  user-select: all;
}
.dlg-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}
.dlg-tab {
  padding: 8px 0;
  color: var(--stone-500);
}
.dlg-tab.is-on {
  color: var(--accent);
}
@media (hover: hover) {
  .dlg-tab:not(.is-on):hover {
    color: var(--surface);
  }
}
.dlg-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.dlg-dot {
  color: var(--stone-400);
}
.dlg-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-top: 16px;
  overflow: hidden;
  background: var(--page);
  container-type: size; /* the film sizes its 1920x1080 stage in cq units */
}
.dlg-stage > * {
  position: absolute; /* the imported film fills the box, with or without a wrapper element */
  inset: 0;
}
/* the sample tag sits in the corner (the rule above would stretch its dark plate over the film) */
.dlg-stage > .feat-sample {
  inset: 10px 10px auto auto;
}
/* live views are laid out at 1280x720 and scaled to the stage width (--k is set by script) */
.dlg-stage > .dlg-live {
  right: auto;
  bottom: auto;
  width: 1280px;
  height: 720px;
  overflow: hidden;
  background: var(--page);
  transform: scale(var(--k, 1));
  transform-origin: 0 0;
}
/* how far through the current film the tour is; holds while the pointer is over the stage */
.dlg-prog {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;
}
.dlg-prog i {
  position: relative;
  height: 3px;
  overflow: hidden;
  background: var(--stone-300);
}
.dlg-prog i.is-done {
  background: var(--accent);
}
.dlg-prog i.is-on::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: 0 50%;
  animation: dlg-prog 14s linear forwards;
}
.dlg-prog.is-paused i.is-on::after {
  animation-play-state: paused;
}
@keyframes dlg-prog {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .dlg-prog i.is-on::after { animation: none; }
}
.dlg-cap {
  margin: 12px 0 0;
  max-width: 70ch;
  color: var(--stone-600);
}
.dlg-cap-name {
  display: none;
  font-weight: 400;
  color: var(--accent);
}
/* phones: the tabs show their numbers in one row, the caption names the film, the tag is short */
@media (max-width: 639px) {
  .dlg-tab-name,
  .dlg-dot,
  .dlg-tag-more {
    display: none;
  }
  .dlg-tabs {
    gap: 4px 16px;
  }
  .dlg-cap-name {
    display: inline;
  }
}

/* Sound toggle: bottom left from 1024 (the only place sound can be controlled, so sound is off below) */
.snd {
  position: fixed;
  bottom: 24px;
  left: 32px;
  z-index: 100;
  display: none;
}
@media (min-width: 1024px) {
  .snd {
    display: inline-flex;
  }
}
.snd .pbtn-face {
  font-size: var(--fs-cap-lg);
}
.snd-lbl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.snd-ico {
  width: 16px;
  height: 16px;
}

/* Toast: always rendered (display beats the popover's hidden default), so its live region exists before
   the text arrives; invisible and click-through until .is-on. It is a manual popover, shown while on so
   it sits above an open dialog or the phone menu; these resets undo the popover's default box. */
.toast {
  top: auto;
  left: auto;
  display: block;
  height: auto;
  margin: 0;
  border: 0;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
}
.toast.is-on {
  opacity: 1;
  pointer-events: auto;
}
.toast-text {
  position: relative;
}

#main-content:focus {
  outline: none; /* focused by the skip link only to move the reading position */
}

/* Reduced motion: no logo shimmer, no dropdown zoom */
@media (prefers-reduced-motion: reduce) {
  .hdr-logo-f {
    animation: none;
  }
  .hdr-dd,
  .hdr-dd.is-open {
    transform: none;
    transition: none;
  }
}

/* Pixel cursor drawn by the page (Main adds html.cur-sprite-on on mouse devices). The system cursor
   is hidden only while it runs: Chrome re-applied the image cursors every time the moving page
   redrew, which flashed the system arrow; a hidden cursor has nothing to flash. The standalone
   section boards keep the plain CSS cursors from site.css. */
.cur-sprite {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483647;
  display: none;
  width: 32px;
  height: 32px;
  max-width: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  image-rendering: pixelated;
  will-change: transform;
}
html.cur-sprite-on .cur-sprite {
  display: block;
}
html.cur-sprite-on .cur-sprite.is-out {
  visibility: hidden;
}
html.cur-sprite-on,
html.cur-sprite-on body,
html.cur-sprite-on .il,
html.cur-sprite-on .il * {
  cursor: none !important;
}

/* five clicks on the logo: the company walks across the bottom of the screen, flags out */
.egg-parade {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  height: 64px;
  overflow: hidden;
  pointer-events: none;
}
.egg-parade .bot {
  position: absolute;
  left: -64px;
  bottom: 6px;
  animation: bot-4 0.44s steps(4) infinite, egg-walk 11s linear forwards;
}
.egg-parade .bot--flag {
  animation: bot-3 0.6s steps(3) infinite, egg-walk 11s linear forwards;
}
.egg-parade .bot--lantern {
  animation: bot-2 0.8s steps(2) infinite, egg-walk 11s linear forwards;
}
.egg-parade .bot--carry {
  animation: bot-4 0.44s steps(4) infinite, egg-walk 11s linear forwards;
  background-position-y: calc(var(--s) * -1);
}
.egg-parade .bot:nth-child(2) { animation-delay: 0s, 0.45s; }
.egg-parade .bot:nth-child(3) { animation-delay: 0s, 0.9s; }
.egg-parade .bot:nth-child(4) { animation-delay: 0s, 1.35s; }
.egg-parade .bot:nth-child(5) { animation-delay: 0s, 1.8s; }
.egg-parade .bot:nth-child(6) { animation-delay: 0s, 2.25s; }
.egg-parade .bot:nth-child(7) { animation-delay: 0s, 2.7s; }
.egg-parade .bot:nth-child(8) { animation-delay: 0s, 3.15s; }
.egg-parade .bot:nth-child(9) { animation-delay: 0s, 3.6s; }
.egg-parade .bot:nth-child(10) { animation-delay: 0s, 4.05s; }
.egg-parade .bot:nth-child(11) { animation-delay: 0s, 4.5s; }
.egg-parade .bot:nth-child(12) { animation-delay: 0s, 4.95s; }
@keyframes egg-walk {
  to { transform: translateX(calc(100vw + 128px)); }
}