.ep-entry-guardian {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  background:
    radial-gradient(ellipse 58% 66% at 72% 47%, rgba(176, 115, 49, .19), transparent 78%),
    radial-gradient(ellipse 33% 33% at 92% 13%, rgba(55, 82, 145, .12), transparent 82%);
}

.ep-entry-guardian::before {
  position: absolute;
  inset: -12%;
  content: "";
  background-image:
    linear-gradient(rgba(116, 196, 219, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116, 196, 219, .055) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 70% 54%, #000 8%, transparent 83%);
  mask-image: radial-gradient(ellipse 72% 70% at 70% 54%, #000 8%, transparent 83%);
  animation: eg-grid-drift 25s linear infinite alternate;
}

.ep-entry-guardian-stage {
  position: absolute;
  top: 50%;
  right: 0;
  width: clamp(690px, 75vw, 1200px);
  aspect-ratio: 10 / 9;
  transform: translateY(-50%);
}

.ep-entry-guardian-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ep-entry-guardian .eg-guardian-body,
.ep-entry-guardian .eg-face {
  transform-box: fill-box;
  transform-origin: center;
  animation: eg-presence 8s ease-in-out infinite;
}

.ep-entry-guardian .eg-face { animation-delay: -.5s; }
.ep-entry-guardian .eg-intruder,
.ep-entry-guardian .eg-probing-hand {
  transform-box: fill-box;
  transform-origin: center;
  animation: eg-reach 8s ease-in-out infinite;
}

.ep-entry-guardian .eg-record-back { animation: eg-record-drift 7s ease-in-out infinite; }
.ep-entry-guardian .eg-record-front { animation: eg-record-drift 7s ease-in-out -2.1s infinite reverse; }
.ep-entry-guardian .eg-barrier-line { animation: eg-barrier-light 8s ease-in-out infinite; }
.ep-entry-guardian .eg-barrier-ripple { animation: eg-barrier-flow 15s linear infinite; }
.ep-entry-guardian .eg-intercept { transform-box: fill-box; transform-origin: center; animation: eg-intercept-pulse 8s ease-out infinite; }
.ep-entry-guardian .eg-motes { animation: eg-motes-breathe 5s ease-in-out infinite; }

@keyframes eg-grid-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-22px, 18px, 0); }
}

@keyframes eg-presence {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes eg-reach {
  0%, 15%, 100% { transform: translateX(5px); opacity: .65; }
  45%, 55% { transform: translateX(-10px); opacity: 1; }
  68% { transform: translateX(9px); opacity: .56; }
}

@keyframes eg-record-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes eg-barrier-light {
  0%, 30%, 100% { opacity: .55; }
  47%, 60% { opacity: 1; }
}

@keyframes eg-barrier-flow {
  to { stroke-dashoffset: -224; }
}

@keyframes eg-intercept-pulse {
  0%, 30%, 100% { transform: scale(.72); opacity: .42; }
  48% { transform: scale(1.23); opacity: 1; }
  61% { transform: scale(.91); opacity: .72; }
}

@keyframes eg-motes-breathe {
  0%, 100% { opacity: .35; }
  45% { opacity: .9; }
}

@media (max-width: 960px) {
  .ep-entry-guardian {
    background: radial-gradient(ellipse 95% 52% at 52% 27%, rgba(173, 110, 48, .23), transparent 86%);
  }

  .ep-entry-guardian::before {
    background-size: 52px 52px;
    -webkit-mask-image: radial-gradient(ellipse 90% 45% at 52% 27%, #000 12%, transparent 85%);
    mask-image: radial-gradient(ellipse 90% 45% at 52% 27%, #000 12%, transparent 85%);
  }

  .ep-entry-guardian-stage {
    top: max(-80px, -9vh);
    right: 50%;
    width: min(680px, 165vw);
    transform: translateX(50%);
  }
}

@media (max-width: 380px) {
  .ep-entry-guardian-stage { top: -68px; }
}

@media (prefers-reduced-motion: reduce) {
  .ep-entry-guardian *,
  .ep-entry-guardian::before {
    animation: none !important;
  }
}

/* Local WebGL light shares the illustration's coordinates; SVG is the fallback. */
.ep-entry-light { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ep-entry-guardian-svg { position: relative; }
.ep-entry-guardian .eg-face image { filter: sepia(.38) saturate(.8); }
.ep-entry-guardian .eg-face { filter: drop-shadow(0 0 18px rgba(255,198,106,.22)); }
.ep-entry-guardian .eg-protection-fill { fill-opacity: .95; }
.ep-entry-guardian .eg-cloud { opacity: .8; }
.ep-entry-guardian .eg-cloud-label { font-family: var(--mono,monospace); }
.ep-entry-guardian .eg-barrier-line { stroke-width: 5; filter: drop-shadow(0 0 10px #eab357); }
.ep-entry-guardian .eg-record-front { filter: drop-shadow(0 0 12px rgba(242,183,93,.2)); }
@media (prefers-reduced-motion: no-preference) {
  .ep-entry-guardian .eg-cloud { animation: eg-cloud-drift 8s ease-in-out infinite; }
  .ep-entry-guardian .eg-cold-probe { animation: eg-cold-flow 8s linear infinite; }
  .ep-entry-guardian .eg-cold-particle { animation: eg-deflect 8s ease-in-out infinite; }
}
@keyframes eg-cloud-drift { 50% { transform: translateY(-6px); } }
@keyframes eg-cold-flow { 0%,25% { opacity: .25; } 45% { opacity: .9; } 60%,100% { opacity: .15; stroke-dashoffset: 90; } }
@keyframes eg-deflect { 0%,20% { transform: translate(82px,-54px); opacity: 0; } 38% { opacity: .8; } 48% { transform: translate(-22px,8px); opacity: 1; } 64%,100% { transform: translate(65px,40px); opacity: 0; } }

@media (max-width: 600px) {
  .ep-entry-guardian-stage { top: -32px; right: calc(50% + 12px); width: 110vw; }
}