/* KIPS Scanner premium eye-only camera landing.
   Goal: no extra text/progress on the camera landing view, only the main eye logo with high-end 3D CSS motion. */

body[data-view="home"] .eye-only-brand > p,
body[data-view="home"] .showcase-loader {
  display: none !important;
}

body[data-view="home"] .eye-home-panel {
  min-height: 100svh;
  padding: 0 !important;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 238, 255, .2), transparent 28%),
    radial-gradient(circle at 50% 70%, rgba(0, 150, 180, .16), transparent 38%),
    linear-gradient(180deg, rgba(1, 8, 15, .98), rgba(0, 2, 7, 1));
}

body[data-view="home"] .eye-only-brand {
  position: relative;
  min-height: 100svh !important;
  width: min(100vw, 920px);
  display: grid;
  place-items: center;
  align-content: center;
  perspective: 1400px;
  isolation: isolate;
}

body[data-view="home"] .eye-only-brand::before,
body[data-view="home"] .eye-only-brand::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

body[data-view="home"] .eye-only-brand::before {
  width: min(760px, 124vw);
  height: min(760px, 124vw);
  background:
    repeating-radial-gradient(circle, rgba(0, 238, 255, .16) 0 1px, transparent 2px 58px),
    conic-gradient(from 0deg, transparent, rgba(0, 238, 255, .16), transparent, rgba(0, 110, 255, .13), transparent);
  filter: blur(.2px);
  opacity: .72;
  animation: premiumRadarSpin 32s linear infinite;
  z-index: 0;
}

body[data-view="home"] .eye-only-brand::after {
  width: min(620px, 108vw);
  height: min(620px, 108vw);
  border: 1px solid rgba(0, 238, 255, .12);
  box-shadow:
    inset 0 0 50px rgba(0, 238, 255, .08),
    0 0 80px rgba(0, 238, 255, .2),
    0 0 180px rgba(0, 96, 255, .12);
  animation: premiumBreath 1s ease-in-out infinite;
  z-index: 1;
}

body[data-view="home"] .eye-scan-button.main-logo-scan-button {
  width: min(760px, 104vw) !important;
  min-height: min(760px, 104vw) !important;
  max-height: 100svh;
  z-index: 3;
  overflow: visible;
  transform-origin: center center;
  animation: premiumStageFloat 6s ease-in-out infinite !important;
}

body[data-view="home"] .eye-scan-button.main-logo-scan-button::before {
  width: min(700px, 112vw) !important;
  height: min(700px, 112vw) !important;
  top: 50% !important;
  background:
    radial-gradient(circle, rgba(0, 238, 255, .13), transparent 58%),
    conic-gradient(from 0deg, rgba(0, 238, 255, .38), transparent 18%, rgba(255,255,255,.25) 22%, transparent 30%, rgba(0,160,255,.28), transparent 65%);
  border: 1px solid rgba(0, 238, 255, .18) !important;
  box-shadow: 0 0 80px rgba(0, 238, 255, .18), inset 0 0 60px rgba(0, 238, 255, .08) !important;
  animation: premiumPortalSpin 12s linear infinite, premiumBreath 1s ease-in-out infinite !important;
}

body[data-view="home"] .eye-scan-button.main-logo-scan-button::after {
  width: min(540px, 94vw) !important;
  height: min(540px, 94vw) !important;
  top: 50% !important;
  border: 1px dashed rgba(0, 238, 255, .32) !important;
  animation: premiumPortalSpinReverse 9s linear infinite !important;
}

body[data-view="home"] .orbit-one {
  top: 50% !important;
  width: min(780px, 126vw) !important;
  height: min(780px, 126vw) !important;
  border-color: rgba(0, 238, 255, .1) !important;
  background:
    conic-gradient(from 0deg, transparent 0 22%, rgba(0, 238, 255, .26) 23% 30%, transparent 31% 58%, rgba(0, 168, 255, .18) 59% 68%, transparent 69%),
    repeating-conic-gradient(from 0deg, rgba(0,238,255,.1) 0deg 1deg, transparent 1deg 14deg) !important;
  animation: premiumOrbitOne 22s linear infinite !important;
}

