/* Northstar's instruments: finite gestures, fine engraved light, no new layout. */
:root {
  --atlas-gold: #d7af70;
  --atlas-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg stroke='%23011925' stroke-width='2.4' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='18' r='8' fill='none'/%3E%3Cpath d='M16 3 21 20 16 17 11 20Z' fill='%23e1bd80'/%3E%3C/g%3E%3Ccircle cx='16' cy='18' r='8' fill='none' stroke='%23b48a4e' stroke-width='.8'/%3E%3Cpath d='M16 3 21 20 16 17 11 20Z' fill='%23f3d59e' stroke='%23d2a765' stroke-width='.65'/%3E%3Cpath d='M16 17v11M5 18h5m12 0h5' stroke='%23cda469' stroke-width='.8'/%3E%3C/svg%3E") 16 3;
  --atlas-cursor-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg stroke='%23011925' stroke-width='2.5' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='18' r='9' fill='none'/%3E%3Cpath d='M16 3 21 20 16 17 11 20Z' fill='%23ffe3af'/%3E%3C/g%3E%3Ccircle cx='16' cy='18' r='9' fill='none' stroke='%23ebc98f' stroke-width='1'/%3E%3Cpath d='M16 3 21 20 16 17 11 20Z' fill='%23ffe9bc' stroke='%23d2a765' stroke-width='.65'/%3E%3Cpath d='M16 17v12M4 18h6m12 0h6' stroke='%23e4bd7a' stroke-width='.9'/%3E%3C/svg%3E") 16 3;
}

@media (hover: hover) and (pointer: fine) {
  html.atlas-pointer, html.atlas-pointer body { cursor: var(--atlas-cursor), auto; }
  html.atlas-pointer :is(a, button, summary, label[for], [role="button"], [role="tab"], [role="switch"], [role="slider"]) { cursor: var(--atlas-cursor-link), pointer; }
  html.atlas-pointer :is(input, textarea, [contenteditable="true"]) { cursor: text; }
  html.atlas-pointer :is(button:disabled, [aria-disabled="true"]) { cursor: not-allowed; }
}

