/**
 * Piksel hero: one calm eight-second brand introduction followed by an idle state.
 * Fine pointers add subtle magnetic depth without turning the service labels into links.
 */

.piksel-stage {
  --piksel-intro: 8s;
  --piksel-orbit-loop: 20s;
  --piksel-glow-loop: 5.5s;
  position: relative;
  display: grid;
  width: 100%;
  min-height: 600px;
  place-items: center;
  isolation: isolate;
  perspective: 1100px;
  cursor: default;
}

.piksel-stage__glow {
  position: absolute;
  z-index: -3;
  width: 98%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52, 120, 246, 0.34) 0, rgba(117, 87, 232, 0.17) 36%, rgba(52, 120, 246, 0.04) 62%, transparent 74%);
  filter: blur(20px);
  translate: var(--piksel-glow-x, 0px) var(--piksel-glow-y, 0px);
  will-change: opacity, transform, translate;
  animation:
    pikselGlowSequence var(--piksel-intro) ease-in-out 0s 1 normal forwards,
    pikselGlowIdle var(--piksel-glow-loop) ease-in-out var(--piksel-intro) infinite alternate none;
}

.piksel-stage__mascot {
  position: relative;
  z-index: 3;
  width: min(92%, 495px);
  aspect-ratio: 1122 / 1402;
  transform-origin: 50% 78%;
  filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.34)) drop-shadow(0 0 28px rgba(92, 103, 255, 0.18));
  translate: var(--piksel-mascot-x, 0px) var(--piksel-mascot-y, 0px);
  rotate: var(--piksel-mascot-roll, 0deg);
  will-change: opacity, transform, translate, rotate;
  animation: pikselEntrance var(--piksel-intro) cubic-bezier(0.2, 0.75, 0.25, 1) 0s 1 normal forwards;
}

.piksel-stage__frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  will-change: opacity, transform;
}

.piksel-stage__frame--greeting {
  z-index: 1;
  animation: pikselGreetingFrame var(--piksel-intro) ease-in-out 0s 1 normal forwards;
}

.piksel-stage__frame--thumb {
  z-index: 2;
  opacity: 0;
  animation: pikselThumbFrame var(--piksel-intro) ease-in-out 0s 1 normal forwards;
}

.piksel-stage__character {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.piksel-stage__antenna {
  position: absolute;
  z-index: 4;
  top: 4.9%;
  left: 50.9%;
  width: 9.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.98) 0 10%, #94c7ff 26%, rgba(117, 87, 232, 0.72) 48%, transparent 72%);
  filter: blur(1px);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) scale(0.5);
  animation: pikselAntennaPulse var(--piksel-intro) ease-out 0s 1 normal forwards;
}

.piksel-stage__wink {
  position: absolute;
  z-index: 5;
  top: 27.8%;
  left: 37.2%;
  width: 10.5%;
  height: 5.6%;
  border-radius: 50%;
  opacity: 0;
  background: #050612;
  border-bottom: 3px solid #aabaff;
  box-shadow: 0 4px 9px rgba(83, 123, 255, 0.42);
  transform: rotate(7deg) scaleY(0.05);
  transform-origin: center;
  animation: pikselWink var(--piksel-intro) ease-in-out 0s 1 normal forwards;
}

.piksel-stage__orbit {
  position: absolute;
  z-index: 1;
  top: 47%;
  left: 50%;
  width: 99%;
  height: 40%;
  border: 1px solid rgba(141, 175, 255, 0.34);
  border-radius: 50%;
  opacity: 0;
  transform-style: preserve-3d;
  will-change: opacity, transform;
  animation:
    pikselOrbitSequence var(--piksel-intro) linear 0s 1 normal forwards,
    pikselOrbitIdle var(--piksel-orbit-loop) linear var(--piksel-intro) infinite normal none;
}

.piksel-stage__orbit::before,
.piksel-stage__orbit::after {
  position: absolute;
  border-radius: 50%;
  content: "";
}

.piksel-stage__orbit::before {
  top: 50%;
  left: -7px;
  width: 14px;
  height: 14px;
  border: 3px solid rgba(255, 255, 255, 0.58);
  background: #7557e8;
  box-shadow: 0 0 26px rgba(117, 87, 232, 0.96);
  transform: translateY(-50%);
}

