.intela-cinematic {
  --intela-depth-x: 0px;
  --intela-depth-y: 0px;
  position: relative;
  width: min(100%, 440px);
  aspect-ratio: 1;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(92, 203, 255, 0.22);
  border-radius: 30px;
  background: #020611;
  box-shadow:
    0 38px 82px rgba(0, 0, 0, 0.44),
    0 0 70px rgba(23, 153, 255, 0.1),
    0 0 95px rgba(197, 48, 255, 0.07),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  perspective: 1100px;
  transform-style: preserve-3d;
}

.intela-cinematic__image {
  position: absolute;
  z-index: 1;
  inset: -2%;
  width: 104%;
  height: 104%;
  object-fit: cover;
  transform:
    translate3d(
      calc(var(--intela-depth-x) * -0.42),
      calc(var(--intela-depth-y) * -0.42),
      0
    )
    scale(1.035);
  transform-origin: center;
  transition: transform 180ms ease-out;
  user-select: none;
}

.intela-cinematic__canvas {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.intela-cinematic__brain-zone {
  position: absolute;
  z-index: 4;
  top: 19.5%;
  left: 9.5%;
  width: 59%;
  aspect-ratio: 1;
  pointer-events: none;
  border-radius: 50%;
  transform:
    translate3d(
      calc(var(--intela-depth-x) * 0.52),
      calc(var(--intela-depth-y) * 0.52),
      45px
    );
  transform-style: preserve-3d;
  transition: transform 180ms ease-out;
}

.intela-cinematic__ring {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  opacity: 0.78;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(84, 225, 255, 0.86) 0deg 1deg,
      transparent 1deg 9deg,
      rgba(239, 75, 255, 0.58) 9deg 10.5deg,
      transparent 10.5deg 21deg
    );
  -webkit-mask-image:
    radial-gradient(
      circle,
      transparent 0 68%,
      #000 69% 70%,
      transparent 71% 78%,
      #000 79% 80%,
      transparent 81%
    );
  mask-image:
    radial-gradient(
      circle,
      transparent 0 68%,
      #000 69% 70%,
      transparent 71% 78%,
      #000 79% 80%,
      transparent 81%
    );
  filter: drop-shadow(0 0 5px rgba(68, 213, 255, 0.64));
  animation: intela-cinematic-ring-clockwise 20s linear infinite;
}

.intela-cinematic__ring--middle {
  inset: 13%;
  opacity: 0.62;
  background:
    repeating-conic-gradient(
      from 17deg,
      rgba(255, 79, 213, 0.78) 0deg 2deg,
      transparent 2deg 16deg,
      rgba(82, 222, 255, 0.52) 16deg 17deg,
      transparent 17deg 32deg
    );
  -webkit-mask-image:
    radial-gradient(
      circle,
      transparent 0 73%,
      #000 74% 76%,
      transparent 77%
    );
  mask-image:
    radial-gradient(
      circle,
      transparent 0 73%,
      #000 74% 76%,
      transparent 77%
    );
  animation:
    intela-cinematic-ring-counter 14s linear infinite;
}

.intela-cinematic__ring--inner {
  inset: 24%;
  opacity: 0.74;
  background:
    conic-gradient(
      from 80deg,
      transparent 0deg 48deg,
      rgba(75, 229, 255, 0.9) 49deg 52deg,
      transparent 53deg 166deg,
      rgba(255, 75, 200, 0.78) 167deg 171deg,
      transparent 172deg 298deg,
      rgba(255, 177, 57, 0.72) 299deg 302deg,
      transparent 303deg
    );
  -webkit-mask-image:
    radial-gradient(
      circle,
      transparent 0 69%,
      #000 70% 74%,
      transparent 75%
    );
  mask-image:
    radial-gradient(
      circle,
      transparent 0 69%,
      #000 70% 74%,
      transparent 75%
    );
  filter: drop-shadow(0 0 7px rgba(224, 68, 255, 0.7));
  animation: intela-cinematic-ring-clockwise 9s linear infinite;
}

.intela-cinematic__brain-glow {
  position: absolute;
  z-index: 2;
  top: 31.5%;
  left: 24%;
  width: 33%;
  aspect-ratio: 1.08;
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(102, 235, 255, 0.34) 0%,
      rgba(48, 139, 255, 0.18) 34%,
      rgba(207, 61, 255, 0.1) 58%,
      transparent 74%
    );
  mix-blend-mode: screen;
  filter: blur(7px);
  animation: intela-cinematic-brain-pulse 4.8s ease-in-out infinite;
}

.intela-cinematic__temple-ring {
  position: absolute;
  z-index: 4;
  top: 13.8%;
  left: 77.3%;
  width: 17.2%;
  aspect-ratio: 1;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0.78;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(104, 225, 255, 0.82) 0deg 2deg,
      transparent 2deg 19deg,
      rgba(249, 75, 231, 0.84) 19deg 21deg,
      transparent 21deg 40deg,
      rgba(255, 169, 50, 0.72) 40deg 41deg,
      transparent 41deg 62deg
    );
  -webkit-mask-image:
    radial-gradient(
      circle,
      transparent 0 68%,
      #000 69% 73%,
      transparent 74%
    );
  mask-image:
    radial-gradient(
      circle,
      transparent 0 68%,
      #000 69% 73%,
      transparent 74%
    );
  filter: drop-shadow(0 0 6px rgba(203, 62, 255, 0.7));
  transform:
    translate3d(
      calc(var(--intela-depth-x) * 0.2),
      calc(var(--intela-depth-y) * 0.2),
      28px
    );
  animation: intela-cinematic-ring-counter 11s linear infinite;
}

.intela-cinematic__scan {
  position: absolute;
  z-index: 5;
  top: 2%;
  bottom: 2%;
  left: -28%;
  width: 24%;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(88, 227, 255, 0.12) 46%,
      rgba(255, 255, 255, 0.24) 50%,
      rgba(220, 74, 255, 0.1) 54%,
      transparent
    );
  filter: blur(2px);
  transform: skewX(-8deg);
  mix-blend-mode: screen;
  animation: intela-cinematic-scan 9s ease-in-out infinite;
}

.intela-cinematic__vignette {
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(
      circle at 39% 48%,
      transparent 0 31%,
      rgba(1, 4, 14, 0.04) 55%,
      rgba(1, 4, 13, 0.34) 100%
    );
  box-shadow:
    inset 0 0 54px rgba(1, 5, 18, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

@keyframes intela-cinematic-ring-clockwise {
  to {
    transform: rotate(360deg);
  }
}

@keyframes intela-cinematic-ring-counter {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes intela-cinematic-brain-pulse {
  0%,
  100% {
    opacity: 0.48;
    transform: scale(0.93);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes intela-cinematic-scan {
  0%,
  18% {
    left: -28%;
    opacity: 0;
  }

  28% {
    opacity: 0.78;
  }

  70% {
    opacity: 0.3;
  }

  82%,
  100% {
    left: 108%;
    opacity: 0;
  }
}

@media (max-width: 680px) {
  .intela-cinematic {
    width: min(88vw, 420px);
    border-radius: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intela-cinematic__image,
  .intela-cinematic__brain-zone,
  .intela-cinematic__ring,
  .intela-cinematic__temple-ring,
  .intela-cinematic__brain-glow,
  .intela-cinematic__scan {
    animation: none !important;
    transition: none !important;
  }

  .intela-cinematic__scan {
    display: none;
  }
}