/* VOZAYA Flagship Desktop V2
   Web-only presentation layer.
   No wheel logic or mobile behaviour lives here.
*/

html,
body,
#root {
  background: #020812;
}

body {
  background-image:
    radial-gradient(circle at 73% 44%, rgba(228,180,81,.075), transparent 25%),
    radial-gradient(circle at 18% 34%, rgba(24,92,148,.09), transparent 30%),
    linear-gradient(135deg, #020812 0%, #030b17 48%, #020812 100%);
  background-attachment: fixed;
}

/* HERO — controlled cinematic arrival */
#vozaya-desktop-hero {
  opacity: 0;
  animation: vozayaHeroArrival 780ms cubic-bezier(.16,1,.3,1) 80ms forwards;
}

#vozaya-desktop-hero > * {
  opacity: 0;
  transform: translateY(14px);
  animation: vozayaHeroLine 620ms cubic-bezier(.16,1,.3,1) forwards;
}

#vozaya-desktop-hero > *:nth-child(1) { animation-delay: 180ms; }
#vozaya-desktop-hero > *:nth-child(2) { animation-delay: 260ms; }
#vozaya-desktop-hero > *:nth-child(3) { animation-delay: 360ms; }
#vozaya-desktop-hero > *:nth-child(4) { animation-delay: 480ms; }

/* ASK — premium interactive surface */
#vozaya-desktop-ask {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
}

#vozaya-desktop-ask::after {
  content: "";
  position: absolute;
  top: -80%;
  left: -30%;
  width: 28%;
  height: 260%;
  pointer-events: none;
  transform: rotate(18deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.10),
    rgba(228,180,81,.18),
    transparent
  );
  animation: vozayaAskSweep 7s ease-in-out 1.5s infinite;
}

#vozaya-desktop-ask:hover {
  transform: translateY(-3px);
  border-color: rgba(228,180,81,.72) !important;
  background: #0a192d !important;
  box-shadow:
    0 18px 55px rgba(0,0,0,.30),
    0 0 0 1px rgba(228,180,81,.08),
    0 0 34px rgba(228,180,81,.08);
}

/* WHEEL — signature object */
#vozaya-desktop-wheel {
  opacity: 0;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at center,
      rgba(228,180,81,.055) 0%,
      rgba(26,85,130,.035) 43%,
      transparent 70%
    );
  animation:
    vozayaWheelArrival 1050ms cubic-bezier(.16,1,.3,1) 260ms forwards,
    vozayaWheelBreathe 6.8s ease-in-out 1.5s infinite;
  will-change: transform, opacity;
}

/* Keep the wheel artwork itself crisp while adding atmosphere */
#vozaya-desktop-wheel svg {
  filter:
    drop-shadow(0 18px 30px rgba(0,0,0,.42))
    drop-shadow(0 0 14px rgba(228,180,81,.08));
  transition: filter 350ms ease;
}

#vozaya-desktop-wheel:hover svg {
  filter:
    drop-shadow(0 22px 38px rgba(0,0,0,.48))
    drop-shadow(0 0 20px rgba(228,180,81,.13));
}

@keyframes vozayaHeroArrival {
  from {
    opacity: 0;
    transform: translate3d(-24px, 12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes vozayaHeroLine {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes vozayaWheelArrival {
  from {
    opacity: 0;
    transform: translate3d(34px, 14px, 0) scale(.94);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes vozayaWheelBreathe {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-5px) scale(1.008);
  }
}

@keyframes vozayaAskSweep {
  0%, 70% {
    left: -35%;
    opacity: 0;
  }
  76% {
    opacity: 1;
  }
  91% {
    left: 120%;
    opacity: .7;
  }
  100% {
    left: 120%;
    opacity: 0;
  }
}

/* Respect users who request reduced motion */
@media (prefers-reduced-motion: reduce) {
  #vozaya-desktop-hero,
  #vozaya-desktop-hero > *,
  #vozaya-desktop-wheel,
  #vozaya-desktop-ask::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}