/* The opening: the mark drawn as a blueprint, then machined into steel.
   Shared by the real page and the test page so there is one source of truth.
   The drafting furniture is flat DOM because it only exists while the object
   is face-on and still; the outline it frames is drawn inside the 3D scene. */

/* The guides are driven by phase classes the 3D clock sets, so there is one
   timeline rather than two that drift apart. */
.mg {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
  background: #060607;
}

.mg[hidden] { display: none; }

.mg-grid {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms ease;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 100% 120px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 120px 100%,
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px) 0 0 / 24px 100%;
}

.mg.is-grid .mg-grid,
.mg.is-guides .mg-grid,
.mg.is-draw .mg-grid { opacity: 1; }

.mg.is-solid .mg-grid { opacity: 0; }

.mg-rule {
  position: absolute;
  display: block;
  background: rgba(255, 255, 255, 0.18);
  transition: transform 900ms cubic-bezier(.22, 1, .3, 1), opacity 500ms ease;
}

.mg-rule-h {
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  transform: scaleX(0);
}

.mg-rule-v {
  top: 0;
  width: 1px;
  height: 100%;
  transform: scaleY(0);
}

.mg-rule-v1 { left: calc(50% - 300px); }

.mg-rule-v2 { left: calc(50% + 300px); }

.mg.is-guides .mg-rule-h,
.mg.is-draw .mg-rule-h { transform: scaleX(1); }

.mg.is-guides .mg-rule-v,
.mg.is-draw .mg-rule-v { transform: scaleY(1); }

.mg.is-guides .mg-rule-v2,
.mg.is-draw .mg-rule-v2 { transition-delay: 120ms; }

.mg.is-solid .mg-rule { opacity: 0; }

/* The bracket that frames the drawing, sized to the mark on the canvas. */
.mg-frame {
  position: absolute;
  width: 760px;
  height: 250px;
  pointer-events: none;
}

.mg-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  opacity: 0;
  transition: opacity 500ms ease;
}

.mg-tl { left: 0; top: 0; border-right: 0; border-bottom: 0; }

.mg-tr { right: 0; top: 0; border-left: 0; border-bottom: 0; }

.mg-bl { left: 0; bottom: 0; border-right: 0; border-top: 0; }

.mg-br { right: 0; bottom: 0; border-left: 0; border-top: 0; }

.mg.is-guides .mg-corner,
.mg.is-draw .mg-corner { opacity: 1; }

.mg.is-solid .mg-corner { opacity: 0; }

.mg-dim {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 1.4px;
  color: rgba(255, 255, 255, 0.4);
  opacity: 0;
  transition: opacity 500ms ease;
}

.mg-dim i { display: block; background: rgba(255, 255, 255, 0.2); }

.mg-dim-w { left: 0; right: 0; bottom: -52px; }

.mg-dim-w i { flex: 1; height: 1px; }

.mg-dim-h { flex-direction: column; right: -70px; top: 0; bottom: 0; }

.mg-dim-h i { width: 1px; flex: 1; }

.mg.is-draw .mg-dim { opacity: 1; transition-delay: 700ms; }

.mg.is-solid .mg-dim { opacity: 0; transition-delay: 0ms; }

.mg-canvas {
  display: block;
  width: 1000px;
  height: 460px;
}

.mg-cap {
  position: absolute;
  bottom: 120px;
  margin: 0;
  font-size: 11px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  opacity: 0;
  transition: opacity 600ms ease;
}

.mg.is-draw .mg-cap { opacity: 1; }

.mg.is-solid .mg-cap { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .mg { --t: 1; }

  .mg.is-out .mg-canvas {
    animation: cm-to-nav calc(820ms * var(--t)) cubic-bezier(.65, 0, .35, 1) calc(120ms * var(--t)) both;
  }

  .mg.is-out { animation: fade-out calc(400ms * var(--t)) ease calc(700ms * var(--t)) both; }
}

/* Always escapable. An opening that cannot be skipped is a toll gate. */
.mg-skip {
  position: absolute;
  right: 32px;
  bottom: 32px;
  padding: 10px 20px;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  font: inherit;
  font-size: 13px;
  color: #fff;
  cursor: pointer;
}

.mg-skip:hover { background: rgba(255, 255, 255, 0.16); }

.mg-skip:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

/* The hero is rendered and ready underneath; its entrance simply waits so the
   reader does not arrive to a page that has already finished moving. */
.page.is-held .hero *,
.page.is-held .hero { animation-play-state: paused !important; }