/* M187 local visual candidate: cinematic opening -> benchmark narrative -> reviewed iPullRank home. */
:root {
  --m187-progress: 0;
  --m187-narrative: 0;
  --m187-hint: 1;
}

#m187-story-entrance {
  position: relative;
  height: 220svh;
  min-height: 1400px;
  overflow: clip;
  background: #050816;
  isolation: isolate;
}

.m187-entrance-viewport {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  background: #050816;
}

.m187-entrance-sky,
.m187-entrance-night,
.m187-entrance-glow,
.m187-entrance-grain {
  position: absolute;
  inset: -8%;
  pointer-events: none;
}

.m187-entrance-sky {
  z-index: 0;
  background:
    radial-gradient(circle at 75% 62%, rgba(255, 247, 234, .98) 0 7%, rgba(255, 197, 228, .75) 15%, transparent 39%),
    radial-gradient(circle at 18% 20%, rgba(188, 212, 255, .8), transparent 31%),
    linear-gradient(118deg, #f2dcf1 0%, #f6d9da 35%, #dae9f2 70%, #b9ccf7 100%);
  opacity: calc(1 - var(--m187-progress) * 1.2);
  transform: scale(1.12);
  transition: opacity .12s linear;
}

.m187-entrance-night {
  z-index: 1;
  background:
    radial-gradient(circle at 50% 48%, rgba(44, 50, 206, .64), transparent 25%),
    radial-gradient(circle at 80% 80%, rgba(21, 167, 255, .19), transparent 35%),
    linear-gradient(180deg, #050718 0%, #050816 52%, #02030b 100%);
  opacity: calc(var(--m187-progress) * 1.16);
}

.m187-entrance-glow {
  z-index: 2;
  background: radial-gradient(ellipse at 53% 50%, rgba(112, 129, 255, .7), transparent 24%);
  filter: blur(36px);
  opacity: calc(var(--m187-progress) * .8);
  mix-blend-mode: screen;
}

.m187-entrance-grain {
  z-index: 7;
  opacity: .13;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.m187-herd-layer {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

.m187-herd-layer::before {
  content: "";
  position: absolute;
  inset: 14% 16% 10%;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  transform: rotate(-14deg) scale(calc(.8 + var(--m187-progress) * .35));
  opacity: calc(.08 + var(--m187-narrative) * .32);
  box-shadow: 0 0 100px rgba(126, 105, 255, .32), inset 0 0 80px rgba(96, 220, 255, .1);
}

.m187-herd-layer img {
  position: absolute;
  width: min(1020px, 84vw);
  max-width: none;
  right: -16%;
  bottom: 3%;
  transform: translate3d(calc(var(--m187-progress) * -19%), calc(var(--m187-progress) * -7%), 0) scale(calc(1.12 - var(--m187-progress) * .6)) rotate(calc(var(--m187-progress) * -2deg));
  transform-origin: 65% 62%;
  opacity: calc(1 - var(--m187-progress) * .72);
  filter: saturate(1.12) contrast(1.04) drop-shadow(0 0 42px rgba(148, 148, 255, .3));
  mix-blend-mode: screen;
}

.m187-story-line {
  position: absolute;
  z-index: 8;
  left: clamp(24px, 5vw, 84px);
  bottom: clamp(28px, 5vh, 62px);
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(8, 12, 30, .7);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: var(--m187-hint);
  transition: color .25s ease, opacity .18s linear;
}

.m187-story-line i {
  display: block;
  width: 52px;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  animation: m187-line-pulse 1.9s ease-in-out infinite;
}

.m187-story-copy {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12vh 8vw;
  text-align: center;
  color: #f8f8ff;
  opacity: var(--m187-narrative);
  transform: translateY(calc((1 - var(--m187-narrative)) * 24px));
  transition: opacity .12s linear, transform .3s ease;
}

.m187-story-copy-inner {
  width: min(760px, 100%);
  padding: 26px 30px 30px;
  border-radius: 28px;
  background: radial-gradient(ellipse at center, rgba(3, 5, 22, .56), rgba(3, 5, 22, .12) 72%, transparent 100%);
}

.m187-story-kicker {
  margin: 0 0 24px;
  color: rgba(201, 215, 255, .8);
  font-size: 12px;
  letter-spacing: .26em;
}

.m187-story-copy h2 {
  margin: 0;
  font-size: clamp(34px, 6vw, 82px);
  font-weight: 520;
  line-height: 1.06;
  letter-spacing: -.07em;
  text-wrap: balance;
  text-shadow: 0 3px 22px rgba(2, 3, 12, .96), 0 0 36px rgba(103, 132, 255, .34);
}

#m187-story-entrance[data-m187-state="narrative"] .m187-herd-layer img {
  width: min(760px, 62vw);
  right: -8%;
  bottom: 13%;
  opacity: .34;
}

#m187-story-entrance[data-m187-state="handoff"] .m187-herd-layer img {
  width: min(540px, 48vw);
  right: -5%;
  bottom: 16%;
  opacity: .12;
}

.m187-story-copy p:not(.m187-story-kicker) {
  max-width: 520px;
  margin: 24px auto 0;
  color: rgba(229, 234, 255, .74);
  font-size: clamp(15px, 1.7vw, 20px);
  line-height: 1.8;
}

.m187-entry-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 38px;
}

.m187-entry-button {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: 14px;
  letter-spacing: .03em;
  backdrop-filter: blur(14px);
}

#m174-business {
  position: relative;
  min-height: clamp(680px, 86svh, 860px) !important;
  margin-top: -12svh !important;
}

