html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000000;
}

@font-face {
  font-family: 'FuturaLTProBook';
  src: url(/studio/assets/FuturaLTProBook.otf) format('opentype');
  font-weight: normal;
  font-style: normal;
}

#canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 1;
}
#capture-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 0;
}

/* 980px design canvas (same width as setRenderSize). CSS fallback uses 100vw
   so the splash is already scaled before JS runs; applyHtmlUiLayout then
   pins it to innerWidth/innerHeight so it matches the Lens exactly.
   transform creates a containing block, so position:fixed children inside
   are relative to this box — their 100vw must be 100% (see below). */
#html-ui {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 980px;
  height: calc(980px * 100vh / 100vw);
  transform: scale(calc(100vw / 980));
  transform-origin: top left;
  pointer-events: none;
}

.poweredbysnap-logo {
  width: auto; /* Set to auto to avoid stretching */
  position: absolute; /* Position relative to the viewport */
  bottom: -40px; /* Adjust to desired distance from the bottom */
  left: 40px; /* Adjust to desired distance from the left */
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Align content within the element to the left */
  z-index: 900;
}

.poweredbysnap-logo > img {
  width: 180px;
}

#controls {
  position: absolute;
  bottom: 10%;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 999;
}

#outline {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  height: var(--button-size, 200px); /* Default for mobile */
  width: var(--button-size, 200px);
  border: none;
  z-index: 900;
  transition: background-color 0.2s ease;
}

#record-button {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  height: var(--button-size, 200px); /* Default for mobile */
  width: var(--button-size, 200px);
  background-image: url(/studio/assets/RecordButton.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  border-radius: 50%;
  border: none;
  z-index: 1000;
  transition: background-color 0.2s ease;
}

#record-button.pressed {
  background-color: green; /* Change to green when pressed */
  content: "Recording..."; /* Optionally add text */
}

#action-buttons {
  position: absolute;
  bottom: 9%; /* Adjust the distance from the bottom of the screen */
  left: 50%; /* Center horizontally */
  transform: translate(-50%); /* Offset by half the width and height */
  display: flex; /* Enables flex layout */
  justify-content: center; /* Aligns buttons horizontally */
  align-items: center; /* Aligns buttons vertically */
  z-index: 1000; /* Ensure visibility above other elements */
  flex-wrap: wrap; /* Allows wrapping if container width is too small */
}

#back-button-container {
  position: absolute;
  top: 2%;
  left: 3%;
  z-index: 1000;
}

#back-button {
  transform: none;
  background-color: transparent;
  height: 100px;
  width: 100px;
  color: transparent;
  border: none;
  cursor: pointer;
  user-select: none;
  outline: none;
  padding: 0%;
  transition: transform 0.15s ease-in-out;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
#back-button img {
  /* Add this if your button uses an image */
  max-width: 100%;
  max-height: 100%;
  height: auto;
}

#back-button:active {
  transform: translate(2px, 2px);
}

#share-button {
  height: 125px;
  width: 125px;
  background-color: transparent;
  transform: translate(-25%, 0);
  color: transparent;
  border: none;
  cursor: pointer;
  user-select: none;
  outline: none;
  padding: 0%;
  transition: transform 0.15s ease-in-out;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

#share-button img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
}

#share-button:active {
  transform: translate(calc(-25% + 2px), 2px);
}

#download-button {
  height: 125px;
  width: 125px;
  background-color: transparent;
  transform: translate(25%, 0);
  color: transparent;
  border: none;
  cursor: pointer;
  user-select: none;
  outline: none;
  padding: 0%;
  transition: transform 0.15s ease-in-out;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

#download-button img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
}

#download-button:active {
  transform: translate(calc(25% + 2px), 2px);
}

#switch-cam {
  position: absolute;
  top: 3%;
  right: 5%;
  z-index: 950;
}

#switch-button {
  height: 70px;
  width: 70px;
  background-image: url(/studio/assets/SwitchButton.png); /* Green background */
  background-size: contain; /* Ensure the image covers the button */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Preent tiling */
  background-color: transparent;
  border: none;
  user-select: none; /* Disable text selection */
  outline: none;
  transition: transform 0.2s ease; /* Smooth hover animation */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

