/* Journey Map V5 — test branch only. Desktop scroll-story / native mobile vertical scroll. */
#journey-map{position:relative;isolation:isolate;background:#173832;color:#f8f7f0;font-family:'Noto Sans TC',sans-serif}
#journey-map *{box-sizing:border-box}
#journey-map .jm-track{position:relative;height:620vh}
#journey-map .jm-scene{height:100svh;position:sticky;top:0;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}
#journey-map .jm-photo{
 position:absolute;inset:-5%;z-index:0;overflow:hidden;background:#425f5c;
 transform:scale(1.075);will-change:transform,opacity;opacity:0;
 transition:opacity .9s linear
}
#journey-map .jm-photo img{
 width:100%;height:100%;display:block;object-fit:cover;object-position:center 52%;
 filter:none;transform:scale(1.01)
}
#journey-map .jm-photo.is-active{opacity:1}
#journey-map .jm-spring img{object-position:center 52%}
#journey-map .jm-summer img{object-position:center 48%}
#journey-map .jm-autumn img{object-position:center 52%}
#journey-map .jm-winter img{object-position:center 50%}

/* Clean cinematic atmosphere: subtle light and haze, no heavy color wash. */
#journey-map .jm-season:after{content:"";position:absolute;inset:0;pointer-events:none;transition:opacity 1.65s ease}
#journey-map .jm-spring:after{background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 55%)}
#journey-map .jm-summer:after{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 58%)}
#journey-map .jm-autumn:after{background:linear-gradient(180deg,rgba(255,248,238,.025),transparent 58%)}
#journey-map .jm-winter:after{background:linear-gradient(180deg,rgba(240,248,252,.035),transparent 58%)}

