/* ── Scroll-expand hero ────────────────────────────────────────────────────
   The spit behind, the boat opening out of the middle of it.

   Two layouts live here:

   1. The STATIC one, which is what the base rules below describe — the boat
      full-bleed, the copy stacked on the left, everything visible. This is what
      you get with no JavaScript and with `prefers-reduced-motion`, and it is a
      perfectly good hero on its own.

   2. The CHOREOGRAPHED one, everything under `.js-expand`, which only applies
      once expand.js confirms it is driving things. A tall section with a sticky
      stage; expand.js writes a single custom property `--p` (0 → 1) and every
      value below is interpolated from it in plain CSS.

   Scroll is never intercepted. `--p` is read from where the page already is,
   so the wheel, the scrollbar, the keyboard and a screen reader all behave
   exactly as they normally would.
   ------------------------------------------------------------------------ */

.expand {
  --p: 1;                       /* static layout = the finished frame */
  position: relative;
  background: var(--abyss);
}

.expand__stage {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  color: var(--foam);
  display: grid;
  align-content: center;
}

/* The spit. Fades away as the boat takes over. */
.expand__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: calc(1 - var(--p));
}
.expand__bg img { width: 100%; height: 100%; object-fit: cover; }

/* The boat. Statically full-bleed. */
.expand__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.expand__media img { width: 100%; height: 100%; object-fit: cover; }

.expand .scrim, .expand .frame { z-index: 2; }

.expand__top,
.expand__title,
.expand__cue,
.expand__content,
.expand__bar { position: relative; z-index: 3; }

/* ── Static layout ─────────────────────────────────────────────────────── */
.expand__top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--head-h);
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: calc(var(--gutter) + var(--frame));
  display: none;                /* the real nav bar covers this; see below */
  align-items: center;
  gap: var(--s-4);
}
.expand__top .brand { margin-right: auto; }

.expand__title,
.expand__content {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: calc(var(--gutter) + var(--frame));
  min-width: 0;
}

.expand__eyebrow { color: var(--foam); margin-bottom: var(--s-4); }
.expand__h1 { color: #fff; max-width: 19ch; }
.expand__line { display: block; }
.expand__line--b { color: var(--foam-photo); }

.expand__content { margin-top: var(--s-6); display: grid; gap: var(--s-5); justify-items: start; }
.expand__label { color: var(--foam); }
.expand__lede {
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--foam-photo);
  max-width: 44ch;
  text-wrap: pretty;
}
.expand__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.expand__cue { display: none; }

.expand__bar {
  width: min(100% - 2 * (var(--gutter) + var(--frame)), var(--wrap));
  min-width: 0;
  margin: var(--s-8) auto calc(var(--frame) + 1.5rem);
  padding: var(--s-4);
  display: grid;
  gap: var(--s-3);
  border-radius: var(--r-card);
}
@media (min-width: 52rem) {
  .expand__bar {
    grid-template-columns: 1.6fr 1fr 0.8fr auto;
    align-items: end;
    gap: var(--s-5);
    padding: var(--s-4) var(--s-5);
    border-radius: var(--r-pill);
  }
}

.bar__field { display: grid; gap: 0.3rem; min-width: 0; }
.bar__field label {
  font-family: var(--mono);
  font-size: var(--t-xxs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--foam-3);
}
.bar__field select,
.bar__field input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-dark);
  border-radius: 0;
  padding: 0.35rem 0;
  color: var(--foam);
  font-size: var(--t-sm);
  transition: border-color var(--dur) var(--ease);
}
.bar__field select:hover, .bar__field input:hover { border-bottom-color: var(--foam-3); }
.bar__field select:focus, .bar__field input:focus { outline: none; border-bottom-color: var(--cyan); }
.bar__field select option { background: var(--navy); color: var(--foam); }
.bar__field input::placeholder { color: var(--foam-3); }
.bar__field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.85); cursor: pointer; }
.bar__go { align-self: end; }

/* ── Choreographed layout ──────────────────────────────────────────────────
   Only from here down does anything depend on scroll position.
   -------------------------------------------------------------------------- */
.js-expand .expand {
  --p: 0;
  height: 260svh;               /* the runway the expansion plays out over */
}

.js-expand .expand__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
  display: block;
}

/* The boat: a small card in the middle that opens to the full frame.
   Interpolated in `calc` so it is exact at both ends. */
