/* Centered logo and richer motion pass */
.core-object {
  opacity: .2;
  width: 165px;
  height: 165px;
  right: 50%;
  top: 50%;
  animation: cubeGhost 9s ease-in-out infinite alternate;
  filter: blur(.4px) drop-shadow(0 24px 36px rgba(14,165,233,.2));
}

@keyframes cubeGhost {
  from { transform: translate3d(50%, -50%, 120px) rotateX(18deg) rotateY(-28deg) rotateZ(8deg); }
  to { transform: translate3d(50%, -50%, 145px) rotateX(-14deg) rotateY(32deg) rotateZ(-10deg); }
}

.center-badge {
  position: absolute;
  z-index: 8;
  right: 50%;
  top: 50%;
  width: 270px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,1), rgba(240,249,255,.96) 42%, rgba(186,230,253,.88) 70%, rgba(14,165,233,.72));
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow:
    0 0 0 12px rgba(14, 165, 233, .08),
    0 0 0 26px rgba(249, 115, 22, .06),
    0 34px 80px rgba(0, 0, 0, .34),
    0 0 90px rgba(14, 165, 233, .36),
    inset 0 -18px 35px rgba(14, 165, 233, .18);
  transform: translate3d(50%, -50%, 330px) rotateZ(28deg) rotateX(-58deg);
  transform-style: preserve-3d;
  animation: badgeHero 4.8s cubic-bezier(.2,.8,.2,1) infinite alternate;
}

.center-badge::before,
.center-badge::after {
  content: '';
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  border: 2px solid rgba(125, 211, 252, .35);
  animation: badgeWave 3.8s ease-out infinite;
}

.center-badge::after {
  inset: -42px;
  border-color: rgba(249, 115, 22, .22);
  animation-delay: 1.1s;
}

.center-badge img {
  position: relative;
  z-index: 2;
  width: 74%;
  height: 74%;
  object-fit: cover;
  border-radius: 50%;
  filter: contrast(1.12) drop-shadow(0 12px 18px rgba(8, 47, 73, .16));
}

.badge-halo {
  position: absolute;
  inset: -9px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, #7dd3fc, #f97316, #14b8a6, #7dd3fc);
  filter: blur(10px);
  opacity: .58;
  animation: haloSpin 7s linear infinite;
}

@keyframes badgeHero {
  from { transform: translate3d(50%, -50%, 318px) rotateZ(28deg) rotateX(-58deg) scale(.98); }
  to { transform: translate3d(50%, -53%, 360px) rotateZ(28deg) rotateX(-58deg) scale(1.04); }
}

@keyframes badgeWave {
  0% { opacity: 0; scale: .78; }
  22% { opacity: .72; }
  100% { opacity: 0; scale: 1.28; }
}

@keyframes haloSpin {
  to { rotate: 360deg; }
}

.portal-rings span:nth-child(1) {
  animation-duration: 7s;
  border-width: 4px;
}

.portal-rings span:nth-child(2) {
  animation-duration: 9s;
  border-width: 3px;
  box-shadow: 0 0 38px rgba(249, 115, 22, .22), inset 0 0 32px rgba(14, 165, 233, .2);
}

.portal-rings span:nth-child(3) {
  animation-duration: 12s;
}

.orbit-card {
  animation: cardOrbitFloat 5.6s ease-in-out infinite alternate;
}

.orbit-one {
  right: 8%;
  top: 20%;
  transform: translateZ(285px) rotateZ(28deg) rotateX(-58deg);
}

.orbit-two {
  left: 5%;
  top: 43%;
  transform: translateZ(300px) rotateZ(28deg) rotateX(-58deg);
}

.orbit-three {
  right: 38%;
  top: 54%;
  transform: translateZ(292px) rotateZ(28deg) rotateX(-58deg);
}

.orbit-four {
  left: 4%;
  bottom: 6%;
  transform: translateZ(292px) rotateZ(28deg) rotateX(-58deg);
}

@keyframes cardOrbitFloat {
  from { translate: 0 0; box-shadow: 0 22px 54px rgba(0,0,0,.34), inset 0 0 32px rgba(14, 165, 233, .08); }
  to { translate: 0 -22px; box-shadow: 0 32px 70px rgba(0,0,0,.42), 0 0 32px rgba(14,165,233,.2), inset 0 0 38px rgba(14, 165, 233, .12); }
}

