/* Hero 3D phone orbit */

@property --orbit-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* Stage and devices */
.hero-visual {
  position: relative;
  min-height: 660px;
  perspective: 920px;
  perspective-origin: 50% 48%;
  transform-style: preserve-3d;
  --orbit-a: translate3d(-92px, 106px, 170px) rotateY(-10deg) rotateZ(-3deg) scale(1.04);
  --orbit-b: translate3d(172px, 18px, 55px) rotateY(-28deg) rotateZ(8deg) scale(.95);
  --orbit-c: translate3d(36px, -72px, -190px) rotateY(18deg) rotateZ(5deg) scale(.78);
  --orbit-d: translate3d(-230px, 22px, 20px) rotateY(28deg) rotateZ(-8deg) scale(.88);
}

.orbit {
  position: absolute;
  border: 1px solid rgba(40, 216, 234, .5);
  border-radius: 50%;
  filter: drop-shadow(0 0 22px rgba(25, 139, 255, .52));
  opacity: .75;
  pointer-events: none;
}

.orbit-one {
  width: 590px;
  height: 340px;
  top: 92px;
  left: 18px;
  transform: translateZ(-360px) rotate(-18deg);
}

.orbit-two {
  width: 500px;
  height: 258px;
  top: 184px;
  left: 128px;
  transform: translateZ(-380px) rotate(24deg);
  border-style: dashed;
  opacity: .32;
}

.phone {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 212px;
  height: 461px;
  margin: 0;
  padding: 8px;
  border-radius: 38px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04) 28%, rgba(18, 32, 55, .5) 68%, rgba(255, 255, 255, .13)),
    #050a12;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, .56),
    0 0 0 1px rgba(255, 255, 255, .12),
    inset 0 1px 0 rgba(255, 255, 255, .18);
  overflow: hidden;
  transform: translate(-50%, -50%) var(--orbit-a);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
}

.phone::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  width: 74px;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #03060c;
  z-index: 2;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08);
}

.phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 30px;
}

.phone--home {
  --orbit-delay: 0s;
}

.phone--question {
  --orbit-delay: -4s;
}

.phone--video {
  --orbit-delay: -8s;
}

.phone--help {
  --orbit-delay: -12s;
}

/* Reveal integration */
.hero-visual[data-animate],
.hero-visual[data-animate].is-visible {
  opacity: 1;
  transform: none;
}

.hero-visual[data-animate] {
  transition: none;
}

/* Fallback keyframed orbit */
@media (prefers-reduced-motion: no-preference) {

  .phone--home,
  .phone--question,
  .phone--video,
  .phone--help {
    animation: phoneOrbit 16s linear infinite;
    animation-delay: var(--orbit-delay);
  }

  .orbit-one {
    animation: orbitPulse 6s ease-in-out infinite alternate;
  }

  .orbit-two {
    animation: orbitPulse 7.5s ease-in-out infinite alternate-reverse;
  }
}

@keyframes phoneOrbit {

  0%,
  100% {
    transform: translate(-50%, -50%) var(--orbit-a);
  }

  25% {
    transform: translate(-50%, -50%) var(--orbit-b);
  }

  50% {
    transform: translate(-50%, -50%) var(--orbit-c);
  }

  75% {
    transform: translate(-50%, -50%) var(--orbit-d);
  }
}

@keyframes phoneOrbitAngle {
  from {
    --orbit-angle: 0deg;
  }

  to {
    --orbit-angle: 360deg;
  }
}

