/* All In House — arrival and reveals (home page).
   Modelled on the Claude Opus 5.5 announcement (anthropic.com, 22 Sep 2026),
   at Logan's request 24 Sep 2026: the hero opens on its own horizon — the
   sea line behind the helicopter — and the title rises from behind it.
   Further down, the display headings rise word by word as they arrive.
   Body copy never moves: the reference's doesn't, and held-back text is
   only an empty screen (Django, 24 Sep 2026).

   Everything here is keyed to classes the head script and motion.js set:
     .m        motion allowed (no reduced-motion, IntersectionObserver present)
     .m-intro  the first page load in this tab: the full arrival
     .m-brief  a return to home in the same tab: the title rise only
     .m-go     the hero photo is ready; the arrival runs
   With no script, or reduced motion, none of these exist and the page is
   exactly the page. Nothing is pinned and nothing follows the scroll
   position: each piece plays once, forward, and stays. */

:root {
  --m-out: cubic-bezier(0.165, 0.84, 0.44, 1);   /* the reference's own ease */
  --m-inout: cubic-bezier(0.76, 0, 0.24, 1);
}

/* ---------- the arrival ---------- */

/* --hz is the sea line; --hz-t / --hz-b are the insets of a 2px sliver on it.
   motion.js sets all three from the crop on screen. Keyframes use plain
   percentages only: WebKit misreads calc() there and opens from the top. */
.band { --hz: 45.6%; --hz-t: 45.45%; --hz-b: 54.25%; --side: 34%; }
@media (max-width: 700px) { .band { --side: 19%; } }

/* before the photo is ready: black, with the title and header held back */
html.m-intro .band picture {
  clip-path: inset(var(--hz-t) var(--side) var(--hz-b) var(--side));
}
html.m-intro .band__wash,
html.m-intro .site-head { opacity: 0; }
html:is(.m-intro, .m-brief):not(.m-go) .band__title { visibility: hidden; }

/* a sliver at the horizon opens into a window, the window widens to the frame */
html.m-intro.m-go .band picture { animation: m-window 2000ms linear both; }
html.m-intro.m-go .band img {
  transform-origin: 50% var(--hz);
  animation: m-push 2900ms var(--m-out) both;
}
html.m-intro.m-go .band__wash { animation: m-fade 1000ms ease 1000ms both; }

/* the title rises from behind its lines, swept in from the left */
.band__title .m-l { display: block; }
html:is(.m-intro, .m-brief) .band__title {
  --m-t: 1450ms;
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
          mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 300% 100%;
          mask-size: 300% 100%;
}
html.m-brief .band__title { --m-t: 120ms; }
html:is(.m-intro, .m-brief) .band__title > span {
  clip-path: inset(-1em -1em -0.08em -1em);
}
html:is(.m-intro, .m-brief).m-go .band__title {
  animation: m-sweep 1500ms cubic-bezier(0.45, 0, 0.2, 1) var(--m-t) both;
}
html:is(.m-intro, .m-brief).m-go .band__title .m-l {
  animation: m-lift 1250ms var(--m-out) calc(var(--m-t) + var(--i) * 150ms) both;
}

/* the header settles last */
html.m-intro.m-go .site-head { animation: m-drop 900ms var(--m-out) 2350ms both; }

@keyframes m-window {
  0% {
    clip-path: inset(var(--hz-t) var(--side) var(--hz-b) var(--side));
    animation-timing-function: var(--m-inout);
  }
  42% { clip-path: inset(0 var(--side) 0 var(--side)); }
  50% {
    clip-path: inset(0 var(--side) 0 var(--side));
    animation-timing-function: var(--m-inout);
  }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes m-push  { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes m-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-sweep {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0 0;    mask-position: 0 0; }
}
@keyframes m-lift {
  from { transform: translate3d(0, 112%, 0); filter: blur(10px); }
  to   { transform: translate3d(0, 0, 0);    filter: blur(0); }
}
@keyframes m-drop {
  from { opacity: 0; transform: translate3d(0, -10px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ---------- reveals on the way down ---------- */

/* display headings: held until motion.js has split them into words */
html.m :is(.panel__heading, .orbit__statement, .season__heading, .leave__heading):not(.m-split) {
  opacity: 0;
}
.m-w {
  display: inline-block;
  clip-path: inset(-0.5em -0.3em -0.12em -0.3em);
}
.m-wi { display: inline-block; }
html.m .m-split:not(.is-in) .m-wi { transform: translate3d(0, 115%, 0); }
html.m .m-split.is-in .m-wi {
  animation: m-word 1100ms var(--m-out) calc(var(--d, 0ms) + var(--i) * 70ms) backwards;
}

@keyframes m-word {
  from { transform: translate3d(0, 115%, 0); filter: blur(8px); opacity: 0; }
  45%  { opacity: 1; }
  to   { transform: translate3d(0, 0, 0); filter: blur(0); opacity: 1; }
}