/* The hero: the turning panorama, the phone, its name plates (app units × --u, set by plates.js). */

:root { --plate: #FFFFFF; --plate-edge: #B8B8B8; --plate-ink: #111111; }
/* Same switch as site.css: the OS setting unless the theme button/picker forced light or dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --plate: #1C1C1E; --plate-edge: #48484A; --plate-ink: #FFFFFF; }
}
:root[data-theme="dark"] { --plate: #1C1C1E; --plate-edge: #48484A; --plate-ink: #FFFFFF; }
:root[data-theme="light"] { --plate: #FFFFFF; --plate-edge: #B8B8B8; --plate-ink: #111111; }

/* No pull-to-refresh or bounce at the top: a finger pulling down there turns the view (hero.js). */
html { overscroll-behavior-y: none; }

/* The hero stays put for three screens of scrolling, which turn it once round; then the page moves on. */
#hero-wrap { position: relative; background: var(--bg); height: 400vh; height: 400svh; }
#hero {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: #5f86b3; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; outline: none;
}
#hero:active { cursor: grabbing; }
#pano { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* The photo's bottom fades into the white download section below (under the phone, which stays crisp). */
#fade { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(40px, 8%, 100px); pointer-events: none;
  background: linear-gradient(transparent, var(--bg)); }
/* The shadow is a box-shadow on the rounded frame: drawn outside only, so the phone's own screen stays undimmed. */
#phone-frame { position: absolute; pointer-events: none; box-shadow: 0 12px 28px rgba(0, 0, 0, .35); }
#phone-frame svg { display: block; }
#phone-labels { position: absolute; overflow: hidden; pointer-events: none; font-family: "Roboto Condensed", "Arial Narrow", sans-serif; }

.lbl { position: absolute; left: 0; top: 0; will-change: transform; }
.lbl .post { position: absolute; left: calc(var(--u) * -3); top: calc(var(--u) * -46); width: calc(var(--u) * 6); height: calc(var(--u) * 46); background: #9AA0A6; }
.lbl .foot {
  position: absolute; left: calc(var(--u) * -7); top: calc(var(--u) * -7); width: calc(var(--u) * 14); height: calc(var(--u) * 14);
  border-radius: 50%; background: #F2F2F2; display: grid; place-items: center;
}
.lbl .foot::after { content: ""; width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-radius: 50%; background: #3A3A3A; }
.lbl .plate {
  position: absolute; left: calc(var(--u) * -150); top: calc(var(--u) * -130); width: calc(var(--u) * 300); height: calc(var(--u) * 84);
  border-radius: calc(var(--u) * 6); background: var(--plate); color: var(--plate-ink);
  box-shadow: 0 0 0 calc(var(--u) * 1.5) var(--plate-edge);
}
.lbl .icon { position: absolute; left: calc(var(--u) * 7); top: calc(var(--u) * 7); width: calc(var(--u) * 28); height: calc(var(--u) * 28); }
.lbl .icon svg { display: block; width: 100%; height: 100%; }
.lbl .name {
  position: absolute; left: calc(var(--u) * 39); right: calc(var(--u) * 39); top: calc(var(--u) * 6); height: calc(var(--u) * 36);
  line-height: calc(var(--u) * 36); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 700; font-size: calc(var(--u) * 27); /* one size; a name too long ends with "…", as in the app */
}
.lbl .solo .name { top: 0; height: calc(var(--u) * 84); line-height: calc(var(--u) * 84); }
.lbl .alt {
  position: absolute; left: calc(var(--u) * 39); right: calc(var(--u) * 39); bottom: calc(var(--u) * 6); height: calc(var(--u) * 36);
  line-height: calc(var(--u) * 36); text-align: center; white-space: nowrap; font-size: calc(var(--u) * 22);
}
.lbl .km {
  position: absolute; right: calc(var(--u) * 8); bottom: calc(var(--u) * 4); height: calc(var(--u) * 30);
  line-height: calc(var(--u) * 30); font-size: calc(var(--u) * 19); white-space: nowrap;
}

/* The wordmark, top left, still while the view turns (white over the photo, as on the app's start screen). */
.brand {
  position: absolute; z-index: 2; margin: 0; pointer-events: none;
  left: max(16px, env(safe-area-inset-left)); top: max(12px, env(safe-area-inset-top));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .35));
}
.brand img { display: block; width: 96px; height: auto; }
@media (min-width: 768px) { .brand { left: 28px; top: 24px; } .brand img { width: 120px; } }

/* The way down to the download, on bigger screens only (a phone scrolls with its thumb). */
#down { display: none; }
@media (min-width: 768px) and (min-height: 600px) {
  #down {
    position: absolute; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 2; display: grid; place-items: center;
    width: 56px; height: 56px; margin-left: -28px; border-radius: 50%; color: #3A3A3C;
    animation: down-bob 2.4s ease-in-out infinite;
  }
  #down:focus-visible { outline: 2px solid #3A3A3C; outline-offset: 2px; }
  #down.gone { opacity: 0; pointer-events: none; transition: opacity .3s; }
}
@keyframes down-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { #down { animation: none; } }

/* Without WebGL: the photo as a still (hero.js sets its size and position), the phone over it with its plates. */
.still #pano, .still #down { display: none; }
.still #hero-wrap { height: auto; }
.still #hero { cursor: default; background-repeat: repeat-x; }
.still #phone-labels { background-repeat: repeat-x; background-color: #5f86b3; }

/* ?debug: every candidate place on the background, for curation. */
#debug { position: absolute; inset: 0; pointer-events: none; font: 11px/1.2 system-ui, sans-serif; }
#debug:empty { display: none; }
.dbg { position: absolute; transform: translate(-3px, -3px); color: #ff8a80; white-space: nowrap; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.dbg::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; background: currentColor; }
.dbg.on { color: #7CFC8A; }
.dbg small { opacity: .75; }
.dbg-yaw { position: absolute; left: 8px; top: 8px; padding: 2px 6px; color: #fff; background: rgba(0, 0, 0, .55); }

/* Theme button: top-right corner, over the hero. */
.theme-btn { position: fixed; z-index: 10; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%; background: rgba(0, 0, 0, .45); color: #FFFFFF; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.theme-btn:hover { background: rgba(0, 0, 0, .6); }
.theme-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.theme-btn svg { display: none; }
.theme-btn:not([data-mode="light"]):not([data-mode="dark"]) .i-auto, .theme-btn[data-mode="light"] .i-light, .theme-btn[data-mode="dark"] .i-dark { display: block; }