/* ==========================================================================
   VESSELS — Stories-style phone showcase
   A belt of full-photo story cards drifts left → right across the stage.
   A phone frame sits fixed in the centre with an opaque screen; vessels.js
   builds a vertical feed of the same vessels inside it and auto-scrolls it
   upward, step by step, like a thumb flicking through the app.
   ========================================================================== */

.mia-vessels {
  /* no bottom padding — the parallax sea band is the section's footer and
     runs flush into the next section */
  padding: clamp(64px, 8vw, 120px) 0 0;
  background: #f4f8fc;
  overflow: hidden;
}

/* ---------------- heading ---------------- */

.mia-vessels__head {
  max-width: 1240px;
  margin: 0 auto clamp(12px, 1.5vw, 20px);
  padding: 0 clamp(16px, 4vw, 56px);
  text-align: center;
}

/* two-tone headline — deep navy base, accented words in the brand blue */
.mia-vessels__title {
  margin: 0 0 16px;
  font-family: 'Outfit', 'Inter', -apple-system, sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: #16324f;
}

.mia-vessels__title-accent { color: #4a97d8; }

/* line — anchor — line rule under the heading */
.mia-vessels__title::after {
  content: '';
  display: block;
  width: 190px;
  height: 16px;
  margin: 20px auto 0;
  background-color: #4a97d8;
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='3'/%3E%3Cline x1='12' y1='22' x2='12' y2='8'/%3E%3Cpath d='M5 12H2a10 10 0 0 0 20 0h-3'/%3E%3C/svg%3E") center / 15px 15px no-repeat,
    linear-gradient(#000, #000) left center / 70px 1.5px no-repeat,
    linear-gradient(#000, #000) right center / 70px 1.5px no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='3'/%3E%3Cline x1='12' y1='22' x2='12' y2='8'/%3E%3Cpath d='M5 12H2a10 10 0 0 0 20 0h-3'/%3E%3C/svg%3E") center / 15px 15px no-repeat,
    linear-gradient(#000, #000) left center / 70px 1.5px no-repeat,
    linear-gradient(#000, #000) right center / 70px 1.5px no-repeat;
}

.mia-vessels__sub {
  max-width: 700px;
  margin: 0 auto;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(14px, 1.3vw, 18px);
  line-height: 1.6;
  color: #45607a;
}

/* ---------------- stage ---------------- */

.mia-vessels__stage {
  /* everything is derived from the phone width so the whole scene scales */
  --vp-w: clamp(225px, 30vw, 290px);
  --vp-h: calc(var(--vp-w) * 2.02);
  --card-w: calc(var(--vp-w) * 0.68);
  --card-h: calc(var(--card-w) * 1.72);

  position: relative;
  /* enough clearance below the phone that its soft shadow fades out
     before the overflow clip — otherwise the cut edge shows as a line */
  height: calc(var(--vp-h) + clamp(100px, 10vw, 160px));
  /* the phone is centred, so half that clearance sits empty above it —
     pull the stage up to close the gap under the heading */
  margin-top: calc(clamp(28px, 3.5vw, 56px) * -1);
  overflow: hidden;
}

/* soft fade at both edges, like cards slipping out of view */
.mia-vessels__stage::before,
.mia-vessels__stage::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(40px, 9vw, 160px);
  z-index: 6;
  pointer-events: none;
}

.mia-vessels__stage::before {
  left: 0;
  background: linear-gradient(90deg, #f4f8fc 12%, rgba(244, 248, 252, 0));
}

.mia-vessels__stage::after {
  right: 0;
  background: linear-gradient(270deg, #f4f8fc 12%, rgba(244, 248, 252, 0));
}

/* ---------------- moving belt ---------------- */

.mia-vessels__track {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: calc(var(--card-w) * 0.34);
  will-change: transform;
  transform: translate3d(0, -50%, 0);   /* vessels.js keeps the -50% and animates X */
}

/* ---------------- story cards: framed photo, name on top ---------------- */

.mia-vessels__card {
  --frame: calc(var(--card-w) * 0.045);

  position: relative;
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  height: var(--card-h);
  padding: var(--frame);
  border-radius: clamp(18px, 2vw, 26px);
  background: #ffffff;
  box-shadow:
    0 30px 55px -18px rgba(9, 40, 72, 0.35),
    0 12px 26px rgba(9, 40, 72, 0.1);
}

/* alternate cards ride high / low, like the Discover stories reference
   (kept in a custom property so the entrance slide can combine with it) */
.mia-vessels__card:nth-child(odd) { --ride: calc(var(--card-h) * -0.09); }
.mia-vessels__card:nth-child(even) { --ride: calc(var(--card-h) * 0.09); }
.mia-vessels__card { transform: translateY(var(--ride, 0px)); }

/* the photo sits inside the white frame with its own rounded corners */
.mia-vessels__card-photo {
  position: relative;
  height: 100%;
  border-radius: clamp(13px, 1.5vw, 20px);
  overflow: hidden;
  background: #0b2239;
}

.mia-vessels__card-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* soft scrim at the top so the name stays readable on a clear image */
.mia-vessels__card-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(9, 40, 72, 0.55) 0%,
    rgba(9, 40, 72, 0.18) 26%,
    rgba(9, 40, 72, 0) 44%
  );
}

.mia-vessels__card-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: calc(var(--card-w) * 0.09) calc(var(--card-w) * 0.07) 0;
  text-align: center;
}

.mia-vessels__card-name {
  margin: 0 0 calc(var(--card-w) * 0.015);
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 700;
  font-size: calc(var(--card-w) * 0.088);
  line-height: 1.2;
  color: #ffffff;
  text-shadow: 0 1px 12px rgba(4, 25, 48, 0.5);
}

.mia-vessels__card-sub {
  margin: 0;
  font-family: 'Space Grotesk', 'Outfit', sans-serif;
  font-weight: 500;
  font-size: calc(var(--card-w) * 0.048);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 8px rgba(4, 25, 48, 0.45);
}

/* ---------------- phone frame ---------------- */

.mia-vessels__phone {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: var(--vp-w);
  height: var(--vp-h);
  border: clamp(8px, 0.9vw, 11px) solid #10151b;
  border-radius: calc(var(--vp-w) * 0.155);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.08) inset,
    0 18px 36px rgba(6, 24, 44, 0.3),
    0 8px 16px rgba(6, 24, 44, 0.18);
  pointer-events: none;
}

/* side buttons */
.mia-vessels__phone::before,
.mia-vessels__phone::after {
  content: '';
  position: absolute;
  right: calc(-1 * clamp(8px, 0.9vw, 11px) - 3px);
  width: 3px;
  border-radius: 2px;
  background: #10151b;
}

.mia-vessels__phone::before { top: 18%; height: 9%; }
.mia-vessels__phone::after { top: 29%; height: 6%; }

/* punch-hole camera */
.mia-vessels__camera {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: calc(var(--vp-w) * 0.045);
  height: calc(var(--vp-w) * 0.045);
  border-radius: 50%;
  background: #10151b;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}

/* ---------------- in-phone scrolling feed ---------------- */

.mia-vessels__screen {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: calc(var(--vp-w) * 0.115);
  overflow: hidden;
  background: #eef4fa;
}

.mia-vessels__feed {
  /* vessels.js animates translateY — one full-screen story per step */
  will-change: transform;
}

/* each feed entry fills the whole screen, like a story page */
.mia-vessels__feed-item {
  position: relative;
  height: calc(var(--vp-h) - 2 * clamp(8px, 0.9vw, 11px));
  overflow: hidden;
  background: #0b2239;
}

.mia-vessels__feed-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mia-vessels__feed-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 34, 57, 0) 38%,
    rgba(16, 84, 139, 0.5) 68%,
    rgba(9, 55, 94, 0.95) 100%
  );
}