.piksel-stage__orbit::after {
  right: 12%;
  bottom: 4%;
  width: 7px;
  height: 7px;
  background: #8db8ff;
  box-shadow: 0 0 20px rgba(141, 184, 255, 0.94);
}

.piksel-stage__orbit--one {
  transform: translate(-50%, -50%) rotate(-14deg);
}

.piksel-stage__orbit--two {
  z-index: 4;
  width: 82%;
  height: 31%;
  border-color: rgba(117, 87, 232, 0.28);
  transform: translate(-50%, -50%) rotate(17deg);
  animation-name: pikselOrbitSequenceReverse, pikselOrbitIdleReverse;
}

.piksel-stage__orbit--two::before {
  right: -5px;
  left: auto;
  width: 10px;
  height: 10px;
  border-width: 2px;
  background: #3478f6;
  box-shadow: 0 0 24px rgba(52, 120, 246, 0.92);
}

.piksel-stage__services {
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
}

.piksel-service {
  --piksel-card-x: 0px;
  --piksel-card-y: 0px;
  --piksel-card-scale: 1;
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid rgba(142, 177, 255, 0.3);
  border-radius: 999px;
  opacity: 0;
  color: #eaf0ff;
  background: rgba(11, 25, 51, 0.84);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: default;
  transform: translateY(12px) scale(0.9);
  translate: var(--piksel-card-x) var(--piksel-card-y);
  scale: var(--piksel-card-scale);
  transition: border-color 280ms ease, background-color 280ms ease, box-shadow 280ms ease, color 280ms ease;
  will-change: opacity, transform, translate, scale;
  animation: pikselServiceReveal var(--piksel-intro) cubic-bezier(0.2, 0.75, 0.25, 1) 0s 1 normal forwards;
}

.piksel-service.is-near {
  --piksel-card-scale: 1.045;
  color: #fff;
  border-color: rgba(171, 143, 255, 0.58);
  background: rgba(48, 35, 112, 0.9);
  box-shadow: 0 16px 38px rgba(21, 12, 66, 0.34), 0 0 25px rgba(117, 87, 232, 0.22), inset 0 1px rgba(255, 255, 255, 0.14);
}

.piksel-service.is-near svg {
  stroke: #c7b8ff;
  filter: drop-shadow(0 0 7px rgba(154, 127, 255, 0.86));
}

.piksel-service svg {
  width: 19px;
  height: 19px;
  overflow: visible;
  fill: none;
  stroke: #8fb7ff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  filter: drop-shadow(0 0 5px rgba(117, 143, 255, 0.65));
}

.piksel-service--ads {
  top: 16%;
  left: -2%;
  animation-name: pikselServiceAds;
}

.piksel-service--seo {
  top: 29%;
  right: -1%;
  animation-name: pikselServiceSeo;
}

.piksel-service--software {
  bottom: 24%;
  left: -3%;
  animation-name: pikselServiceSoftware;
}

.piksel-service--performance {
  right: -4%;
  bottom: 14%;
  animation-name: pikselServicePerformance;
}

.piksel-stage__shadow {
  position: absolute;
  z-index: 2;
  bottom: 3.7%;
  width: 45%;
  height: 28px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.66), transparent 70%);
  filter: blur(8px);
  translate: var(--piksel-shadow-x, 0px) 0;
  will-change: opacity, transform, translate;
  animation: pikselShadowSequence var(--piksel-intro) ease-in-out 0s 1 normal forwards;
}

@keyframes pikselEntrance {
  0% { opacity: 0; transform: translate3d(72px, 16px, 0) scale(0.92) rotate(2deg); }
  10%, 88%, 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0); }
  46% { opacity: 1; transform: translate3d(0, -10px, 0) scale(1.012) rotate(-0.5deg); }
}

@keyframes pikselGreetingFrame {
  0%, 43% { opacity: 1; transform: scale(1); }
  51%, 100% { opacity: 0; transform: scale(0.985); }
}

