/* OOXOO Fuel Scene System: scroll-linked cinematic background layer. */
body.ooxoo-fuel-page,
body.ooxoo-app-fuel-page {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  background:
    linear-gradient(
      180deg,
      var(--ooxoo-scene-top, #061a31) 0%,
      var(--ooxoo-scene-mid, #10375a) 36%,
      var(--ooxoo-scene-bottom, #061b31) 68%,
      var(--ooxoo-scene-deep, #020b16) 100%
    ) !important;
}

#ooxoo-fuel-scene-bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--ooxoo-scene-document-height, 1800px) !important;
  min-height: 100vh !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  background: #061b31 !important;
}

body.ooxoo-fuel-page .ooxoo-page,
body.ooxoo-fuel-page .ooxoo-page-shell,
body.ooxoo-fuel-page .ooxoo-fuel-wrap,
body.ooxoo-app-fuel-page .ooxoo-page,
body.ooxoo-app-fuel-page .ooxoo-page-shell,
body.ooxoo-app-fuel-page .ooxoo-fuel-wrap {
  position: relative !important;
  z-index: 2 !important;
}

body.ooxoo-fuel-page #ooxoo-footer,
body.ooxoo-fuel-page footer#ooxoo-footer,
body.ooxoo-fuel-page .ooxoo-footer,
body.ooxoo-fuel-page footer.ooxoo-footer,
body.ooxoo-app-fuel-page #ooxoo-footer,
body.ooxoo-app-fuel-page footer#ooxoo-footer,
body.ooxoo-app-fuel-page .ooxoo-footer,
body.ooxoo-app-fuel-page footer.ooxoo-footer {
  position: relative;
  z-index: 2;
}

#ooxoo-fuel-scene-bg .fuel-scene-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 95vh;
  background-image: var(--ooxoo-fuel-scene-image);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: .72;
  transform: scale(1.02);
  filter: saturate(1.02) contrast(1.02) brightness(.82);
  transition:
    background-image .8s ease,
    opacity .8s ease,
    filter .8s ease;
}

body.ooxoo-app-fuel-page #ooxoo-fuel-scene-bg .fuel-scene-image,
body.ooxoo-fuel-page[data-ooxoo-scene-mode="app"] #ooxoo-fuel-scene-bg .fuel-scene-image {
  height: 82vh;
  background-image: var(--ooxoo-fuel-scene-image-mobile, var(--ooxoo-fuel-scene-image));
  background-position: center top;
  opacity: .64;
}

#ooxoo-fuel-scene-bg .fuel-scene-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .28;
  pointer-events: none;
  background-repeat: repeat;
  background-position: center;
}

#ooxoo-fuel-scene-bg .fuel-scene-elements {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

#ooxoo-fuel-scene-bg .fuel-scene-gradient {
  position: absolute;
  left: 0;
  right: 0;
  top: 48vh;
  height: calc(var(--ooxoo-scene-document-height, 1800px) - 30vh);
  z-index: 3;
  background:
    linear-gradient(
      180deg,
      rgba(5, 18, 34, 0) 0%,
      rgba(5, 24, 43, .56) 18%,
      var(--ooxoo-scene-bottom, rgba(6, 27, 49, .84)) 42%,
      var(--ooxoo-scene-deep, #020b16) 100%
    );
}

#ooxoo-fuel-scene-bg .fuel-scene-dim {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    radial-gradient(circle at 50% 12%, var(--ooxoo-scene-glow-main, rgba(80, 170, 255, .16)), transparent 42%),
    radial-gradient(circle at 16% 72%, var(--ooxoo-scene-glow-sub, rgba(0, 220, 255, .10)), transparent 34%),
    linear-gradient(180deg, rgba(2, 10, 20, .20), rgba(2, 10, 20, .48) 60%, rgba(2, 10, 20, .72));
}