/* text block rests just above the bottom nav */
.mia-vessels__feed-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 0 calc(var(--vp-w) * 0.07) calc(var(--vp-w) * 0.24);
}

.mia-vessels__feed-kicker {
  margin: 0 0 calc(var(--vp-w) * 0.02);
  font-family: 'Space Grotesk', 'Outfit', sans-serif;
  font-weight: 500;
  font-size: calc(var(--vp-w) * 0.036);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #a8d4f5;
}

.mia-vessels__feed-name {
  display: block;
  margin: 0 0 calc(var(--vp-w) * 0.025);
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 800;
  font-size: calc(var(--vp-w) * 0.085);
  line-height: 1.15;
  color: #ffffff;
  text-shadow: 0 1px 10px rgba(4, 25, 48, 0.45);
}

.mia-vessels__feed-tag {
  margin: 0;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 300;
  font-size: calc(var(--vp-w) * 0.046);
  line-height: 1.5;
  color: #d9e9f8;
  text-shadow: 0 1px 8px rgba(4, 25, 48, 0.4);
}

/* opaque app chrome — the feed scrolls beneath these strips */
.mia-vessels__topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  border-radius: calc(var(--vp-w) * 0.115) calc(var(--vp-w) * 0.115) 0 0;
  background: #ffffff;
  overflow: hidden;
}

