/*
 * Prometeo interaction layer
 * Micro-animations, glow accents and mobile refinements.
 * Kept separate from prometeo.css so the base layout remains stable.
 */

@keyframes prom-border-scan {
  0% { background-position: 0% 50%; opacity: .55; }
  50% { background-position: 100% 50%; opacity: .95; }
  100% { background-position: 0% 50%; opacity: .55; }
}

@keyframes prom-pulse-bar {
  0%, 100% { transform: scaleY(.42); filter: saturate(.85); }
  35% { transform: scaleY(1); filter: saturate(1.25); }
  70% { transform: scaleY(.64); filter: saturate(1); }
}

@keyframes prom-grid-drift {
  0% { transform: translate3d(0, 0, 0); opacity: .20; }
  50% { transform: translate3d(-18px, 8px, 0); opacity: .32; }
  100% { transform: translate3d(0, 0, 0); opacity: .20; }
}

@keyframes prom-orbit-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(12px, -8px, 0) rotate(3deg); }
}

.prom-shell::before {
  animation: prom-grid-drift 18s ease-in-out infinite;
}

.prom-orbit--one,
.prom-orbit--two {
  animation: prom-orbit-drift 16s ease-in-out infinite;
}

.prom-orbit--two {
  animation-duration: 21s;
  animation-direction: reverse;
}

.prom-hero__signal,
.prom-player,
.prom-card,
.prom-spec-list div {
  position: relative;
  overflow: hidden;
}

.prom-hero__signal::before,
.prom-player::before,
.prom-card::before,
.prom-spec-list div::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,138,42,.08), rgba(99,216,255,.68), rgba(255,207,122,.46), rgba(182,124,255,.42), rgba(255,138,42,.08));
  background-size: 320% 320%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: prom-border-scan 7s ease-in-out infinite;
}

.prom-hero__signal > *,
.prom-player > *,
.prom-card > *,
.prom-spec-list div > * {
  position: relative;
  z-index: 1;
}

.prom-pulse i {
  transform-origin: bottom center;
  animation: prom-pulse-bar 2.8s ease-in-out infinite;
}

.prom-pulse i:nth-child(2) { animation-delay: .22s; }
.prom-pulse i:nth-child(3) { animation-delay: .44s; }
.prom-pulse i:nth-child(4) { animation-delay: .12s; }
.prom-pulse i:nth-child(5) { animation-delay: .34s; }

.prom-diagram i {
  background-size: 220% 100%;
  animation: prom-border-scan 5.5s ease-in-out infinite;
}

@media (max-width: 900px) {
  .prom-hero__matrix {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 24px;
  }

  .prom-hero h1 {
    max-width: 100%;
    font-size: clamp(4.8rem, 18vw, 8.6rem);
    line-height: .82;
    letter-spacing: -.075em;
    overflow-wrap: normal;
  }

  .prom-lead {
    max-width: 100%;
  }
}

@media (max-width: 560px) {
  .prom-shell {
    overflow: hidden;
  }

  .prom-header,
  .prom-footer,
  .prom-hero,
  .prom-listen,
  .prom-split,
  .prom-cards,
  .prom-system,
  .prom-specs {
    width: min(100%, calc(100vw - 2rem));
  }

  .prom-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .prom-nav a {
    text-align: center;
  }

  .prom-kicker {
    max-width: 100%;
    font-size: .72rem;
    line-height: 1.55;
    word-break: normal;
  }

  .prom-hero h1 {
    font-size: clamp(3.45rem, 20vw, 5.6rem);
    line-height: .86;
    letter-spacing: -.07em;
    max-width: 100%;
  }

  .prom-phonetic {
    max-width: 100%;
    overflow-wrap: anywhere;
    line-height: 1.55;
  }

  .prom-lead {
    font-size: 1.08rem;
    line-height: 1.62;
  }

  .prom-hero__signal {
    width: 100%;
  }

  .prom-hero__signal p {
    overflow-wrap: anywhere;
  }

  .prom-listen h2,
  .prom-split h2,
  .prom-system h2,
  .prom-specs h2 {
    font-size: clamp(2.15rem, 13vw, 3.6rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .prom-shell::before,
  .prom-orbit--one,
  .prom-orbit--two,
  .prom-hero__signal::before,
  .prom-player::before,
  .prom-card::before,
  .prom-spec-list div::before,
  .prom-pulse i,
  .prom-diagram i {
    animation: none;
  }
}