body.ooxoo-fuel-page #ooxoo-location-topbar,
body.ooxoo-fuel-page .ooxoo-location-topbar,
body.ooxoo-fuel-page .ooxoo-beta-notice,
body.ooxoo-fuel-page .ooxoo-fuel-hero-card,
body.ooxoo-fuel-page .ooxoo-fuel-controls,
body.ooxoo-app-fuel-page #ooxoo-location-topbar,
body.ooxoo-app-fuel-page .ooxoo-location-topbar,
body.ooxoo-app-fuel-page .ooxoo-beta-notice,
body.ooxoo-app-fuel-page .ooxoo-fuel-hero-card,
body.ooxoo-app-fuel-page .ooxoo-fuel-controls {
  background:
    linear-gradient(
      180deg,
      rgba(18, 54, 88, .68),
      rgba(8, 30, 54, .70)
    ) !important;
  border-color: rgba(220, 240, 255, .20) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(4px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(4px) saturate(1.05) !important;
}

body.ooxoo-fuel-page.ooxoo-fuel-page #ooxoo-location-topbar,
body.ooxoo-app-fuel-page.ooxoo-app-fuel-page #ooxoo-location-topbar {
  background:
    linear-gradient(
      180deg,
      rgba(18, 54, 88, .68),
      rgba(8, 30, 54, .70)
    ) !important;
  border-color: rgba(220, 240, 255, .20) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(4px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(4px) saturate(1.05) !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-card,
body.ooxoo-app-fuel-page .ooxoo-fuel-card {
  background:
    linear-gradient(
      180deg,
      rgba(16, 48, 78, .64),
      rgba(7, 28, 52, .68)
    ) !important;
  border-color: rgba(220, 240, 255, .16) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .24) !important;
  backdrop-filter: blur(2px) saturate(1.03) !important;
  -webkit-backdrop-filter: blur(2px) saturate(1.03) !important;
}

body.ooxoo-fuel-page #ooxoo-fuel-list > .ooxoo-fuel-card,
body.ooxoo-app-fuel-page #ooxoo-fuel-list > .ooxoo-fuel-card {
  background:
    linear-gradient(
      180deg,
      rgba(16, 48, 78, .64),
      rgba(7, 28, 52, .68)
    ) !important;
  border-color: rgba(220, 240, 255, .16) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .24) !important;
  backdrop-filter: blur(2px) saturate(1.03) !important;
  -webkit-backdrop-filter: blur(2px) saturate(1.03) !important;
}

body[data-scene-time="dawn"] {
  --ooxoo-scene-top: #061a31;
  --ooxoo-scene-mid: #123b5e;
  --ooxoo-scene-bottom: #08233d;
  --ooxoo-scene-deep: #041424;
  --ooxoo-scene-glow-main: rgba(95, 170, 255, .20);
  --ooxoo-scene-glow-sub: rgba(64, 210, 190, .10);
}

body[data-scene-time="day"] {
  --ooxoo-scene-top: #4d93c7;
  --ooxoo-scene-mid: #23628e;
  --ooxoo-scene-bottom: #0c3658;
  --ooxoo-scene-deep: #06223b;
  --ooxoo-scene-glow-main: rgba(255, 255, 255, .22);
  --ooxoo-scene-glow-sub: rgba(80, 180, 255, .14);
}

body[data-scene-time="sunset"] {
  --ooxoo-scene-top: #1a2a4d;
  --ooxoo-scene-mid: #804263;
  --ooxoo-scene-bottom: #102846;
  --ooxoo-scene-deep: #061525;
  --ooxoo-scene-glow-main: rgba(255, 135, 64, .24);
  --ooxoo-scene-glow-sub: rgba(110, 90, 255, .16);
}

body[data-scene-time="night"] {
  --ooxoo-scene-top: #020a16;
  --ooxoo-scene-mid: #061d36;
  --ooxoo-scene-bottom: #061b31;
  --ooxoo-scene-deep: #020b16;
  --ooxoo-scene-glow-main: rgba(55, 150, 255, .18);
  --ooxoo-scene-glow-sub: rgba(0, 220, 255, .10);
}

body[data-scene-weather="rain"] #ooxoo-fuel-scene-bg .fuel-scene-overlay {
  opacity: .30;
  background-image:
    linear-gradient(115deg, rgba(255, 255, 255, .20) 0 1px, transparent 1px 9px),
    var(--ooxoo-fuel-scene-rain);
  background-size: 18px 32px, cover;
  animation: ooxooFuelSceneRain 1.2s linear infinite;
}

@keyframes ooxooFuelSceneRain {
  from { transform: translate3d(0, -32px, 0); }
  to { transform: translate3d(-18px, 32px, 0); }
}

body[data-scene-weather="snow"] #ooxoo-fuel-scene-bg .fuel-scene-overlay {
  opacity: .36;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .88) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255, 255, 255, .62) 0 1px, transparent 2px),
    var(--ooxoo-fuel-scene-snow);
  background-size: 38px 38px, 64px 64px, cover;
  animation: ooxooFuelSceneSnow 8s linear infinite;
}

@keyframes ooxooFuelSceneSnow {
  from { transform: translateY(-40px); }
  to { transform: translateY(40px); }
}

body[data-scene-weather="fog"] #ooxoo-fuel-scene-bg .fuel-scene-overlay {
  opacity: .34;
  background-image: var(--ooxoo-fuel-scene-fog);
  background-size: cover;
  background-position: center;
}

