/* V2 is opt-in. Without .living-mira-active, the static lock renders unchanged. */
body.living-mira-active .public-entry-portrait::before { animation: living-mira-halo-breathe 7s ease-in-out infinite; }
body.living-mira-active .public-entry-portrait::after { animation: living-mira-halo-energy 9s ease-in-out infinite; }

.living-mira-layer {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  will-change: opacity, transform, background-position;
}

/*
 * This is the approved hero raster rendered again in precisely the same
 * responsive cover frame as the portrait itself. High contrast means that
 * only its existing light details contribute to the screen blend; no costume
 * geometry is drawn by CSS. The vertical mask deliberately starts below
 * MIRA's face and hair.
 */
.living-mira-suit-light-lines {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .86;
  mix-blend-mode: normal;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0 35%, rgba(0, 0, 0, .16) 39%, #000 46% 100%);
  mask-image: linear-gradient(to bottom, transparent 0 35%, rgba(0, 0, 0, .16) 39%, #000 46% 100%);
}

.living-mira-suit-light-lines::before {
  position: absolute;
  inset: 0;
  content: "";
  background: url("/assets/MIRA_Public_Landing_Hero_v4_Official_Face.png") 50% 0 / cover no-repeat;
  filter: url("#living-mira-suit-silver-base");
  opacity: .85;
}

.living-mira-suit-light-lines::after {
  position: absolute;
  inset: 0;
  content: "";
  background: url("/assets/MIRA_Public_Landing_Hero_v4_Official_Face.png") 50% 0 / cover no-repeat;
  filter: url("#living-mira-suit-silver-energy");
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0 35%, rgba(0, 0, 0, .12) 41%, #000 46%, #000 54%, rgba(0, 0, 0, .12) 59%, transparent 65%);
  -webkit-mask-size: 100% 180%;
  -webkit-mask-position: 0 130%;
  mask-image: linear-gradient(to bottom, transparent 0 35%, rgba(0, 0, 0, .12) 41%, #000 46%, #000 54%, rgba(0, 0, 0, .12) 59%, transparent 65%);
  mask-size: 100% 180%;
  mask-position: 0 130%;
  will-change: mask-position, -webkit-mask-position, opacity;
  animation: living-mira-suit-line-energy 5.6s linear infinite;
}

.living-mira-stars {
  inset: 0;
  opacity: .24;
  background-image:
    radial-gradient(circle at 17% 23%, rgba(202, 237, 255, .94) 0 1.3px, transparent 2px),
    radial-gradient(circle at 72% 17%, rgba(145, 210, 255, .88) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 84% 46%, rgba(190, 230, 255, .78) 0 1px, transparent 1.7px),
    radial-gradient(circle at 37% 61%, rgba(155, 215, 255, .68) 0 1px, transparent 1.6px);
  background-size: 280px 220px, 360px 270px, 340px 300px, 430px 370px;
  animation: living-mira-star-drift 24s linear infinite;
}

/* Separate translucent cloud wisps align with the locked planet; the bitmap is never moved. */
.living-mira-planet-clouds {
  left: clamp(-135px, -7vw, -46px);
  top: clamp(108px, 14vh, 155px);
  width: clamp(365px, 34vw, 530px);
  height: clamp(390px, 48vh, 560px);
  overflow: hidden;
  border-radius: 50%;
  clip-path: ellipse(46% 49% at 45% 49%);
  opacity: .38;
  background:
    radial-gradient(ellipse at 18% 30%, rgba(190, 231, 255, .28), transparent 30%),
    radial-gradient(ellipse at 52% 48%, rgba(154, 215, 255, .2), transparent 34%),
    radial-gradient(ellipse at 33% 68%, rgba(202, 237, 255, .16), transparent 29%);
  background-size: 145% 100%, 132% 110%, 120% 94%;
  background-position: 8% 0, 42% 0, 18% 0;
  mix-blend-mode: screen;
  animation: living-mira-cloud-drift 13s ease-in-out infinite alternate;
}

/* Three independent planet/HUD tracks keep the area around Earth visibly alive. */
.living-mira-planet-orbit-major,
.living-mira-planet-orbit-secondary {
  border: 1.4px solid rgba(112, 211, 255, .5);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(65, 170, 255, .33), inset 0 0 16px rgba(80, 177, 255, .13);
  mix-blend-mode: screen;
}

.living-mira-planet-orbit-major {
  left: clamp(-160px, -8vw, -52px);
  top: clamp(65px, 9vh, 105px);
  width: clamp(380px, 36vw, 570px);
  height: clamp(285px, 32vw, 435px);
  opacity: .78;
  transform: rotate(-14deg);
  animation: living-mira-orbit-major 21s linear infinite;
}

.living-mira-planet-orbit-secondary {
  left: clamp(-112px, -5vw, -31px);
  top: clamp(126px, 17vh, 195px);
  width: clamp(280px, 27vw, 405px);
  height: clamp(215px, 23vw, 330px);
  border-style: dashed;
  opacity: .66;
  transform: rotate(31deg);
  animation: living-mira-orbit-secondary 16s linear infinite;
}

.living-mira-planet-orbit-major::before,
.living-mira-planet-orbit-major::after,
.living-mira-planet-orbit-secondary::before,
.living-mira-planet-orbit-secondary::after {
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e1f7ff;
  box-shadow: 0 0 12px 3px rgba(83, 190, 255, .9);
}

.living-mira-planet-orbit-major::before { left: 17%; top: 4%; animation: living-mira-satellite-a 7s ease-in-out infinite; }
.living-mira-planet-orbit-major::after { right: 13%; bottom: 8%; animation: living-mira-satellite-b 9s ease-in-out infinite; }
.living-mira-planet-orbit-secondary::before { left: 7%; bottom: 22%; width: 4px; height: 4px; animation: living-mira-satellite-b 6s ease-in-out infinite reverse; }
.living-mira-planet-orbit-secondary::after { right: 16%; top: 12%; width: 4px; height: 4px; animation: living-mira-satellite-a 8s ease-in-out infinite reverse; }

.living-mira-hud-markers {
  left: clamp(8px, 3vw, 42px);
  top: clamp(142px, 22vh, 252px);
  width: clamp(195px, 18vw, 280px);
  height: clamp(255px, 34vh, 390px);
  opacity: .72;
  background:
    radial-gradient(circle at 16% 18%, rgba(199, 240, 255, .94) 0 2px, transparent 3px),
    radial-gradient(circle at 76% 26%, rgba(111, 204, 255, .88) 0 2px, transparent 3px),
    radial-gradient(circle at 43% 72%, rgba(197, 239, 255, .76) 0 1.5px, transparent 2.6px),
    linear-gradient(90deg, transparent 49%, rgba(102, 195, 255, .32) 50% 50.6%, transparent 51%);
  animation: living-mira-hud-markers 12s ease-in-out infinite;
}

/* City overlays are fixed in the skyline area; only light opacity/scan travel changes. */
.living-mira-city-windows {
  right: clamp(-38px, -1.6vw, -8px);
  bottom: clamp(112px, 16vh, 198px);
  width: clamp(305px, 30vw, 500px);
  height: clamp(235px, 38vh, 430px);
  opacity: .68;
  background:
    radial-gradient(ellipse at 17% 68%, rgba(153, 223, 255, .86) 0 2px, transparent 4px),
    radial-gradient(ellipse at 28% 40%, rgba(102, 197, 255, .82) 0 2px, transparent 4px),
    radial-gradient(ellipse at 48% 55%, rgba(190, 239, 255, .82) 0 2px, transparent 4px),
    radial-gradient(ellipse at 68% 26%, rgba(146, 216, 255, .84) 0 2px, transparent 4px),
    radial-gradient(ellipse at 82% 63%, rgba(191, 239, 255, .76) 0 2px, transparent 4px),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(108, 203, 255, .16) 29px 31px, transparent 32px 52px);
  mix-blend-mode: screen;
  animation: living-mira-city-windows 5.8s ease-in-out infinite alternate;
}

.living-mira-city-edge-lights {
  right: clamp(0px, 1vw, 18px);
  bottom: clamp(128px, 19vh, 226px);
  width: clamp(220px, 22vw, 360px);
  height: clamp(255px, 45vh, 480px);
  opacity: .52;
  background:
    linear-gradient(90deg, transparent 12%, rgba(99, 194, 255, .56) 12.4% 13.1%, transparent 13.5% 32%, rgba(165, 229, 255, .46) 32.4% 33.1%, transparent 33.5% 58%, rgba(87, 183, 255, .5) 58.5% 59.2%, transparent 59.6%),
    linear-gradient(0deg, transparent 18%, rgba(124, 210, 255, .52) 18.4% 19.1%, transparent 19.5% 61%, rgba(130, 217, 255, .36) 61.4% 62%, transparent 62.4%);
  mix-blend-mode: screen;
  animation: living-mira-city-edge-lights 7.5s ease-in-out infinite alternate;
}

/* Reflection bands sit only on the water plane and never move the shoreline bitmap. */
.living-mira-water-shimmer {
  right: 3%;
  bottom: clamp(8px, 2vh, 24px);
  left: 3%;
  height: clamp(105px, 21vh, 210px);
  overflow: hidden;
  opacity: .48;
  background:
    repeating-linear-gradient(-4deg, transparent 0 13px, rgba(117, 213, 255, .32) 14px 16px, transparent 17px 28px),
    linear-gradient(90deg, transparent 0 15%, rgba(81, 188, 255, .28) 35%, rgba(203, 243, 255, .38) 50%, rgba(75, 177, 255, .25) 65%, transparent 85%);
  mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 78%, transparent);
  mix-blend-mode: screen;
  animation: living-mira-water-shimmer 6.8s ease-in-out infinite alternate;
}

