/* Scroll-driven parcel journey, with a compact route on mobile. */
.ocean-story { position: relative; margin-top: 36px; }
.ocean-stage {
  position: sticky;
  top: 88px;
  isolation: isolate;
  overflow: hidden;
  padding: 30px 34px 24px;
  border: 1px solid rgba(120, 199, 211, .24);
  border-radius: 28px;
  background: radial-gradient(ellipse at 65% 38%, #143739 0%, #0c1c22 42%, #080f15 80%);
  box-shadow: inset 0 1px 0 #ffffff0a, 0 30px 80px #0003;
}
.ocean-heading { padding-right: 165px; }
.ocean-heading .eyebrow { margin-bottom: 12px; color: #a9d6de; font-size: 9px; }
.ocean-heading h3 { margin: 0; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.055em; line-height: 1.05; }
.ocean-heading > p:last-child { margin: 12px 0 0; color: #a3c2ce; font-size: 11px; line-height: 1.5; }
.ocean-replay {
  position: absolute; top: 32px; right: 34px; z-index: 2;
  padding: 12px 14px; border: 1px solid #9dd4e540; border-radius: 30px;
  color: #c9e5ee; background: #02142299; font-size: 11px; cursor: pointer;
}
.ocean-replay:hover:not(:disabled) { background: #194047; border-color: #78c7d3; }
.ocean-replay:disabled { opacity: .4; cursor: default; }
.journey-map { position: relative; margin: 24px -34px 20px; }
.journey-map svg { display: block; width: 100%; height: clamp(220px, 32svh, 340px); }
.journey-map-label, .journey-map-note { position: absolute; left: 34px; font-size: 8px; letter-spacing: .16em; color: #8fb3b9; }
.journey-map-label { top: 0; }
.journey-map-note { bottom: 0; color: #65878e; font-size: 9px; letter-spacing: .03em; }
.journey-route { stroke: #70909555; stroke-width: 2; stroke-dasharray: 4 9; }
.journey-trail, .journey-trail-glow { stroke: url(#journey-gradient); stroke-linecap: round; }
.journey-trail { stroke-width: 3; }
.journey-trail-glow { stroke-width: 13; opacity: .2; filter: blur(5px); }
.journey-node circle { fill: #101f26; stroke: #456069; stroke-width: 2; transition: fill .3s, stroke .3s; }
.journey-node text { fill: #72939b; font: 600 11px ui-sans-serif, sans-serif; letter-spacing: .08em; }
.journey-node.is-reached circle { fill: #78c7d3; stroke: #b8ffdf; }
.journey-node.is-reached text { fill: #b8ffdf; }
.journey-home circle { fill: #10262c; stroke: #50747a; }
.journey-home path { stroke: #84a6ae; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.journey-home text { fill: #a3c2ce; font: 700 10px ui-sans-serif, sans-serif; letter-spacing: .17em; }
.ocean-story.is-delivered .journey-home circle { fill: #20564e; stroke: #b8ffdf; }
.ocean-story.is-delivered .journey-home path { stroke: #b8ffdf; }
.journey-parcel-halo { fill: #78c7d315; stroke: #b8ffdf44; }
.journey-parcel-box { stroke: #b8ffdf; stroke-width: 1.5; stroke-linejoin: round; filter: drop-shadow(0 4px 8px #0008); }
.journey-radar { stroke: #a3f0ee; opacity: 0; transform-box: fill-box; transform-origin: center; animation: journeyRadar 2.8s ease-out infinite; }
@keyframes journeyRadar { 0% { transform: scale(.8); opacity: .65; } 85%, 100% { transform: scale(2.4); opacity: 0; } }
.ocean-caption { min-height: 106px; padding: 18px 0 20px; border-top: 1px solid #78c7d31a; }
.ocean-chapter-number { color: #78c7d3; font-size: 10px; font-weight: 850; letter-spacing: .18em; }
.ocean-caption h4 { margin: 8px 0; font-size: clamp(23px, 3vw, 31px); letter-spacing: -.045em; }
.ocean-caption p { max-width: 620px; margin: 0; color: #b4ccd5; font-size: 12px; line-height: 1.6; }
.ocean-stops { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 0; margin: 0; list-style: none; }
.ocean-stops button {
  width: 100%; min-height: 48px; padding: 12px 0 0; border: 0;
  border-top: 2px solid #b2d5e033; color: #abc7d1; text-align: left;
  font-size: 10px; line-height: 1.35; background: transparent; cursor: pointer;
}
.ocean-stops button b { display: block; margin-bottom: 5px; font-size: 9px; letter-spacing: .12em; }
.ocean-stops button:disabled { color: #78939f; cursor: default; }
.ocean-stops button.is-reached { border-color: #3ba6b8; }
.ocean-stops button[aria-current="step"] { color: #efffff; border-color: #a3f0ee; }
.ocean-replay:focus-visible, .ocean-stops button:focus-visible { outline: 2px solid #a3f0ee; outline-offset: 4px; }
.ocean-hint { min-height: 15px; margin: 14px 0 0; color: #97b7c5; font-size: 10px; line-height: 1.5; }
@media (max-width: 620px) {
  .ocean-story { margin: 26px -4px 0; }
  .ocean-stage { top: 77px; padding: 22px 20px 18px; border-radius: 22px; }
  .ocean-heading { padding-right: 0; }
  .ocean-heading .eyebrow { font-size: 8px; letter-spacing: .15em; }
  .ocean-heading h3 { font-size: 34px; }
  .ocean-heading > p:last-child { font-size: 10px; }
  .ocean-replay { position: relative; top: auto; right: auto; margin-top: 14px; padding: 9px 12px; font-size: 10px; }
  .journey-map { margin: 16px -20px 14px; }
  .journey-map svg { height: clamp(200px, 30svh, 290px); }
  .journey-map-label, .journey-map-note { left: 20px; font-size: 7px; }
  .ocean-caption { min-height: 116px; padding: 16px 0; }
  .ocean-caption h4 { font-size: 24px; }
  .ocean-caption p { font-size: 11px; }
  .ocean-stops { gap: 8px; }
  .ocean-stops button { min-height: 44px; }
  .ocean-stops button span { display: none; }
  .ocean-stops button b { font-size: 11px; }
  .ocean-hint { min-height: 30px; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-radar { animation: none; }
  .journey-node circle { transition: none; }
}