.js-expand .expand__media {
  --w0: 19rem;
  --h0: 25rem;
  inset: auto;
  top: 50%;
  left: 50%;
  width:  calc(var(--w0) + (100vw   - var(--w0)) * var(--p));
  height: calc(var(--h0) + (100svh  - var(--h0)) * var(--p));
  transform: translate(-50%, -50%);
  border-radius: calc(var(--r-card) * (1 - var(--p)));
  box-shadow: 0 30px 80px rgba(6, 33, 46, calc(0.45 * (1 - var(--p))));
  /* The landing frame is the lagoon and the headline — nothing else. The boat
     is not on screen until you ask for it, and arrives over the first sliver
     of scroll. `opacity` covers the box-shadow too, so no shadow is left
     hanging in the middle of an empty screen. */
  opacity: clamp(0, calc(var(--p) / 0.12), 1);
}
@media (max-width: 40rem) {
  .js-expand .expand__media { --w0: 15rem; --h0: 20rem; }
}

/* The headline sits over the card and parts to let the boat through. */
.js-expand .expand__title {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  transform: translateY(-50%);
  text-align: center;
  /* Out by 0.70. The boat then has the screen to itself for a beat before the
     copy arrives at 0.76 — overlapping the two just muddies both. */
  opacity: clamp(0, calc((0.70 - var(--p)) / 0.15), 1);
}
/* Smaller than the static headline on purpose. "Devyniasdešimt kilometrų." is
   25 characters — at full hero size it already spans the frame, leaving it
   nowhere to travel before it runs off the edge. */
.js-expand .expand__h1 {
  max-width: none;
  font-size: clamp(1.35rem, 0.85rem + 2.1vw, 2.6rem);
}
.js-expand .expand__eyebrow { margin-bottom: var(--s-5); }

/* The title crosses the boat's bright white hull on its way out; a soft shadow
   keeps it readable over both the water behind and the topsides. */
.js-expand .expand__title { text-shadow: 0 2px 24px rgba(6, 33, 46, 0.6); }

.js-expand .expand__line--a { transform: translateX(calc(var(--p) * -42vw)); }
.js-expand .expand__line--b { transform: translateX(calc(var(--p) *  42vw)); }
@media (max-width: 52rem) {
  .js-expand .expand__line--a { transform: translateX(calc(var(--p) * -58vw)); }
  .js-expand .expand__line--b { transform: translateX(calc(var(--p) *  58vw)); }
}

/* The brand and language switch stand in while the nav bar is held back. */
.js-expand .expand__top {
  display: flex;
  opacity: clamp(0, calc((0.5 - var(--p)) / 0.2), 1);
}

.js-expand .expand__cue {
  display: inline-flex;
  position: absolute;
  left: calc(var(--gutter) + var(--frame));
  bottom: calc(var(--frame) + 1.6rem);
  align-items: center;
  gap: var(--s-3);
  font-family: var(--mono);
  font-size: var(--t-xxs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--foam-photo);
  opacity: clamp(0, calc((0.28 - var(--p)) / 0.2), 1);
}
.expand__cue-line { width: 2.5rem; height: 1px; background: currentColor; transform-origin: left; }

/* The boat's own copy arrives once the image has the screen. */
.js-expand .expand__content {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  transform: translateY(-50%);
  margin-top: 0;
  opacity: clamp(0, calc((var(--p) - 0.76) / 0.16), 1);
  pointer-events: none;
}
.js-expand .expand__bar {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--frame) + 1.5rem);
  margin: 0 auto;
  opacity: clamp(0, calc((var(--p) - 0.82) / 0.14), 1);
  pointer-events: none;
}
/* expand.js sets this at the end, so nothing invisible is ever clickable. */
.js-expand .expand.is-open .expand__content,
.js-expand .expand.is-open .expand__bar { pointer-events: auto; }

/* On a phone the boat's copy and the four-row enquiry bar are both absolutely
   positioned inside one 100svh sticky stage — the copy centred, the bar pinned
   to the bottom — and there simply isn't the height for both. They were landing
   on top of each other.

   The bar goes on small screens rather than the copy: the header's booking
   button is on screen the whole time and the full form is one section down, so
   nothing is actually lost, and the first screen stops being a wall of form
   fields over a photograph. */
@media (max-width: 52rem) {
  .js-expand .expand__bar { display: none; }
}