#switch-button:active {
  transform: translate(5%, 5%); /* Only scale without affecting translation */
}

#rotate-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  z-index: 1000000;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 18px;
  color: #333;
}

@media screen and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  #rotate-overlay {
    display: flex;
  }
}

#splash-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  z-index: 10000;
  opacity: 1;
  transition: opacity 0.3s ease;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#splash-overlay.hidden {
  opacity: 0;
}

#splash-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

#splash-status {
  position: relative;
  z-index: 1;
  color: #ffffff;
  font-family: 'FuturaLTProBook', sans-serif;
  font-size: 62px;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  margin: 0;
  padding: 0 20px;
  white-space: pre-line;
}

#loading {
  position: absolute;
  top: 30%;
  left: 40%;
  z-index: 900;
  display: none; /* Hidden by default */
}

#bottom-footer {
  position: fixed;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 53px;
  background-color: #000000;
  border: none;
  z-index: 20000;
  display: flex;
  align-items: stretch;
  box-sizing: content-box;
  /* #html-ui (the ancestor) sets pointer-events: none so it doesn't steal
     lens gestures off the canvas; that value inherits, so without this
     override the footer links are unclickable — same fix the landing
     page's footer never needed since it isn't nested inside html-ui. */
  pointer-events: auto;
}

#bottom-footer a,
#bottom-footer span {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c0c0c0;
  font-family: 'FuturaLTProBook', sans-serif;
  font-size: 23px;
  text-decoration: none;
  cursor: pointer;
}

#loading-icon {
  height: 200px;
  width: 200px;
  animation: spin 2s linear infinite; /* Apply the spin animation */
}

/* Keyframes for the rotation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Desktop-specific styles */
.desktop #outline,
.desktop #record-button {
  height: 70px;
  width: 70px;
}

.desktop #share-button {
  height: 70px;
  width: 70px;
}

.desktop #download-button {
  height: 70px;
  width: 70px;
}

.desktop #back-button {
  height: 50px;
  width: 50px;
}

/* Hide switch button on desktop */
.desktop #switch-cam {
  display: none;
}

/* Desktop QR splash — shown instead of the Lens when a desktop browser hits
   the try-on with no ?allowDesktop=true. Matches Figma "Desktop - 20"
   (node 1421:10701). */
#desktop-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  overflow: hidden;
  background: #ffffff;
}

/*
 * Ambient living background — ported from the main landing's AmbientBackground
 * (src/components/atoms/AmbientBackground, src/index.css `.app-ambient*`).
 * Same class names on purpose so the two stay easy to diff/keep in sync; this
 * is a separate vanilla-JS/webpack bundle so it can't import the React
 * component directly. A fixed light field: soft tone zones drift/breathe in a
 * liquid loop, and a white flare fades in and out on its own beat. Transform/
 * opacity only; frozen by the reduced-motion rule below.
 */
.app-ambient {
  position: absolute;
  inset: 0;
  z-index: -10;
  overflow: hidden;
  pointer-events: none;
}

.app-ambient__field {
  position: absolute;
  inset: -12%;
  filter: blur(70px);
}

.app-ambient__zone {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.app-ambient__zone--a {
  top: -8%;
  left: -6%;
  width: 90vmin;
  height: 90vmin;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 66%);
  animation: liquid-cw 46s ease-in-out infinite;
}

.app-ambient__zone--b {
  top: -4%;
  right: -8%;
  width: 82vmin;
  height: 82vmin;
  background: radial-gradient(circle at 50% 50%, rgba(164, 164, 166, 0.78), rgba(164, 164, 166, 0) 70%);
  animation: liquid-ccw 54s ease-in-out infinite;
  animation-delay: -12s;
}

.app-ambient__zone--c {
  top: 22%;
  left: 26%;
  width: 78vmin;
  height: 78vmin;
  background: radial-gradient(circle at 50% 50%, rgba(191, 191, 193, 0.7), rgba(191, 191, 193, 0) 70%);
  animation: liquid-swirl 62s ease-in-out infinite;
  animation-delay: -28s;
}