body[data-view="home"] .orbit-two {
  top: 50% !important;
  width: min(470px, 82vw) !important;
  height: min(470px, 82vw) !important;
  border-color: rgba(0, 238, 255, .24) !important;
  box-shadow: 0 0 46px rgba(0, 238, 255, .12);
  animation: premiumOrbitTwo 11s linear infinite !important;
}

body[data-view="home"] .eye-beam {
  top: 50% !important;
  left: -18vw !important;
  right: -18vw !important;
  height: 3px !important;
  opacity: .92;
  background:
    linear-gradient(90deg, transparent, rgba(0, 238, 255, .6), #efffff, rgba(0, 238, 255, .75), transparent) !important;
  box-shadow:
    0 0 24px rgba(0, 238, 255, .92),
    0 0 90px rgba(0, 238, 255, .36),
    0 0 180px rgba(0, 125, 255, .18) !important;
  animation: premiumBeamSweep 2.8s ease-in-out infinite !important;
}

body[data-view="home"] .eye-main-logo.main-logo-scan-image {
  width: min(640px, 96vw) !important;
  max-height: min(680px, 88svh) !important;
  z-index: 5;
  transform-origin: center center;
  animation: premiumLogo3D 5.5s ease-in-out infinite, premiumLogoPulse 1s ease-in-out infinite !important;
  filter:
    drop-shadow(0 0 18px rgba(0, 238, 255, .55))
    drop-shadow(0 0 70px rgba(0, 238, 255, .18))
    drop-shadow(0 38px 74px rgba(0, 0, 0, .95)) !important;
}

body[data-view="home"] .bottom-nav,
body[data-view="home"] .phone-row,
body[data-view="home"] .readme-panel {
  display: none !important;
}

@keyframes premiumRadarSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes premiumBreath {
  0%, 100% { opacity: .46; scale: .985; }
  50% { opacity: 1; scale: 1.035; }
}

@keyframes premiumStageFloat {
  0%, 100% { transform: perspective(1200px) rotateX(0deg) rotateY(-4deg) translateY(0); }
  50% { transform: perspective(1200px) rotateX(3deg) rotateY(6deg) translateY(-12px); }
}

@keyframes premiumLogo3D {
  0%, 100% { transform: perspective(1200px) rotateX(2deg) rotateY(-8deg) translateZ(0) scale(1); }
  35% { transform: perspective(1200px) rotateX(-3deg) rotateY(8deg) translateZ(46px) scale(1.025); }
  70% { transform: perspective(1200px) rotateX(1deg) rotateY(3deg) translateZ(18px) scale(.995); }
}

@keyframes premiumLogoPulse {
  0%, 100% { filter: drop-shadow(0 0 16px rgba(0,238,255,.48)) drop-shadow(0 36px 70px rgba(0,0,0,.9)); }
  50% { filter: drop-shadow(0 0 46px rgba(0,238,255,1)) drop-shadow(0 46px 86px rgba(0,0,0,.94)); }
}

@keyframes premiumPortalSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes premiumPortalSpinReverse {
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes premiumOrbitOne {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes premiumOrbitTwo {
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes premiumBeamSweep {
  0%, 100% { opacity: .32; transform: translateY(-50%) scaleX(.78); }
  50% { opacity: 1; transform: translateY(-50%) scaleX(1.08); }
}

@media (min-width: 900px) {
  body[data-view="home"] .eye-main-logo.main-logo-scan-image {
    width: min(720px, 58vw) !important;
    max-height: 82vh !important;
  }
  body[data-view="home"] .eye-scan-button.main-logo-scan-button {
    width: min(860px, 70vw) !important;
    min-height: min(760px, 82vh) !important;
  }
}

@media (max-width: 420px) {
  body[data-view="home"] .eye-main-logo.main-logo-scan-image {
    width: min(420px, 102vw) !important;
    max-height: 78svh !important;
  }
  body[data-view="home"] .eye-scan-button.main-logo-scan-button {
    width: 108vw !important;
    min-height: 88svh !important;
  }
  body[data-view="home"] .eye-only-brand::before {
    width: 132vw;
    height: 132vw;
  }
}