/* M188: Noomo-like two-state opening with an original red runner replacing the feather. */
:root {
  --m188-opening: 1;
  --m188-night: 0;
  --m188-runner: 0;
}

#m187-story-entrance .m187-herd-layer,
#m187-story-entrance .m187-story-line {
  opacity: 0 !important;
  visibility: hidden;
}

.m188-opening-lockup {
  position: absolute;
  z-index: 9;
  top: 43%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #1d1c32;
  text-align: center;
  transform: translate3d(-50%, calc(var(--m188-opening) * -3px), 0);
  opacity: var(--m188-opening);
  transition: opacity .18s linear;
  pointer-events: none;
}

.m188-opening-lockup span {
  margin-left: -.35em;
  font-size: clamp(20px, 2.6vw, 38px);
  font-weight: 500;
  letter-spacing: .22em;
  line-height: 1;
}

.m188-opening-lockup strong {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(54px, 7.6vw, 112px);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.09em;
  line-height: .92;
  text-shadow: 0 8px 24px rgba(128, 109, 170, .2);
}

.m188-side-horse {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--m188-opening);
  transition: opacity .18s linear;
}

.m188-side-horse::after {
  content: "";
  position: absolute;
  width: 46vw;
  height: 46vw;
  right: 8%;
  top: 20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.76), rgba(255, 190, 221, .28) 33%, transparent 68%);
  filter: blur(24px);
  mix-blend-mode: screen;
}

.m188-side-horse img {
  position: absolute;
  width: min(960px, 74vw);
  max-width: none;
  right: -5%;
  top: 4%;
  transform: translate3d(calc(var(--m187-progress) * -8%), calc(var(--m187-progress) * -2%), 0) scale(1.08);
  transform-origin: 76% 42%;
  filter: saturate(.84) brightness(1.22) contrast(.9) drop-shadow(0 0 40px rgba(255, 178, 227, .34));
  mix-blend-mode: screen;
}

.m188-runner-stage {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--m188-night);
}

.m188-runner-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 5%;
  width: 2px;
  height: 88%;
  background: linear-gradient(180deg, transparent, rgba(255, 68, 92, .8) 22%, rgba(255, 22, 56, .12) 88%, transparent);
  box-shadow: 0 0 30px rgba(255, 35, 65, .74), 0 0 90px rgba(191, 42, 142, .32);
  transform: translateX(-50%) scaleY(var(--m188-runner));
  transform-origin: 50% 0;
  opacity: calc(var(--m188-runner) * .72);
}

.m188-runner-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: clamp(220px, 30vw, 460px);
  height: clamp(300px, 42vw, 620px);
  border: 1px solid rgba(255, 62, 83, .7);
  border-radius: 50%;
  box-shadow: 0 0 42px rgba(255, 24, 62, .18), inset 0 0 70px rgba(255, 36, 74, .11);
  transform: translate(-50%, -50%) scale(calc(.44 + var(--m188-runner) * .7));
  opacity: calc(var(--m188-runner) * .9);
}

.m188-runner-stage img {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 47%;
  width: clamp(220px, 30vw, 460px);
  max-width: none;
  transform: translate3d(-50%, calc(34% - var(--m188-runner) * 39%), 0) scale(calc(.2 + var(--m188-runner) * 1.04));
  transform-origin: 50% 65%;
  filter: hue-rotate(142deg) saturate(1.9) contrast(1.16) brightness(.92) drop-shadow(0 0 24px rgba(255, 30, 58, .72)) drop-shadow(0 0 90px rgba(196, 16, 100, .34));
  mix-blend-mode: screen;
  opacity: calc(var(--m188-runner) * .96);
}

.m188-runner-stage .m188-runner-particles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 50% 28%, rgba(255, 232, 242, .9) 0 1px, transparent 2px),
    radial-gradient(circle at 43% 60%, rgba(255, 70, 100, .66) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 72%, rgba(255, 148, 168, .55) 0 1px, transparent 2px);
  background-size: 120px 140px, 180px 170px, 220px 190px;
  transform: translateY(calc((1 - var(--m188-runner)) * 18px));
  opacity: calc(var(--m188-runner) * .72);
  animation: m188-particle-drift 9s linear infinite;
}

.m188-runner-stage + .m187-entrance-grain { z-index: 8; }

.m188-runner-stage ~ .m187-story-copy {
  z-index: 10;
}

.m188-runner-stage ~ .m187-story-copy .m187-story-copy-inner {
  background: radial-gradient(ellipse at center, rgba(2, 3, 16, .26), rgba(2, 3, 16, .04) 72%, transparent 100%);
}

#m187-story-entrance[data-m187-state="opening"] .m187-story-copy {
  opacity: 0 !important;
}

#m187-story-entrance[data-m187-state="narrative"] .m187-story-copy,
#m187-story-entrance[data-m187-state="handoff"] .m187-story-copy {
  opacity: var(--m187-narrative);
}

@keyframes m188-particle-drift {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 0 140px, 0 -170px, 0 190px; }
}

@media (max-width: 720px) {
  .m188-opening-lockup { top: 43%; }
  .m188-side-horse img { width: 122vw; right: -24%; top: 12%; }
  .m188-runner-stage img { width: min(74vw, 420px); }
  .m188-runner-stage::after { width: 58vw; height: 76vw; }
}

/* The Noomo-like pastel opening carries its navigation over the scene. Once
   the scroll reaches the dark narrative state, the site's established dark
   header returns automatically. */
body:has(#m187-story-entrance[data-m187-state="opening"]) .site-header {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body:has(#m187-story-entrance[data-m187-state="opening"]) .site-header .brand strong,
body:has(#m187-story-entrance[data-m187-state="opening"]) .site-header .brand small,
body:has(#m187-story-entrance[data-m187-state="opening"]) .site-header .mega-nav a,
body:has(#m187-story-entrance[data-m187-state="opening"]) .site-header .mega-nav summary,
body:has(#m187-story-entrance[data-m187-state="opening"]) .site-header .nav-direct {
  color: #26243a;
}

body:has(#m187-story-entrance[data-m187-state="opening"]) .site-header .nav-contact-direct {
  border-color: rgba(38, 36, 58, .42);
}

@media (prefers-reduced-motion: reduce) {
  .m188-runner-stage .m188-runner-particles { animation: none; }
}