.tech-ribbon {
  height: 6px;
  transform-origin: center;
  animation: ribbonAroundLogo 4.6s ease-in-out infinite alternate;
}

.ribbon-one {
  width: 62%;
  right: 18%;
  top: 46%;
}

.ribbon-two {
  width: 48%;
  left: 17%;
  top: 56%;
}

.ribbon-three {
  width: 38%;
  right: 32%;
  bottom: 31%;
}

@keyframes ribbonAroundLogo {
  from { opacity: .24; transform: translateZ(210px) translateY(-16px) scaleX(.72); }
  to { opacity: .96; transform: translateZ(310px) translateY(16px) scaleX(1.05); }
}

@media (max-width: 920px) {
  .center-badge {
    width: 230px;
  }
}

@media (max-width: 560px) {
  .center-badge {
    width: 205px;
  }
  .orbit-one { right: 12%; top: 18%; }
  .orbit-two { left: 8%; top: 47%; }
  .orbit-three { right: 34%; top: 60%; }
  .orbit-four { left: 8%; bottom: 1%; }
}

/* Keep 3D scene below the fixed navbar without clipping the artwork */
.hero-stage {
  overflow: visible;
  margin-top: 18px;
  border-radius: 0;
  isolation: isolate;
}

.portal-scene {
  inset: 13% 0 -6%;
  pointer-events: auto;
  transform: scale(.9) rotateX(58deg) rotateZ(-28deg);
  transform-origin: center;
}

.portal-glow,
.portal-rings,
.core-object,
.tech-ribbon {
  pointer-events: none;
}

.portal-glow {
  inset: 16% 8% 4% 6%;
}

.site-nav {
  z-index: 100;
  background: rgba(3, 12, 22, .9);
}

.center-badge {
  width: 235px;
  cursor: pointer;
  transition: filter .25s ease;
}

.center-badge:hover {
  filter: brightness(1.08) saturate(1.08);
  animation-play-state: paused;
}

.center-badge:hover .badge-halo {
  opacity: .82;
  filter: blur(13px);
}

.orbit-one {
  right: 2%;
  top: 18%;
}

.orbit-two {
  left: 1%;
  top: 39%;
}

.orbit-three {
  right: 38%;
  top: 54%;
  bottom: auto;
}

.orbit-card {
  z-index: 14;
  cursor: pointer;
  pointer-events: auto;
  overflow: hidden;
  transition: border-color .22s ease, background .22s ease, filter .22s ease, scale .22s ease;
}

.orbit-card::after {
  content: '';
  position: absolute;
  inset: -60% -80%;
  background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.34) 50%, transparent 62%);
  transform: translateX(90%);
  transition: transform .45s ease;
}

.orbit-card:hover {
  scale: 1.08;
  border-color: rgba(251, 146, 60, .72);
  background: linear-gradient(135deg, rgba(2, 6, 23, .82), rgba(14, 165, 233, .26), rgba(249, 115, 22, .18));
  filter: drop-shadow(0 0 24px rgba(14, 165, 233, .36));
  animation-play-state: paused;
}

.orbit-card:hover::after {
  transform: translateX(-90%);
}

.orbit-card:hover strong {
  color: #fed7aa;
}

/* Remove the sticker-like white logo background and make it a neon emblem */
.center-badge {
  background:
    radial-gradient(circle at 50% 48%, rgba(125, 211, 252, .52) 0 32%, rgba(14, 165, 233, .16) 33% 48%, rgba(2, 6, 23, .08) 49% 62%, transparent 63%),
    conic-gradient(from 210deg, rgba(125, 211, 252, .74), rgba(249, 115, 22, .68), rgba(20, 184, 166, .55), rgba(125, 211, 252, .74));
  border: 1px solid rgba(125, 211, 252, .52);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .12),
    0 0 0 18px rgba(14, 165, 233, .06),
    0 34px 90px rgba(0, 0, 0, .36),
    0 0 105px rgba(14, 165, 233, .45),
    inset 0 0 44px rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px) saturate(1.3);
}

