/* OOXOO Cafe Scene: time-based photo background only. */
body.ooxoo-cafe-page {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  --service-card: rgba(8, 22, 38, .88);
  --service-card-soft: rgba(5, 17, 32, .84);
  --service-card-border: rgba(255, 224, 190, .18);
  --service-panel-dark: rgba(4, 18, 37, .82);
  background:
    linear-gradient(
      180deg,
      var(--ooxoo-cafe-scene-top, #10263a) 0%,
      var(--ooxoo-cafe-scene-mid, #17324a) 42%,
      var(--ooxoo-cafe-scene-bottom, #07111d) 100%
    ) !important;
}

#ooxoo-cafe-scene-bg {
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: var(--ooxoo-cafe-scene-document-height, 100vh) !important;
  min-height: 100vh !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  background: #07111d !important;
}

body.ooxoo-cafe-page .ooxoo-page,
body.ooxoo-cafe-page .ooxoo-page-shell,
body.ooxoo-cafe-page .ooxoo-cafe-wrap,
body.ooxoo-cafe-page .ooxoo-fuel-wrap,
body.ooxoo-cafe-page .oox-archive-page,
body.ooxoo-cafe-page #ooxoo-footer,
body.ooxoo-cafe-page footer,
body.ooxoo-cafe-page .ooxoo-footer {
  position: relative !important;
  z-index: 2 !important;
}

#ooxoo-cafe-scene-bg .cafe-scene-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: min(980px, 100vh);
  background-image: var(--ooxoo-cafe-scene-image);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: .94;
}

body.ooxoo-cafe-page[data-ooxoo-cafe-scene-mode="app"] #ooxoo-cafe-scene-bg .cafe-scene-image,
body.ooxoo-cafe-page[data-ooxoo-scene-mode="app"] #ooxoo-cafe-scene-bg .cafe-scene-image {
  height: min(940px, 78vh);
  background-image: var(--ooxoo-cafe-scene-image-mobile, var(--ooxoo-cafe-scene-image));
  background-position: center top;
}

#ooxoo-cafe-scene-bg .cafe-scene-overlay,
#ooxoo-cafe-scene-bg .cafe-scene-gradient,
#ooxoo-cafe-scene-bg .cafe-scene-dim {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

#ooxoo-cafe-scene-bg .cafe-scene-overlay {
  top: 0;
  bottom: 0;
  z-index: 1;
  opacity: .08;
  background-image: var(--ooxoo-cafe-scene-warm-light);
  background-size: cover;
  background-position: center top;
}

#ooxoo-cafe-scene-bg .cafe-scene-gradient {
  top: 48vh;
  height: calc(var(--ooxoo-cafe-scene-document-height, 100vh) - 42vh);
  z-index: 2;
  background:
    linear-gradient(
      180deg,
      rgba(7, 17, 29, 0) 0%,
      rgba(7, 17, 29, .45) 18%,
      var(--ooxoo-cafe-scene-bottom-strong, rgba(7, 17, 29, .88)) 42%,
      var(--ooxoo-cafe-scene-bottom, #07111d) 100%
    );
}

#ooxoo-cafe-scene-bg .cafe-scene-dim {
  top: 0;
  bottom: 0;
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(4, 10, 18, .10) 0%, rgba(4, 10, 18, .32) 62%, rgba(4, 10, 18, .66) 100%),
    radial-gradient(circle at 50% 8%, var(--ooxoo-cafe-scene-glow, rgba(255, 198, 128, .12)), transparent 44%);
}

body.ooxoo-cafe-page #ooxoo-location-topbar,
body.ooxoo-cafe-page .ooxoo-location-topbar,
body.ooxoo-cafe-page .ooxoo-beta-notice,
body.ooxoo-cafe-page .ooxoo-internal-strip,
body.ooxoo-cafe-page .ooxoo-cafe-controls {
  background: rgba(10, 25, 42, .88) !important;
  border-color: rgba(255, 224, 190, .20) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .30) !important;
  backdrop-filter: blur(8px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.04) !important;
}

body.ooxoo-cafe-page .ooxoo-cafe-card,
body.ooxoo-cafe-page .oox-card,
body.ooxoo-cafe-page #ooxoo-cafe-list > * {
  background: rgba(8, 22, 38, .88) !important;
  border-color: rgba(255, 224, 190, .17) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .30) !important;
  backdrop-filter: blur(7px) saturate(1.03) !important;
  -webkit-backdrop-filter: blur(7px) saturate(1.03) !important;
}

body[data-cafe-scene-time="dawn"] {
  --ooxoo-cafe-scene-top: #26334b;
  --ooxoo-cafe-scene-mid: #60423f;
  --ooxoo-cafe-scene-bottom: #08111d;
  --ooxoo-cafe-scene-bottom-strong: rgba(8, 17, 29, .88);
  --ooxoo-cafe-scene-glow: rgba(255, 190, 136, .18);
}

body[data-cafe-scene-time="day"] {
  --ooxoo-cafe-scene-top: #5183a8;
  --ooxoo-cafe-scene-mid: #24506a;
  --ooxoo-cafe-scene-bottom: #071321;
  --ooxoo-cafe-scene-bottom-strong: rgba(7, 19, 33, .86);
  --ooxoo-cafe-scene-glow: rgba(255, 255, 235, .16);
}

body[data-cafe-scene-time="sunset"] {
  --ooxoo-cafe-scene-top: #392033;
  --ooxoo-cafe-scene-mid: #794038;
  --ooxoo-cafe-scene-bottom: #080f1b;
  --ooxoo-cafe-scene-bottom-strong: rgba(8, 15, 27, .88);
  --ooxoo-cafe-scene-glow: rgba(255, 132, 74, .22);
}

body[data-cafe-scene-time="night"] {
  --ooxoo-cafe-scene-top: #070b16;
  --ooxoo-cafe-scene-mid: #15182b;
  --ooxoo-cafe-scene-bottom: #050911;
  --ooxoo-cafe-scene-bottom-strong: rgba(5, 9, 17, .90);
  --ooxoo-cafe-scene-glow: rgba(255, 118, 82, .16);
}

body[data-cafe-scene-weather="rain"] #ooxoo-cafe-scene-bg .cafe-scene-overlay {
  opacity: .22;
  background-image: var(--ooxoo-cafe-scene-rain);
}

body[data-cafe-scene-weather="snow"] #ooxoo-cafe-scene-bg .cafe-scene-overlay {
  opacity: .24;
  background-image: var(--ooxoo-cafe-scene-snow);
}

body[data-cafe-scene-weather="fog"] #ooxoo-cafe-scene-bg .cafe-scene-overlay {
  opacity: .25;
  background-image: var(--ooxoo-cafe-scene-fog);
}

body[data-cafe-scene-weather="cloudy"] #ooxoo-cafe-scene-bg .cafe-scene-overlay {
  opacity: .20;
  background-image: var(--ooxoo-cafe-scene-cloudy);
}

@media (max-width: 640px) {
  #ooxoo-cafe-scene-bg .cafe-scene-image {
    height: min(980px, 76vh);
    opacity: .78;
  }

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

  body.ooxoo-cafe-page #ooxoo-location-topbar,
  body.ooxoo-cafe-page .ooxoo-location-topbar,
  body.ooxoo-cafe-page .ooxoo-beta-notice,
  body.ooxoo-cafe-page .ooxoo-internal-strip,
  body.ooxoo-cafe-page .ooxoo-cafe-controls,
  body.ooxoo-cafe-page .ooxoo-cafe-card,
  body.ooxoo-cafe-page .oox-card,
  body.ooxoo-cafe-page #ooxoo-cafe-list > * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}