/* The guard's phone is the story panel of the 3D flythrough: it sits in the right-hand column
   where the text card used to be, full size, and each of the 15 stops lands on it as the camera
   reaches it (heroes/tour3d-v3.js pushPhone). The dots under it step through the day. */
.cm__phone { position: relative; width: 270px; margin: 0 auto 10px; pointer-events: none; }
.cm__phone .iphone { width: 270px; height: 550px; }
.cm__phone .iphone__screen { background: radial-gradient(120% 70% at 50% 0%, #1a2742 0%, #0b1019 55%, #070a12 100%); }
.cm__phone .lock { padding-top: 52px; }
.cm__phone .lock__time { font-size: 52px; font-variant-numeric: tabular-nums; }
.cm__phone .ntfs { top: 150px; bottom: 18px !important; height: auto; max-height: none !important; padding-bottom: 6px; box-sizing: border-box;
  -webkit-mask-image: linear-gradient(#000 60%, rgba(0,0,0,.4) 82%, transparent 96%) !important; mask-image: linear-gradient(#000 60%, rgba(0,0,0,.4) 82%, transparent 96%) !important; }
.cm__phone .ntf__kind { font-size: 10px; padding: 1px 6px; border-radius: 5px; letter-spacing: .06em; background: rgba(255,255,255,.1); }
.cm__phone .ntf__b { color: #dbe4f1; }
.cm__phone .ntf__out { margin-top: 7px; font-family: var(--mono); font-size: 11px; line-height: 1.35; color: #9ff0c8; }
.cm__phone__cap { display: block; text-align: center; margin: 0 auto 10px; width: max-content; max-width: 100%; font-size: 12px; font-weight: 600; color: var(--muted); background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; }
.cmfull .cm__dots { justify-content: center; gap: 4px; margin-top: 10px; }
.cmfull .cm__dot { width: 8px; height: 8px; }
.cmfull .cm__arrow { width: 24px; height: 24px; }
@media (min-width: 901px) { .cmfull__side { width: 300px; right: max(2vw, calc((100vw - 1180px) / 2 - 28px)); } }

/* The poster that stands in for the model until three.js has drawn a frame (heroes/tour-lazy.js).
   A sibling of #cmStage, never inside it: the 2D fallback rewrites the stage's innerHTML. */
/* .35s, not .7s: the poster and the model's first frame are different camera angles, so a long
   cross-fade ghosts one over the other and reads as a glitch. */
.cm__cover { position: absolute; inset: 0; z-index: 4; background: #e4ecf5 url(/heroes/tour-poster.jpg) center / cover no-repeat; transition: opacity .35s ease; }
#cmStage.is-ready + .cm__cover { opacity: 0; pointer-events: none; }
.cm__loading, .cm__loadbtn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; align-items: center; gap: 9px; font: 600 13.5px/1 var(--font, inherit); color: var(--text); background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: 999px; padding: 11px 17px; box-shadow: 0 8px 30px -12px rgba(20,40,70,.35); white-space: nowrap; }
.cm__loading i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--accent); border-right-color: transparent; animation: cmSpin .8s linear infinite; }
@keyframes cmSpin { to { transform: rotate(360deg); } }
#cmStage.is-loading + .cm__cover .cm__loading { display: inline-flex; }
#cmStage.is-manual + .cm__cover .cm__loadbtn { display: inline-flex; cursor: pointer; }
#cmStage.is-failed + .cm__cover { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .cm__cover { transition: none; } .cm__loading i { animation: none; } }