/* ══════════════════════════════════════════════════════════════════
   NavNex — split entry

   Two seats at rest, one deliberate expansion on intent, then a tiled
   reveal of the landing page beneath. White square cells keep their
   geometry as a staggered opacity sweep exposes the chosen photograph.
   Without the head script's [data-entry] flag this layer does not exist.
   ══════════════════════════════════════════════════════════════════ */

.split-entry {
  --entry-tile-size: 120px;
  --entry-expand-ms: 620ms;
  --entry-fade-ms: 240ms;
  --entry-white: #ffffff;
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  min-height: 100svh;
  overflow: hidden;
  background: var(--entry-white);
  color: var(--ink);
}

html[data-entry="pending"],
html[data-entry="active"],
html[data-entry="committing"] {
  overflow: hidden;
  overscroll-behavior: none;
}

html[data-entry="pending"] .split-entry,
html[data-entry="active"] .split-entry,
html[data-entry="committing"] .split-entry {
  display: block;
}

.split-entry__panels {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 0;
  /* The tiles disappear straight onto the selected landing screen. */
  background: transparent;
}

.split-entry__panel {
  --panel-size: 50%;
  --label-bg: var(--entry-white);
  --label-fg: #20201e;
  position: relative;
  isolation: isolate;
  flex: 0 0 var(--panel-size);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  color: var(--label-fg);
  background: var(--entry-white);
  text-decoration: none;
  transition: flex-basis var(--entry-expand-ms) cubic-bezier(.76, 0, .24, 1);
}

.split-entry__panel--owner {
  --label-bg: #fbfbfb;
  background: #f3f3f3;
}

.split-entry[data-intent="charterer"] .split-entry__panel--charterer { --panel-size: 68%; }
.split-entry[data-intent="charterer"] .split-entry__panel--owner { --panel-size: 32%; }
.split-entry[data-intent="owner"] .split-entry__panel--charterer { --panel-size: 32%; }
.split-entry[data-intent="owner"] .split-entry__panel--owner { --panel-size: 68%; }

.split-entry.is-committing[data-choice="charterer"] .split-entry__panel--charterer,
.split-entry.is-committing[data-choice="owner"] .split-entry__panel--owner {
  --panel-size: 100%;
}
.split-entry.is-committing[data-choice="charterer"] .split-entry__panel--owner,
.split-entry.is-committing[data-choice="owner"] .split-entry__panel--charterer {
  --panel-size: 0%;
}

.split-entry__tiles {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  display: grid;
  width: max-content;
  height: max-content;
  grid-template-columns: repeat(var(--entry-tile-cols), var(--entry-tile-size));
  grid-template-rows: repeat(var(--entry-tile-rows), var(--entry-tile-size));
  pointer-events: none;
}

.split-entry__panel--owner .split-entry__tiles {
  right: 0;
  left: auto;
}

.split-entry__tile {
  min-width: 0;
  min-height: 0;
  width: var(--entry-tile-size);
  height: var(--entry-tile-size);
  background: var(--tile, var(--entry-white));
  opacity: 1;
}

.split-entry__label {
  position: absolute;
  z-index: 2;
  left: clamp(22px, 4vw, 72px);
  bottom: clamp(64px, 11vh, 126px);
  display: grid;
  width: max-content;
  max-width: calc(100% - clamp(44px, 8vw, 144px));
  padding: clamp(18px, 2.2vw, 34px) clamp(20px, 2.7vw, 44px);
  overflow: hidden;
  color: var(--label-fg);
  background: var(--label-bg);
  box-shadow: 0 0 0 1px currentColor;
  transition: transform var(--entry-expand-ms) cubic-bezier(.76, 0, .24, 1), opacity 240ms ease;
}

.split-entry__panel--owner .split-entry__label {
  right: clamp(22px, 4vw, 72px);
  left: auto;
  text-align: right;
}

.split-entry__prefix,
.split-entry__enter,
.split-entry__hint {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .16em;
}

.split-entry__prefix {
  margin-bottom: clamp(7px, 1.2vh, 13px);
  font-size: clamp(10px, .9vw, 13px);
  line-height: 1;
}

.split-entry__name {
  font-family: "Space Grotesk", var(--sans), sans-serif;
  font-size: clamp(3rem, 7.25vw, 8.4rem);
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.055em;
  white-space: nowrap;
}