#m174-business .hero-platform-network {
  opacity: 0 !important;
  visibility: hidden !important;
}

#m174-business .m187-herd-ambient {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.m187-herd-ambient::before {
  content: "";
  position: absolute;
  width: 60vw;
  height: 60vw;
  right: -12vw;
  top: 6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(62, 76, 218, .2), transparent 66%);
  filter: blur(20px);
}

.m187-herd-ambient img {
  position: absolute;
  width: min(700px, 68vw);
  right: -12%;
  bottom: -6%;
  opacity: .24;
  filter: saturate(1.1) contrast(1.06) drop-shadow(0 0 32px rgba(101, 122, 255, .3));
  mix-blend-mode: screen;
  animation: m187-herd-drift 18s ease-in-out infinite alternate;
}

#m174-business .m174-business-title {
  max-width: 820px !important;
  font-size: clamp(35px, 5.2vw, 74px) !important;
}

#m174-business .hero-description {
  max-width: 540px !important;
}

@keyframes m187-herd-drift {
  from { transform: translate3d(-2%, 0, 0) rotate(-1deg); }
  to { transform: translate3d(7%, -3%, 0) rotate(1.4deg); }
}

@keyframes m187-line-pulse {
  0%, 100% { transform: scaleX(.55); opacity: .45; }
  50% { transform: scaleX(1); opacity: 1; }
}

@media (max-width: 720px) {
  #m187-story-entrance { height: 190svh; min-height: 1180px; }
  .m187-herd-layer img { width: 132vw; right: -42%; bottom: 12%; }
  .m187-story-copy { padding: 16vh 20px; }
  .m187-story-copy-inner { padding: 20px 14px 24px; }
  .m187-story-copy h2 { font-size: clamp(34px, 10.5vw, 58px); letter-spacing: -.08em; }
  .m187-story-copy p:not(.m187-story-kicker) { font-size: 15px; }
  #m174-business .m187-herd-ambient img { width: 112vw; right: -38%; bottom: 0; opacity: .2; }
  #m187-story-entrance[data-m187-state="narrative"] .m187-herd-layer img { width: 88vw; right: -28%; bottom: 18%; opacity: .3; }
}

@media (prefers-reduced-motion: reduce) {
  .m187-story-line i, .m187-herd-ambient img { animation: none; }
}