/* ============================================================
   Amoré · journey-map.css — styles for the JourneyMap engine
   (ported from Artem's "Unsere Reise" handoff). Scoped under
   .jm-stage so it can sit inside a normal content section
   instead of a full-viewport overlay.
   ============================================================ */

/* #journeyStage carries the sizing rules too (not just the JS-added .jm-stage
   class) so the container already has its real height at first paint —
   otherwise it sits at 0 height until JourneyMap boots, which (a) makes the
   IntersectionObserver's threshold check ambiguous against a zero-area
   target and (b) pops the layout by 620px the moment it finally does boot. */
#journeyStage, .jm-stage{
  position:relative; width:100%; height:620px; margin-top:22px;
  border-radius:24px; overflow:hidden; background:#0b0e16;
  box-shadow:0 34px 74px -30px rgba(0,0,0,.55);
  container-type:size; container-name:jm;
}
@media(max-width:768px){#journeyStage,.jm-stage{height:540px}}
@media(max-width:520px){#journeyStage,.jm-stage{height:460px}}

.jm-stage .leaflet-container{background:#0b0e16;font-family:'Jost',system-ui,sans-serif}
.jm-stage .leaflet-control-attribution{background:rgba(11,14,22,.6)!important;color:rgba(255,255,255,.32)!important;font-size:8.5px}
.jm-stage .leaflet-control-attribution a{color:rgba(255,255,255,.5)!important}

.jm-map{position:absolute;inset:0;width:100%;height:100%}

/* cover / photo backdrop (hides tile loading + focuses the photos) */
.jm-cover{
  position:absolute;inset:0;z-index:4;pointer-events:none;opacity:1;
  transition:opacity 1.05s cubic-bezier(.4,0,.2,1);
  background:radial-gradient(ellipse 95% 95% at 50% 44%,#17111f,#0b0e16 80%);
}

/* intro */
.jm-intro{
  position:absolute;inset:0;z-index:6;padding:0 22px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  pointer-events:none;transition:opacity 1.2s ease;opacity:1;
}
.jm-kicker{font-family:'Jost',sans-serif;font-weight:500;letter-spacing:6px;font-size:clamp(10px,1.7cqh,13px);color:#f0a860;text-transform:uppercase}
.jm-title{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(30px,10cqh,52px);line-height:1.05;color:#fbf3e9;margin-top:10px;text-shadow:0 4px 30px rgba(0,0,0,.5)}
.jm-sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(14px,3.3cqh,19px);color:rgba(251,243,233,.72);margin-top:6px}
.jm-loader{font-family:'Jost',sans-serif;font-weight:400;letter-spacing:2px;font-size:11px;color:rgba(240,168,96,.9);margin-top:26px;text-transform:uppercase;min-height:14px}

/* place pill */
.jm-place{
  position:absolute;left:50%;top:16px;z-index:5;
  transform:translateX(-50%) translateY(-14px);opacity:0;
  transition:opacity .7s ease,transform .7s ease;pointer-events:none;
  display:flex;align-items:center;gap:9px;padding:8px 16px;border-radius:999px;
  background:rgba(18,22,32,.72);backdrop-filter:blur(8px);border:1px solid rgba(247,180,92,.35);
}
.jm-dot{width:8px;height:8px;border-radius:50%;background:#ff7a8a;box-shadow:0 0 10px 2px rgba(255,122,138,.7);flex:0 0 auto}
.jm-place-name{font-family:'Jost',sans-serif;font-weight:500;letter-spacing:2px;text-transform:uppercase;font-size:clamp(10px,1.7cqh,13px);color:#fbf3e9}

/* photo stage */
.jm-photostage{position:absolute;inset:0;z-index:5;padding:20px;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .8s ease}
.jm-card{
  position:relative;width:min(82%,300px);
  background:linear-gradient(160deg,#fdf6ec,#f6ead8);padding:13px 13px 0;border-radius:7px;
  box-shadow:0 40px 90px -28px rgba(0,0,0,.85),0 0 0 1px rgba(120,80,40,.14);
  will-change:transform,opacity;
}
.jm-cardhead{display:flex;align-items:center;justify-content:space-between;padding:1px 2px 9px}
.jm-count{display:flex;gap:5px}
.jm-count span{width:14px;height:3px;border-radius:3px;background:rgba(120,80,40,.22);transition:background .5s ease;display:block}
.jm-count span.on{background:#d98c4a}
.jm-date{font-family:'Jost',sans-serif;font-weight:500;letter-spacing:1.4px;text-transform:uppercase;font-size:9.5px;color:#b98a6a;white-space:nowrap}
.jm-frame{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;border-radius:3px;background:#241820}
.jm-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease;will-change:transform,opacity}
.jm-vg{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 60px 10px rgba(24,10,22,.5);background:linear-gradient(180deg,rgba(255,190,130,.05),rgba(38,12,30,.14))}
.jm-ring{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(205,160,100,.6)}
.jm-cap{padding:13px 3px 16px}
.jm-capkick{font-family:'Jost',sans-serif;font-weight:500;letter-spacing:2.6px;text-transform:uppercase;font-size:9.5px;color:#c98f52}
.jm-capname{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(19px,4.6cqh,27px);line-height:1.05;color:#3a2230;margin-top:3px}
.jm-capnote{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(13px,2.6cqh,16px);color:#8a6b57;margin-top:2px}

/* play / pause */
.jm-play{
  position:absolute;right:14px;bottom:14px;z-index:7;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.12);background:rgba(16,20,30,.6);backdrop-filter:blur(10px);
  color:#fbf3e9;font-size:12px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;
}

/* heart pin */
.jm-pin{position:relative;width:0;height:0}
.jm-pin .dot{
  position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffe6c8,#ff7a8a 60%,#e05a72);
  box-shadow:0 0 0 4px rgba(255,122,138,.28),0 0 26px 8px rgba(255,140,120,.6);
  transform:scale(0);animation:jmDrop .65s cubic-bezier(.34,1.56,.64,1) forwards,jmGlow 2.2s ease-in-out .65s infinite;
}
.jm-pin .ring{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,150,130,.75);opacity:0;animation:jmPulse 2.6s ease-out .5s infinite}
.jm-pin .ring.r2{animation-delay:1.3s;border-color:rgba(247,180,92,.7)}
.jm-pin .beat{position:absolute;left:-8px;top:-9px;width:16px;height:16px;opacity:0;color:#ffcf9e;font-size:15px;line-height:16px;text-align:center;animation:jmBeat 2.8s ease-out .8s infinite}
@keyframes jmDrop{0%{transform:scale(0) translateY(-30px)}70%{transform:scale(1.18) translateY(0)}100%{transform:scale(1) translateY(0)}}
@keyframes jmGlow{0%,100%{box-shadow:0 0 0 4px rgba(255,122,138,.28),0 0 22px 6px rgba(255,140,120,.5)}50%{box-shadow:0 0 0 5px rgba(255,122,138,.16),0 0 36px 13px rgba(255,150,120,.9)}}
@keyframes jmPulse{0%{transform:scale(1);opacity:.85}100%{transform:scale(5);opacity:0}}
@keyframes jmBeat{0%{transform:translateY(0) scale(.5);opacity:0}25%{opacity:.9}100%{transform:translateY(-32px) scale(1);opacity:0}}

/* plane */
.jm-plane{width:0;height:0}
.jm-plane .pl{position:absolute;left:-16px;top:-16px;width:32px;height:32px;display:block;filter:drop-shadow(0 0 9px rgba(247,180,92,.95));transform-origin:50% 50%;transition:transform .09s linear}

/* Ken Burns */
@keyframes jmKB1{0%{transform:scale(1.05) translate(-1.5%,-1%)}100%{transform:scale(1.17) translate(2%,2%)}}
@keyframes jmKB2{0%{transform:scale(1.17) translate(1.5%,-2%)}100%{transform:scale(1.05) translate(-1.5%,1.5%)}}

/* reduced-motion: one calm static overview, no cinematic loop */
.jm-statictip{
  background:rgba(18,22,32,.8);color:#fbf3e9;border:1px solid rgba(247,180,92,.35);border-radius:8px;
  padding:4px 10px;font-family:'Jost',sans-serif;font-size:11px;font-weight:600;letter-spacing:.5px;
  box-shadow:0 10px 24px -14px rgba(0,0,0,.6);
}
.jm-statictip::before{border-top-color:rgba(247,180,92,.35)!important}

@media(prefers-reduced-motion:reduce){
  .jm-pin .dot{animation:none;transform:scale(1);box-shadow:0 0 0 4px rgba(255,122,138,.28),0 0 22px 6px rgba(255,140,120,.5)}
  .jm-pin .ring,.jm-pin .beat{display:none}
  .jm-frame img{transition:none;animation:none!important}
  .jm-card,.jm-place,.jm-intro,.jm-cover{transition:none}
}