/* The 3D scan overlay (standalone/scan3d.js): HUD in the darkroom's language: mono capitals,
   hairlines, square corners, signal orange. */

/* ------------------------------------------------------------ the 3D scan */
.s3d {
  position: fixed; inset: 0; z-index: 1000;
  opacity: 0; transition: opacity 1.2s cubic-bezier(.4, 0, .2, 1), color .3s ease;
  background: #f2f1ea;
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  color: #282828;
  cursor: default;
}
/* ink on the lit studio, paper in the dark: swapped at the middle, so it never fades into the grey */
.s3d[data-tone="dark"] { color: #f5f5ef; }
.s3d.in { opacity: 1; }
.s3d.out { opacity: 0; transition: opacity 1.1s cubic-bezier(.4, 0, .2, 1); pointer-events: none; }
.s3d-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.s3d-hud { position: absolute; inset: 0; pointer-events: none; padding: 22px 26px; display: grid; grid-template-rows: auto 1fr auto; }
.s3d-top { display: flex; align-items: center; gap: 18px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.s3d-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: .14em; }
.s3d-brand b { font-weight: 400; opacity: .6; }
.s3d-brand i { width: 9px; height: 9px; background: #fa3600; box-shadow: 0 0 12px #fa3600; animation: s3d-blink 1.1s steps(2, jump-none) infinite; }
.s3d-roll { opacity: .62; padding-left: 18px; border-left: 1px solid currentColor; }
.s3d-skip {
  pointer-events: auto; margin-left: auto; height: 30px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px;
  font: 500 11px/1 var(--mono, ui-monospace, monospace); letter-spacing: .06em; text-transform: uppercase;
  color: inherit; background: transparent; border: 1px solid color-mix(in srgb, currentColor 45%, transparent); border-radius: 0; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.s3d-skip:hover { border-color: currentColor; background: color-mix(in srgb, currentColor 10%, transparent); }
.s3d-skip kbd { border-color: color-mix(in srgb, currentColor 40%, transparent); color: inherit; opacity: .7; }
.s3d.fast .s3d-skip { opacity: .35; }

.s3d-bottom { grid-row: 3; max-width: 560px; }
.s3d-phase { display: grid; gap: 8px; }
.s3d-ph { font: 600 30px/1.05 var(--font, "Helvetica Neue", Helvetica, Arial, sans-serif); letter-spacing: -.02em; text-transform: none; }
.s3d-fn { font: 400 14px/1.45 var(--font, "Helvetica Neue", Helvetica, Arial, sans-serif); letter-spacing: -.005em; opacity: .82; max-width: 470px; }   /* what is happening, in plain words */
.s3d-name { margin-top: 6px; min-height: 16px; font-size: 12px; opacity: .78; }
.s3d-bar { position: relative; margin-top: 14px; height: 2px; background: color-mix(in srgb, currentColor 20%, transparent); overflow: hidden; }
.s3d-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fa3600; box-shadow: 0 0 10px #fa3600; transition: width .35s cubic-bezier(.2, .7, .2, 1); }
.s3d-steps { display: flex; gap: 0; margin: 12px 0 0; padding: 0; list-style: none; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.s3d-steps li { position: relative; padding: 6px 14px 0 14px; opacity: .38; transition: opacity .4s; }
.s3d-steps li:first-child { padding-left: 14px; }
.s3d-steps li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border: 1px solid currentColor; }
.s3d-steps li[data-state="active"] { opacity: 1; }
.s3d-steps li[data-state="active"]::before { background: #fa3600; border-color: #fa3600; box-shadow: 0 0 8px #fa3600; }
.s3d-steps li[data-state="done"] { opacity: .75; }
.s3d-steps li[data-state="done"]::before { background: currentColor; }

.s3d-counter { position: absolute; right: 26px; bottom: 20px; display: flex; align-items: baseline; gap: 8px; }
.s3d-counter b { font: 300 92px/0.9 var(--font, "Helvetica Neue", Helvetica, Arial, sans-serif); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.s3d-counter span { font-size: 13px; opacity: .55; }

@keyframes s3d-blink { 50% { opacity: .25; box-shadow: none; } }

@media (max-width: 720px) {
  .s3d-hud { padding: 16px; }
  .s3d-roll, .s3d-brand b { display: none; }
  .s3d-ph { font-size: 22px; }
  .s3d-counter b { font-size: 56px; }
  .s3d-counter { right: 16px; bottom: auto; top: 58px; }
  .s3d-fn { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .s3d, .s3d.out { transition-duration: .2s; }
}