@keyframes pikselThumbFrame {
  0%, 43% { opacity: 0; transform: scale(0.985); }
  51%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes pikselAntennaPulse {
  0%, 15%, 34%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.45); }
  20% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.28); }
  25% { opacity: 0.48; transform: translate(-50%, -50%) scale(0.88); }
  29% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.12); }
}

@keyframes pikselWink {
  0%, 31%, 40%, 100% { opacity: 0; transform: rotate(7deg) scaleY(0.05); }
  34%, 37% { opacity: 1; transform: rotate(7deg) scaleY(1); }
}

@keyframes pikselOrbitSequence {
  0%, 28% { opacity: 0; }
  38% { opacity: 0.42; }
  52%, 100% { opacity: 0.78; }
  0% { transform: translate(-50%, -50%) rotateX(var(--piksel-orbit-tilt-x, 0deg)) rotateY(var(--piksel-orbit-tilt-y, 0deg)) rotate(-14deg); }
  100% { transform: translate(-50%, -50%) rotateX(var(--piksel-orbit-tilt-x, 0deg)) rotateY(var(--piksel-orbit-tilt-y, 0deg)) rotate(130deg); }
}

@keyframes pikselOrbitSequenceReverse {
  0%, 28% { opacity: 0; }
  38% { opacity: 0.36; }
  52%, 100% { opacity: 0.66; }
  0% { transform: translate(-50%, -50%) rotateX(var(--piksel-orbit-tilt-x, 0deg)) rotateY(var(--piksel-orbit-tilt-y, 0deg)) rotate(17deg); }
  100% { transform: translate(-50%, -50%) rotateX(var(--piksel-orbit-tilt-x, 0deg)) rotateY(var(--piksel-orbit-tilt-y, 0deg)) rotate(-127deg); }
}

@keyframes pikselOrbitIdle {
  from { opacity: 0.78; transform: translate(-50%, -50%) rotateX(var(--piksel-orbit-tilt-x, 0deg)) rotateY(var(--piksel-orbit-tilt-y, 0deg)) rotate(130deg); }
  to { opacity: 0.78; transform: translate(-50%, -50%) rotateX(var(--piksel-orbit-tilt-x, 0deg)) rotateY(var(--piksel-orbit-tilt-y, 0deg)) rotate(490deg); }
}

@keyframes pikselOrbitIdleReverse {
  from { opacity: 0.66; transform: translate(-50%, -50%) rotateX(var(--piksel-orbit-tilt-x, 0deg)) rotateY(var(--piksel-orbit-tilt-y, 0deg)) rotate(-127deg); }
  to { opacity: 0.66; transform: translate(-50%, -50%) rotateX(var(--piksel-orbit-tilt-x, 0deg)) rotateY(var(--piksel-orbit-tilt-y, 0deg)) rotate(-487deg); }
}

