@view-transition { navigation: auto; }

::view-transition-old(root) { animation: brykPageOut .2s cubic-bezier(.7,0,1,1) both; }
::view-transition-new(root) { animation: brykPageIn .5s cubic-bezier(.15,.8,.2,1) both; }

.motion-toggle {
  position: fixed;
  z-index: 980;
  left: 17px;
  left: max(17px, env(safe-area-inset-left));
  bottom: 17px;
  bottom: max(17px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 112px;
  min-height: 44px;
  padding: 7px 12px 7px 9px;
  color: #747c83;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(6,8,11,.9);
  box-shadow: 0 10px 30px rgba(0,0,0,.42), inset 0 0 0 1px rgba(0,0,0,.45);
  backdrop-filter: blur(12px);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.motion-toggle:hover { color: #fff; border-color: rgba(255,255,255,.55); transform: translateY(-2px); }
.motion-toggle:focus-visible { outline: 2px solid var(--orange, #ff6a00); outline-offset: 3px; }
.motion-toggle__signal { display: flex; align-items: end; gap: 2px; width: 22px; height: 22px; padding: 4px; border: 1px solid rgba(255,255,255,.14); background: #090c10; }
.motion-toggle__signal i { display: block; width: 3px; height: 5px; background: #4f565c; }
.motion-toggle__signal i:nth-child(2) { height: 10px; }
.motion-toggle__signal i:nth-child(3) { height: 15px; }
.motion-toggle__copy { display: grid; gap: 3px; text-align: left; }
.motion-toggle__copy small { color:#a2a9ae; font-size:9px; font-weight:900; letter-spacing:.1em; }
.motion-toggle__copy b { font-size:11px; letter-spacing:.1em; }
.motion-toggle.is-on { color: var(--lime, #b9f227); border-color: color-mix(in srgb, var(--lime, #b9f227) 52%, transparent); }
.motion-toggle.is-on .motion-toggle__signal { border-color: color-mix(in srgb, var(--lime, #b9f227) 45%, transparent); }
.motion-toggle.is-on .motion-toggle__signal i { background: var(--lime, #b9f227); box-shadow: 0 0 7px color-mix(in srgb, var(--lime, #b9f227) 65%, transparent); animation: signalBars 1.15s ease-in-out infinite alternate; }
.motion-toggle.is-on .motion-toggle__signal i:nth-child(2) { animation-delay: -.55s; }
.motion-toggle.is-on .motion-toggle__signal i:nth-child(3) { animation-delay: -.25s; }

.map-viewport { perspective: 1500px; perspective-origin: 50% 46%; }
.map-stage {
  --motion-rx: 0deg;
  --motion-ry: 0deg;
  --motion-x: 0px;
  --motion-y: 0px;
  transform: none;
  transition: width .24s ease;
}
.map-stage::after {
  content: "";
  position: absolute;
  z-index: 8;
  inset: -30% 0 auto;
  height: 18%;
  pointer-events: none;
  opacity: .36;
  mix-blend-mode: screen;
  background: linear-gradient(180deg,transparent,rgba(185,242,39,.03) 35%,rgba(185,242,39,.27) 48%,rgba(255,255,255,.25) 50%,rgba(185,242,39,.04) 55%,transparent);
  animation: cityScan 8.5s linear infinite;
}
.map-image { animation: none; transform: none; }
.map-vignette, .map-stamp, .map-coordinates, .district-layer { transform: none; }
.district-marker { animation: none; }
.district-marker.is-selected { animation: territoryFlash 1.8s ease-in-out infinite; }
.city-node.is-active i, .signal i { animation: beacon 1.7s ease-in-out infinite; }
.map-stamp, .angle-card img { animation: none; transform: none; }

.scene-grid::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: -35% 0 auto;
  height: 24%;
  pointer-events: none;
  opacity: .28;
  background: linear-gradient(180deg,transparent,rgba(var(--district-rgb),.04),rgba(var(--district-rgb),.36),rgba(255,255,255,.2),transparent);
  mix-blend-mode: screen;
  animation: districtScan 7s linear infinite;
}
.explorer-view .scene-world > img { animation: none; transform: none; }
.district-title-card { animation: none; translate: none; }
.hotspot { animation: hotspotPulse 2s ease-in-out infinite; animation-delay: calc(var(--motion-index, 0) * -.35s); }
.route-meter i { position: relative; overflow: hidden; }
.route-meter i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  transform: translateX(-100%);
  animation: meterSweep 1.8s ease-in-out infinite;
}
.route-thumb.is-active { animation: activeRoute 1.8s ease-in-out infinite; }
.find-card.is-found { animation: foundGlow 3.5s ease-in-out infinite; }
.claim-launcher { animation: none; transform: none; }

.motion-reveal {
  opacity: 0;
  transform: none;
  filter: none;
  transition: opacity .5s ease calc(var(--reveal-index,0) * 35ms);
}
.motion-reveal.is-in-view { opacity: 1; transform: none; filter: none; }

.motion-off .map-stage { transform: none; }
.motion-off .motion-reveal { opacity: 1; transform: none; filter: none; transition: none; }
.motion-off .map-image,
.motion-off .district-marker,
.motion-off .map-stamp,
.motion-off .angle-card img,
.motion-off .scene-world > img,
.motion-off .district-title-card,
.motion-off .hotspot,
.motion-off .route-player > img,
.motion-off .route-thumb,
.motion-off .find-card,
.motion-off .claim-launcher,
.motion-off .city-node i,
.motion-off .signal i,
.motion-off .motion-toggle__signal i { animation: none !important; }
.motion-off .map-stage::after,
.motion-off .scene-grid::after,
.motion-off .route-meter i::after { display: none; }

@keyframes brykPageOut { to { opacity: 0; } }
@keyframes brykPageIn { from { opacity: 0; } }
@keyframes signalBars { from { transform: scaleY(.45); opacity: .5; } to { transform: scaleY(1); opacity: 1; } }
@keyframes cityScan { from { transform: translateY(0); } to { transform: translateY(760%); } }
@keyframes cityBreathe { from { transform: scale(1.002) translate3d(-.12%,0,0); } to { transform: scale(1.018) translate3d(.12%,-.16%,0); } }
@keyframes markerFloat { 0%,100% { margin-top: 0; } 50% { margin-top: -4px; } }
@keyframes territoryFlash { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }
@keyframes beacon { 0%,100% { opacity: .45; box-shadow: 0 0 0 transparent; } 50% { opacity: 1; box-shadow: 0 0 12px currentColor; } }
@keyframes stampHover { 0%,100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes cardDrift { from { scale: 1.01; translate: -.3% 0; } to { scale: 1.055; translate: .3% -.25%; } }
@keyframes districtScan { from { transform: translateY(0); } to { transform: translateY(590%); } }
@keyframes districtBreathe { from { scale: 1.002; translate: -.12% 0; } to { scale: 1.022; translate: .12% -.15%; } }
@keyframes titleHover { 0%,100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes hotspotHover { 0%,100% { translate: -50% -50%; } 50% { translate: -50% calc(-50% - 4px); } }
@keyframes meterSweep { 55%,100% { transform: translateX(120%); } }
@keyframes activeRoute { 0%,100% { box-shadow: 0 0 0 transparent; } 50% { box-shadow: 0 0 22px rgba(var(--district-rgb),.35); } }
@keyframes foundGlow { 0%,100% { box-shadow: 0 0 0 rgba(var(--district-rgb),0); } 50% { box-shadow: 0 0 28px rgba(var(--district-rgb),.2); } }
@keyframes claimCall { 0%,88%,100% { transform: translateY(0); } 92% { transform: translateY(-4px) rotate(-1deg); } 96% { transform: translateY(-1px) rotate(1deg); } }

@media (max-width: 680px) {
  .motion-toggle { left: max(10px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom)); min-width: 44px; width: 44px; padding: 7px; touch-action:manipulation; }
  .motion-toggle__copy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (hover:none),(pointer:coarse) {
  .motion-toggle:hover { transform:none; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-toggle.is-on .motion-toggle__signal i { animation: none; }
}