body[data-scene-weather="cloudy"] #ooxoo-fuel-scene-bg .fuel-scene-image {
  filter: saturate(.86) contrast(.94) brightness(.82);
}

body[data-scene-weather="cloudy"] #ooxoo-fuel-scene-bg .fuel-scene-overlay {
  opacity: .28;
  background-image: var(--ooxoo-fuel-scene-cloudy);
  background-size: cover;
  background-position: center;
}

body[data-scene-weather="clear"] #ooxoo-fuel-scene-bg .fuel-scene-image {
  filter: saturate(1.08) contrast(1.04) brightness(.88);
}

#ooxoo-fuel-scene-bg .fuel-scene-person {
  position: absolute;
  left: -120px;
  top: 38vh;
  width: 84px;
  height: 168px;
  background-image: var(--ooxoo-fuel-scene-person);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  opacity: .54;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .36));
  animation: ooxooFuelPersonWalk 42s linear infinite;
}

@keyframes ooxooFuelPersonWalk {
  0% { transform: translateX(-120px) translateY(0) scale(.92); opacity: 0; }
  8% { opacity: .48; }
  48% { transform: translateX(48vw) translateY(-3px) scale(1); opacity: .58; }
  88% { opacity: .48; }
  100% { transform: translateX(calc(100vw + 160px)) translateY(0) scale(.96); opacity: 0; }
}

body[data-scene-weather="rain"] #ooxoo-fuel-scene-bg .fuel-scene-person {
  background-image: var(--ooxoo-fuel-scene-person-umbrella);
}

#ooxoo-fuel-scene-bg .fuel-scene-car-light {
  position: absolute;
  left: -260px;
  top: 44vh;
  width: 280px;
  height: 90px;
  background-image: var(--ooxoo-fuel-scene-car-light);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .24;
  filter: drop-shadow(0 0 18px rgba(120, 190, 255, .24));
  animation: ooxooFuelCarLight 30s linear infinite;
}

@keyframes ooxooFuelCarLight {
  0%, 18% { transform: translateX(-260px); opacity: 0; }
  28% { opacity: .28; }
  56% { transform: translateX(calc(100vw + 120px)); opacity: .24; }
  70%, 100% { opacity: 0; }
}

#ooxoo-fuel-scene-bg .fuel-scene-sign-light {
  position: absolute;
  right: 8vw;
  top: 12vh;
  width: 180px;
  height: 220px;
  background-image: var(--ooxoo-fuel-scene-sign-light);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .18;
  animation: ooxooFuelSignGlow 4.5s ease-in-out infinite alternate;
}

@keyframes ooxooFuelSignGlow {
  from { opacity: .12; filter: brightness(.9); }
  to { opacity: .26; filter: brightness(1.18); }
}

#ooxoo-fuel-scene-bg .fuel-scene-particles {
  position: absolute;
  inset: 0;
  background-image: var(--ooxoo-fuel-scene-particles);
  background-size: cover;
  background-position: center top;
  opacity: .08;
}

body[data-scene-time="day"] #ooxoo-fuel-scene-bg .fuel-scene-person,
body[data-scene-time="day"] #ooxoo-fuel-scene-bg .fuel-scene-car-light,
body[data-scene-time="day"] #ooxoo-fuel-scene-bg .fuel-scene-sign-light {
  opacity: .16;
}

@media (max-width: 640px) {
  #ooxoo-fuel-scene-bg .fuel-scene-image {
    height: 78vh;
    opacity: .58;
  }

  #ooxoo-fuel-scene-bg .fuel-scene-gradient {
    top: 38vh;
  }

  #ooxoo-fuel-scene-bg .fuel-scene-person {
    width: 58px;
    height: 116px;
    top: 34vh;
    opacity: .34;
  }

  #ooxoo-fuel-scene-bg .fuel-scene-car-light {
    width: 190px;
    height: 70px;
    top: 42vh;
    opacity: .18;
  }

  #ooxoo-fuel-scene-bg .fuel-scene-sign-light {
    width: 120px;
    height: 150px;
    right: 2vw;
    top: 10vh;
    opacity: .14;
  }
}

@media (prefers-reduced-motion: reduce) {
  #ooxoo-fuel-scene-bg .fuel-scene-overlay,
  #ooxoo-fuel-scene-bg .fuel-scene-person,
  #ooxoo-fuel-scene-bg .fuel-scene-car-light,
  #ooxoo-fuel-scene-bg .fuel-scene-sign-light {
    animation: none !important;
  }
}