/* Readability mask: neutral dark veil + center haze, intentionally low in color cast. */
#journey-map .jm-shade{
 position:absolute;inset:0;z-index:1;pointer-events:none;
 background:
  radial-gradient(ellipse 50% 54% at 50% 56%,rgba(239,243,238,.08) 0%,rgba(239,243,238,.025) 30%,rgba(7,22,25,.08) 60%,rgba(4,15,18,.18) 100%),
  linear-gradient(180deg,rgba(3,15,18,.34) 0%,rgba(5,24,27,.22) 38%,rgba(3,17,20,.42) 100%);
 transition:background 1.45s ease
}
#journey-map .jm-scene[data-season="spring"] .jm-shade,
#journey-map .jm-scene[data-season="summer"] .jm-shade,
#journey-map .jm-scene[data-season="autumn"] .jm-shade,
#journey-map .jm-scene[data-season="winter"] .jm-shade{
 background:
  radial-gradient(ellipse 50% 54% at 50% 56%,rgba(239,243,238,.08) 0%,rgba(239,243,238,.025) 30%,rgba(7,22,25,.08) 60%,rgba(4,15,18,.18) 100%),
  linear-gradient(180deg,rgba(3,15,18,.34) 0%,rgba(5,24,27,.22) 38%,rgba(3,17,20,.42) 100%)
}
#journey-map .jm-photo-credit{
 position:absolute;left:12px;bottom:10px;z-index:8;color:#f3f5ef;text-decoration:none;
 font-size:7px;letter-spacing:.08em;opacity:.34;text-shadow:0 1px 5px rgba(0,0,0,.55)
}
#journey-map .jm-photo-credit:hover,#journey-map .jm-photo-credit:focus-visible{opacity:.72}
@media(max-width:767px){
 #journey-map .jm-photo{inset:-4%;background-position:center center}
 #journey-map .jm-spring img{object-position:50% 50%}
 #journey-map .jm-summer img{object-position:53% 50%}
 #journey-map .jm-autumn img{object-position:48% 50%}
 #journey-map .jm-winter img{object-position:52% 50%}
 #journey-map .jm-shade{
  background:
   radial-gradient(ellipse 72% 48% at 50% 53%,rgba(241,244,238,.10),rgba(238,241,235,.035) 34%,rgba(8,27,30,.05) 63%,rgba(5,22,26,.14)),
   linear-gradient(180deg,rgba(6,25,28,.30),rgba(8,31,33,.18) 38%,rgba(5,24,28,.38))
 }
 #journey-map .jm-photo-credit{font-size:6px;bottom:7px;left:8px;opacity:.28}
}
@media(prefers-reduced-motion:reduce){#journey-map .jm-photo{transition:none}}
#journey-map .jm-head{position:absolute;top:clamp(92px,11vh,126px);text-align:center;width:min(90%,790px);z-index:5}
#journey-map .jm-kicker{font-size:10px;letter-spacing:.22em;color:#e6eddf}
#journey-map h2{font-size:clamp(25px,2.9vw,38px);font-weight:400;line-height:1.6;letter-spacing:.065em;margin:14px 0 8px;color:#fff;font-family:'Noto Serif TC',serif;text-shadow:0 3px 22px #17383499}
#journey-map .jm-head-sub{color:#e0ebdf;font-size:10px;letter-spacing:.2em}
#journey-map .jm-desktop{position:absolute;inset:0;max-width:1300px;width:100%;margin:auto}
#journey-map .jm-map-desktop{position:absolute;left:50%;top:57%;width:min(74vw,970px);height:min(60vh,530px);transform:translate(-50%,-43%);overflow:visible}
#journey-map .jm-map-mobile{display:none}
#journey-map .jm-island{fill:#e3f1df08;stroke:#f3f7ef;stroke-width:1.55;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 2px #e9f9ec55)}
#journey-map .jm-map-base{opacity:.9}
#journey-map .jm-route,#journey-map .jm-leader{fill:none;stroke:#fff0d5;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px #fff3ce75)}
#journey-map .jm-leader{stroke-width:1.05;stroke:#f7f1d7;opacity:.78;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 2px #fff2cc45)}
#journey-map .jm-node{fill:#fff2d2;stroke:#fff8e6;stroke-width:1;opacity:.18;transition:opacity .4s,r .42s cubic-bezier(.22,1,.36,1)}
#journey-map .jm-node.jm-visited{opacity:.55}
#journey-map .jm-node.jm-active{opacity:1;filter:drop-shadow(0 0 6px #fff4c2)}
#journey-map .jm-ring{fill:none;stroke:#fff2c7;stroke-width:1.25;opacity:0;transform-box:fill-box;transform-origin:center}
#journey-map .jm-ring.jm-pulse{animation:jm-arrive 1.15s ease-out forwards}
@keyframes jm-arrive{0%{opacity:.85;transform:scale(.45)}100%{opacity:0;transform:scale(2.6)}}
#journey-map .jm-desktop-service{position:absolute;width:min(24%,265px);z-index:6;text-decoration:none;color:#fff;opacity:.16;transform:translateY(-50%);transition:opacity .5s,transform .6s}
#journey-map .jm-desktop-service.jm-past{opacity:.48}
#journey-map .jm-desktop-service.jm-now{opacity:1;transform:translate(5px,-50%)}
#journey-map .jm-desktop-service:focus-visible{outline:1px solid #fff8db;outline-offset:8px;opacity:1}
#journey-map .jm-desktop-service.jm-left{left:3%}
#journey-map .jm-desktop-service.jm-right{right:3%}
#journey-map .jm-desktop-service[data-jm-step="0"]{top:27%}
#journey-map .jm-desktop-service[data-jm-step="1"]{top:37%}
#journey-map .jm-desktop-service[data-jm-step="2"]{top:47%}
#journey-map .jm-desktop-service[data-jm-step="3"]{top:57%}
#journey-map .jm-desktop-service[data-jm-step="4"]{top:67%}
#journey-map .jm-desktop-service[data-jm-step="5"]{top:77%}
#journey-map .jm-desktop-service[data-jm-step="0"],
#journey-map .jm-desktop-service[data-jm-step="2"],
#journey-map .jm-desktop-service[data-jm-step="4"]{text-align:left}
#journey-map .jm-desktop-service[data-jm-step="1"],
#journey-map .jm-desktop-service[data-jm-step="3"],
#journey-map .jm-desktop-service[data-jm-step="5"]{text-align:left}
#journey-map .jm-no{font:10px Georgia,serif;letter-spacing:.18em;color:#e2ead5}
#journey-map .jm-name{font:400 clamp(17px,1.6vw,23px)/1.55 'Noto Serif TC',serif;letter-spacing:.07em;margin:5px 0}
#journey-map .jm-desc{font-size:12px;letter-spacing:.07em;color:#e8eee4;line-height:1.8}
#journey-map .jm-mobile-text{display:none}
#journey-map .jm-progress{position:absolute;bottom:clamp(24px,5vh,54px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;width:min(320px,62%);color:#fff3d9;z-index:7}
#journey-map .jm-count{white-space:nowrap;font:13px Georgia,serif;letter-spacing:.11em}
#journey-map .jm-count span{opacity:.55}
#journey-map .jm-progress-track{height:1px;flex:1;background:#dbe9e269;overflow:hidden}
#journey-map .jm-progress-fill{width:0;height:100%;background:#fff5d9}
#journey-map .jm-bottom-caption{position:absolute;bottom:13px;left:0;right:0;text-align:center;letter-spacing:.16em;font-size:9px;color:#eff3e8;opacity:.8}
#journey-map .jm-end{position:absolute;left:50%;top:50%;transform:translate(-50%,-42%);width:min(82%,430px);text-align:center;opacity:0;visibility:hidden;transition:opacity .6s,transform .6s;z-index:9}
#journey-map .jm-end.jm-visible{opacity:1;visibility:visible;transform:translate(-50%,-50%)}
#journey-map .jm-end h3{font:400 clamp(26px,3.5vw,40px)/1.55 'Noto Serif TC',serif;color:#fff;letter-spacing:.08em;margin:13px 0}
#journey-map .jm-end p{font-size:13px;line-height:1.85;color:#eaf1e9}
#journey-map .jm-end a{display:inline-block;margin-top:25px;color:#fff;text-decoration:none;border-bottom:1px solid #f2eed2;padding:7px 2px;font-size:14px;letter-spacing:.1em}
#journey-map .jm-end a:hover{color:#fff3d6}
#journey-map .jm-marker{height:1px;position:absolute;width:1px;pointer-events:none}
@media(min-width:768px){#journey-map .jm-desktop-service:hover{opacity:1}}
@media(max-width:767px){
 #journey-map .jm-track{height:445vh}
 #journey-map .jm-scene{min-height:490px}
 #journey-map .jm-head{top:clamp(83px,12svh,112px);width:94%}
 #journey-map .jm-kicker{font-size:9px;letter-spacing:.15em}
 #journey-map h2{font-size:clamp(23px,6.1vw,29px);line-height:1.52;margin:10px 0 6px}
 #journey-map .jm-head-sub{font-size:9px}
 #journey-map .jm-desktop{display:none}
 #journey-map .jm-map-mobile{display:block;position:absolute;left:50%;top:clamp(216px,calc(26svh + 46px),286px);width:min(75vw,295px);height:min(40svh,307px);transform:translateX(-50%);overflow:visible}
 #journey-map .jm-mobile-text{display:flex;position:absolute;left:18px;right:18px;bottom:clamp(86px,13svh,120px);min-height:108px;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;gap:8px;text-shadow:0 2px 14px #123b3999}
 #journey-map .jm-mobile-text .jm-no{font-size:9px}
 #journey-map .jm-mobile-text .jm-name{font-size:clamp(25px,7vw,32px);margin:0}
 #journey-map .jm-mobile-text .jm-desc{font-size:12px}
 #journey-map .jm-mobile-text.jm-enter>*{animation:jm-copy .62s cubic-bezier(.22,1,.36,1) both}
 #journey-map .jm-mobile-text.jm-enter>*:nth-child(2){animation-delay:.09s}
 #journey-map .jm-mobile-text.jm-enter>*:nth-child(3){animation-delay:.17s}
 @keyframes jm-copy{from{opacity:0;transform:translateY(13px);filter:blur(3px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
 #journey-map .jm-progress{bottom:clamp(48px,7svh,68px);width:min(78%,325px)}
 #journey-map .jm-bottom-caption{bottom:22px}
 #journey-map .jm-end{top:53%;width:88%}
 #journey-map .jm-end h3{font-size:30px}
 #journey-map .jm-end a{font-size:13px}
 #journey-map .jm-scene.jm-finale .jm-map-mobile{opacity:.2;transition:opacity .6s}
 #journey-map .jm-scene.jm-finale .jm-mobile-text{opacity:0}
}
@media(max-width:767px) and (max-height:640px){#journey-map .jm-map-mobile{top:178px;height:210px;width:204px}#journey-map .jm-mobile-text{bottom:74px;min-height:70px}#journey-map .jm-mobile-text .jm-name{font-size:23px}}
@media(prefers-reduced-motion:reduce){
 #journey-map *,#journey-map *:before,#journey-map *:after{animation:none!important;transition:none!important;filter:none!important}
 #journey-map .jm-track{height:220vh}
}

/* Finale replaces, rather than overlays, the heading and interactive service stage. */
#journey-map .jm-head,
#journey-map .jm-desktop,
#journey-map .jm-map-mobile{transition:opacity .6s ease,visibility .6s ease}
#journey-map .jm-scene.jm-finale .jm-head,
#journey-map .jm-scene.jm-finale .jm-desktop{
 opacity:0;visibility:hidden;pointer-events:none
}
#journey-map .jm-scene.jm-finale .jm-map-mobile{
 opacity:0;visibility:hidden
}
#journey-map .jm-scene.jm-finale .jm-mobile-text{
 opacity:0;visibility:hidden;pointer-events:none
}
#journey-map .jm-scene.jm-finale .jm-end{pointer-events:auto}
#journey-map .jm-end:not(.jm-visible){pointer-events:none}
#journey-map .jm-end.jm-visible{transition-delay:.14s}
#journey-map .jm-map-base .jm-island{vector-effect:non-scaling-stroke}
@media(max-width:767px){
 #journey-map .jm-scene.jm-finale .jm-map-mobile{opacity:0;visibility:hidden}
}

/* Directional scroll cue beside the map: visible without floating controls. */
#journey-map .jm-scroll-cue{position:absolute;z-index:8;right:clamp(14px,3vw,44px);top:48%;display:flex;flex-direction:column;align-items:center;gap:11px;color:#f8f4e7;writing-mode:vertical-rl;font-size:11px;letter-spacing:.24em;text-shadow:0 2px 12px #173932ad;pointer-events:none;opacity:.89;transition:opacity .4s}
#journey-map .jm-cue-arrow{writing-mode:horizontal-tb;font:22px Georgia,serif;animation:jm-cue-down 1.8s ease-in-out infinite}
@keyframes jm-cue-down{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
#journey-map .jm-scene.jm-finale .jm-scroll-cue{opacity:0;visibility:hidden}
@media(max-width:767px){
 #journey-map .jm-scroll-cue{top:43%;right:10px;font-size:10px;gap:9px;letter-spacing:.15em}
 #journey-map .jm-cue-arrow{font-size:19px}
}
@media(prefers-reduced-motion:reduce){#journey-map .jm-cue-arrow{animation:none}}

/* Scroll guidance: clearer on the sea image without adding a card or button. */
#journey-map .jm-scroll-cue{color:#fffdf4;font-size:12px;font-weight:600;letter-spacing:.19em;opacity:1;text-shadow:0 1px 5px #123531,0 2px 14px #0d2b30}
#journey-map .jm-cue-arrow{font-size:26px;font-weight:600;filter:drop-shadow(0 0 5px rgba(255,250,220,.55))}
@media(max-width:767px){
 #journey-map .jm-scroll-cue{right:13px;top:47%;font-size:12px;letter-spacing:.17em;gap:11px}
 #journey-map .jm-cue-arrow{font-size:25px}
}

/* Mobile polish: more breathing room above map, editorial scroll signpost. */
@media(max-width:767px){
 #journey-map .jm-scroll-cue{
  top:51%;right:clamp(16px,5vw,24px);
  gap:13px;color:#fffdf1;font-size:13px;font-weight:700;
  letter-spacing:.22em;text-shadow:0 2px 8px rgba(7,29,30,.92);
 }
 #journey-map .jm-scroll-cue::before{
  content:"";display:block;order:1;width:1px;height:43px;
  background:linear-gradient(to bottom,rgba(255,253,231,.25),#fffbe3);
  margin:0 auto;
 }
 #journey-map .jm-cue-arrow{
  order:2;font-size:28px;line-height:1;
  filter:drop-shadow(0 1px 7px rgba(255,255,236,.9));
  animation:jm-cue-down 1.4s ease-in-out infinite;
 }
}
@media(max-width:767px) and (max-height:640px){
 #journey-map .jm-scroll-cue{top:47%;right:13px}
 #journey-map .jm-scroll-cue::before{height:24px}
}
@media(prefers-reduced-motion:reduce){#journey-map .jm-cue-arrow{animation:none}}

/* Keep the opening concise on phones; the intro JS snaps cleanly into Journey Map. */
@media(max-width:767px){#intro-pin-trigger{height:126svh}}

/* Journey Map readability pass: stronger type/map separation from seasonal photography. */
#journey-map .jm-head{isolation:isolate}
#journey-map .jm-head:before{
 content:"";position:absolute;z-index:-1;left:50%;top:50%;transform:translate(-50%,-50%);
 width:min(92vw,760px);height:185%;pointer-events:none;
 background:radial-gradient(ellipse at center,rgba(3,17,20,.42) 0%,rgba(3,17,20,.24) 43%,transparent 74%);
 filter:blur(9px)
}
#journey-map h2{font-weight:500;text-shadow:0 2px 7px rgba(0,0,0,.82),0 0 26px rgba(0,0,0,.58)}
#journey-map .jm-kicker,#journey-map .jm-head-sub{text-shadow:0 2px 7px rgba(0,0,0,.86),0 0 16px rgba(0,0,0,.48)}
#journey-map .jm-island{stroke:#fffdf4;stroke-width:1.75;filter:drop-shadow(0 0 2px rgba(255,255,244,.72)) drop-shadow(0 2px 5px rgba(0,0,0,.50))}
#journey-map .jm-route,#journey-map .jm-leader{stroke:#fff2cf;filter:drop-shadow(0 0 4px rgba(255,241,196,.72)) drop-shadow(0 2px 5px rgba(0,0,0,.58))}
#journey-map .jm-node.jm-active{filter:drop-shadow(0 0 8px rgba(255,245,197,.95)) drop-shadow(0 2px 5px rgba(0,0,0,.55))}
#journey-map .jm-scroll-cue{color:#fffdf5;text-shadow:0 2px 7px rgba(0,0,0,.95),0 0 18px rgba(0,0,0,.58)}
#journey-map .jm-cue-arrow{filter:drop-shadow(0 1px 8px rgba(255,255,238,.92)) drop-shadow(0 2px 6px rgba(0,0,0,.75))}
@media(max-width:767px){
 #journey-map .jm-shade{
  background:
   radial-gradient(ellipse 75% 50% at 50% 54%,rgba(240,244,239,.10),rgba(239,242,236,.03) 30%,rgba(5,22,26,.22) 62%,rgba(3,16,20,.46)),
   linear-gradient(180deg,rgba(4,19,23,.72),rgba(5,29,32,.56) 38%,rgba(3,18,22,.80))
 }
 #journey-map .jm-head:before{width:96vw;height:190%}
}

/* Seasonal image stack must sit above the section background, while all Journey Map UI stays above the mask. */
#journey-map .jm-photo{z-index:0}
#journey-map .jm-shade{z-index:1}
#journey-map .jm-head,
#journey-map .jm-desktop,
#journey-map .jm-map-mobile,
#journey-map .jm-mobile-text,
#journey-map .jm-progress,
#journey-map .jm-bottom-caption,
#journey-map .jm-scroll-cue,
#journey-map .jm-end{z-index:5}
#journey-map .jm-progress{z-index:7}
#journey-map .jm-scroll-cue,#journey-map .jm-end{z-index:9}

/* Typography readability pass — preserve labels and editorial hierarchy. */
#journey-map .jm-desc{font-size:14px;line-height:1.8}
#journey-map .jm-end p{font-size:15px;line-height:1.9}
#journey-map .jm-end a{font-size:14px}
@media(max-width:760px){
  #journey-map .jm-mobile-text .jm-desc{font-size:14px;line-height:1.8}
  #journey-map .jm-end p{font-size:15px}
}