/**
 * REV DE$K / PM MEDIA — animated hero avatar
 * Big mark above hero copy · Silk bed stays visible behind
 */
.rd-avatar-wrap {
  width: min(1100px, 100%);
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

.rd-avatar-entrance {
  animation: pm-entrance 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.rd-avatar-perspective {
  perspective: 1400px;
}

.rd-avatar-stage {
  position: relative;
  transform-style: preserve-3d;
  animation: pm-orbit 11s ease-in-out infinite;
}

.rd-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 135%;
  height: 135%;
  transform: translate(-50%, -50%) translateZ(-160px);
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #2de0ff,
    transparent 30%,
    transparent 60%,
    #ff2de0,
    #2de0ff
  );
  filter: blur(50px);
  opacity: 0.55;
  animation: pm-halo-spin 16s linear infinite;
  z-index: 0;
  pointer-events: none;
}

.rd-particle {
  position: absolute;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}

.rd-p1 {
  left: 8%;
  top: 10%;
  width: 10px;
  height: 10px;
  background: #2de0ff;
  filter: blur(2px);
  box-shadow: 0 0 16px 6px rgba(45, 224, 255, 0.6);
  transform: translateZ(-90px);
  animation: pm-drift-1 7s ease-in-out infinite;
}

.rd-p2 {
  right: 10%;
  top: 16%;
  width: 8px;
  height: 8px;
  background: #ff2de0;
  filter: blur(2px);
  box-shadow: 0 0 14px 5px rgba(255, 45, 224, 0.6);
  transform: translateZ(-70px);
  animation: pm-drift-2 8.5s ease-in-out infinite;
}

.rd-p3 {
  left: 14%;
  bottom: 12%;
  width: 7px;
  height: 7px;
  background: #ff2de0;
  filter: blur(1.5px);
  box-shadow: 0 0 12px 4px rgba(255, 45, 224, 0.5);
  transform: translateZ(-50px);
  animation: pm-drift-3 6.5s ease-in-out infinite;
}

.rd-plate {
  position: relative;
  width: 100%;
  border-radius: 18px;
  overflow: visible;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.07),
    0 40px 90px rgba(0, 0, 0, 0.7);
  animation: pm-flicker 5s linear infinite;
  transform: translateZ(0);
  z-index: 2;
  background: transparent;
}

.rd-plate img,
.rd-plate .hero-logo-img,
.pm-neon-sign-stage--avatar .rd-plate img,
.pm-neon-sign-stage--avatar .rd-plate .hero-logo-img,
body.pm-convert-lean .pm-noon-3d-stage.pm-neon-sign-stage.pm-neon-sign-stage--avatar .hero-logo-img,
body.pm-convert-lean .pm-neon-sign-stage--avatar .rd-plate .hero-logo-img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  position: relative;
  z-index: 1;
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
  animation: none !important;
  border-radius: 14px;
}

.rd-sweep {
  position: absolute;
  top: -50%;
  left: 0;
  width: 35%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );
  animation: pm-sweep 5.5s ease-in-out infinite;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
}

.rd-node {
  position: absolute;
  width: 5%;
  height: 8%;
  border-radius: 50%;
  animation: pm-node 2.4s ease-in-out infinite;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 3;
}

.rd-node-cyan {
  background: radial-gradient(circle, rgba(45, 224, 255, 0.9), transparent 70%);
}

.rd-node-magenta {
  background: radial-gradient(circle, rgba(255, 45, 224, 0.9), transparent 70%);
}

.rd-vignette {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 60px 12px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 4;
}

.rd-spark {
  position: absolute;
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
}

.rd-connector {
  position: relative;
  transform: translateZ(30px);
  z-index: 3;
  margin-top: 0.15rem;
}

.rd-connector-line {
  width: 100%;
  height: 54px;
  display: flex;
  justify-content: center;
}

.rd-tag-row {
  display: flex;
  justify-content: center;
}