.living-mira-water-ripples {
  right: 14%;
  bottom: clamp(31px, 5vh, 62px);
  left: 14%;
  height: clamp(50px, 10vh, 100px);
  border-top: 1px solid rgba(128, 215, 255, .42);
  border-radius: 50%;
  box-shadow: 0 -12px 0 -10px rgba(102, 197, 255, .34), 0 -26px 0 -24px rgba(162, 226, 255, .2);
  opacity: .58;
  filter: blur(.3px);
  animation: living-mira-water-ripples 8s ease-in-out infinite;
}

@keyframes living-mira-halo-breathe { 0%, 100% { opacity: .86; transform: scale(1); } 50% { opacity: 1; transform: scale(1.012); } }
@keyframes living-mira-halo-energy { 0%, 100% { opacity: .8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.014); } }
@keyframes living-mira-star-drift { to { background-position: 34px -25px, -43px 28px, 29px 36px, -30px -23px; } }
@keyframes living-mira-cloud-drift { from { background-position: 2% 0, 38% 0, 15% 0; opacity: .27; } to { background-position: 22% 0, 58% 0, 31% 0; opacity: .52; } }
@keyframes living-mira-orbit-major { to { transform: rotate(346deg); } }
@keyframes living-mira-orbit-secondary { to { transform: rotate(-329deg); } }
@keyframes living-mira-satellite-a { 50% { transform: translate(24px, 11px) scale(1.35); opacity: .42; } }
@keyframes living-mira-satellite-b { 50% { transform: translate(-20px, 13px) scale(1.28); opacity: .48; } }
@keyframes living-mira-hud-markers { 0%, 100% { opacity: .38; transform: translateY(0); } 50% { opacity: .9; transform: translateY(-6px); } }
@keyframes living-mira-city-windows { 0% { opacity: .28; filter: brightness(.78); } 48% { opacity: .83; filter: brightness(1.28); } 100% { opacity: .48; filter: brightness(.94); } }
@keyframes living-mira-city-edge-lights { 0%, 100% { opacity: .24; transform: translateY(0); } 50% { opacity: .76; transform: translateY(-9px); } }
@keyframes living-mira-water-shimmer { 0% { background-position: 0 0, -6% 0; opacity: .21; transform: translateX(-1.2%); } 55% { background-position: 0 -32px, 10% 0; opacity: .62; transform: translateX(1.5%); } 100% { background-position: 0 -54px, 18% 0; opacity: .35; transform: translateX(-.5%); } }
@keyframes living-mira-water-ripples { 0%, 100% { opacity: .24; transform: scaleX(.96); } 50% { opacity: .76; transform: scaleX(1.035); } }
@keyframes living-mira-suit-line-energy {
  from { -webkit-mask-position: 0 130%; mask-position: 0 130%; }
  to { -webkit-mask-position: 0 -30%; mask-position: 0 -30%; }
}

