/* OneStack v357 — orbital technology glow around the App mockup panel.
 * Scope: homepage App visual only. Replaces the horizontal light sweep with
 * a soft rotating light band orbiting around the phone composition.
 */
.os-home-v9 .os-v339-app__visual {
  isolation: isolate;
  overflow: hidden;
}

/* Main orbital ring: a soft bright segment rotating around the image. */
.os-home-v9 .os-v339-app__visual::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 9%;
  right: 9%;
  top: 21%;
  bottom: 18%;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 0deg,
    rgba(255,255,255,0) 0deg 86deg,
    rgba(255,255,255,.05) 96deg,
    rgba(255,255,255,.32) 113deg,
    rgba(255,245,208,.36) 122deg,
    rgba(255,255,255,.12) 136deg,
    rgba(255,255,255,0) 154deg 275deg,
    rgba(255,255,255,.04) 286deg,
    rgba(255,255,255,.20) 298deg,
    rgba(255,244,210,.26) 306deg,
    rgba(255,255,255,.07) 318deg,
    rgba(255,255,255,0) 334deg 360deg);
  -webkit-mask: radial-gradient(closest-side,
    transparent calc(100% - 15px),
    #000 calc(100% - 10px),
    #000 calc(100% - 5px),
    transparent 100%);
          mask: radial-gradient(closest-side,
    transparent calc(100% - 15px),
    #000 calc(100% - 10px),
    #000 calc(100% - 5px),
    transparent 100%);
  filter: blur(3px) drop-shadow(0 0 8px rgba(255,255,255,.08)) drop-shadow(0 0 14px rgba(239,176,0,.10));
  opacity: .58;
  mix-blend-mode: screen;
  transform: translate3d(0,0,0) rotate(0deg);
  animation: os-v357-app-orbit 15.5s linear infinite;
}

/* Secondary, softer inner orbit + ambient center glow. */
.os-home-v9 .os-v339-app__visual::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 18%;
  right: 18%;
  top: 29%;
  bottom: 26%;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 34% 26% at 50% 52%, rgba(255,255,255,.05), transparent 72%),
    conic-gradient(from 180deg,
      rgba(255,255,255,0) 0deg 144deg,
      rgba(255,255,255,.04) 154deg,
      rgba(255,255,255,.18) 166deg,
      rgba(255,250,230,.22) 176deg,
      rgba(255,255,255,.05) 190deg,
      rgba(255,255,255,0) 202deg 326deg,
      rgba(255,255,255,.03) 336deg,
      rgba(255,255,255,.10) 347deg,
      rgba(255,255,255,0) 360deg);
  -webkit-mask: radial-gradient(closest-side,
    transparent calc(100% - 11px),
    #000 calc(100% - 7px),
    #000 calc(100% - 3px),
    transparent 100%);
          mask: radial-gradient(closest-side,
    transparent calc(100% - 11px),
    #000 calc(100% - 7px),
    #000 calc(100% - 3px),
    transparent 100%);
  filter: blur(3.4px);
  opacity: .42;
  mix-blend-mode: screen;
  animation: os-v357-app-orbit-reverse 11.5s linear infinite, os-v357-app-pulse 6.2s ease-in-out infinite;
}

.os-home-v9 .os-v339-app__visual > img {
  position: relative;
  z-index: 1;
  transform: translate3d(0,0,0);
  transform-origin: center center;
  transition: transform 700ms cubic-bezier(.22,1,.36,1),
              filter 700ms ease;
}
.os-home-v9 .os-v339-app__visual-head,
.os-home-v9 .os-v339-app__visual-bottom,
.os-home-v9 .os-v339-app__visual > .os-v339-app__library-missing {
  position: relative;
  z-index: 4;
}

@keyframes os-v357-app-orbit {
  from { transform: translate3d(0,0,0) rotate(0deg); }
  to   { transform: translate3d(0,0,0) rotate(360deg); }
}
@keyframes os-v357-app-orbit-reverse {
  from { transform: translate3d(0,0,0) rotate(360deg); }
  to   { transform: translate3d(0,0,0) rotate(0deg); }
}
@keyframes os-v357-app-pulse {
  0%, 100% { opacity: .34; }
  50%      { opacity: .48; }
}
@keyframes os-v356-app-photo-float {
  0%, 100% { transform: translate3d(0,0,0); }
  50%      { transform: translate3d(0,-7px,0); }
}

/* Floating starts only with a real mouse/trackpad hover, not taps on phones. */
@media (hover: hover) and (pointer: fine) {
  .os-home-v9 .os-v339-app__visual:hover > img {
    animation: os-v356-app-photo-float 3.1s ease-in-out infinite;
    filter: drop-shadow(0 10px 14px rgba(0,7,48,.18));
  }
  .os-home-v9 .os-v339-app__visual:hover::before {
    opacity: .72;
    filter: blur(2.8px) drop-shadow(0 0 10px rgba(255,255,255,.12)) drop-shadow(0 0 18px rgba(239,176,0,.14));
  }
}
@media (prefers-reduced-motion: reduce) {
  .os-home-v9 .os-v339-app__visual::before,
  .os-home-v9 .os-v339-app__visual::after,
  .os-home-v9 .os-v339-app__visual:hover > img {
    animation: none !important;
  }
  .os-home-v9 .os-v339-app__visual > img {
    transform: none !important;
    transition: none !important;
  }
}