@keyframes pikselServiceReveal {
  0%, 50% { opacity: 0; transform: translateY(10px) scale(0.94); }
  68%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pikselServiceAds {
  0%, 48% { opacity: 0; transform: translateY(10px) scale(0.94); }
  64%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pikselServiceSeo {
  0%, 57% { opacity: 0; transform: translateY(10px) scale(0.94); }
  73%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pikselServiceSoftware {
  0%, 66% { opacity: 0; transform: translateY(10px) scale(0.94); }
  82%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pikselServicePerformance {
  0%, 75% { opacity: 0; transform: translateY(10px) scale(0.94); }
  91%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pikselGlowSequence {
  0% { opacity: 0.46; transform: scale(0.92); }
  10%, 38% { opacity: 0.78; transform: scale(0.99); }
  62%, 100% { opacity: 0.96; transform: scale(1.06); }
}

@keyframes pikselGlowIdle {
  from { opacity: 0.96; transform: scale(1.06); }
  to { opacity: 0.88; transform: scale(1.03); }
}

@keyframes pikselShadowSequence {
  0% { opacity: 0; transform: scaleX(0.76); }
  10%, 88%, 100% { opacity: 0.56; transform: scaleX(1); }
  46% { opacity: 0.38; transform: scaleX(0.88); }
}

@keyframes pikselMascotMobileDrift {
  from { translate: 0 0; }
  to { translate: 0 -5px; }
}

@keyframes pikselCardMobileDriftA {
  from { translate: 0 0; }
  to { translate: 5px -4px; }
}

@keyframes pikselCardMobileDriftB {
  from { translate: 0 0; }
  to { translate: -4px 5px; }
}

.piksel-stage.is-restarting .piksel-stage__glow,
.piksel-stage.is-restarting .piksel-stage__mascot,
.piksel-stage.is-restarting .piksel-stage__frame,
.piksel-stage.is-restarting .piksel-stage__antenna,
.piksel-stage.is-restarting .piksel-stage__wink,
.piksel-stage.is-restarting .piksel-stage__orbit,
.piksel-stage.is-restarting .piksel-service,
.piksel-stage.is-restarting .piksel-stage__shadow {
  animation: none !important;
}

@media (max-width: 1040px) {
  .piksel-stage {
    width: min(100%, 620px);
    min-height: 575px;
    margin: 0 auto;
  }
}

@media (max-width: 760px) {
  .hero__grid { gap: 20px; }

  .piksel-stage {
    min-height: 475px;
    margin-top: 2px;
  }

  .piksel-stage__mascot { width: min(90%, 400px); }
  .piksel-stage__orbit { width: 91%; }
  .piksel-stage__orbit--two { width: 72%; }
  .piksel-stage__shadow { bottom: 4.5%; }
  .piksel-service { padding: 7px 10px; font-size: 0.68rem; }
  .piksel-service svg { width: 17px; height: 17px; }
  .piksel-service--ads { top: 18%; left: 1%; }
  .piksel-service--seo { top: 30%; right: 1%; }
  .piksel-service--software { bottom: 22%; left: 0; }
  .piksel-service--performance { right: 0; bottom: 12%; }
}

@media (max-width: 420px) {
  .piksel-stage { min-height: 425px; }
  .piksel-stage__mascot { width: min(86%, 340px); }
  .piksel-service { gap: 5px; padding: 6px 8px; font-size: 0.61rem; }
  .piksel-service svg { width: 15px; height: 15px; }
}

@media (hover: none), (pointer: coarse) {
  .piksel-stage__mascot {
    animation:
      pikselEntrance var(--piksel-intro) cubic-bezier(0.2, 0.75, 0.25, 1) 0s 1 normal forwards,
      pikselMascotMobileDrift 6s ease-in-out var(--piksel-intro) infinite alternate none;
  }

  .piksel-service--ads,
  .piksel-service--software {
    animation:
      var(--piksel-service-reveal) var(--piksel-intro) cubic-bezier(0.2, 0.75, 0.25, 1) 0s 1 normal forwards,
      pikselCardMobileDriftA 7s ease-in-out var(--piksel-intro) infinite alternate none;
  }

  .piksel-service--seo,
  .piksel-service--performance {
    animation:
      var(--piksel-service-reveal) var(--piksel-intro) cubic-bezier(0.2, 0.75, 0.25, 1) 0s 1 normal forwards,
      pikselCardMobileDriftB 7.8s ease-in-out var(--piksel-intro) infinite alternate none;
  }

  .piksel-service--ads { --piksel-service-reveal: pikselServiceAds; }
  .piksel-service--seo { --piksel-service-reveal: pikselServiceSeo; }
  .piksel-service--software { --piksel-service-reveal: pikselServiceSoftware; }
  .piksel-service--performance { --piksel-service-reveal: pikselServicePerformance; }
}

@media (prefers-reduced-motion: reduce) {
  .piksel-stage__glow,
  .piksel-stage__mascot,
  .piksel-stage__frame,
  .piksel-stage__antenna,
  .piksel-stage__wink,
  .piksel-stage__orbit,
  .piksel-service,
  .piksel-stage__shadow {
    animation: none;
  }

  .piksel-stage__mascot,
  .piksel-stage__frame--thumb,
  .piksel-stage__orbit,
  .piksel-service,
  .piksel-stage__shadow { opacity: 1; }

  .piksel-stage__frame--greeting { opacity: 0; }
  .piksel-stage__orbit--one { transform: translate(-50%, -50%) rotate(-14deg); }
  .piksel-stage__orbit--two { transform: translate(-50%, -50%) rotate(17deg); }
  .piksel-service { transform: none; translate: 0 0; scale: 1; transition: none; }
}