.rd-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1.5px solid rgba(45, 224, 255, 0.6);
  background: rgba(5, 7, 10, 0.75);
  animation: pm-tag-pulse 2.4s ease-in-out infinite;
  backdrop-filter: blur(10px);
}

.rd-tag-main {
  font-family: "Orbitron", "Rajdhani", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0.18em;
  font-size: clamp(0.85rem, 2.6vw, 1.35rem);
  text-transform: uppercase;
  color: #eafcff;
  text-shadow: 0 0 8px rgba(45, 224, 255, 0.9);
}

.rd-tag-div {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.25);
}

.rd-tag-sub {
  font-family: "Rajdhani", "Orbitron", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.14em;
  font-size: clamp(0.7rem, 1.8vw, 0.95rem);
  text-transform: uppercase;
  color: #ff9df0;
  opacity: 0.9;
}

/* —— Hero stage: hug full logo + tag · never crop —— */
html.pm-silk-aurora .pm-noon-3d-stage.pm-neon-sign-stage.pm-neon-sign-stage--avatar,
html[data-hero-bg="silk"] .pm-noon-3d-stage.pm-neon-sign-stage.pm-neon-sign-stage--avatar,
.pm-noon-3d-stage.pm-neon-sign-stage.pm-neon-sign-stage--avatar,
body.pm-convert-lean .pm-noon-3d-stage.pm-neon-sign-stage.pm-neon-sign-stage--avatar {
  aspect-ratio: auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  width: min(100%, 1100px) !important;
  max-width: min(1100px, 100%) !important;
  padding: 0.35rem 0 0.85rem !important;
  margin: 0.25rem auto 0.85rem !important;
  display: block !important;
  overflow: visible !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  /* Absolute FX layers must not steal layout height */
  isolation: isolate;
}

html.pm-silk-aurora .pm-neon-sign-stage--avatar .pm-neon-sign-bg,
html.pm-silk-aurora .pm-neon-sign-stage--avatar .pm-neon-sign-veil,
.pm-neon-sign-stage--avatar .pm-neon-sign-bg,
.pm-neon-sign-stage--avatar .pm-neon-sign-veil,
.pm-neon-sign-stage--avatar .pm-silk-film-grade,
.pm-neon-sign-stage--avatar .pm-fiber-canvas,
.pm-neon-sign-stage--avatar .pm-noon-webgl,
.pm-neon-sign-stage--avatar .hero-engine-canvas,
.pm-neon-sign-stage--avatar #pm-silk-aurora,
.pm-neon-sign-stage--avatar .pm-noon-wave-canvas,
.pm-neon-sign-stage--avatar .hero-spline-host,
.pm-neon-sign-stage--avatar .hero-engine-labels {
  display: none !important;
}

.pm-neon-sign-stage--avatar .pm-noon-logo-float.pm-neon-sign,
body.pm-convert-lean .pm-noon-3d-stage.pm-neon-sign-stage.pm-neon-sign-stage--avatar .pm-noon-logo-float,
body.pm-convert-lean .pm-noon-3d-stage.pm-neon-sign-stage.pm-neon-sign-stage--avatar .pm-noon-logo-float.pm-neon-sign,
html.pm-silk-aurora .pm-neon-sign-stage--avatar .pm-noon-logo-float.pm-neon-sign {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: min(1100px, 100%) !important;
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  place-items: unset !important;
  background: transparent !important;
  transform: none !important;
  margin: 0 auto !important;
  z-index: 5;
  overflow: visible !important;
}

/* Give hero copy room under full mark */
.pm-noon-hero-inner {
  max-width: min(1100px, 100%) !important;
}

/* Keep 3D orbit from collapsing document flow */
.pm-neon-sign-stage--avatar .rd-avatar-perspective,
.pm-neon-sign-stage--avatar .rd-avatar-stage {
  transform-style: flat;
}
.pm-neon-sign-stage--avatar .rd-avatar-stage {
  /* orbit still runs; contain height via wrap */
  will-change: transform;
}