.app-ambient__zone--d {
  bottom: -12%;
  right: 0%;
  width: 86vmin;
  height: 86vmin;
  background: radial-gradient(circle at 50% 50%, rgba(230, 235, 242, 0.64), rgba(230, 235, 242, 0) 66%);
  animation: liquid-cw 50s ease-in-out infinite;
  animation-delay: -20s;
}

.app-ambient__zone--e {
  bottom: -14%;
  left: -6%;
  width: 80vmin;
  height: 80vmin;
  background: radial-gradient(circle at 50% 50%, rgba(122, 122, 124, 0.85), rgba(122, 122, 124, 0) 72%);
  animation: liquid-ccw 66s ease-in-out infinite;
  animation-delay: -40s;
}

.app-ambient__zone--f {
  top: 34%;
  right: 6%;
  width: 64vmin;
  height: 64vmin;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 66%);
  animation: liquid-swirl 44s ease-in-out infinite;
  animation-delay: -8s;
}

.app-ambient__zone--g {
  bottom: 4%;
  left: 30%;
  width: 72vmin;
  height: 72vmin;
  background: radial-gradient(circle at 50% 50%, rgba(151, 151, 153, 0.76), rgba(151, 151, 153, 0) 70%);
  animation: liquid-cw 58s ease-in-out infinite;
  animation-delay: -34s;
}

.app-ambient__flare {
  position: absolute;
}

.app-ambient__flare-core {
  display: block;
  opacity: 0;
  will-change: transform, opacity;
  background: conic-gradient(
    from 0deg at 50% 50%,
    rgba(255, 255, 255, 0) 132deg,
    rgba(255, 255, 255, 0.7) 162deg,
    rgba(255, 255, 255, 1) 180deg,
    rgba(255, 255, 255, 0.7) 198deg,
    rgba(255, 255, 255, 0) 228deg
  );
  -webkit-mask: radial-gradient(closest-side, transparent 60%, #000 70%, #000 76%, transparent 88%);
  mask: radial-gradient(closest-side, transparent 60%, #000 70%, #000 76%, transparent 88%);
  mix-blend-mode: screen;
  animation-name: ambient-flare;
  animation-timing-function: linear;
}

@keyframes liquid-cw {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  25% {
    transform: translate3d(9%, 7%, 0) scale(1.06);
  }
  50% {
    transform: translate3d(2%, 14%, 0) scale(1);
  }
  75% {
    transform: translate3d(-8%, 7%, 0) scale(0.95);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes liquid-ccw {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  25% {
    transform: translate3d(-9%, 8%, 0) scale(0.95);
  }
  50% {
    transform: translate3d(-2%, 15%, 0) scale(1);
  }
  75% {
    transform: translate3d(8%, 7%, 0) scale(1.06);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes liquid-swirl {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  20% {
    transform: translate3d(11%, -6%, 0) scale(1.08);
  }
  40% {
    transform: translate3d(5%, 10%, 0) scale(0.97);
  }
  60% {
    transform: translate3d(-10%, 6%, 0) scale(1.05);
  }
  80% {
    transform: translate3d(-6%, -8%, 0) scale(0.96);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes ambient-flare {
  0% {
    opacity: 0;
    transform: rotate(calc(var(--sweep) * -1)) scale(0.92);
  }
  12% {
    opacity: 1;
  }
  82% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(var(--sweep)) scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-ambient__zone,
  .app-ambient__flare-core {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

.desktop-overlay__title {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0 24px;
  max-width: 565px;
  font-family: 'FuturaLTProBook', sans-serif;
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: #000000;
  text-align: center;
  white-space: pre-wrap;
}

/* Exact values from Figma "DGB_Selection_Button" (node 1423:11004) — the
   official card, not an approximation. */
.desktop-overlay__card {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  height: 280px;
  border-radius: 37.885px;
  border: 1.082px solid #ffffff;
  background: linear-gradient(-0.776deg, rgba(255, 255, 255, 0.132) 12.727%, rgba(255, 255, 255, 0) 105.56%);
  backdrop-filter: blur(3.937px);
  -webkit-backdrop-filter: blur(3.937px);
  box-shadow: 12.465px 16.865px 33.729px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.desktop-overlay__qr {
  display: block;
  width: 190px;
  height: 190px;
}