/* WINSCEND compass hero. Existing public copy and page layout are retained. */
.hero .compass-scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 32%, #000 64%);
  mask-image: linear-gradient(to right, transparent 32%, #000 64%);
}
.compass-position {
  position: absolute;
  top: 50%;
  right: clamp(-180px, -10vw, -70px);
  width: clamp(740px, 68vw, 1000px);
  aspect-ratio: 2 / 3;
  transform: translateY(-51%);
}
.compass-entry, .compass-float, .compass-tilt {
  width: 100%;
  height: 100%;
}
.compass-tilt { position: relative; transform: rotate(18deg); }
.compass-ink, .compass-light {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
}
.compass-ink { opacity: .31; filter: saturate(.28); }
.compass-light {
  position: absolute;
  inset: 0;
  opacity: .025;
  filter: saturate(.4) brightness(1.5);
}
.js .compass-entry { animation: compass-arrive 2.4s cubic-bezier(.2,.7,.2,1) both; }
.js .compass-float { animation: compass-drift 10s 2.4s ease-in-out infinite; }
.js .compass-light { animation: compass-breathe 7s 2.4s ease-in-out infinite; }
.hero .compass-motion {
  position: absolute;
  right: var(--gut);
  top: 16px;
  z-index: 2;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--dline);
  background: transparent;
  color: var(--on-dark-3);
  font-size: .73rem;
  letter-spacing: .06em;
  line-height: 1.5;
  cursor: pointer;
}
.hero .compass-motion:hover { color: var(--on-dark); }
.compass-motion[hidden] { display: none; }
.hero[data-compass-motion="paused"] .compass-entry {
  animation: none;
  opacity: 1;
  transform: none;
}
.hero[data-compass-motion="paused"] .compass-float,
.hero[data-compass-motion="paused"] .compass-light { animation-play-state: paused; }
@keyframes compass-arrive {
  from { opacity: 0; transform: translate3d(-12px, 20px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes compass-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(2px, -6px, 0); }
}
@keyframes compass-breathe {
  0%, 100% { opacity: .025; }
  50% { opacity: .105; }
}
@media (max-width: 1079px) {
  .compass-position { right: -200px; width: 820px; }
}
@media (max-width: 759px) {
  .hero .compass-scene {
    opacity: .72;
    -webkit-mask-image: linear-gradient(to right, transparent 5%, #000 78%);
    mask-image: linear-gradient(to right, transparent 5%, #000 78%);
  }
  .compass-position { top: 44%; right: -268px; width: 700px; }
  .compass-ink { opacity: .23; }
  .hero .compass-motion { right: var(--gut); top: 12px; font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .js .compass-entry, .js .compass-float, .js .compass-light { animation: none; }
  .compass-entry { opacity: 1; transform: none; }
  .compass-light { opacity: .025; }
  .hero .compass-motion { display: none; }
}