/* Tide Tribe · "Know what you'll see". Black, white line drawings that draw themselves, a pinned harbour map
   with a yacht sailing the route as you scroll. Mobile first: the map pins under the header, stops scroll below it. */
.voy{background:#000;color:#fff;padding:88px 0 0}
.voy__title{margin:0 0 14px;font-family:var(--font-heading);font-weight:400;color:#fff;font-size:clamp(44px,11.5vw,104px);line-height:.95;letter-spacing:-.03em;max-width:10ch}
.voy__lede{margin:0 0 40px;max-width:34ch;font-size:1.125rem;color:rgba(255,255,255,.72)}

/* pinned map */
.voy__map{position:sticky;top:var(--header-h,64px);z-index:3;height:40svh;min-height:250px;margin:0 calc(var(--page-margin) * -1);padding:10px var(--page-margin);background:#000;border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18);display:grid;grid-template-columns:auto 1fr;align-items:end;gap:18px}
.voy__map svg{height:100%;width:auto;max-width:62vw;display:block;overflow:visible}
.voy__land{fill:#1b1b1b;stroke:rgba(255,255,255,.35);stroke-width:1}
.voy__area{font:600 10px/1 var(--font-body);letter-spacing:.3em;fill:rgba(255,255,255,.35)}
.voy__route{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.5;stroke-dasharray:4 5}
.voy__done{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.voy__pt{fill:rgba(255,255,255,.45);transition:fill .3s ease}
.voy__pt text{font:13px/1 var(--font-body);fill:rgba(255,255,255,.45);transition:fill .3s ease}
.voy__pt.on,.voy__pt.on text{fill:#fff}
.voy__pt.on circle,.voy__pt.on path{stroke:#fff;stroke-width:6;stroke-opacity:.25}
.voy__boat .voy__hull{animation:voy-rock 2.6s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
@keyframes voy-rock{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
.voy__cap{margin:0 0 6px;display:grid;gap:14px;align-self:end;justify-items:start}
.voy__cap p{margin:0;display:grid;gap:6px}
.voy__cap p span{font-size:.75rem;letter-spacing:.16em;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.voy__cap p span::after{content:" / 09"}
.voy__cap p b{font-family:var(--font-heading);font-weight:400;font-size:clamp(22px,6vw,34px);line-height:1;letter-spacing:-.02em}

/* sound switch */
.voy__sound{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 10px;background:none;color:#fff;border:1px solid rgba(255,255,255,.5);font:inherit;font-size:.875rem;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background-color .2s ease,color .2s ease,transform .16s cubic-bezier(.23,1,.32,1)}
.voy__sound:active{transform:scale(.96)}
.voy__sound svg{width:20px;height:20px}
.voy__sound .w1,.voy__sound .w2{opacity:.25;transition:opacity .2s}
.voy__sound[aria-pressed="true"]{background:#fff;color:#000;border-color:#fff}
.voy__sound[aria-pressed="true"] .w1{opacity:1;animation:voy-wave 1.2s ease-in-out infinite}
.voy__sound[aria-pressed="true"] .w2{opacity:1;animation:voy-wave 1.2s .2s ease-in-out infinite}
@keyframes voy-wave{50%{opacity:.25}}
@media (hover:hover) and (pointer:fine){.voy__sound:not([aria-pressed="true"]):hover{background:rgba(255,255,255,.12)}}

/* stops */
.voy__stops{list-style:none;margin:0;padding:0}
.voy__stop{min-height:76svh;display:flex;flex-direction:column;justify-content:center;padding:44px 0;border-bottom:1px solid rgba(255,255,255,.14);opacity:.35;transition:opacity .45s ease}
.voy__stop.is-active{opacity:1}
.voy__art{margin:0 0 22px}
.voy__art svg{display:block;width:100%;max-width:440px;height:auto;overflow:visible;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.voy__when{display:flex;align-items:baseline;gap:12px;margin:0 0 8px;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.voy__when span{font-variant-numeric:tabular-nums;color:#fff}
.voy__stop h3{margin:0 0 12px;font-family:var(--font-heading);font-weight:400;font-size:clamp(36px,9vw,60px);line-height:1;letter-spacing:-.02em;color:#fff}
.voy__stop p{margin:0;max-width:36ch;font-size:1.0625rem;line-height:1.6;color:rgba(255,255,255,.82)}
.voy__look{margin-top:16px!important;padding-top:14px;border-top:1px solid rgba(255,255,255,.2)}
.voy__look b{display:block;font-weight:600;color:#fff;margin-bottom:2px}
.voy__sun{margin-top:12px!important;color:#fff!important}
.voy__end{padding:72px 0 96px}
.voy__end p{margin:0 0 22px;font-family:var(--font-heading);font-size:clamp(36px,9vw,64px);line-height:1;letter-spacing:-.02em}

/* drawings: lines draw in once, then small loops run while on screen */
.voy .d{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.5s cubic-bezier(.23,1,.32,1) calc(var(--i) * .12s)}
.voy .drawn .d{stroke-dashoffset:0}
.voy__stop:not(.in) *{animation-play-state:paused!important}
.voy .wv path{stroke-opacity:.45;animation:voy-drift 6s ease-in-out infinite alternate}
.voy .wv path:nth-child(even){animation-duration:7.5s;animation-direction:alternate-reverse}
@keyframes voy-drift{from{transform:translateX(-10px)}to{transform:translateX(10px)}}
.voy .w{fill:#fff;stroke:none;opacity:.12;animation:voy-lit 6s ease-in-out infinite;animation-delay:calc(var(--k) * -.27s)}
@keyframes voy-lit{0%,35%{opacity:.12}50%,85%{opacity:.85}100%{opacity:.12}}
.voy .ship{animation:voy-ship 18s linear infinite}
@keyframes voy-ship{from{transform:translate(-60px,118px)}to{transform:translate(360px,118px)}}
.voy .gulls{animation:voy-glide 7s ease-in-out infinite alternate}
@keyframes voy-glide{from{transform:translate(0,0)}to{transform:translate(16px,-8px)}}
.voy .gull{transform:translate(var(--x),var(--y))}
.voy .gull path{transform-box:fill-box;transform-origin:50% 100%;animation:voy-flap .8s ease-in-out infinite alternate;animation-delay:calc(var(--k) * -.23s)}
@keyframes voy-flap{to{transform:scaleY(.3)}}
.voy .surf path{animation:voy-surf 2.8s ease-in-out infinite}
.voy .surf path:nth-child(odd){animation-delay:-1.4s}
@keyframes voy-surf{0%,100%{opacity:.15;transform:translateY(2px)}50%{opacity:.8;transform:none}}
.voy .blink{animation:voy-blink 2.4s steps(1) infinite}
@keyframes voy-blink{0%,18%{opacity:1}19%,100%{opacity:.12}}
.voy .beam{transform-box:view-box;transform-origin:160px 44px;animation:voy-sweep 4s linear infinite}
@keyframes voy-sweep{0%{transform:scaleX(1);opacity:1}25%{transform:scaleX(0);opacity:.4}50%{transform:scaleX(-1);opacity:1}75%{transform:scaleX(0);opacity:.4}100%{transform:scaleX(1);opacity:1}}
.voy .sun{animation:voy-set 10s ease-in-out infinite}
@keyframes voy-set{0%{transform:translateY(-14px)}75%,100%{transform:translateY(78px)}}
.voy .city{stroke:#fff;stroke-width:1.6}
.voy .glint path{animation:voy-glint 3s ease-in-out infinite alternate}
.voy .glint path:nth-child(2n){animation-delay:-1.5s}
@keyframes voy-glint{from{stroke-opacity:.15}to{stroke-opacity:.85}}
.voy .bob{transform-box:view-box;transform-origin:170px 150px;animation:voy-bob 3.2s ease-in-out infinite alternate}
@keyframes voy-bob{from{transform:rotate(-2.5deg) translateY(0)}to{transform:rotate(2.5deg) translateY(3px)}}
.voy .wake path{stroke-opacity:.5;animation:voy-drift 4s ease-in-out infinite alternate}

@media(min-width:990px){
  .voy{padding-top:140px}
  .voy__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:80px;align-items:start}
  .voy__map{top:calc(var(--header-h,72px) + 24px);height:calc(100svh - var(--header-h,72px) - 48px);margin:0;padding:0;border:0;grid-template-columns:1fr;grid-template-rows:1fr auto;align-items:center;justify-items:center}
  .voy__map svg{max-width:100%;height:100%;max-height:72svh}
  .voy__cap{justify-self:start}
  .voy__stops{grid-column:2;grid-row:1}
  .voy__stop{min-height:88svh;border-bottom:0}
  .voy__end{grid-column:2}
  /* departures section on the home page: the voyage took its chart, the route runs full width */
  .night--home .route{grid-column:1/-1;grid-template-columns:repeat(4,1fr)!important;gap:28px!important}
  .night--home .route li{grid-template-columns:1fr!important;border-bottom:0!important;border-top:1px solid rgba(255,255,255,.4)!important}
  .night--home .night__map{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .voy *,.voy *::before{animation:none!important;transition:none!important}
  .voy .d{stroke-dashoffset:0}
  .voy__stop{opacity:1}
}