/* Point styling follows the image reference: deep purple, off-white and grey e-ink. */
.tile-model {
  display: block;
  position: relative;
  padding: 0;
  aspect-ratio: 1;
  border: 0;
  background: transparent;
  border-radius: 22%;
  isolation: isolate;
  touch-action: pan-y;
}
.tile-model:focus-visible { outline-offset: -20px; }
.tile-canvas { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; }
.tile-canvas canvas { display: block; width: 100%; height: 100%; }
.point-static {
  display: block;
  position: absolute;
  inset: 13.5%;
  transition: opacity .25s;
  pointer-events: none;
}
.point-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.tile-model.is-ready > .point-static { opacity: 0; }
.tile-model.is-ready > .tile-canvas { opacity: 1; }
.hero-tile-wrap { top: 30px; left: calc(50% + 5px); transform: none; }
.hero-tile { width: 320px; height: 320px; }
.hero-tile > .point-static { transform: rotate(5deg) perspective(600px) rotateY(-13deg); }
.journey-tile { transform: translate(-50%, -50%); }
.scan-tile { width: clamp(290px, 30vw, 390px); padding: 0; }
.scan-brackets { inset: 7%; }
.point-stage-label {
  position: absolute;
  top: 25px;
  left: 26px;
  right: 26px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  color: #9285ac;
  font-size: 11px;
  letter-spacing: .8px;
  z-index: 6;
}
.point-stage-label > span:last-child { letter-spacing: .3px; }
.point-nav-thumb { position: relative; overflow: visible; }
.point-nav-thumb > .point-static { inset: 3%; }
.scanner-tile {
  width: 190px;
  height: 190px;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.scanner-tile > .point-static { inset: 0; }
.scanner-overlay { inset: 32px 18px; }
@media (min-width: 1600px) {
  .hero-tile-wrap { top: 42px; }
  .hero-tile { width: 355px; height: 355px; }
}
@media (max-width: 1000px) {
  .hero-tile-wrap { left: calc(50% - 6px); top: 37px; }
  .hero-tile { width: 300px; height: 300px; }
  .point-stage-label { left: 20px; right: 20px; }
}
@media (max-width: 760px) {
  .hero-tile-wrap { left: calc(50% - 32px); top: 84px; transform: none; transform-origin: center; }
  .hero-tile { width: 230px; height: 230px; }
  .scan-tile { width: min(390px, calc(100vw - 44px)); }
  .point-stage-label { font-size: 10px; top: 23px; }
}
@media (max-width: 390px) {
  .hero-tile-wrap { left: calc(50% - 34px); top: 95px; }
  .hero-tile { width: 210px; height: 210px; }
}
@media (prefers-reduced-motion: reduce) {
  .point-static { transition: none; }
}