/* ═══════════════════════════════════════
   manifesto-portal.css — Portal Cinematográfico
   ═══════════════════════════════════════ */

.portalScene {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.portalCore {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

.coreLight {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 240, 220, 0.7) 0%,
    rgba(252, 193, 155, 0.5) 30%,
    rgba(235, 154, 110, 0.2) 60%,
    transparent 100%
  );
  filter: blur(8px);
  animation: corePulse 3s ease-in-out infinite;
}

.glowMid {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(252, 183, 145, 0.35) 0%,
    rgba(235, 154, 110, 0.18) 35%,
    rgba(176, 87, 51, 0.08) 60%,
    transparent 80%
  );
  filter: blur(25px);
  animation: glowPulse 5s ease-in-out infinite;
}

.glowOuter {
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(176, 87, 51, 0.08) 0%,
    rgba(137, 66, 37, 0.04) 40%,
    transparent 70%
  );
  filter: blur(40px);
}

.ring {
  position: absolute;
  border-radius: 50%;
  border-style: solid;
  border-color: rgba(235, 154, 110, 0.18);
  box-shadow:
    0 0 15px rgba(235, 154, 110, 0.06),
    inset 0 0 10px rgba(235, 154, 110, 0.03);
  animation: ringPulse 7s ease-in-out infinite alternate, ringRotate 55s linear infinite;
}

.ring:nth-child(odd) {
  animation-direction: alternate, reverse;
}

.ring:nth-child(even) {
  border-color: rgba(252, 163, 125, 0.12);
}

.ring:nth-child(-n+4) {
  border-color: rgba(252, 193, 155, 0.40);
  box-shadow:
    0 0 25px rgba(252, 183, 145, 0.10),
    inset 0 0 15px rgba(252, 183, 145, 0.05);
}

.arc {
  position: absolute;
  border-radius: 50%;
  border: 2px solid transparent;
  animation: arcRotate 20s linear infinite;
}

.arc::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: conic-gradient(
    from 0deg,
    rgba(252, 193, 155, 0.5) 0deg,
    transparent 40deg,
    transparent 90deg,
    rgba(252, 193, 155, 0.4) 90deg,
    transparent 130deg,
    transparent 180deg,
    rgba(252, 193, 155, 0.35) 180deg,
    transparent 220deg,
    transparent 270deg,
    rgba(252, 193, 155, 0.3) 270deg,
    transparent 310deg,
    transparent 360deg
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 2px),
    black calc(100% - 2px)
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 2px),
    black calc(100% - 2px)
  );
}

.lightRays {
  position: absolute;
  width: 500px;
  height: 500px;
  animation: raysRotate 80s linear infinite;
  opacity: 0.35;
}

.ray {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250px;
  height: 1px;
  transform-origin: 0 0;
  background: linear-gradient(
    90deg,
    rgba(252, 193, 155, 0.6) 0%,
    rgba(252, 193, 155, 0.1) 40%,
    transparent 100%
  );
}

.energyPulse {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1.5px solid rgba(252, 193, 155, 0.4);
  animation: energyExpand 3.5s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.energyPulse2 {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(252, 193, 155, 0.3);
  animation: energyExpand 3.5s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  animation-delay: -1.75s;
}

.silhouetteWrap {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48vh;
  max-width: 480px;
  z-index: 3;
  pointer-events: none;
}

.silhouetteImg {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(252, 193, 155, 0.6);
  animation: particleAscent linear infinite;
  box-shadow: 0 0 4px rgba(252, 183, 145, 0.3);
}

@keyframes corePulse {
  0%, 100% { transform: scale(0.92); opacity: 0.8; }
  50% { transform: scale(1.1); opacity: 1; }
}

@keyframes glowPulse {
  0%, 100% { transform: scale(0.95); opacity: 0.85; }
  50% { transform: scale(1.05); opacity: 1; }
}

@keyframes ringPulse {
  0% { transform: scale(0.98); opacity: 0.55; }
  100% { transform: scale(1.02); opacity: 0.95; }
}

@keyframes ringRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes arcRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes raysRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes energyExpand {
  0% { transform: scale(0.5); opacity: 0.9; }
  100% { transform: scale(6); opacity: 0; }
}

@keyframes particleAscent {
  0% {
    transform: translate3d(0, 40px, 0) scale(0.8);
    opacity: 0;
  }
  15% { opacity: 0.7; }
  85% { opacity: 0.3; }
  100% {
    transform: translate3d(0, -180px, 0) scale(0.2);
    opacity: 0;
  }
}

@media (max-width: 1023px) {
  .silhouetteWrap {
    display: none;
  }
  .portalCore {
    transform: scale(0.7);
  }
}