.split-entry__enter {
  display: block;
  margin-top: clamp(18px, 3.4vh, 34px);
  font-size: clamp(9px, .72vw, 11px);
  line-height: 1.3;
  opacity: .7;
  transform: translateX(0);
  transition: transform 420ms var(--ease), opacity 220ms ease;
}

.split-entry__panel:is(:hover, :focus-visible) .split-entry__enter,
.split-entry[data-intent] .split-entry__panel[data-active] .split-entry__enter {
  opacity: 1;
  transform: translateX(8px);
}

.split-entry__panel:focus-visible {
  outline: 3px solid #20201e;
  outline-offset: -5px;
}

.split-entry__panel::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 0 solid rgba(32, 32, 30, .24);
  pointer-events: none;
  transition: border-width 260ms ease;
}

.split-entry__panel--owner::after { border-color: rgba(32, 32, 30, .24); }
.split-entry__panel:is(:hover, :focus-visible)::after { border-width: 6px; }

.split-entry__brand {
  position: absolute;
  z-index: 4;
  top: clamp(24px, 4vh, 44px);
  left: 50%;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 11px 15px 10px;
  color: #20201e;
  background: var(--entry-white);
  transform: translateX(-50%);
  box-shadow: 0 0 0 1px rgba(32, 32, 30, .2);
}

.split-entry__word {
  display: block;
  width: 122px;
  height: auto;
  filter: brightness(0);
  flex: none;
}

.split-entry__brand-rule {
  width: 7px;
  height: 7px;
  background: #d7d7d4;
}

.split-entry__hint {
  position: absolute;
  z-index: 4;
  bottom: clamp(20px, 3.5vh, 38px);
  left: 50%;
  margin: 0;
  padding: 7px 10px;
  color: #20201e;
  background: var(--entry-white);
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: opacity 180ms ease;
}

.split-entry.is-committing .split-entry__hint,
.split-entry.is-committing .split-entry__brand {
  opacity: 0;
}

.split-entry.is-committing .split-entry__panel:not([data-selected]) .split-entry__label {
  opacity: 0;
}

.split-entry.is-revealing .split-entry__panel[data-selected] {
  background: transparent;
}

.split-entry.is-revealing {
  background: transparent;
}

.split-entry.is-revealing .split-entry__panel[data-selected]::after,
.split-entry.is-revealing .split-entry__panel[data-selected] .split-entry__label {
  opacity: 0;
}

.split-entry.is-revealing .split-entry__panel[data-selected] .split-entry__tile {
  opacity: 0;
  transition: opacity var(--entry-fade-ms) cubic-bezier(.65, 0, .35, 1) var(--leave, 0ms);
}

@media (max-width: 800px) {
  .split-entry {
    --entry-tile-size: 60px;
    --entry-fade-ms: 200ms;
  }
  .split-entry__panels { flex-direction: column; }
  .split-entry__panel--owner .split-entry__tiles {
    inset: auto 0 0;
  }
  .split-entry[data-intent="charterer"] .split-entry__panel--charterer,
  .split-entry[data-intent="owner"] .split-entry__panel--owner { --panel-size: 58%; }
  .split-entry[data-intent="charterer"] .split-entry__panel--owner,
  .split-entry[data-intent="owner"] .split-entry__panel--charterer { --panel-size: 42%; }
  .split-entry.is-committing[data-choice="charterer"] .split-entry__panel--charterer,
  .split-entry.is-committing[data-choice="owner"] .split-entry__panel--owner { --panel-size: 100%; }
  .split-entry.is-committing[data-choice="charterer"] .split-entry__panel--owner,
  .split-entry.is-committing[data-choice="owner"] .split-entry__panel--charterer { --panel-size: 0%; }
  .split-entry__label,
  .split-entry__panel--owner .split-entry__label {
    right: auto;
    left: 20px;
    bottom: 48px;
    max-width: calc(100% - 40px);
    padding: 15px 18px 16px;
    text-align: left;
  }
  .split-entry__name { font-size: clamp(2.65rem, 15vw, 5.2rem); }
  .split-entry__enter { margin-top: 14px; }
  .split-entry__brand { top: 16px; }
  .split-entry__hint { bottom: 12px; }
}

@media (hover: none) {
  .split-entry__hint { display: none; }
  .split-entry__panel::after { border-width: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .split-entry__panel,
  .split-entry__label,
  .split-entry__enter,
  .split-entry__hint,
  .split-entry__brand,
  .split-entry__tile {
    transition: none !important;
  }
}