/* Animated 3D hero mark */
[hidden] {
  display: none !important;
}

.portal-hero > :not(.hero-mark) {
  position: relative;
  z-index: 2;
}

.portal-hero .hero-mark {
  position: absolute;
  z-index: 1;
  right: -6vw;
  top: -42px;
  width: min(66vw, 860px);
  aspect-ratio: 1;
  opacity: 1;
  pointer-events: none;
  perspective: 1100px;
  transform: rotate(-3deg);
}

.hero-logo-3d {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: hero-logo-float 8s ease-in-out infinite;
}

.hero-logo-3d::before {
  content: "";
  position: absolute;
  left: 21%;
  right: 20%;
  top: 17%;
  bottom: 12%;
  border-radius: 44%;
  background: radial-gradient(ellipse at 50% 48%, rgba(216, 255, 0, .14), rgba(125, 255, 231, .035) 40%, transparent 72%);
  filter: blur(28px);
  transform: translateZ(-80px);
}

.portal-hero .hero-logo-3d img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero-logo-depth {
  opacity: .22;
  transform: translate3d(18px, 24px, -46px);
  filter: brightness(.28) sepia(1) saturate(4) hue-rotate(30deg) drop-shadow(6px 8px 0 #171a14) drop-shadow(14px 18px 18px #000);
}

.hero-logo-main {
  opacity: .42;
  transform: translateZ(18px);
  filter: drop-shadow(2px 2px 0 #555a50) drop-shadow(5px 6px 0 #2a2e27) drop-shadow(9px 11px 0 #141612) drop-shadow(20px 28px 24px #000) drop-shadow(0 0 20px rgba(216, 255, 0, .13));
}

.hero-logo-glitch {
  opacity: 0;
  transform: translateZ(30px);
  mix-blend-mode: screen;
}

.glitch-acid {
  filter: brightness(0) saturate(100%) invert(91%) sepia(86%) saturate(2960%) hue-rotate(21deg) brightness(109%) contrast(108%);
  animation: hero-glitch-acid 6.4s steps(1, end) infinite;
}

.glitch-ice {
  filter: brightness(0) saturate(100%) invert(84%) sepia(51%) saturate(1072%) hue-rotate(113deg) brightness(105%) contrast(103%);
  animation: hero-glitch-ice 6.4s steps(1, end) infinite;
}

.hero-logo-scan {
  position: absolute;
  z-index: 5;
  left: 22%;
  right: 20%;
  top: 17%;
  height: 2px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--acid), #fff, var(--acid), transparent);
  box-shadow: 0 0 12px rgba(216, 255, 0, .9);
  transform: translateZ(36px);
  animation: hero-logo-scan 6.4s linear infinite;
}

.hero-smoke {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  opacity: .2;
  filter: blur(34px);
  mix-blend-mode: screen;
  will-change: transform;
}

.smoke-a {
  width: 52%;
  height: 35%;
  right: 12%;
  top: 22%;
  background: radial-gradient(ellipse, rgba(225, 230, 220, .28), rgba(119, 129, 115, .09) 48%, transparent 72%);
  animation: hero-smoke-a 13s ease-in-out infinite;
}

.smoke-b {
  width: 46%;
  height: 42%;
  right: 30%;
  top: 38%;
  background: radial-gradient(ellipse, rgba(216, 255, 0, .16), rgba(148, 166, 121, .045) 52%, transparent 75%);
  animation: hero-smoke-b 17s ease-in-out infinite;
}

.smoke-c {
  width: 38%;
  height: 32%;
  right: 4%;
  top: 52%;
  background: radial-gradient(ellipse, rgba(200, 224, 214, .18), rgba(97, 115, 107, .04) 50%, transparent 73%);
  animation: hero-smoke-c 15s ease-in-out infinite;
}

@keyframes hero-logo-float {
  0%, 100% { transform: rotateY(-16deg) rotateX(5deg) translate3d(0, 0, 0); }
  50% { transform: rotateY(-10deg) rotateX(1deg) translate3d(-7px, -13px, 18px); }
}

@keyframes hero-glitch-acid {
  0%, 7%, 12%, 47%, 52%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate3d(0, 0, 30px); }
  8% { opacity: .65; clip-path: inset(18% 0 64% 0); transform: translate3d(-11px, 0, 30px); }
  9% { opacity: .3; clip-path: inset(63% 0 22% 0); transform: translate3d(8px, 0, 30px); }
  10% { opacity: .62; clip-path: inset(37% 0 45% 0); transform: translate3d(-5px, 0, 30px); }
  48% { opacity: .45; clip-path: inset(72% 0 13% 0); transform: translate3d(9px, 0, 30px); }
  49% { opacity: .24; clip-path: inset(28% 0 57% 0); transform: translate3d(-8px, 0, 30px); }
}

@keyframes hero-glitch-ice {
  0%, 8%, 13%, 48%, 53%, 100% { opacity: 0; clip-path: inset(100% 0 0 0); transform: translate3d(0, 0, 31px); }
  9% { opacity: .5; clip-path: inset(49% 0 35% 0); transform: translate3d(10px, 0, 31px); }
  10% { opacity: .28; clip-path: inset(13% 0 72% 0); transform: translate3d(-7px, 0, 31px); }
  11% { opacity: .45; clip-path: inset(78% 0 8% 0); transform: translate3d(6px, 0, 31px); }
  49% { opacity: .35; clip-path: inset(41% 0 42% 0); transform: translate3d(-10px, 0, 31px); }
  50% { opacity: .22; clip-path: inset(8% 0 79% 0); transform: translate3d(7px, 0, 31px); }
}

@keyframes hero-logo-scan {
  0%, 6%, 14%, 46%, 54%, 100% { top: 17%; opacity: 0; }
  8% { opacity: .7; }
  12% { top: 78%; opacity: 0; }
  48% { opacity: .45; }
  52% { top: 76%; opacity: 0; }
}

@keyframes hero-smoke-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.9); opacity: .14; }
  45% { transform: translate3d(-42px, 31px, 0) scale(1.16); opacity: .24; }
  72% { transform: translate3d(18px, 56px, 0) scale(1.04); opacity: .12; }
}

@keyframes hero-smoke-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .13; }
  38% { transform: translate3d(54px, -28px, 0) scale(1.2); opacity: .22; }
  70% { transform: translate3d(-27px, -47px, 0) scale(.94); opacity: .16; }
}

@keyframes hero-smoke-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.92); opacity: .1; }
  50% { transform: translate3d(-55px, -20px, 0) scale(1.22); opacity: .19; }
}

@media (max-width: 760px) {
  .portal-hero .hero-mark { width: 125vw; right: -48vw; top: 8px; transform: rotate(-6deg); }
  .hero-logo-main { opacity: .22; }
  .hero-logo-depth { opacity: .12; }
  .hero-smoke { filter: blur(25px); opacity: .12; }
  .hero-logo-3d { animation-duration: 10s; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo-3d,
  .hero-logo-glitch,
  .hero-logo-scan,
  .hero-smoke { animation: none; }

  .hero-logo-glitch,
  .hero-logo-scan { display: none; }

  .hero-logo-3d { transform: rotateY(-12deg) rotateX(3deg); }
}