/* ==========================================================================
   Miss Pepper AI — Cinematic Hero System
   Ported from the approved homepage prototype (outputs/styles.css).
   Namespaced `mp-hero`. Background image is driven by --mp-hero-bg so each
   silo hero can swap its own asset + focal point without new CSS.
   ========================================================================== */

.mp-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--mp-surface);
  --mp-hero-focal: 58% 50%;   /* per-hero override */
}

.mp-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -4;
  background-image: var(--mp-hero-bg);
  background-size: cover;
  background-position: var(--mp-hero-focal);
  transform: scale(1.002);
}

/* Left-readability + vignette shade */
.mp-hero__shade {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2,9,16,.66) 0%, rgba(3,12,20,.5) 27%, rgba(2,10,17,.1) 49%, rgba(2,9,16,.15) 100%),
    radial-gradient(circle at 32% 52%, rgba(2,17,29,.03), rgba(2,8,14,.28) 78%),
    linear-gradient(180deg, rgba(0,10,18,.22), rgba(0,10,18,.06) 54%, rgba(0,8,14,.28));
}

/* Faint interface grid lines over the composition */
.mp-hero__frame {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .85;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, transparent 2.95%, var(--mp-line) 3%, transparent 3.05%, transparent 75.2%, var(--mp-line) 75.25%, transparent 75.3%, transparent 81.1%, var(--mp-line) 81.15%, transparent 81.2%),
    linear-gradient(0deg, transparent 24.8%, rgba(162,207,231,.08) 25%, transparent 25.15%, transparent 54.8%, rgba(162,207,231,.07) 55%, transparent 55.12%);
}

/* --- Content column --------------------------------------------------- */
.mp-hero__content {
  position: relative;
  z-index: 1;
  width: min(46rem, 48vw);
  padding: var(--mp-edge-top) 0 0 var(--mp-edge-left);
}

.mp-hero__brand {
  display: flex;
  align-items: center;
  width: max-content;
  margin-bottom: clamp(2.75rem, 5.5vh, 3.35rem);
  transform: translateX(-.2rem);
}
.mp-hero__logo {
  width: clamp(17.25rem, 23.2vw, 26.25rem);
  height: auto;
  filter: drop-shadow(0 3px 16px rgba(0,0,0,.46));
}

.mp-hero__headline {
  margin: 0;
  text-transform: uppercase;
  font-family: var(--mp-display);
  font-size: clamp(3rem, 5.32vw, 6.1rem);
  line-height: var(--mp-lh-headline);
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: 0 .28rem 1.6rem rgba(0,0,0,.48);
}
.mp-hero__headline span { display: block; white-space: nowrap; }
.mp-hero__headline .mp-accent { color: var(--mp-orange); font-weight: 800; }

.mp-hero__subcopy {
  margin: clamp(1.75rem, 3.8vh, 2.85rem) 0 clamp(2rem, 4.1vh, 3.25rem);
  color: var(--mp-muted);
  font-size: clamp(1.05rem, 1.42vw, 1.52rem);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--mp-tracking-copy);
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
}

/* --- Intelligence panel cluster (right) ------------------------------- */
.mp-insights {
  position: absolute;
  z-index: 2;
  top: clamp(5rem, 9.4vh, 7.6rem);
  right: clamp(3rem, 5.15vw, 6.25rem);
  display: grid;
  gap: clamp(1rem, 1.6vw, 1.5rem);
  width: min(25.4rem, 24vw);
}

.mp-insights .mp-panel__title { margin-bottom: 1rem; }