.mia-vessels__statusbar {
  display: flex;
  justify-content: space-between;
  padding: 7px 16px 3px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: calc(var(--vp-w) * 0.036);
  color: #3a4d61;
}

.mia-vessels__status-right {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--vp-w) * 0.018);
}

.mia-vessels__status-icon {
  display: block;
  height: calc(var(--vp-w) * 0.032);
  width: auto;
}

.mia-vessels__status-icon--battery { height: calc(var(--vp-w) * 0.034); }

.mia-vessels__appbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 10px;
  border-bottom: 1px solid rgba(11, 34, 57, 0.08);
}

.mia-vessels__appbar-logo {
  display: block;
  width: calc(var(--vp-w) * 0.085);
  height: calc(var(--vp-w) * 0.085);
  border-radius: 7px;
  object-fit: contain;
}

.mia-vessels__appbar-title {
  flex: 1;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 700;
  font-size: calc(var(--vp-w) * 0.052);
  color: #0b2239;
}

.mia-vessels__appbar-menu { color: #64809b; font-size: calc(var(--vp-w) * 0.055); }

.mia-vessels__navbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 6px 12px;
  border-top: 1px solid rgba(11, 34, 57, 0.08);
  border-radius: 0 0 calc(var(--vp-w) * 0.115) calc(var(--vp-w) * 0.115);
  background: #ffffff;
}

.mia-vessels__nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 500;
  font-size: calc(var(--vp-w) * 0.032);
  color: #64809b;
}

.mia-vessels__nav-item i {
  font-style: normal;
  font-size: calc(var(--vp-w) * 0.05);
  line-height: 1;
}

.mia-vessels__nav-item.is-on { color: #1272b8; }

/* ---------------- sea footer: parallax ocean band ----------------
   The photo's hazy sky dissolves out of the section background above and its
   deep water fades into the portal section below, so the band reads as one
   continuous scene rather than a boxed image. vessels.js nudges the image
   vertically on scroll (parallax); the extra bleed on the media wrapper keeps
   the edges covered during that travel. */

.mia-vessels__sea {
  position: relative;
  height: clamp(460px, 46vw, 700px);
  margin-top: calc(clamp(24px, 3vw, 48px) * -1);   /* tuck under the stage clearance */
  overflow: hidden;
}

.mia-vessels__sea-media {
  position: absolute;
  inset: -16% 0;                     /* vertical bleed = parallax travel headroom */
  z-index: 0;
}

.mia-vessels__sea-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 74%;          /* favour the water over the empty sky */
  display: block;
  will-change: transform;            /* vessels.js animates translate3d Y */
}

/* soft darkening over the lower water so the white type stays readable */
.mia-vessels__sea-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6, 30, 55, 0) 26%,
    rgba(6, 30, 55, 0.42) 58%,
    rgba(6, 30, 55, 0.6) 100%
  );
}

