/*
 * Montana's Flow V22 — visible liquid aurora, compositor-only animation.
 * --------------------------------------------------------------------
 * The water/fog blur is baked into 3 transparent PNG textures.
 * At runtime the browser only animates transform + opacity.
 */

html,
body {
  min-height: 100%;
  background: #050304;
}

body {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 14% 12%, rgba(127, 8, 44, .10), transparent 34%),
    radial-gradient(ellipse at 87% 78%, rgba(97, 6, 35, .08), transparent 34%),
    linear-gradient(180deg, #050304 0%, #070405 48%, #050304 100%);
}

/* Disable every older ambient experiment. */
.bg-smoke-glow,
.fog-overlay,
.mf-ambient-background,
#mf-aurora-bg {
  display: none !important;
}

.mf-aurora-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
  transform: translateZ(0);
  background:
    radial-gradient(ellipse at 25% 26%, rgba(125, 7, 43, .055), transparent 37%),
    radial-gradient(ellipse at 76% 69%, rgba(100, 6, 37, .045), transparent 38%);
}

.mf-aurora-layer {
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  transform-origin: center;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/*
 * V22 deliberately moves farther than V21.
 * It is still slow, but you can actually see the liquid drifting after a few seconds.
 */
.mf-aurora-layer--one {
  width: 102vw;
  height: 92vh;
  min-width: 1120px;
  min-height: 650px;
  left: -24vw;
  top: -17vh;
  opacity: .92;
  background-image: url('../assets/images/mf-aurora-v23-1.png');
  animation: mfAuroraFlowOne 30s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}

.mf-aurora-layer--two {
  width: 98vw;
  height: 88vh;
  min-width: 1080px;
  min-height: 620px;
  right: -27vw;
  top: 20vh;
  opacity: .76;
  background-image: url('../assets/images/mf-aurora-v23-2.png');
  animation: mfAuroraFlowTwo 39s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}

.mf-aurora-layer--three {
  width: 82vw;
  height: 72vh;
  min-width: 880px;
  min-height: 500px;
  left: 12vw;
  bottom: -23vh;
  opacity: .56;
  background-image: url('../assets/images/mf-aurora-v23-3.png');
  animation: mfAuroraFlowThree 51s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}

/* Keeps the page dark while preserving the watery definition of the textures. */
.mf-aurora-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,3,4,.015), rgba(5,3,4,.055)),
    radial-gradient(ellipse at center, transparent 0 56%, rgba(0,0,0,.06) 82%, rgba(0,0,0,.19) 100%);
}

@keyframes mfAuroraFlowOne {
  0%   { transform: translate3d(-7vw,-3vh,0) rotate(-3deg) scale(1.02, .98); opacity:.82; }
  28%  { transform: translate3d(-1vw, 3vh,0) rotate( 0deg) scale(1.08,1.03); opacity:.94; }
  62%  { transform: translate3d( 7vw, 0vh,0) rotate( 2deg) scale(1.02,1.08); opacity:.88; }
  100% { transform: translate3d(13vw,-4vh,0) rotate(-2deg) scale(.98,1.02); opacity:.91; }
}

@keyframes mfAuroraFlowTwo {
  0%   { transform: translate3d( 9vw, 3vh,0) rotate( 3deg) scale(1.04,.98); opacity:.66; }
  34%  { transform: translate3d( 3vw,-3vh,0) rotate( 0deg) scale(.98,1.06); opacity:.79; }
  69%  { transform: translate3d(-6vw, 1vh,0) rotate(-2deg) scale(1.06,1.01); opacity:.73; }
  100% { transform: translate3d(-13vw,4vh,0) rotate( 2deg) scale(1.00,.96); opacity:.77; }
}

@keyframes mfAuroraFlowThree {
  0%   { transform: translate3d(-5vw, 3vh,0) rotate(-2deg) scale(1.00); opacity:.45; }
  40%  { transform: translate3d( 1vw,-3vh,0) rotate( 1deg) scale(1.08,1.03); opacity:.59; }
  72%  { transform: translate3d( 7vw, 1vh,0) rotate( 3deg) scale(1.02,.96); opacity:.53; }
  100% { transform: translate3d(11vw,-2vh,0) rotate(-1deg) scale(.97,1.05); opacity:.57; }
}

/* Site content stays above the fixed ambient scene. */
.app-container,
.about-app,
.auth-page,
.account-page,
.site-footer,
body > header {
  position: relative;
  z-index: 1;
}

.app-container,
.about-app,
.auth-page,
.account-page {
  background: transparent !important;
}

/* Large surfaces stay dark but no longer hide the global aurora. */
.social-proof-section {
  background: linear-gradient(180deg, rgba(7,4,6,.12), rgba(8,5,7,.56)) !important;
}

.social-proof-orb {
  display: none !important;
}

.about-feedback {
  background: linear-gradient(180deg, rgba(5,3,4,.20), rgba(5,3,4,.56)) !important;
}

.site-footer {
  background: linear-gradient(180deg, rgba(10,6,8,.70), rgba(4,3,4,.94)) !important;
}

/* Mobile navigation must never fall behind the fixed scene. */
.mf-mobile-nav-backdrop {
  position: fixed !important;
  z-index: 998 !important;
}

.mf-mobile-nav {
  position: fixed !important;
  z-index: 999 !important;
}

.mf-mobile-menu-button {
  position: relative !important;
  z-index: 1000 !important;
}

/* Mobile: 2 textures only. */
@media (max-width: 820px) {
  .mf-aurora-layer--one {
    width: 168vw;
    height: 76vh;
    min-width: 0;
    min-height: 0;
    left: -61vw;
    top: -4vh;
    opacity: .82;
    animation-duration: 32s;
  }

  .mf-aurora-layer--two {
    width: 156vw;
    height: 72vh;
    min-width: 0;
    min-height: 0;
    right: -60vw;
    top: 37vh;
    opacity: .67;
    animation-duration: 42s;
  }

  .mf-aurora-layer--three {
    display: none;
  }

  .social-proof-section {
    background: linear-gradient(180deg, rgba(7,4,6,.16), rgba(8,5,7,.62)) !important;
  }
}

/*
 * Do not make the background completely static in reduced-motion mode.
 * Motion is dramatically reduced instead.
 */
@media (prefers-reduced-motion: reduce) {
  .mf-aurora-layer--one { animation-duration: 120s; }
  .mf-aurora-layer--two { animation-duration: 150s; }
  .mf-aurora-layer--three { animation-duration: 180s; }
}