/* Decorative layers never participate in layout or pointer hit testing. */
#zen-ocean { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
#japan-svg { position: relative; }
#japan-svg .prefecture {
    transition: fill 220ms ease, fill-opacity 240ms ease, stroke 240ms ease, stroke-opacity 240ms ease, filter 240ms ease,
        transform 320ms cubic-bezier(.16, 1, .3, 1);
    transform-box: view-box; transform-origin: center;
    touch-action: inherit;
}
#japan-svg .prefecture.resonance-peer { fill-opacity: var(--resonance-opacity, .72) !important; will-change: fill-opacity; }
#japan-svg .prefecture.prefecture-unvisited { stroke-width: 1px; vector-effect: non-scaling-stroke; }
#japan-svg .prefecture.prefecture-visited { stroke-width: 1px; vector-effect: non-scaling-stroke; }
#japan-svg .prefecture.resonance-focus {
    fill: var(--prefecture-focus-fill) !important; fill-opacity: 1 !important;
    stroke: var(--prefecture-focus-outline) !important; stroke-width: 1.5px !important;
    stroke-dasharray: none !important; stroke-linejoin: round; stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 3px 4px color-mix(in srgb, var(--prefecture-focus-outline) 24%, transparent)) !important;
    transform: translateY(-2px) scale(1.035);
    will-change: transform, fill-opacity;
}
#japan-svg .prefecture.prefecture-unvisited.resonance-focus {
    fill-opacity: .94 !important;
}
#japan-svg.camera-moving .prefecture.resonance-focus { transform: none; filter: none !important; }
#japan-svg .prefecture.prefecture-unvisited.resonance-peer {
    fill-opacity: .48 !important;
}
#japan-svg .prefecture.legend-linked,
#japan-svg .prefecture.prefecture-unvisited.legend-linked {
    fill-opacity: 0 !important; stroke: none !important; filter: none !important;
    transform: none;
}
.trip-region-overlay {
    pointer-events: none; filter: url(#trip-prefecture-lift);
    transform: translateY(-2px);
    animation: tripResonance 2.8s ease-in-out infinite alternate;
    will-change: transform, opacity;
}
.trip-region-fill { stroke: none; }
.trip-region-outer {
    fill: none; stroke: var(--linked-color); stroke-width: 1px;
    stroke-dasharray: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.trip-region-inner {
    fill: none; stroke: #fff; stroke-width: 1px; stroke-opacity: .35; stroke-dasharray: 3 4;
    stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
#japan-svg .prefecture.legend-muted {
    fill-opacity: var(--muted-opacity, .1) !important; stroke-opacity: .25; filter: none !important;
}
.refined-ui #japan-svg .prefecture:focus { outline: none !important; }
.refined-ui #japan-svg .prefecture:active { transform: none; }
.refined-ui #japan-svg .prefecture.prefecture-pressed {
    transform: translateY(1.5px) scale(.988) !important;
    transition: transform 180ms cubic-bezier(.16, 1, .3, 1);
    will-change: transform;
}
.refined-ui #japan-svg .prefecture.prefecture-held { transform: translateY(3px) scale(.975) !important; }
@keyframes tripResonance { from { opacity: .86; } to { opacity: 1; } }
#japan-svg.camera-moving > g { will-change: transform; }
#layer1, #layer2 {
    transition: opacity 280ms cubic-bezier(.16, 1, .3, 1), transform 480ms cubic-bezier(.16, 1, .3, 1);
}
#trip-legend-list [data-trip-id].legend-linked { outline: none; }
#trip-legend-list [data-trip-id]:focus-visible { outline: 1px solid var(--linked-color, currentColor); outline-offset: 2px; }
.custom-leaflet-marker.micro-motion-marker .photo-marker {
    --tilt-x: 0deg; --tilt-y: 0deg;
    transform: perspective(420px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition: transform 180ms cubic-bezier(.16, 1, .3, 1), box-shadow 240ms ease, border-color 240ms ease;
    isolation: isolate;
}
.custom-leaflet-marker.micro-motion-marker:hover .photo-marker,
.custom-leaflet-marker.micro-motion-marker.marker-focusing .photo-marker {
    transform: perspective(420px) translateY(-5px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.12);
    will-change: transform;
}
.micro-motion-marker .photo-marker::before {
    content: ''; position: absolute; width: 94px; height: 94px; left: calc(50% - 47px); top: calc(100% - 30px);
    border-radius: 50%; z-index: -1; pointer-events: none;
    background: radial-gradient(circle, transparent 39%, color-mix(in srgb, var(--trip-color) 40%, transparent) 45%, transparent 51%,
        transparent 59%, color-mix(in srgb, var(--trip-color) 20%, transparent) 62%, transparent 67%);
    animation: radarPing 3.4s cubic-bezier(.16, 1, .3, 1) infinite;
    animation-delay: var(--radar-delay, 0s);
}
.micro-motion-marker.legend-linked .photo-marker { border-color: var(--linked-color); }
.micro-motion-marker.legend-linked .photo-marker::after { border-top-color: var(--linked-color); }
.micro-motion-marker:not(.radar-offscreen) .photo-marker::before { will-change: transform, opacity; }
.compass-needle { will-change: transform; }
@keyframes radarPing { 0% { transform: perspective(180px) rotateX(65deg) scale(.58); opacity: .6; } 80%, 100% { transform: perspective(180px) rotateX(65deg) scale(1.45); opacity: 0; } }
.prefecture-boundary-ink path { animation: contourInk 12s linear infinite, contourBreath 4.5s ease-in-out infinite alternate; }
@keyframes contourInk { to { stroke-dashoffset: -90; } }
@keyframes contourBreath { from { stroke-opacity: .68; } to { stroke-opacity: .8; } }
body.map-motion-paused .prefecture-boundary-ink path,
body.map-motion-paused .micro-motion-marker .photo-marker::before,
.micro-motion-marker.radar-offscreen .photo-marker::before { animation-play-state: paused; }
body.map-motion-paused .micro-motion-marker .photo-marker::before { will-change: auto; }
body.map-home-inactive .trip-region-overlay { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    #japan-svg .prefecture, .micro-motion-marker .photo-marker { transition: none; }
    #japan-svg .prefecture.resonance-focus { transform: none; filter: none !important; }
    .prefecture-boundary-ink path, .micro-motion-marker .photo-marker::before, .trip-region-overlay { animation: none; }
    .trip-region-overlay { transform: none; will-change: auto; }
    .micro-motion-marker .photo-marker::before { opacity: .12; }
    #japan-svg .prefecture, .compass-needle, .micro-motion-marker .photo-marker::before { will-change: auto; }
    .custom-leaflet-marker.micro-motion-marker:hover .photo-marker,
    .custom-leaflet-marker.micro-motion-marker.marker-focusing .photo-marker { transform: none; }
}