/* The home page's opening: the photo behind a white panel and step, the large logo that
 * docks into the header as the page scrolls, the hero line bottom right, and the ink
 * section rising over it. Colours and fonts are brand tokens.
 * Scroll state comes from assets/js/home.js as custom properties: --arrival 0..1,
 * --panel-y, --step-height, --image-rise, and --identity-x, -y, -scale on the logo.
 * Their values here are the opening at rest, which is also the page without scripts. */

/* ── Header: floats over the opening; the logo is hidden until the large one has docked ── */
.home-header { color: var(--ink); }
.home-header .brand { visibility: hidden; font-size: 22px; }
.home-header .btn-tour { background: var(--ink); color: #fff; }
.home-header .btn-tour:hover { background: var(--ink-2); }
body.is-departed .home-header { background: var(--ink); color: #fff; }
body.is-departed .home-header .brand { visibility: visible; }
body.is-departed .home-header .btn-tour { background: #fff; color: var(--ink); }
body.is-departed .home-header .btn-tour:hover { background: var(--mist); }
body.nav-light .home-header { color: #fff; }
body.nav-light .home-header :focus-visible { outline-color: #fff; }

/* ── The opening ── */
.arrival {
  --arrival: 0; --panel-y: 19svh; --step-height: calc(7.28vw + 16px); --image-rise: 0px;
  position: relative; height: 300svh; background: var(--paper);
}
.arrival-stage { height: 100svh; position: sticky; top: 0; overflow: hidden; isolation: isolate; background: var(--panel); }
.arrival-image {
  position: absolute; top: 0; left: 0; width: 100%; height: 125svh; max-width: none;
  object-fit: cover; object-position: 50% 30%;
  transform: translate3d(0, var(--image-rise), 0); will-change: transform;
}
.arrival-white-panel { position: absolute; inset: 0 0 auto; height: 100%; background: var(--paper); transform: translate3d(0, calc(var(--panel-y) - 100%), 0); will-change: transform; }
.arrival-white-step { position: absolute; top: 0; left: 0; width: 50.5%; height: var(--step-height); background: var(--paper); transform: translate3d(0, calc(var(--panel-y) - 1px), 0); }
.arrival-identity {
  --identity-scale: 1; --identity-x: var(--opening-gutter); --identity-y: 19svh;
  position: fixed; top: 0; left: 0; z-index: 30;
  transform: translate3d(var(--identity-x), var(--identity-y), 0) scale(var(--identity-scale));
  transform-origin: top left; will-change: transform; pointer-events: none;
  color: color-mix(in srgb, var(--ink) calc((1 - var(--nav-light, 0)) * 100%), white);
  font-size: 7vw;
}
.arrival-identity p { margin: 0; line-height: 1; }
.arrival-scroll { position: absolute; left: calc(50.5% - 36px); top: calc(var(--panel-y) + var(--step-height) - 29px); opacity: calc(1 - var(--arrival) * 2); }
.arrival-scroll::after { content: ""; position: absolute; inset: -16px; }
.arrival-scroll b { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; transition: transform 0.25s; }
.arrival-scroll b svg { width: 8px; height: 8px; }
.arrival-scroll:hover b { transform: translateY(3px); }
.arrival[data-settled="true"] .arrival-scroll { visibility: hidden; }
.arrival-claim {
  position: absolute; right: var(--opening-gutter); bottom: clamp(28px, 6svh, 64px); margin: 0; max-width: 12ch; text-align: right;
  font-family: var(--font-display); font-weight: 300; font-size: clamp(40px, 5.2vw, 92px); line-height: 1.02; letter-spacing: 0;
  color: #fff; text-shadow: 0 2px 24px color-mix(in srgb, var(--ink) 55%, transparent), 0 1px 3px color-mix(in srgb, var(--ink) 45%, transparent);
  opacity: clamp(0, calc(1 - var(--arrival) * 3), 1); pointer-events: none; z-index: 1;
}
/* A soft shade behind the line keeps it readable over any photo. */
.arrival-claim::before { content: ""; position: absolute; z-index: -1; inset: -40px -64px; background: color-mix(in srgb, var(--ink) 42%, transparent); filter: blur(32px); }
.arrival-progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #fff9; transform-origin: left; transform: scaleX(var(--arrival)); }

/* ── The ink section, rising over the end of the opening with a stepped tab ── */
.following-layer { position: relative; z-index: 6; margin-top: -65svh; background: var(--ink); color: #fff; }
.next-chapter-tab { position: absolute; left: 0; top: -95px; height: 96px; width: 52%; background: var(--ink); }
.following-layer + .chapter { position: relative; z-index: 6; background: var(--paper); padding-top: 96px; }

/* ── Boot cover: holds the page until the hero photo is ready, then hands its logo over ── */
.hero-boot { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: var(--paper); transition: opacity 0.55s ease 0.15s; }
.hero-boot[data-state="leaving"] { opacity: 0; pointer-events: none; }
.hero-boot-mark { font-size: clamp(30px, 6vw, 56px); color: var(--ink); will-change: transform; }
.hero-boot[data-state="loading"] .hero-boot-mark { animation: boot-beat 1.6s ease-in-out infinite; }
.hero-boot[data-state="leaving"] .hero-boot-mark { transition: transform 0.8s var(--ease-both); }
@keyframes boot-beat { 0%, 100% { transform: scale(1); opacity: 0.82; } 50% { transform: scale(1.045); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero-boot[data-state="loading"] .hero-boot-mark { animation: none; }
}

@media (max-width: 760px) {
  .home-header .brand { font-size: 18px; }
  .arrival { --panel-y: 15svh; --step-height: calc(12.48vw + 16px); height: 260svh; }
  .arrival-white-step { width: 82%; }
  .arrival-scroll { left: calc(82% - 36px); }
  .arrival-identity { --identity-y: 15svh; font-size: 12vw; }
  .next-chapter-tab { width: 60%; height: 64px; top: -63px; }
  .following-layer + .chapter { padding-top: 56px; }
}