/* Expedition furniture: the ship on the surface, the dive line, the saucer.
   Injected by calypso.js; this only dresses it. */

/* ---- the surface ------------------------------------------------------- */

.surface {
  position: relative;
  height: 190px;
  margin-bottom: -34px;
  color: #04202B;
  overflow: hidden;
  pointer-events: none;
}

/* Sky above the waterline, so the ship is genuinely on top of the water
   rather than floating in the same blue as the reader. */
.surface__sky {
  position: absolute; inset: 0 0 44px 0;
  background: linear-gradient(180deg, #BFE9F2 0%, #8FD3E4 55%, #63BDD6 100%);
}

.surface__ship {
  position: absolute;
  left: 50%;
  bottom: 34px;
  width: 300px;
  transform: translateX(-50%);
  color: #072E3D;
  filter: drop-shadow(0 3px 0 rgba(7,46,61,.25));
}

/* The waterline itself, with a little chop. */
.surface__line {
  position: absolute; left: 0; right: 0; bottom: 30px; height: 16px;
  background:
    radial-gradient(10px 7px at 12px 0, #EFF9FC 60%, transparent 62%) repeat-x 0 0 / 34px 16px,
    linear-gradient(180deg, #EFF9FC 0 5px, rgba(239,249,252,.55) 5px 9px, transparent 9px);
  opacity: .95;
}

.surface__label {
  position: absolute; left: 0; right: 0; bottom: 6px;
  text-align: center;
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 11px; letter-spacing: .26em;
  color: rgba(239,231,211,.72);
}

/* ---- the dive line ----------------------------------------------------- */

.dive {
  position: fixed;
  top: 46px; bottom: 40px; left: 26px;
  width: 78px;
  z-index: 30;
  pointer-events: none;
}

.dive__cable {
  position: absolute; top: 0; bottom: 0; left: 15px; width: 2px;
  background: linear-gradient(180deg, rgba(239,231,211,.55), rgba(239,231,211,.16));
}

.dive__marks { position: absolute; inset: 0; }

.dive__mark {
  position: absolute; left: 8px; width: 16px; height: 1px;
  background: rgba(239,231,211,.45);
}
.dive__mark::after {
  content: attr(data-label);
  position: absolute; left: 22px; top: -7px;
  font-family: "IBM Plex Mono", monospace; font-size: 10px;
  color: rgba(239,231,211,.42); white-space: nowrap;
}

.dive__pod {
  position: absolute; left: 0; top: 0;
  width: 78px; margin-top: -22px;
  transition: top 120ms linear;
}

.dive__saucer { display: block; width: 46px; margin-left: -7px; }

/* Lamp on, once the saucer is properly under. */
.dive--lit .dive__saucer { filter: drop-shadow(0 0 12px rgba(232,167,18,.55)); }

.dive__depth {
  display: block; margin: 2px 0 0 -4px;
  font-family: "IBM Plex Mono", monospace; font-weight: 500;
  font-size: 11px; color: var(--saucer, #E8A712);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(3,26,38,.8);
}

/* ---- marine life -------------------------------------------------------
   A layer behind everything. The article sheet covers the middle of the
   screen, so these are glimpsed in the water either side of it — distant
   silhouettes, not characters. Everything animates on transform only. */

.marine {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  color: #031A24;
}

.marine__lane {
  position: absolute;
  left: 0;
  will-change: transform;
  animation-name: marine-swim;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Right-to-left lanes are flipped, so the fish and divers face the way they
   are going without needing a second set of drawings. */
.marine__lane--rtl { animation-name: marine-swim-back; transform: scaleX(-1); }

@keyframes marine-swim {
  from { transform: translate3d(-30vw, 0, 0); }
  to   { transform: translate3d(112vw, 0, 0); }
}
@keyframes marine-swim-back {
  from { transform: translate3d(112vw, 0, 0) scaleX(-1); }
  to   { transform: translate3d(-30vw, 0, 0) scaleX(-1); }
}

.marine__group { position: relative; display: block; width: 120px; height: 60px; }

.marine__fish {
  position: absolute;
  display: block;
  animation: marine-bob 3.4s ease-in-out infinite;
}
.marine__fish svg { display: block; width: 100%; height: auto; }

@keyframes marine-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

.marine__diver { display: block; width: 176px; animation: marine-bob 5.5s ease-in-out infinite; }
.marine__diver--far { width: 116px; }
.marine__diver svg { display: block; width: 100%; height: auto; }

/* The kick. Origin at the hip so the fins sweep rather than slide. */
.marine__fins {
  transform-origin: 78px 38px;
  animation: marine-kick 3s ease-in-out infinite;
}
@keyframes marine-kick {
  0%, 100% { transform: rotate(-7deg); }
  50%      { transform: rotate(7deg); }
}

.marine__bubbles { animation: marine-exhale 4.2s ease-in infinite; }
@keyframes marine-exhale {
  0%   { transform: translateY(4px);   opacity: 0; }
  25%  { opacity: .6; }
  100% { transform: translateY(-26px); opacity: 0; }
}

.marine__turtle { display: block; width: 128px; animation: marine-bob 7s ease-in-out infinite; }
.marine__turtle svg { display: block; width: 100%; height: auto; }

.marine__bubble {
  position: absolute;
  bottom: -20px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(232, 251, 255, .3);
  animation-name: marine-rise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes marine-rise {
  from { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
  12%  { opacity: .55; }
  to   { transform: translate3d(14px, -105vh, 0) scale(1.25); opacity: 0; }
}

/* Content sits above the water. */
.wrap, .surface, .dive { position: relative; z-index: 1; }
.dive { z-index: 30; }

@media (max-width: 620px) {
  /* Very narrow: the sheet fills the screen, so scale the life down and let it
     swim through the margins that remain rather than removing it. */
  .marine__diver { width: 118px; }
  .marine__diver--far { width: 84px; }
  .marine__turtle { width: 84px; }
}

/* ---- the crew ---------------------------------------------------------- */

/* The red watch cap, as the marker for a member of the équipe. */
.cap::before {
  content: "";
  display: inline-block;
  width: 11px; height: 8px;
  margin-right: 7px;
  border-radius: 6px 6px 2px 2px;
  background: var(--calypso, #C63A22);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.22);
  vertical-align: baseline;
}

.film__line i::before,
.hearing__cast::before {
  content: "";
  display: inline-block;
  width: 10px; height: 7px;
  margin-right: 6px;
  border-radius: 5px 5px 2px 2px;
  background: var(--calypso, #C63A22);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.22);
}

/* ---- credit ------------------------------------------------------------ */

.expedition-note {
  max-width: 62ch;
  margin: 40px auto 0;
  text-align: center;
  font-family: "Barlow Condensed", sans-serif; font-weight: 500;
  font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(239,231,211,.55);
  line-height: 1.9;
}
.expedition-note b { color: rgba(239,231,211,.8); font-weight: 600; }

/* ---- narrow screens ---------------------------------------------------- */

@media (max-width: 1080px) {
  /* Tighter to the edge once the sheet crowds it. */
  .dive { left: 8px; width: 60px; }
  .dive__mark::after { display: none; }
}

@media (max-width: 820px) {
  /* Genuinely no room beside the sheet; keep the ship, drop the line. */
  .dive { display: none; }
}

@media (max-width: 640px) {
  .surface { height: 132px; margin-bottom: -22px; }
  .surface__ship { width: 196px; bottom: 26px; }
  .surface__line { bottom: 22px; }
  .surface__label { font-size: 10px; letter-spacing: .2em; }
}

@media (prefers-reduced-motion: reduce) {
  .dive__pod { transition: none; }
  /* Still populated, just holding station. */
  .marine__lane,
  .marine__fish,
  .marine__diver,
  .marine__turtle,
  .marine__fins,
  .marine__bubbles,
  .marine__bubble { animation-play-state: paused; }
  .marine__lane:nth-child(1) { transform: translate3d(58vw, 0, 0); }
  .marine__lane:nth-child(2) { transform: translate3d(22vw, 0, 0) scaleX(-1); }
  .marine__lane:nth-child(3) { transform: translate3d(70vw, 0, 0); }
  .marine__lane:nth-child(4) { transform: translate3d(12vw, 0, 0) scaleX(-1); }
  .marine__lane:nth-child(5) { transform: translate3d(64vw, 0, 0); }
  .marine__lane:nth-child(6) { transform: translate3d(30vw, 0, 0) scaleX(-1); }
}