/* Murphy Presence Engine
   Motion-only progressive enhancement. Every added layer is out of flow and
   fully transparent at progress 0 so the reference composition stays intact. */

.murphy-hero[data-murphy-scene] {
  --mp-progress: 0;
  --mp-presence: 0;
  --mp-observe: 0;
  --mp-decide: 0;
  --mp-act: 0;
  --mp-handoff: 0;
  --mp-confirm: 0;
  --mp-blink: 0;
  --mp-light-x: 64%;
  --mp-light-y: 28%;
  --mp-depth-alpha: 0;
  --mp-scan-alpha: 0;
  --mp-scan-y: 0px;
  --mp-radar-alpha: 0;
  --mp-radar-scale: 0.94;
  --mp-copy-opacity: 1;
  --mp-copy-shift: 0px;
  position: relative;
}

.murphy-presence-ready .murphy-hero__copy {
  opacity: var(--mp-copy-opacity);
  transform: translate3d(-4px, calc(-1px + var(--mp-copy-shift)), 0);
}

.murphy-presence-ready .murphy-glow--eye {
  opacity: calc(var(--mp-presence) * 0.38);
}

.murphy-presence-ready .murphy-media[data-state="attentive"] .murphy-glow--eye {
  opacity: 0.42;
}

.murphy-presence-ready .murphy-hero__visual {
  translate: 0 var(--murphy-scene-lift, 0px);
  scale: var(--murphy-scene-scale, 1);
}

.murphy-hero[data-murphy-active="true"] .murphy-hero__copy,
.murphy-hero[data-murphy-active="true"] .murphy-media,
.murphy-hero[data-murphy-active="true"] .murphy-eye__iris {
  will-change: transform, opacity;
}

.murphy-presence-ready .murphy-card {
  transition: none;
}

/* Depth-conditioned light: the existing grayscale depth asset is only used as
   a luminance mask. Murphy's source portrait is never warped or replaced. */
.murphy-presence__depth-light,
.murphy-presence__scan,
.murphy-presence__radar {
  position: absolute;
  z-index: 4;
  display: block;
  pointer-events: none;
}

.murphy-presence__depth-light {
  inset: 0;
  background:
    radial-gradient(
      circle at var(--mp-light-x) var(--mp-light-y),
      rgba(157, 224, 255, 0.42) 0,
      rgba(83, 143, 255, 0.18) 16%,
      transparent 42%
    );
  -webkit-mask: url("/assets/murphy/media/murphy-depth.png") 50% 0 / 100% 100% no-repeat;
  mask: url("/assets/murphy/media/murphy-depth.png") 50% 0 / 100% 100% no-repeat;
  mask-mode: luminance;
  mix-blend-mode: screen;
  opacity: var(--mp-depth-alpha);
  transform: translateZ(0);
}

.murphy-presence__scan {
  left: 7%;
  right: 7%;
  top: 18%;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(105, 221, 255, 0.8), transparent);
  box-shadow: 0 0 10px rgba(72, 166, 255, 0.42);
  opacity: var(--mp-scan-alpha);
  transform: translate3d(0, var(--mp-scan-y), 0);
}

.murphy-presence__radar {
  left: 66%;
  top: 35%;
  width: 42%;
  aspect-ratio: 1;
  border: 1px solid rgba(99, 170, 255, 0.28);
  border-radius: 50%;
  opacity: var(--mp-radar-alpha);
  transform: translate3d(-50%, -50%, 0) scale(var(--mp-radar-scale));
}

.murphy-presence__radar::before,
.murphy-presence__radar::after,
.murphy-presence__radar i {
  content: "";
  position: absolute;
  inset: 14%;
  border: 1px solid rgba(93, 178, 255, 0.2);
  border-radius: 50%;
}

.murphy-presence__radar::after {
  inset: 31%;
}

.murphy-presence__radar i:first-child {
  inset: 50% 4% auto 50%;
  height: 1px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, rgba(116, 210, 255, 0.45), transparent);
  transform: rotate(calc(var(--mp-progress) * 155deg));
  transform-origin: 0 50%;
}

.murphy-presence__radar i:last-child {
  inset: 50% auto auto 50%;
  width: 4px;
  height: 4px;
  border: 0;
  background: #8be5ff;
  box-shadow: 0 0 9px rgba(86, 186, 255, 0.9);
  transform: translate3d(-50%, -50%, 0);
}

/* Optical blink. It reads as a mechanical shutter and never deforms the face. */
.murphy-glow--eye::before,
.murphy-glow--eye::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: -4%;
  width: 108%;
  height: 52%;
  background: linear-gradient(180deg, rgba(7, 12, 25, 0.98), rgba(12, 22, 40, 0.94));
  opacity: var(--mp-blink);
  pointer-events: none;
}

