/* Scene 3, the trip stop by stop: one camera through Athens, Naxos, Santorini and home,
   a ticker of stops (the Jesko "fly anywhere" energy) and one small proof at each stop. */

.sc--journey { color: var(--bone); }
.motion .sc--journey { height: 100svh; min-height: 560px; }

/* ---------- the ticker (motion only) ---------- */
.tick { display: none; }
.motion .tick {
  position: absolute; left: var(--gut); top: 50%; z-index: 2; display: flex; align-items: center; gap: clamp(14px, 1.4vw, 24px);
  transform: translateY(-50%); white-space: nowrap; pointer-events: none;
}
.tick__lab { font-size: clamp(17px, 1.45vw, 26px); font-weight: 500; font-stretch: 112%; letter-spacing: -.01em; opacity: .9; }
.tick__way { display: inline-flex; align-items: center; gap: 10px; color: var(--bone); }
.tick__way i { display: block; width: clamp(28px, 4.2vw, 74px); height: 1px; background: var(--hair); }
.tick__way svg { flex: none; }
.tick__col { position: relative; display: block; height: 1.14em; font-size: var(--t-mid); font-weight: 520; font-stretch: 125%; letter-spacing: -.03em; line-height: 1.14; }
.tick__rail { position: absolute; left: 0; top: 0; display: grid; will-change: transform; }
.tick__rail b { display: block; font-weight: inherit; opacity: .16; transition: none; }

/* ---------- each stop ---------- */
.stop { position: relative; min-height: max(100svh, 640px); }
.motion .stop { position: absolute; inset: 0; min-height: 0; }
.stop__h { position: absolute; left: var(--gut); top: 50%; transform: translateY(-50%); }
.stop__city { font-size: clamp(54px, 7vw, 132px); font-weight: 520; font-stretch: 125%; line-height: .9; letter-spacing: -.04em; margin: 0; }
.stop__when { margin-top: 1.2em; font-family: var(--f-mono); font-size: var(--t-lab); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-2); }
.motion .stop__h { top: calc(50% + var(--t-mid) * .62 + 14px); transform: none; left: var(--gut); }
.motion .stop__city { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.motion .stop__when { margin-top: 0; }

.stop__pf { position: absolute; right: var(--gut); top: 50%; width: min(31vw, 450px); transform: translateY(-46%); }
/* Naxos: the proof steps in from the edge so the Portara stands clear between it and the frame */
.stop[data-stop="naxos"] .stop__pf { right: calc(var(--gut) + clamp(120px, 15vw, 330px)); width: min(28vw, 420px); }
.bg--naxos img { object-position: 0% 50%; }
.stop__k { font-family: var(--f-mono); font-size: var(--t-lab); letter-spacing: .12em; text-transform: uppercase; color: var(--dusk); }
.stop__t { margin: .7em 0 1.4em; font-size: clamp(16px, 1.25vw, 21px); font-weight: 500; font-stretch: 106%; line-height: 1.28; letter-spacing: -.01em; max-width: 26ch; text-wrap: balance; }

.stop__cr, .stop__geo {
  position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(18px, 2.4vw, 34px));
  font-family: var(--f-mono); font-size: var(--t-lab); line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-3);
}
.stop__cr { left: var(--gut); right: calc(50% + 170px); }
.stop__cr span { white-space: nowrap; }
.stop__cr span + span::before { content: "· "; }
.stop__geo { right: var(--gut); }

/* legibility over bright photographs, without killing them */
.cam__veil--trip, .stop .bg__veil {
  background:
    radial-gradient(46% 70% at 82% 52%, rgba(14, 10, 12, .34) 0%, rgba(14, 10, 12, 0) 100%),
    linear-gradient(90deg, rgba(14, 10, 12, .62) 0%, rgba(14, 10, 12, .38) 32%, rgba(14, 10, 12, .1) 58%, rgba(14, 10, 12, .22) 100%),
    linear-gradient(0deg, rgba(14, 10, 12, .55) 0%, rgba(14, 10, 12, 0) 34%),
    linear-gradient(180deg, rgba(14, 10, 12, .46) 0%, rgba(14, 10, 12, 0) 24%);
}
/* home: Marine Drive at blue hour; the lens racks a little towards the keepsake */
.cam__p[data-p="home"] .cam__veil, .stop[data-stop="home"] .bg__veil { background-color: rgba(18, 12, 20, .12); }
.stop[data-stop="home"] .bg img { object-position: 50% 60%; filter: blur(3px); transform: scale(1.03); }

/* phones and portrait screens: the ticker on top, the proof below */
@media (orientation: portrait), (max-width: 760px) {
  .motion .tick { top: clamp(86px, 12svh, 128px); transform: none; flex-wrap: wrap; row-gap: 6px; width: calc(100% - var(--gut) * 2); }
  .tick__lab { font-size: 15px; }
  .tick__way i:last-child { display: none; }
  .tick__way i { width: 26px; }
  .tick__col { flex-basis: 100%; font-size: clamp(40px, 12vw, 64px); overflow: hidden; }
  .motion .stop__h { top: calc(clamp(86px, 12svh, 128px) + 30px + clamp(40px, 12vw, 64px) * 1.24); left: var(--gut); }
  .stop__h { top: clamp(96px, 14svh, 140px); transform: none; }
  .stop__city { font-size: clamp(44px, 13vw, 80px); }
  .stop__pf, .stop[data-stop="naxos"] .stop__pf { left: var(--gut); right: var(--gut); width: auto; top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 104px); transform: none; }
  .bg--naxos img { object-position: 80% 50%; }
  .stop__t { margin: .5em 0 1em; font-size: 16px; }
  .stop__cr, .stop__geo { display: none; }
  .stop__k, .stop__t { text-shadow: 0 1px 14px rgba(14, 10, 12, .55); }
  /* Athens is the brightest plate: more night in the band the proof's words sit on */
  .cam__p[data-p="athens"] .cam__veil--trip, .stop[data-stop="athens"] .bg__veil {
    background: linear-gradient(180deg, rgba(14, 10, 12, .62) 0%, rgba(14, 10, 12, .3) 22%, rgba(14, 10, 12, .6) 34%, rgba(14, 10, 12, .58) 56%, rgba(14, 10, 12, .8) 100%);
  }
  .cam__veil--trip, .stop .bg__veil {
    background:
      linear-gradient(180deg, rgba(14, 10, 12, .62) 0%, rgba(14, 10, 12, .28) 28%, rgba(14, 10, 12, .1) 42%, rgba(14, 10, 12, .44) 64%, rgba(14, 10, 12, .74) 100%);
  }
}
@media (max-height: 760px) and (orientation: landscape) {
  .stop__t { display: none; }
}