/* Trig-based orbit for browsers that support CSS sin/cos */
@supports (width: calc(cos(1deg) * 1px)) {
  .hero-visual {
    --orbit-radius-x: 190px;
    --orbit-radius-y: 86px;
    --orbit-depth: 190px;
    --orbit-tilt: -26deg;
    --orbit-roll: 8deg;
  }

  .phone {
    --orbit-phase: 0deg;
    --phone-angle: calc(var(--orbit-angle) + var(--orbit-phase));
    --phone-depth-scale: calc(.91 + sin(var(--phone-angle)) * .13);
    transform:
      translate(-50%, -50%) translate3d(calc(cos(var(--phone-angle)) * var(--orbit-radius-x)),
        calc(sin(var(--phone-angle)) * var(--orbit-radius-y)),
        calc(sin(var(--phone-angle)) * var(--orbit-depth))) rotateY(calc(cos(var(--phone-angle)) * var(--orbit-tilt))) rotateZ(calc(cos(var(--phone-angle)) * var(--orbit-roll))) scale(var(--phone-depth-scale));
  }

  .phone--home {
    --orbit-phase: 110deg;
  }

  .phone--question {
    --orbit-phase: 20deg;
  }

  .phone--video {
    --orbit-phase: 290deg;
  }

  .phone--help {
    --orbit-phase: 200deg;
  }

  @media (prefers-reduced-motion: no-preference) {

    .phone--home,
    .phone--question,
    .phone--video,
    .phone--help {
      animation: phoneOrbitAngle 16s linear infinite;
    }
  }

  @media (max-width: 600px) {
    .hero-visual {
      --orbit-radius-x: clamp(112px, calc(25vw + 22px), 172px);
      --orbit-radius-y: clamp(64px, calc(14.167vw + 13px), 98px);
      --orbit-depth: clamp(150px, calc(33.333vw + 30px), 230px);
      --orbit-tilt: -24deg;
      --orbit-roll: 8deg;
    }
  }
}

@keyframes orbitPulse {
  from {
    opacity: .32;
    filter: drop-shadow(0 0 10px rgba(25, 139, 255, .32));
  }

  to {
    opacity: .85;
    filter: drop-shadow(0 0 28px rgba(25, 139, 255, .62));
  }
}

/* Shared responsive sizing */
@media (max-width: 1120px) {
  .hero-visual {
    width: 100%;
    max-width: 660px;
    min-height: 570px;
    margin-inline: auto;
  }
}

@media (max-width: 860px) {
  .hero-visual {
    width: min(100%, 620px);
    max-width: 620px;
    min-height: 520px;
    margin: 6px auto -32px;
    overflow: visible;
    transform: none;
  }
}

@media (min-width: 601px) and (max-width: 860px) {
  .hero-visual {
    min-height: 700px;
    margin: 6px auto 36px;
  }
}

@media (max-width: 600px) {
  .hero-visual {
    --mobile-stage-w: clamp(414px, calc(94.167vw + 75px), 640px);
    --mobile-stage-h: clamp(500px, calc(66.667vw + 260px), 660px);
    --mobile-phone-w: clamp(130px, calc(29.167vw + 25px), 200px);
    --mobile-phone-h: clamp(283px, calc(63.333vw + 55px), 435px);
    width: min(100%, var(--mobile-stage-w));
    max-width: var(--mobile-stage-w);
    min-height: var(--mobile-stage-h);
    margin: -10% auto 0;
    perspective: 720px;
    transform: none;
    --orbit-a: translate3d(-44px, 78px, 136px) rotateY(-10deg) rotateZ(-5deg) scale(1.06);
    --orbit-b: translate3d(98px, 12px, 48px) rotateY(-26deg) rotateZ(7deg) scale(.96);
    --orbit-c: translate3d(8px, -58px, -138px) rotateY(18deg) rotateZ(5deg) scale(.80);
    --orbit-d: translate3d(-118px, 12px, 22px) rotateY(26deg) rotateZ(-8deg) scale(.90);
  }

  .orbit {
    left: 50%;
    right: auto;
  }

  .orbit-one {
    width: min(clamp(424px, calc(98.333vw + 70px), 660px), calc(100vw - 8px));
    height: clamp(238px, calc(52.083vw + 50px), 363px);
    top: 128px;
    transform: translateX(-50%) translateZ(-280px) rotate(-18deg);
    opacity: .46;
  }

  .orbit-two {
    width: min(clamp(364px, calc(85vw + 58px), 568px), calc(100vw - 28px));
    height: clamp(194px, calc(43.75vw + 37px), 300px);
    top: 206px;
    transform: translateX(-50%) translateZ(-300px) rotate(24deg);
    opacity: .22;
  }

  .phone {
    top: 46%;
    width: var(--mobile-phone-w);
    height: var(--mobile-phone-h);
    padding: 6px;
    border-radius: 30px;
  }

  .phone::before {
    top: 14px;
    width: 52px;
    height: 13px;
  }

  .phone img {
    border-radius: 24px;
  }
}