/* top blend: section background dissolves into the photo's hazy sky */
.mia-vessels__sea::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 52%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    #f4f8fc 0%,
    rgba(244, 248, 252, 0.88) 26%,
    rgba(244, 248, 252, 0.42) 60%,
    rgba(244, 248, 252, 0) 100%
  );
}

/* bottom edge: the next section's tone tears into the water with a rough
   organic shoreline (inline SVG in the component — a translucent mist layer
   over a solid one). currentColor keeps it theme-aware. */
.mia-vessels__sea-edge {
  position: absolute;
  bottom: -1px;                      /* overlap kills sub-pixel seam lines */
  left: 0;
  width: 100%;
  height: clamp(52px, 6.5vw, 104px);
  z-index: 1;
  display: block;
  color: #f4f8fc;
  pointer-events: none;
}

/* content rides on the water, above both blend gradients */
.mia-vessels__sea-inner {
  position: relative;
  z-index: 2;
  will-change: transform;            /* vessels.js drives the foreground plane */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px) clamp(96px, 11vw, 168px);
  text-align: center;
}

.mia-vessels__sea-kicker {
  margin: 0 0 10px;
  font-family: 'Space Grotesk', 'Outfit', sans-serif;
  font-weight: 500;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 10px rgba(4, 25, 48, 0.45);
}

.mia-vessels__sea-title {
  margin: 0 0 clamp(18px, 2.2vw, 28px);
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 38px);
  letter-spacing: -0.02em;
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(4, 25, 48, 0.5);
}