.pm-neon-sign-stage--avatar .pm-neon-sign__plate,
.pm-neon-sign-stage--avatar .pm-neon-sign__glow,
.pm-neon-sign-stage--avatar .pm-neon-sign__glass {
  display: none !important;
}

/* Soften phone notch chrome when avatar owns the stage */
.pm-neon-sign-stage--avatar::before,
.pm-neon-sign-stage--avatar::after {
  display: none !important;
}

/* Clip sweep/nodes to logo only — not the whole stage */
.rd-plate-media {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}

/* Hero copy under big avatar */
.pm-noon-hero .hero-title-noon {
  margin-top: 0.35rem;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

.pm-noon-hero .pm-noon-lead {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

@keyframes pm-entrance {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(50px) rotateX(14deg);
    filter: blur(18px);
  }
  55% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotateX(0);
    filter: blur(0);
  }
}

@keyframes pm-orbit {
  0% {
    transform: rotateY(-6deg) rotateX(3deg) rotateZ(0deg);
  }
  25% {
    transform: rotateY(4deg) rotateX(-3deg) rotateZ(0.6deg);
  }
  50% {
    transform: rotateY(7deg) rotateX(2deg) rotateZ(0deg);
  }
  75% {
    transform: rotateY(-3deg) rotateX(-4deg) rotateZ(-0.6deg);
  }
  100% {
    transform: rotateY(-6deg) rotateX(3deg) rotateZ(0deg);
  }
}

@keyframes pm-flicker {
  0%,
  15% {
    filter: brightness(1) saturate(1);
  }
  17% {
    filter: brightness(1.55) saturate(1.3);
  }
  19% {
    filter: brightness(0.85) saturate(1);
  }
  21%,
  100% {
    filter: brightness(1) saturate(1);
  }
}

@keyframes pm-sweep {
  0% {
    transform: translateX(-130%) rotate(15deg);
    opacity: 0;
  }
  8% {
    opacity: 0.4;
  }
  45% {
    opacity: 0.4;
  }
  55% {
    opacity: 0;
  }
  100% {
    transform: translateX(140%) rotate(15deg);
    opacity: 0;
  }
}

@keyframes pm-node {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}

@keyframes pm-dash {
  to {
    stroke-dashoffset: -40;
  }
}

@keyframes pm-tag-pulse {
  0%,
  100% {
    box-shadow:
      0 0 10px 2px rgba(45, 224, 255, 0.5),
      inset 0 0 12px rgba(45, 224, 255, 0.15);
  }
  50% {
    box-shadow:
      0 0 22px 7px rgba(255, 45, 224, 0.6),
      inset 0 0 16px rgba(255, 45, 224, 0.2);
  }
}

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

@keyframes pm-drift-1 {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(10px, -18px, 0);
  }
}

@keyframes pm-drift-2 {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-14px, -10px, 0);
  }
}

@keyframes pm-drift-3 {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(8px, 14px, 0);
  }
}

@keyframes pm-drift-4 {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-10px, 16px, 0);
  }
}

@keyframes pm-spark {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    transform: translateY(-60px);
    opacity: 0;
  }
}

@media (max-width: 720px) {
  .rd-avatar-wrap {
    width: min(100%, 96vw);
  }

  .rd-connector-line {
    height: 36px;
  }

  .rd-tag {
    padding: 10px 18px;
    gap: 8px;
  }

  .pm-noon-3d-stage.pm-neon-sign-stage.pm-neon-sign-stage--avatar,
  body.pm-convert-lean .pm-noon-3d-stage.pm-neon-sign-stage.pm-neon-sign-stage--avatar {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: auto !important;
    padding: 0.65rem 0.35rem 1rem;
    overflow: visible !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rd-avatar-entrance,
  .rd-avatar-stage,
  .rd-halo,
  .rd-particle,
  .rd-plate,
  .rd-sweep,
  .rd-node,
  .rd-spark,
  .rd-tag {
    animation: none !important;
  }

  .rd-avatar-entrance {
    opacity: 1;
    filter: none;
    transform: none;
  }
}