/* The globe in the hero of « Trouver mon voyage »'s results (trip_suggestions/_globe, TripGlobePresenter).
   One SVG: it fills its container on wide screens; from 62rem down (stacked hero) the container becomes a 400:176
   window on the presenter's phone crop (--crop-x/-y/-w/-h, unitless viewBox values set inline). */

.trip-globe {
  --trip-globe-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --trip-globe-land: #2b4a8c;
  --trip-globe-coral: #ffb89c;
  --trip-globe-label-halo: #0e1d40;
  width: 100%;
  height: 100%;
}

.trip-globe .trip-globe__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.trip-globe .trip-globe__halo { fill: none; stroke: rgb(34 199 223 / 30%); stroke-width: 14; filter: blur(9px); }
.trip-globe .trip-globe__graticule { fill: none; stroke: rgb(255 255 255 / 7%); stroke-width: 1; }
.trip-globe .trip-globe__land path { fill: var(--trip-globe-land); }
.trip-globe .trip-globe__limb { fill: none; stroke: rgb(125 211 252 / 45%); stroke-width: 1.5; }

.trip-globe .trip-globe__label {
  fill: #fff;
  font-size: 13px;
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--trip-globe-label-halo);
  stroke-width: 4px;
  stroke-linejoin: round;
  pointer-events: none;
}

.trip-globe .trip-globe__origin-dot { fill: #fff; }
.trip-globe .trip-globe__origin-ring { fill: none; stroke: rgb(255 255 255 / 45%); stroke-width: 1.5; }

.trip-globe .trip-globe__route { transition: opacity 220ms var(--trip-globe-ease); }
.trip-globe .trip-globe__arc { fill: none; stroke: var(--color-cyan); stroke-width: 2; stroke-linecap: round; }
.trip-globe .trip-globe__glow { fill: none; stroke: rgb(34 199 223 / 22%); stroke-width: 7; stroke-linecap: round; }

.trip-globe .trip-globe__pin { cursor: pointer; text-decoration: none; outline: none; }
.trip-globe .trip-globe__pin-dot { fill: #fff; stroke: var(--color-navy); stroke-width: 1.5; transition: fill 160ms var(--trip-globe-ease); }
.trip-globe .trip-globe__pin-number { fill: var(--color-navy); font-size: 12px; font-weight: 800; text-anchor: middle; pointer-events: none; }

.trip-globe .trip-globe__route--almost .trip-globe__arc { stroke: var(--trip-globe-coral); stroke-width: 1.75; stroke-dasharray: 2 6; }
.trip-globe .trip-globe__route--almost .trip-globe__pin-dot { fill: var(--color-navy); stroke: var(--trip-globe-coral); stroke-dasharray: 3 3; }
.trip-globe .trip-globe__route--almost .trip-globe__label { fill: var(--trip-globe-coral); }

/* Pins are a mouse-only shortcut (tabindex -1, aria-hidden): the tickets are the accessible content.
   A ticket hovered or focused lights its route; the others step back (classes set by the page's controller). */
.trip-globe.has-focus .trip-globe__route:not(.is-focus) { opacity: 0.28; }
.trip-globe .trip-globe__route.is-focus .trip-globe__arc { stroke-width: 3; }
.trip-globe .trip-globe__route.is-focus:not(.trip-globe__route--almost) .trip-globe__pin-dot { fill: var(--color-cyan); }

@media (prefers-reduced-motion: no-preference) {
  .trip-globe .trip-globe__route:not(.trip-globe__route--almost) .trip-globe__arc,
  .trip-globe .trip-globe__glow {
    stroke-dasharray: 1;
    animation: trip-globe-draw 1200ms var(--trip-globe-ease) both;
    animation-delay: calc(250ms + var(--i, 0) * 200ms);
  }

  .trip-globe .trip-globe__pin {
    animation: trip-globe-fade-in 500ms var(--trip-globe-ease) both;
    animation-delay: calc(1050ms + var(--i, 0) * 200ms);
  }

  .trip-globe .trip-globe__route--almost .trip-globe__arc {
    animation: trip-globe-fade-in 700ms var(--trip-globe-ease) both;
    animation-delay: 1500ms;
  }

  @keyframes trip-globe-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes trip-globe-fade-in { from { opacity: 0; } }
}

@media (max-width: 62rem) {
  .trip-globe {
    position: relative;
    overflow: hidden;
    aspect-ratio: 400 / 176;
    height: auto;
  }

  .trip-globe .trip-globe__svg {
    position: absolute;
    width: calc(760 / var(--crop-w) * 100%);
    height: auto;
    aspect-ratio: 760 / 400;
    left: calc(var(--crop-x) / var(--crop-w) * -100%);
    top: calc(var(--crop-y) / var(--crop-h) * -100%);
  }

  .trip-globe .trip-globe__route .trip-globe__label { display: none; }

  .trip-globe .trip-globe__pin-mark {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(1.5);
  }

  .trip-globe .trip-globe__label--origin { font-size: 20px; stroke-width: 5px; }
}