/* Apple-minimal roll call: plain names separated by soft dots */
.mia-vessels__sea-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  row-gap: clamp(6px, 0.8vw, 10px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mia-vessels__sea-list li {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(12.5px, 1.15vw, 15.5px);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 10px rgba(4, 25, 48, 0.55);
  white-space: nowrap;
}

.mia-vessels__sea-list li::after {
  content: '·';
  margin: 0 clamp(8px, 1vw, 14px);
  color: rgba(255, 255, 255, 0.45);
  text-shadow: none;
}

.mia-vessels__sea-list li:last-child::after { content: none; }

.mia-vessels__sea-list li:last-child {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
}

/* soft reveal (armed by vessels.js unless reduced motion): the kicker rises
   first, then the headline, then each vessel name ripples in — vessels.js
   staggers the per-name delays inline */
.mia-vessels__sea.js-sea .mia-vessels__sea-kicker,
.mia-vessels__sea.js-sea .mia-vessels__sea-title,
.mia-vessels__sea.js-sea .mia-vessels__sea-list li {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.6s ease,
    transform 0.85s cubic-bezier(0.16, 0.84, 0.28, 1);
}

.mia-vessels__sea.js-sea .mia-vessels__sea-title { transition-delay: 0.14s; }

.mia-vessels__sea.is-sea-in .mia-vessels__sea-kicker,
.mia-vessels__sea.is-sea-in .mia-vessels__sea-title,
.mia-vessels__sea.is-sea-in .mia-vessels__sea-list li {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 640px) {
  .mia-vessels__sea { height: clamp(460px, 120vw, 560px); }
  .mia-vessels__sea-list li { white-space: normal; }
}

/* ---------------- dark theme ---------------- */

[data-theme="dark"] .mia-vessels { background: #04101d; }
[data-theme="dark"] .mia-vessels__title { color: #e6eef7; }
[data-theme="dark"] .mia-vessels__title-accent { color: #7db8e8; }
[data-theme="dark"] .mia-vessels__title::after { background-color: #6fb1de; }
[data-theme="dark"] .mia-vessels__sub { color: #8fa8bf; }

[data-theme="dark"] .mia-vessels__card {
  background: #0e1d2f;
  box-shadow:
    0 30px 55px -18px rgba(0, 0, 0, 0.65),
    0 12px 26px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .mia-vessels__stage::before {
  background: linear-gradient(90deg, #04101d 12%, rgba(4, 16, 29, 0));
}

[data-theme="dark"] .mia-vessels__stage::after {
  background: linear-gradient(270deg, #04101d 12%, rgba(4, 16, 29, 0));
}

[data-theme="dark"] .mia-vessels__phone {
  border-color: #05080c;
  box-shadow:
    0 0 0 2px rgba(120, 180, 235, 0.12) inset,
    0 18px 36px rgba(0, 0, 0, 0.5),
    0 8px 16px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .mia-vessels__phone::before,
[data-theme="dark"] .mia-vessels__phone::after,
[data-theme="dark"] .mia-vessels__camera { background: #05080c; }

[data-theme="dark"] .mia-vessels__screen { background: #071626; }

[data-theme="dark"] .mia-vessels__feed-item { background: #0e1d2f; }

[data-theme="dark"] .mia-vessels__topbar,
[data-theme="dark"] .mia-vessels__navbar { background: #0b1c2e; }

/* sea band, dark: dim the daylight photo and re-aim both blends at the
   dark section tones (#04101d above and below) */
[data-theme="dark"] .mia-vessels__sea-media img {
  filter: brightness(0.5) saturate(0.85);
}

[data-theme="dark"] .mia-vessels__sea::before {
  background: linear-gradient(
    180deg,
    #04101d 0%,
    rgba(4, 16, 29, 0.75) 34%,
    rgba(4, 16, 29, 0) 100%
  );
}

[data-theme="dark"] .mia-vessels__sea-edge { color: #04101d; }

[data-theme="dark"] .mia-vessels__statusbar { color: #8fa8bf; }
[data-theme="dark"] .mia-vessels__appbar { border-bottom-color: rgba(140, 180, 220, 0.12); }
[data-theme="dark"] .mia-vessels__appbar-title { color: #e6eef7; }
[data-theme="dark"] .mia-vessels__navbar { border-top-color: rgba(140, 180, 220, 0.12); }

/* ---------------- mobile ---------------- */

@media (max-width: 640px) {
  .mia-vessels__stage {
    --vp-w: clamp(190px, 56vw, 240px);
  }
}

/* ---------------- entrance (scroll-in) animation ----------------
   vessels.js adds .js-entrance at init (skipped for reduced motion), then
   .is-in once the section scrolls into view:
   — heading rises from the bottom, passing behind the phone on its way up
     to its resting place (the phone paints above it, so it emerges from
     behind the frame);
   — the phone rises from the bottom of the stage at the same time;
   — once the phone lands, the cards emerge from behind it all at once —
     the left half sliding left, the right half sliding right (vessels.js
     sets each card's gather offset --spread-x inline) — after which the
     belt loop starts drifting. */

.mia-vessels.js-entrance .mia-vessels__head {
  opacity: 0;
  transform: translateY(clamp(110px, 16vw, 220px));
  transition:
    transform 1.05s cubic-bezier(0.16, 0.84, 0.28, 1) 0.05s,
    opacity 0.55s ease 0.05s;
}

.mia-vessels.js-entrance .mia-vessels__phone {
  opacity: 0;
  transform: translate(-50%, 65%);
  transition:
    transform 1s cubic-bezier(0.16, 0.84, 0.28, 1),
    opacity 0.45s ease;
}

.mia-vessels.js-entrance .mia-vessels__card {
  opacity: 0;
  transform: translate(var(--spread-x, 0px), var(--ride, 0px)) scale(0.86);
  transition:
    transform 0.9s cubic-bezier(0.22, 0.85, 0.3, 1),
    opacity 0.45s ease;
}

.mia-vessels.js-entrance.is-in .mia-vessels__head {
  opacity: 1;
  transform: translateY(0);
}

.mia-vessels.js-entrance.is-in .mia-vessels__phone {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.mia-vessels.js-entrance.is-in .mia-vessels__card {
  opacity: 1;
  transform: translate(0, var(--ride, 0px)) scale(1);
}

/* ---------------- reduced motion ----------------
   vessels.js detects prefers-reduced-motion and renders a static scene
   (belt parked, feed resting on its first cards, no entrance states);
   no CSS animation to disable. */