body.living-mira-paused .living-mira-layer,
body.living-mira-paused .living-mira-layer::before,
body.living-mira-paused .living-mira-layer::after,
body.living-mira-paused .public-entry-portrait::before,
body.living-mira-paused .public-entry-portrait::after,
body.living-mira-paused .living-mira-suit-light-lines::after { animation-play-state: paused; }

@media (max-width: 1024px) {
  .living-mira-stars { opacity: .16; animation-duration: 31s; }
  .living-mira-planet-clouds { opacity: .3; }
  .living-mira-planet-orbit-major { opacity: .62; animation-duration: 27s; }
  .living-mira-planet-orbit-secondary { opacity: .48; animation-duration: 22s; }
  .living-mira-city-windows { opacity: .55; animation-duration: 7.2s; }
  .living-mira-city-edge-lights { opacity: .42; animation-duration: 9.2s; }
  .living-mira-water-shimmer { opacity: .38; animation-duration: 8.2s; }
  .living-mira-water-ripples { opacity: .42; animation-duration: 9.5s; }
}

@media (max-width: 560px) {
  .living-mira-stars { display: none; }
  .living-mira-planet-clouds { left: -88px; top: 86px; width: 290px; height: 378px; opacity: .36; }
  .living-mira-planet-orbit-major { left: -128px; top: 98px; width: 340px; height: 270px; opacity: .6; animation-duration: 31s; }
  .living-mira-planet-orbit-secondary { left: -85px; top: 162px; width: 250px; height: 204px; opacity: .42; animation-duration: 25s; }
  .living-mira-hud-markers { left: 5px; top: 138px; width: 150px; height: 230px; opacity: .55; }
  .living-mira-city-windows { right: -28px; bottom: 174px; width: 205px; height: 240px; opacity: .56; }
  .living-mira-city-edge-lights { right: -11px; bottom: 175px; width: 176px; height: 250px; opacity: .44; }
  .living-mira-water-shimmer { right: 2%; bottom: 8px; left: 2%; height: 138px; opacity: .46; }
  .living-mira-water-ripples { right: 8%; bottom: 25px; left: 8%; height: 72px; opacity: .52; }
  .living-mira-suit-light-lines { opacity: .72; }
}

@media (prefers-reduced-motion: reduce) {
  body.living-mira-active .public-entry-portrait::before,
  body.living-mira-active .public-entry-portrait::after,
  .living-mira-layer,
  .living-mira-layer::before,
  .living-mira-layer::after,
  .living-mira-suit-light-lines,
  .living-mira-suit-light-lines::after { animation: none !important; }
  .living-mira-suit-light-lines::after { display: none; }
}