.murphy-glow--eye::before {
  top: -1%;
  transform: scaleY(var(--mp-blink));
  transform-origin: 50% 0;
}

.murphy-glow--eye::after {
  bottom: -1%;
  transform: scaleY(var(--mp-blink));
  transform-origin: 50% 100%;
}

.murphy-eye__iris {
  z-index: 1;
  opacity: calc(0.9 - var(--mp-blink) * 0.84);
}

/* Phase HUD: hidden at rest, compact enough to stay subordinate to the landing
   page copy and existing operational cards. */
.murphy-presence-hud {
  position: absolute;
  z-index: 8;
  left: 12px;
  top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 5px 10px;
  width: 190px;
  padding: 9px 10px 9px 11px;
  border: 1px solid rgba(112, 151, 220, calc(var(--mp-presence) * 0.25));
  border-radius: 10px;
  background: rgba(5, 9, 20, calc(var(--mp-presence) * 0.76));
  box-shadow: 0 12px 32px rgba(0, 0, 0, calc(var(--mp-presence) * 0.22));
  opacity: var(--mp-presence);
  transform: translate3d(0, calc((1 - var(--mp-presence)) * 6px), 0);
  contain: layout paint style;
  pointer-events: none;
}

.murphy-presence-hud > small {
  grid-column: 1 / -1;
  color: rgba(143, 159, 191, 0.76);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1;
}

.murphy-presence-hud__phases {
  display: grid;
  min-height: 17px;
  align-items: center;
}

.murphy-presence-hud__phases span {
  grid-area: 1 / 1;
  color: #dceaff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.15;
  opacity: 0;
  transform: translate3d(0, 3px, 0);
}

.murphy-presence-hud__phases [data-murphy-phase-label="observe"] {
  opacity: var(--mp-observe);
  transform: translate3d(0, calc((1 - var(--mp-observe)) * 3px), 0);
}

.murphy-presence-hud__phases [data-murphy-phase-label="decide"] {
  opacity: var(--mp-decide);
  transform: translate3d(0, calc((1 - var(--mp-decide)) * 3px), 0);
}

.murphy-presence-hud__phases [data-murphy-phase-label="act"] {
  opacity: var(--mp-act);
  transform: translate3d(0, calc((1 - var(--mp-act)) * 3px), 0);
}

.murphy-presence-hud__phases [data-murphy-phase-label="handoff"] {
  opacity: var(--mp-handoff);
  transform: translate3d(0, calc((1 - var(--mp-handoff)) * 3px), 0);
}

.murphy-presence-hud__signal {
  position: relative;
  align-self: center;
  display: block;
  width: 28px;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(117, 142, 192, 0.22);
}

.murphy-presence-hud__signal i {
  display: block;
  width: calc(100% * var(--mp-progress));
  height: 100%;
  border-radius: inherit;
  background: var(--cb-accent-gradient);
  box-shadow: 0 0 8px rgba(69, 181, 226, 0.7);
}

/* Six deterministic signal particles. Their coordinates are written from the
   single engine rAF and therefore scrub backwards with the page. */
.murphy-presence-particles {
  position: absolute;
  z-index: 9;
  inset: 0;
  overflow: visible;
  contain: layout style;
  pointer-events: none;
}

.murphy-presence-particles i {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #80dcff;
  box-shadow: 0 0 8px rgba(74, 172, 255, 0.8);
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(0.72);
}

.murphy-presence-particles i:nth-child(3n + 2) {
  width: 3px;
  height: 3px;
  background: #a78bfa;
  box-shadow: 0 0 7px rgba(167, 139, 250, 0.78);
}

.murphy-presence-particles i:nth-child(3n) {
  width: 3px;
  height: 3px;
  background: #67e0b9;
  box-shadow: 0 0 7px rgba(103, 224, 185, 0.76);
}

/* Handoff line is anchored to the existing portrait and points toward the
   following section. Its scale is fully scroll-driven. */
.murphy-transition-beam {
  position: absolute;
  z-index: 7;
  left: var(--mp-beam-x, 42%);
  top: var(--mp-beam-y, 76%);
  display: block;
  width: 34px;
  height: min(45vh, 360px);
  opacity: calc(var(--mp-handoff) * 0.72);
  transform: translate3d(-50%, 0, 0);
  transform-origin: 50% 0;
  pointer-events: none;
}

.murphy-transition-beam::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, rgba(94, 180, 255, 0.85), rgba(103, 224, 185, 0.34), transparent);
  box-shadow: 0 0 12px rgba(71, 173, 255, 0.42);
  transform: scaleY(var(--mp-handoff));
  transform-origin: 50% 0;
}