/* line chart */
.mp-line-chart {
  height: clamp(5rem, 6vw, 6.5rem);
  margin-bottom: .65rem;
  background-image:
    linear-gradient(rgba(118,173,207,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118,173,207,.1) 1px, transparent 1px);
  background-size: 3.1rem 1.65rem;
}
.mp-line-chart svg { width: 100%; height: 100%; overflow: visible; }
.mp-line-chart polyline { fill: none; stroke: var(--mp-orange); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.mp-line-chart .mp-ghost { stroke: rgba(255,107,0,.32); stroke-width: 1.5; }

.mp-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.mp-metrics span, .mp-audience span, .mp-panel__foot, .mp-os li {
  color: rgba(239,247,255,.82);
  font-size: clamp(.66rem, .68vw, .78rem);
}
.mp-metrics strong, .mp-audience strong {
  display: block; margin: .28rem 0 .1rem; color: #fff;
  font-size: clamp(1.18rem, 1.42vw, 1.62rem); font-weight: 500;
}
.mp-metrics em, .mp-audience em { color: var(--mp-green); font-size: clamp(.62rem, .64vw, .76rem); font-style: normal; }

.mp-audience { display: flex; align-items: center; gap: 1.25rem; }
.mp-donut {
  width: clamp(5.2rem, 6.2vw, 6.8rem);
  aspect-ratio: 1; flex: 0 0 auto; border-radius: 50%;
  background: conic-gradient(var(--mp-orange-hot) 0 35%, rgba(255,127,22,.45) 35% 40%, var(--mp-blue) 40% 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.mp-donut::after {
  content: ""; display: block; width: 62%; aspect-ratio: 1; margin: 19%;
  border-radius: 50%; background: rgba(6,24,38,.94);
}

.mp-panel__foot {
  display: flex; justify-content: space-between;
  margin-top: 1.2rem; padding-top: .9rem;
  border-top: 1px solid rgba(151,211,243,.13);
}
.mp-panel__foot b { color: var(--mp-blue-active); font-weight: 500; }

.mp-os ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.mp-os li {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 2.4rem; border-bottom: 1px solid rgba(151,211,243,.1);
}
.mp-os li:last-child { border-bottom: 0; }
.mp-os li b { color: var(--mp-orange); text-transform: uppercase; font-weight: 800; }
.mp-os li span::before {
  content: "+"; display: inline-grid; place-items: center;
  width: 1.55rem; height: 1.55rem; margin-right: .65rem;
  border: 1px solid rgba(233,246,255,.72); border-radius: 50%;
  color: #fff; font-size: .7rem;
}

/* --- Responsive ------------------------------------------------------- */
@media (max-width: 1050px) {
  .mp-hero { min-height: 58rem; --mp-hero-focal: 62% 50%; }
  .mp-hero__content { width: min(42rem, 62vw); padding-top: calc(var(--mp-topbar-h) + 0.8rem); padding-left: clamp(2rem, 5vw, 4rem); }
  .mp-hero__brand { margin-bottom: clamp(3rem, 7vh, 4.25rem); }
  .mp-hero__logo { width: clamp(14.5rem, 32vw, 21rem); }
  .mp-insights { width: 20rem; right: 2rem; opacity: .82; }
}
@media (max-width: 760px) {
  .mp-hero { min-height: 48rem; --mp-hero-focal: 70% 50%; }
  .mp-hero__bg { background-size: auto 100%; }
  .mp-hero__shade {
    background:
      linear-gradient(90deg, rgba(2,9,16,.76), rgba(2,9,16,.39) 62%, rgba(2,9,16,.2)),
      linear-gradient(180deg, rgba(0,10,18,.14), rgba(0,10,18,.42));
  }
  .mp-hero__content { width: auto; padding: calc(var(--mp-topbar-h) + 1.3rem) 1.35rem 0; }
  .mp-hero__brand { margin-bottom: clamp(3.9rem, 10.5vh, 5.35rem); transform-origin: left top; }
  .mp-hero__logo { width: min(72vw, 18.5rem); }
  .mp-hero__headline { font-size: clamp(2.35rem, 12vw, 3.65rem); line-height: 1.04; }
  .mp-hero__subcopy { max-width: 24rem; font-size: .95rem; }
  .mp-cta { min-width: min(100%, 20rem); height: 4.2rem; }
  .mp-insights { display: none; }
}
@media (max-width: 420px) {
  .mp-hero__logo { width: min(76vw, 17rem); }
  .mp-hero__headline { font-size: clamp(2.15rem, 11.1vw, 3.1rem); }
  .mp-hero__subcopy { font-size: .82rem; letter-spacing: .1em; }
  .mp-cta { width: 100%; min-width: 0; padding: 0 1.35rem; font-size: .9rem; gap: .9rem; }
}

/* ==========================================================================
   Motion — "campaign intelligence coming online" (Art Bible: Motion Rules)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .mp-hero__bg    { animation: mp-camera-drift 32s ease-in-out infinite alternate; will-change: transform, background-position; }
  .mp-hero__frame { animation: mp-grid-breathe 14s ease-in-out infinite; will-change: opacity; }
  .mp-hero__logo  { animation: mp-brand-resolve .9s var(--mp-ease) both; transform-origin: left center; will-change: transform, filter, opacity; }
  .mp-hero__headline span { clip-path: inset(0 100% 0 0); animation: mp-headline-scan .72s var(--mp-ease-scan) both; will-change: clip-path, filter; }
  .mp-hero__headline span:nth-child(2) { animation-delay: .09s; }
  .mp-hero__headline span:nth-child(3) { animation-delay: .18s; }
  .mp-hero__subcopy { animation: mp-signal-lock .7s ease-out .32s both; will-change: opacity, filter; }
  .mp-hero__content .mp-cta {
    position: relative; overflow: hidden; isolation: isolate;
    animation: mp-cta-charge .72s var(--mp-ease) .42s both; will-change: transform, box-shadow;
  }
  .mp-hero__content .mp-cta::before {
    content: ""; position: absolute; inset: -35% auto -35% -55%; z-index: 0; width: 42%;
    transform: skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
    animation: mp-cta-sheen 7.5s ease-in-out 1.4s infinite; pointer-events: none;
  }
  .mp-panel { animation: mp-panel-float 8.5s ease-in-out infinite; will-change: transform, box-shadow; }
  .mp-insights .mp-panel:nth-child(2) { animation-delay: -2.1s; }
  .mp-insights .mp-panel:nth-child(3) { animation-delay: -4.4s; }
  .mp-line-chart polyline { stroke-dasharray: 420; stroke-dashoffset: 420; animation: mp-chart-trace 1.25s cubic-bezier(.32,.72,.22,1) .45s both; }
  .mp-line-chart .mp-ghost { animation-delay: .25s; }
  .mp-donut { animation: mp-audience-dial .9s var(--mp-ease) .6s both; transform-origin: center; will-change: transform, filter; }
  .mp-os li { animation: mp-status-register .5s ease-out both; }
  .mp-os li:nth-child(1) { animation-delay: .55s; }
  .mp-os li:nth-child(2) { animation-delay: .66s; }
  .mp-os li:nth-child(3) { animation-delay: .77s; }
  .mp-os li:nth-child(4) { animation-delay: .88s; }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 760px) {
  .mp-hero__bg { animation: mp-camera-drift-mobile 30s ease-in-out infinite alternate; }
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@keyframes mp-camera-drift {
  from { transform: scale(1.002) translate3d(0,0,0); background-position: 58% 50%; }
  to   { transform: scale(1.026) translate3d(-.35%,.18%,0); background-position: 59.4% 50.3%; }
}
@keyframes mp-camera-drift-mobile {
  from { transform: scale(1.002) translate3d(0,0,0); background-position: 70% 50%; }
  to   { transform: scale(1.018) translate3d(-.25%,.12%,0); background-position: 71% 50.2%; }
}
@keyframes mp-grid-breathe { 0%,100% { opacity: .76; } 50% { opacity: .92; } }
@keyframes mp-brand-resolve {
  0%   { opacity: 0; transform: translate3d(-10px,0,0) scale(.985); filter: drop-shadow(0 3px 16px rgba(0,0,0,.46)) blur(4px); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: drop-shadow(0 3px 16px rgba(0,0,0,.46)) blur(0); }
}
@keyframes mp-headline-scan { 0% { clip-path: inset(0 100% 0 0); filter: blur(3px); } 100% { clip-path: inset(0 0 0 0); filter: blur(0); } }
@keyframes mp-signal-lock { 0% { opacity: 0; filter: blur(3px); } 100% { opacity: 1; filter: blur(0); } }
@keyframes mp-cta-charge {
  0%   { opacity: 0; transform: translate3d(0,10px,0); box-shadow: 0 .6rem 1.6rem rgba(255,100,0,.08), inset 0 1px 0 rgba(255,255,255,.18); }
  100% { opacity: 1; transform: translate3d(0,0,0); box-shadow: var(--mp-cta-glow); }
}
@keyframes mp-cta-sheen { 0%,70% { transform: translateX(0) skewX(-18deg); opacity: 0; } 78% { opacity: .75; } 92%,100% { transform: translateX(390%) skewX(-18deg); opacity: 0; } }
@keyframes mp-panel-float { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-7px,0); } }
@keyframes mp-chart-trace { to { stroke-dashoffset: 0; } }
@keyframes mp-audience-dial { 0% { transform: scale(.92) rotate(-14deg); filter: saturate(.8); } 100% { transform: scale(1) rotate(0); filter: saturate(1); } }
@keyframes mp-status-register { 0% { opacity: 0; transform: translate3d(8px,0,0); } 100% { opacity: 1; transform: translate3d(0,0,0); } }