.atlas-pointer-sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 50; pointer-events: none; }
.atlas-dial {
  position: absolute; z-index: 10; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 8px; border: 0; border-radius: 50%;
  color: var(--atlas-gold); background: transparent; touch-action: pan-y;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.atlas-dial::before { content: ""; position: absolute; inset: 8px; border: 1px solid currentColor; border-radius: 50%; opacity: .38; transition: opacity .2s, scale .25s; }
.atlas-dial svg { display: block; width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: .85; overflow: visible; }
.atlas-dial:hover::before, .atlas-dial:focus-visible::before { opacity: .9; scale: 1.15; }
.atlas-dial:focus-visible { outline: 1px solid #f6d99d; outline-offset: 2px; }
.atlas-dial.atlas-is-dragging::before { scale: .91; opacity: 1; }
.atlas-dial .atlas-dial-hint { position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 180px; padding: 5px 8px; border: 1px solid #bc8c4966; background: #011925f2; color: #f1d6a5; font: 11px/1.3 Georgia, serif; letter-spacing: .02em; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s; }
.atlas-dial:hover .atlas-dial-hint, .atlas-dial:focus-visible .atlas-dial-hint { opacity: 1; visibility: visible; }
.atlas-hero-dial { right: 17%; bottom: 3%; }
.hero-universe.atlas-is-dragging { user-select: none; }
.hero-universe.atlas-is-dragging .chart-outer { opacity: 1; }
.atlas-car-links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; overflow: visible; }
.atlas-car-link { opacity: 0; transition: opacity .28s ease; }
.atlas-car-link.atlas-is-lit { opacity: .9; }
.atlas-car-link path { fill: none; stroke: #d3a75e; stroke-width: .85; vector-effect: non-scaling-stroke; stroke-dasharray: 2 4; }
.atlas-car-link circle { fill: #f5d49a; stroke: #d0a268; stroke-width: .8; vector-effect: non-scaling-stroke; }
.atlas-car-link .atlas-target-ring { fill: none; opacity: .5; }
.atlas-car-etch { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: radial-gradient(ellipse 72px 48px at var(--atlas-etch-x, 50%) var(--atlas-etch-y, 50%), #efc98b82, #e3ad541c 55%, transparent 100%); mask: var(--atlas-car-mask) center / contain no-repeat; -webkit-mask: var(--atlas-car-mask) center / contain no-repeat; transition: opacity .35s ease; }
.atlas-car-etch.atlas-is-lit { opacity: .68; }

/* Each drawing answers according to its own mechanics. */
.atlas-mechanism .part-art, .atlas-mechanism .service-art { transform-origin: 50% 54%; }
.atlas-mechanism:hover .part-art, .atlas-mechanism:focus-visible .part-art,
.atlas-mechanism:hover .service-art, .atlas-mechanism:focus-visible .service-art { transform: none; }
.atlas-mechanism.atlas-art-active .part-art, .atlas-mechanism.atlas-art-active .service-art { translate: 0 0; filter: brightness(1.12) drop-shadow(0 0 7px #d2a05b19); animation: atlas-mechanism-settle .9s ease-out both; }
.atlas-mechanism[data-service="brakes"].atlas-art-active :is(.part-art,.service-art) { animation-name: atlas-brake-turn; animation-duration: 1.1s; }
.atlas-mechanism[data-service="tyres"].atlas-art-active .part-art { animation-name: atlas-tyre-turn; animation-duration: 1.25s; }
.atlas-mechanism[data-service="suspension"].atlas-art-active :is(.part-art,.service-art) { animation-name: atlas-spring-load; animation-duration: 1s; transform-origin: 50% 84%; }
.atlas-mechanism[data-service="diagnostics"].atlas-art-active .part-art { animation-name: atlas-diagnostic-settle; }
.atlas-mechanism[data-service="engine"].atlas-art-active .service-art { animation-name: atlas-engine-engage; animation-duration: 1.1s; }
.atlas-mechanism[data-service="inspection"].atlas-art-active .service-art { animation-name: atlas-inspection-lift; animation-duration: 1s; }
.atlas-mechanism .part-diagnostics::after { content: ""; position: absolute; left: 30%; top: 32%; width: 29%; height: 1px; background: linear-gradient(90deg, transparent, #f8d89a, transparent); box-shadow: 0 0 5px #e3b77560; opacity: 0; pointer-events: none; }
.atlas-mechanism.atlas-art-active .part-diagnostics::after { animation: atlas-diagnostic-scan 1.3s ease-in-out both; }
@keyframes atlas-brake-turn { 0% { transform: rotate(0); } 34% { transform: rotate(9deg); } 62% { transform: rotate(7deg); } 100% { transform: rotate(7.5deg); } }
@keyframes atlas-tyre-turn { 0% { transform: rotate(0); } 64% { transform: rotate(24deg); } 82% { transform: rotate(22deg); } 100% { transform: rotate(23deg); } }
@keyframes atlas-spring-load { 0% { transform: scaleY(1); } 32% { transform: scaleY(.91); } 56% { transform: scaleY(1.025); } 76% { transform: scaleY(.99); } 100% { transform: scaleY(1); } }
@keyframes atlas-diagnostic-settle { 0% { transform: translateY(0); } 45% { transform: translateY(-3px); } 100% { transform: translateY(-2px); } }
@keyframes atlas-diagnostic-scan { 0%, 100% { opacity: 0; transform: translateY(0); } 20% { opacity: .8; } 80% { opacity: .65; transform: translateY(18px); } 99% { transform: translateY(22px); } }
@keyframes atlas-engine-engage { 0% { transform: rotate(0); } 32% { transform: rotate(-3deg); } 61% { transform: rotate(.8deg); } 100% { transform: rotate(0); } }
@keyframes atlas-inspection-lift { 0% { transform: translateY(0); } 55% { transform: translateY(-5px); } 100% { transform: translateY(-3px); } }
@keyframes atlas-mechanism-settle { 0% { transform: translateY(0); } 100% { transform: translateY(-2px); } }
.atlas-mechanism.atlas-offscreen :is(.part-art,.service-art), .atlas-mechanism.atlas-offscreen .part-diagnostics::after,
html.atlas-page-resting .atlas-mechanism :is(.part-art,.service-art), html.atlas-page-resting .atlas-mechanism .part-diagnostics::after { animation-play-state: paused !important; }

/* The visit instrument has three quiet bearings, corresponding to the three fields. */
.atlas-compass-face { position: absolute; inset: 10%; width: 80%; height: 80%; overflow: visible; z-index: 2; pointer-events: none; }
.atlas-compass-sector { fill: none; stroke: #d1a064; stroke-width: 1.3; opacity: .22; transition: opacity .3s; }
.atlas-compass-sector.atlas-is-lit { opacity: 1; stroke: #f3cc87; }
.atlas-compass-tick { stroke: #dbb677; stroke-width: .8; opacity: .5; }
.atlas-compass-needle { fill: #cfa56c; stroke: #f0cf99; stroke-width: .65; opacity: .85; }
.atlas-compass-needle .atlas-needle-shadow { fill: #4e5143; stroke: #cda469; }
.atlas-compass-needle .atlas-needle-core { fill: #08202a; stroke: #e9c285; stroke-width: 1.2; }
.atlas-visit-dial { left: 50%; top: 50%; transform: translate(-50%, -50%); color: #efd2a1; }
.atlas-visit-dial::before { inset: 11px; opacity: .7; background: #07212c99; }
.atlas-visit-dial svg { width: 21px; height: 21px; position: relative; }
.atlas-visit-dial .atlas-dial-hint { bottom: calc(100% + 10px); }
.atlas-route-leader { pointer-events: none; opacity: 0; }
.atlas-route-leader .atlas-route-core { fill: #ffe1a2; }
.atlas-route-leader .atlas-route-rays { stroke: #ebc584; stroke-width: .85; fill: none; }
.atlas-route-leader .atlas-route-tail { fill: #d3a463; opacity: .45; }
html.atlas-page-resting .atlas-dial::before,
html.atlas-page-resting :is(.atlas-car-link, .atlas-car-etch, .atlas-compass-sector) { transition: none; }

@media (max-width: 620px) {
  .atlas-hero-dial { right: 26%; bottom: 0; }
  .atlas-car-link path { stroke-width: .65; }
  .atlas-dial .atlas-dial-hint { display: none; }
  .atlas-compass-face { opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
  .atlas-pointer-sky, .atlas-route-leader { display: none; }
  .atlas-dial::before, .atlas-car-link, .atlas-car-etch, .atlas-compass-sector { transition: none !important; }
  .atlas-mechanism.atlas-art-active :is(.part-art,.service-art), .atlas-mechanism.atlas-art-active .part-diagnostics::after { animation: none !important; }
}