.murphy-transition-beam::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% * var(--mp-handoff));
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #84e7d0;
  box-shadow: 0 0 12px rgba(103, 224, 185, 0.82);
  transform: translate3d(-50%, -50%, 0) scale(calc(0.7 + var(--mp-handoff) * 0.3));
}

.murphy-transition-beam i {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(90deg, transparent, rgba(69, 156, 255, 0.08), transparent);
  filter: blur(8px);
  transform: scaleY(var(--mp-handoff));
  transform-origin: 50% 0;
}

.murphy-features {
  --mp-handoff-arrival: 0;
  position: relative;
}

.murphy-features::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -90px;
  width: min(680px, 80vw);
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(65, 139, 255, 0.13), rgba(83, 209, 196, 0.04) 48%, transparent 72%);
  opacity: var(--mp-handoff-arrival);
  transform: translate3d(-50%, 0, 0) scale(calc(0.92 + var(--mp-handoff-arrival) * 0.08));
  pointer-events: none;
}

/* Freeze is read in the head before stylesheets resolve: no idle frame, video
   request, blink, pointer listener or scroll scene can flash into existence. */
html[data-murphy-motion="freeze"] .murphy-page *,
html[data-murphy-motion="freeze"] .murphy-page *::before,
html[data-murphy-motion="freeze"] .murphy-page *::after {
  animation: none !important;
  transition: none !important;
}

html[data-murphy-motion="freeze"] .murphy-hero {
  min-height: 0 !important;
  --mp-progress: 0 !important;
  --mp-presence: 0 !important;
  --mp-observe: 0 !important;
  --mp-decide: 0 !important;
  --mp-act: 0 !important;
  --mp-handoff: 0 !important;
  --mp-blink: 0 !important;
}

html[data-murphy-motion="freeze"] .murphy-hero__inner {
  position: static !important;
}

html[data-murphy-motion="freeze"] .murphy-hero__visual {
  translate: 0 0 !important;
  scale: 1 !important;
}

html[data-murphy-motion="freeze"] .murphy-media {
  transform: translate3d(0, 0, 0) !important;
  will-change: auto !important;
}

html[data-murphy-motion="freeze"] .murphy-media__video {
  display: none !important;
}

html[data-murphy-motion="freeze"] .murphy-media__poster {
  opacity: 1 !important;
}

html[data-murphy-motion="freeze"] .murphy-hero__visual::before {
  opacity: 0.82 !important;
}

html[data-murphy-motion="freeze"] .murphy-glow--ring {
  opacity: 0.2 !important;
}

html[data-murphy-motion="freeze"] .murphy-glow--eye {
  display: none !important;
}

html[data-murphy-motion="freeze"] .murphy-eye__iris {
  opacity: 0.9 !important;
  transform: translate3d(-50%, -50%, 0) !important;
}

html[data-murphy-motion="freeze"] .murphy-presence__depth-light,
html[data-murphy-motion="freeze"] .murphy-presence__scan,
html[data-murphy-motion="freeze"] .murphy-presence__radar,
html[data-murphy-motion="freeze"] .murphy-presence-hud,
html[data-murphy-motion="freeze"] .murphy-presence-particles,
html[data-murphy-motion="freeze"] .murphy-transition-beam {
  display: none !important;
}

@media (min-width: 1121px) {
  html[data-murphy-motion="freeze"] .murphy-hero {
    min-height: calc(100svh + clamp(680px, 72svh, 900px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .murphy-presence__depth-light,
  .murphy-presence__scan,
  .murphy-presence__radar,
  .murphy-presence-hud,
  .murphy-presence-particles,
  .murphy-transition-beam {
    display: none !important;
  }

  .murphy-features::before {
    display: none;
  }
}

@media (max-width: 1120px) {
  .murphy-presence-ready .murphy-hero__copy {
    transform: translate3d(0, var(--mp-copy-shift), 0);
  }

  .murphy-presence-hud {
    left: 50%;
    top: 4px;
    width: 174px;
    transform: translate3d(-50%, calc((1 - var(--mp-presence)) * 6px), 0);
  }

  .murphy-transition-beam {
    height: min(34vh, 260px);
  }
}

@media (max-width: 640px) {
  .murphy-presence-hud {
    top: -2px;
    width: 160px;
    padding: 8px 9px;
  }

  .murphy-presence-hud > small {
    font-size: 7px;
  }

  .murphy-presence-hud__phases span {
    font-size: 11px;
  }

  .murphy-transition-beam {
    height: min(28vh, 210px);
  }
}