/* Living Earth's visual time and atmosphere layer. It sits above place-specific art so
   the user's local time changes mood without changing a destination's identity. */

.map-view {
  transition: background 90s ease;
}

body[data-time-phase="dawn"] .map-view {
  background:
    radial-gradient(circle at 76% 10%, rgba(216, 205, 168, 0.2), transparent 31%),
    radial-gradient(circle at 18% 82%, rgba(78, 137, 136, 0.2), transparent 38%),
    linear-gradient(162deg, #42696a 0%, #28565d 48%, #163d4a 100%);
}

body[data-time-phase="day"] .map-view {
  background:
    radial-gradient(circle at 76% 10%, rgba(206, 222, 193, 0.23), transparent 31%),
    radial-gradient(circle at 18% 82%, rgba(77, 143, 143, 0.22), transparent 38%),
    linear-gradient(162deg, #37666a 0%, #1f555d 48%, #123b48 100%);
}

body[data-time-phase="dusk"] .map-view {
  background:
    radial-gradient(circle at 76% 10%, rgba(202, 174, 142, 0.17), transparent 31%),
    radial-gradient(circle at 18% 82%, rgba(65, 113, 123, 0.2), transparent 38%),
    linear-gradient(162deg, #2d545b 0%, #1b444f 48%, #112f3d 100%);
}

body[data-time-phase="night"] .map-view {
  background:
    radial-gradient(circle at 76% 10%, rgba(111, 143, 157, 0.13), transparent 31%),
    radial-gradient(circle at 18% 82%, rgba(37, 88, 103, 0.18), transparent 38%),
    linear-gradient(162deg, #1c414b 0%, #123641 48%, #0d2b39 100%);
}

.map-sea-gloss {
  position: absolute;
  z-index: 2;
  display: block;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(143, 205, 197, 0.19) 0%, rgba(119, 182, 181, 0.1) 32%, transparent 72%);
  filter: blur(20px);
  opacity: 0.6;
  will-change: transform, opacity;
}

.map-sea-gloss::before {
  content: "";
  position: absolute;
  inset: 12% -6%;
  border-radius: 50%;
  background: repeating-linear-gradient(158deg, transparent 0 17px, rgba(211, 231, 219, 0.09) 18px 19px, transparent 20px 39px);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 45%, transparent 78%);
  mask-image: radial-gradient(ellipse at center, #000 0 45%, transparent 78%);
}

.map-sea-gloss-a {
  top: 57%;
  left: -28%;
  width: 150%;
  height: 22%;
  animation: ocean-gloss-drift-a 86s ease-in-out infinite alternate;
}

.map-sea-gloss-b {
  top: 33%;
  right: -34%;
  width: 124%;
  height: 16%;
  opacity: 0.38;
  animation: ocean-gloss-drift-b 104s ease-in-out infinite alternate-reverse;
}

/* A static atmospheric lacquer derived offline from a real cloud-fraction
   observation. It lives inside each repeated world copy, so it follows the map
   camera instead of floating above the viewport. */
.weather-cloud-layer {
  pointer-events: none;
  isolation: isolate;
}

.weather-cloud-texture {
  display: block;
  opacity: 0.92;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Do not reveal one repeated copy while its neighbour is still decoding.
   The map's base SVG and raster detail now enter as two whole layers, which
   prevents a temporary half-world seam on slow mobile connections. */
.world-art-instance,
.terrain-detail-layer,
.world-night-radiance-instance,
.world-reference-instance,
.map-reference-label-layer {
  opacity: 0;
  transition: opacity 360ms ease-out;
}

.map-stage[data-detail-ready="true"] .world-art-instance,
.map-stage[data-detail-ready="true"] .terrain-detail-layer,
.map-stage[data-detail-ready="true"] .world-reference-instance,
.map-stage[data-detail-ready="true"] .map-reference-label-layer {
  opacity: 1;
}

/* Night keeps the same high-resolution terrain/detail stack as day and adds
   only a transparent, measured satellite-radiance layer. This prevents a
   low-resolution full-world night screenshot from becoming blurry at zoom. */
.world-night-radiance-raster {
  display: block;
  width: 1002px;
  height: 1002px;
  pointer-events: none;
  image-rendering: auto;
}

.world-night-radiance-instance {
  opacity: 0;
  transition: opacity 720ms ease;
}

body[data-time-phase="night"] .map-stage[data-night-map-ready="true"] .world-night-radiance-instance {
  opacity: 1;
}

body[data-time-phase="night"] .world-art-instance,
body[data-time-phase="night"] .terrain-detail-tile {
  /* SVG filters on a parent <g> are inconsistent for dynamically inserted
     <image> tiles on mobile WebKit. Apply the blue night grade to each tile so
     the high-resolution terrain stays visible without retaining the daytime
     green/yellow cast. The grade must not depend on detail readiness: panning
     temporarily marks the tile set incomplete while new edge tiles decode. */
  filter: url(#night-terrain-grade);
}

/* Night typography and borders stay present but recede behind the measured
body[data-time-phase="night"] .map-stage[data-detail-ready="true"] .world-reference-instance {
  opacity: 0.38;
}

body[data-time-phase="night"] .map-stage[data-detail-ready="true"] .map-reference-label-layer {
  opacity: 0.72;
}

body[data-time-phase="night"] .map-reference-label {
  color: rgba(221, 226, 216, 0.76);
  text-shadow: 0 1px 2px rgba(2, 13, 19, 0.9), 0 0 5px rgba(2, 14, 20, 0.62);
}

body[data-time-phase="night"] .map-reference-label-city {
  color: rgba(221, 226, 216, 0.72);
}

body[data-time-phase="night"] .weather-cloud-texture {
  opacity: 0.34;
}

.map-stage[data-cloud-mode="low"] .weather-cloud-texture { opacity: 0.62; }

.ocean-light {
  animation: ocean-sheen 72s ease-in-out infinite alternate;
  transform-origin: 50% 50%;
}

.ocean-current {
  fill: none;
  stroke: rgba(174, 211, 201, 0.24);
  stroke-width: 0.75;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  animation: ocean-current-drift 112s ease-in-out infinite alternate;
}

.terrain-raster {
  pointer-events: none;
  opacity: 1;
}

.map-stage:not([data-detail-ready="true"]) .land-shadow,
.map-stage:not([data-detail-ready="true"]) .land-shape,
.map-stage:not([data-detail-ready="true"]) .terrain-surface,
.map-stage:not([data-detail-ready="true"]) .coast-glow {
  opacity: 0;
}

.terrain-detail-layer,
.terrain-detail-tile {
  pointer-events: none;
}

.terrain-detail-tile {
  opacity: 1;
  transition: none;
}
.terrain-surface {
  pointer-events: none;
  fill: rgba(89, 122, 103, 0.56);
  fill-rule: evenodd;
  filter: none;
  opacity: 0.035;
  mix-blend-mode: soft-light;
}

.terrain-biomes {
  pointer-events: none;
  opacity: 0.56;
  mix-blend-mode: soft-light;
}

.terrain-biome {
  filter: blur(14px);
}

.terrain-biome.desert { fill: #c1b79d; }
.terrain-biome.stone { fill: #8c927d; }
.terrain-biome.glacier { fill: #c7d4d0; }

.land-shadow {
  opacity: 0.78;
}

.land-shape {
  stroke: rgba(196, 214, 191, 0.25);
}

.coast-glow {
  stroke: rgba(229, 229, 208, 0.12);
}

.mountain-shadow,
.mountain-highlight,
.mountain-crest {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.mountain-shadow {
  opacity: 0;
  stroke: rgba(22, 50, 46, 0.34);
  stroke-width: 4;
  filter: blur(3.2px);
  transform: translate(1.8px, 2.2px);
}

.mountain-highlight {
  opacity: 0;
  stroke: rgba(211, 211, 187, 0.27);
  stroke-width: 2.3;
  filter: blur(0.8px);
  transform: translate(-0.8px, -1px);
}

.mountain-crest {
  opacity: 0;
  stroke: rgba(232, 228, 202, 0.28);
  stroke-width: 0.65;
}
.place-marker .marker-dot {
  box-shadow: 0 0 11px rgba(246, 201, 124, 0.72);
}

body .place-view {
  transition: opacity 1s ease, visibility 0s linear 1s, background 90s ease;
}

body[data-time-phase="dawn"] .place-view[data-place-id="kyoto"] {
  background:
    linear-gradient(180deg, rgba(20, 54, 44, 0.16), rgba(8, 31, 29, 0.7)),
    radial-gradient(ellipse at 50% 30%, #2e5141 0%, #17392f 66%, #0b2426 100%);
}

body[data-time-phase="day"] .place-view[data-place-id="kyoto"] {
  background:
    linear-gradient(180deg, rgba(39, 80, 56, 0.08), rgba(10, 35, 29, 0.62)),
    radial-gradient(ellipse at 50% 30%, #4a7457 0%, #23513f 66%, #0d2d2d 100%);
}

body[data-time-phase="dusk"] .place-view[data-place-id="kyoto"] {
  background:
    linear-gradient(180deg, rgba(29, 54, 46, 0.12), rgba(8, 28, 28, 0.7)),
    radial-gradient(ellipse at 50% 30%, #2b4b42 0%, #16382f 66%, #0a2226 100%);
}

body[data-time-phase="night"] .place-view[data-place-id="kyoto"] {
  background:
    linear-gradient(180deg, rgba(13, 38, 38, 0.18), rgba(5, 21, 24, 0.76)),
    radial-gradient(ellipse at 50% 30%, #1b3634 0%, #102b2b 66%, #081b21 100%);
}

body[data-time-phase="dawn"] .place-view[data-place-id="iceland"] {
  background:
    radial-gradient(ellipse at 52% 24%, rgba(181, 183, 168, 0.38), transparent 42%),
    linear-gradient(180deg, #66777b 0%, #3b5159 45%, #15262d 100%);
}

body[data-time-phase="day"] .place-view[data-place-id="iceland"] {
  background:
    radial-gradient(ellipse at 52% 24%, rgba(166, 190, 191, 0.5), transparent 42%),
    linear-gradient(180deg, #6b858b 0%, #405c64 45%, #172d35 100%);
}

body[data-time-phase="dusk"] .place-view[data-place-id="iceland"] {
  background:
    radial-gradient(ellipse at 52% 24%, rgba(143, 154, 159, 0.4), transparent 42%),
    linear-gradient(180deg, #536872 0%, #354851 45%, #14252c 100%);
}

body[data-time-phase="night"] .place-view[data-place-id="iceland"] {
  background:
    radial-gradient(ellipse at 52% 24%, rgba(91, 125, 139, 0.32), transparent 42%),
    linear-gradient(180deg, #405862 0%, #293d47 45%, #101f28 100%);
}

body[data-motion-mode="reduced"] .terrain-surface { filter: none; opacity: 0.055; }
body[data-motion-mode="reduced"] .terrain-biomes { opacity: 0.34; }



body[data-motion-mode="reduced"] .ocean-current { animation: none; opacity: 0.34; }

body[data-motion-mode="reduced"] .map-sea-gloss,
body[data-motion-mode="reduced"] .ocean-light {
  animation: none;
}

body[data-motion-mode="reduced"] .map-sea-gloss {
  opacity: 0.42;
}

body[data-motion-mode="reduced"] .map-stage::after,
body[data-motion-mode="reduced"] .bamboo-light {
  animation: none;
}

body[data-motion-mode="reduced"] .bamboo-light-b {
  display: none;
}

@keyframes ocean-current-drift {
  from { opacity: 0.38; transform: translateX(-1.2%) translateY(-0.4%); }
  to { opacity: 0.72; transform: translateX(1.2%) translateY(0.4%); }
}

@keyframes ocean-sheen {
  from { opacity: 0.5; transform: scale(0.99) translate3d(-0.5%, 0, 0); }
  to { opacity: 0.8; transform: scale(1.01) translate3d(0.5%, 0.4%, 0); }
}

@keyframes ocean-gloss-drift-a {
  from { opacity: 0.42; transform: translate3d(-3%, 0, 0) rotate(-3deg); }
  to { opacity: 0.82; transform: translate3d(4%, 1%, 0) rotate(2deg); }
}

@keyframes ocean-gloss-drift-b {
  from { opacity: 0.28; transform: translate3d(3%, 1%, 0) rotate(4deg); }
  to { opacity: 0.56; transform: translate3d(-4%, -1%, 0) rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .map-sea-gloss,
  .ocean-light,
  .map-stage::after,
  .bamboo-light {
    animation: none;
  }

  .terrain-surface { filter: none; opacity: 0.055; }
  .terrain-biomes { opacity: 0.34; }



.ocean-current { animation: none; opacity: 0.34; }
  .map-sea-gloss { opacity: 0.42; }
  .bamboo-light-b { display: none; }
}