/* Brief illustrated interludes. JS owns their lifetime; these never block input. */
#journey-moment{
  position:fixed;inset:0;z-index:230;display:grid;place-items:center;
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:var(--bg);color:var(--ink,#173c50);
  pointer-events:none;overflow:hidden;isolation:isolate;view-transition-name:journey-moment;
  animation:moment-veil-in 140ms ease-out both;
}
#journey-moment[hidden]{display:none!important}
::view-transition-group(journey-moment){z-index:300;animation-duration:0s}
::view-transition-old(journey-moment){display:none}
::view-transition-new(journey-moment){animation:none}
.journey-moment-ticket{
  position:relative;width:min(304px,100%);padding:20px 24px 22px;text-align:center;
  border:1px solid var(--line);border-radius:10px;background:var(--sand-tint);
  box-shadow:0 10px 35px #173c500a;animation:moment-ticket-in 260ms cubic-bezier(.2,.8,.2,1) both;
}
.journey-moment-kicker{
  display:block;color:var(--coral-text);font-size:9px;font-weight:700;line-height:1.3;letter-spacing:.16em;
}
.journey-moment-art{height:88px;margin:11px auto 9px}
.journey-moment-art svg{
  display:none;width:112px;height:88px;margin:auto;overflow:visible;
  stroke:var(--teal-text);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
#journey-moment[data-kind="explore"] [data-moment-art="explore"],
#journey-moment[data-kind="plan"] [data-moment-art="plan"],
#journey-moment[data-kind="dining"] [data-moment-art="dining"],
#journey-moment[data-kind="ports"] [data-moment-art="ports"],
#journey-moment[data-kind="saved"] [data-moment-art="saved"],
#journey-moment[data-kind="pending"] [data-moment-art="pending"]{display:block}
.journey-moment-art .moment-wash{fill:var(--tint);stroke:none}
.journey-moment-art .moment-paper{fill:var(--sand-tint)}
.journey-moment-art .moment-faint{stroke:var(--line-strong)}
.journey-moment-art .moment-coral{stroke:var(--coral)}
.journey-moment-art .moment-coral-fill{fill:var(--coral);stroke:var(--coral)}
.journey-moment-art .moment-sun{fill:var(--sun);stroke:none}
#journey-moment-title{
  display:block;font-family:var(--font-display);font-size:23px;font-weight:700;
  line-height:1.15;letter-spacing:-.025em;text-wrap:balance;overflow-wrap:anywhere;
}
#journey-moment-detail{
  display:block;margin-top:13px;padding-top:12px;border-top:1px dashed var(--sand);
  color:var(--ink-2);font-size:12px;line-height:1.4;text-wrap:balance;
}
#journey-moment-detail:empty{display:none}
.moment-needle{transform-origin:56px 44px;animation:moment-compass 400ms cubic-bezier(.2,.8,.2,1) both}
.moment-calendar-page{transform-origin:56px 20px;animation:moment-page 320ms cubic-bezier(.2,.8,.2,1) both}
.moment-place-setting{animation:moment-setting 360ms ease-out both}
.moment-wave{animation:moment-wave 380ms ease-out both}
.moment-stamp{transform-origin:78px 63px;animation:moment-stamp 320ms cubic-bezier(.2,.8,.2,1) both}
.moment-check{stroke-dasharray:1;animation:moment-check 250ms 80ms ease-out both}
#journey-moment[data-phase="arrive"]{animation:moment-release 450ms ease-out both}
@keyframes moment-veil-in{from{opacity:0}to{opacity:1}}
@keyframes moment-ticket-in{from{transform:translateY(4px)}to{transform:translateY(0)}}
@keyframes moment-release{0%,65%{opacity:1}100%{opacity:0}}
@keyframes moment-compass{from{transform:rotate(-32deg)}to{transform:rotate(0)}}
@keyframes moment-page{from{opacity:.6;transform:translateY(-4px) rotate(-4deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes moment-setting{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes moment-wave{from{opacity:.4;transform:translateX(-5px)}to{opacity:1;transform:translateX(0)}}
@keyframes moment-stamp{from{opacity:0;transform:scale(1.18) rotate(-8deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes moment-check{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(max-height:400px){
  .journey-moment-ticket{padding:13px 20px 15px}
  .journey-moment-art{height:62px;margin:5px auto}
  .journey-moment-art svg{height:62px;width:79px}
  #journey-moment-title{font-size:20px}
  #journey-moment-detail{margin-top:8px;padding-top:8px}
}
@media(prefers-reduced-motion:reduce){#journey-moment{display:none!important}}