.center-badge::before {
  inset: -18px;
  border-color: rgba(125, 211, 252, .5);
}

.center-badge::after {
  inset: -46px;
  border-color: rgba(249, 115, 22, .3);
}

.center-badge img {
  width: 82%;
  height: 82%;
  padding: 12px;
  border-radius: 50%;
  mix-blend-mode: multiply;
  filter: contrast(2.2) brightness(.72) saturate(.7) drop-shadow(0 0 12px rgba(255,255,255,.35));
  opacity: .92;
  animation: logoFloat 3.2s ease-in-out infinite alternate;
}

.center-badge:hover img {
  mix-blend-mode: multiply;
  filter: contrast(2.6) brightness(.65) saturate(.8) drop-shadow(0 0 18px rgba(255,255,255,.62));
}

.badge-halo {
  inset: -16px;
  background: conic-gradient(from 0deg, transparent, #7dd3fc, transparent, #fb923c, transparent, #14b8a6, transparent);
  filter: blur(7px);
  opacity: .78;
}

.center-badge:hover .badge-halo {
  opacity: 1;
  filter: blur(9px);
}

@keyframes logoFloat {
  from { transform: translateY(4px) scale(.98); }
  to { transform: translateY(-5px) scale(1.03); }
}

.drawn-logo {
  position: relative;
  z-index: 3;
  width: 68%;
  height: 68%;
  transform: translateY(2px);
  animation: drawnLogoFloat 3.2s ease-in-out infinite alternate;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.95))
    drop-shadow(0 0 18px rgba(125,211,252,.52));
}

.drawn-logo span {
  position: absolute;
  display: block;
  box-sizing: border-box;
}

.logo-arch {
  right: 17%;
  top: 3%;
  width: 58%;
  height: 45%;
  border: 12px solid rgba(248, 251, 253, .96);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(-16deg);
}

.logo-roof {
  right: 23%;
  top: 19%;
  width: 52%;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffffff, #7dd3fc);
  transform: rotate(-22deg);
  box-shadow: 0 12px 0 rgba(255,255,255,.82);
}

.logo-column {
  bottom: 27%;
  width: 12%;
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(180deg, #ffffff, #bae6fd);
  box-shadow: inset -5px 0 0 rgba(14, 165, 233, .22);
}

.logo-column.c1 {
  right: 28%;
  height: 43%;
}

.logo-column.c2 {
  right: 45%;
  height: 55%;
}

.logo-column.c3 {
  right: 62%;
  height: 36%;
}

.logo-base {
  left: 18%;
  right: 18%;
  height: 8px;
  border-radius: 999px;
  background: rgba(248, 251, 253, .94);
}

.logo-base.b1 { bottom: 22%; }
.logo-base.b2 {
  bottom: 14%;
  left: 25%;
  right: 25%;
  background: rgba(186, 230, 253, .92);
}
.logo-base.b3 {
  bottom: 6%;
  left: 36%;
  right: 36%;
  background: #fb923c;
  box-shadow: 0 0 14px rgba(251,146,60,.52);
}

.logo-snow.s1,
.logo-snow.s2,
.logo-snow.s3 {
  right: 26%;
  top: 18%;
  width: 26px;
  height: 4px;
  border-radius: 999px;
  background: #ffffff;
  transform-origin: center;
  box-shadow: 0 0 10px rgba(255,255,255,.5);
}

.logo-snow.s1 { transform: rotate(0deg); }
.logo-snow.s2 { transform: rotate(60deg); }
.logo-snow.s3 { transform: rotate(120deg); }

@keyframes drawnLogoFloat {
  from { transform: translateY(4px) scale(.99); }
  to { transform: translateY(-5px) scale(1.035); }
}

@media (max-width: 920px) {
  .hero-stage {
    margin-top: 28px;
  }
  .portal-scene {
    inset: 14% -8% -4%;
    transform: scale(.72) rotateX(58deg) rotateZ(-28deg);
  }
}

@media (max-width: 560px) {
  .hero-stage {
    margin-top: 34px;
  }
  .portal-scene {
    inset: 15% -46% -6%;
    transform: scale(.54) rotateX(58deg) rotateZ(-28deg);
  }
}