/* ================================================================
   NO PERRY — avalon-cinemagraph.css
   HO3 card pilot: portal breath, mist, runes, particles.
   Lives INSIDE .np-orbit-card-inner only — zero orbit geometry.
   ================================================================ */

.np-card-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ── Base image (static illustration + micro depth) ─────────── */
.np-avalon-cinemagraph .np-avalon-base {
  z-index: 0;
  transition: transform 0.42s ease, filter 0.32s ease;
  will-change: transform;
}

.np-orbit-card--avalon.is-interact .np-avalon-base,
.np-orbit-card--avalon:focus-visible .np-avalon-base {
  transform: scale(1.012) translateY(-2px);
}

.np-orbit-card--avalon.is-active .np-avalon-base {
  transform: scale(1.006);
}

/* Intensity multiplier — front / hover / lock via existing classes */
.np-orbit-card--avalon {
  --avalon-i: 1;
}

.np-orbit-card--avalon.is-active {
  --avalon-i: 1.14;
}

.np-orbit-card--avalon.is-interact,
.np-orbit-card--avalon:focus-visible {
  --avalon-i: 1.32;
}

/* ── Portal outer glow (aligned to left arch in artwork) ───── */
.np-avalon-portal-outer {
  position: absolute;
  left: 27%;
  top: 41%;
  width: 26%;
  height: 30%;
  transform: translate(-50%, -50%);
  border-radius: 46% 54% 48% 52%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 60% at 50% 48%,
      rgba(148, 228, 220, calc(0.34 * var(--avalon-i))) 0%,
      rgba(88, 196, 188, calc(0.16 * var(--avalon-i))) 42%,
      transparent 72%);
  opacity: calc(0.22 * var(--avalon-i));
  filter: blur(3px);
  animation: avalonPortalOuter 4.4s ease-in-out infinite;
}

/* ── Portal inner core ───────────────────────────────────────── */
.np-avalon-portal-core {
  position: absolute;
  left: 27%;
  top: 41%;
  width: 9%;
  height: 11%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle,
      rgba(210, 248, 244, calc(0.55 * var(--avalon-i))) 0%,
      rgba(120, 210, 200, calc(0.22 * var(--avalon-i))) 45%,
      transparent 78%);
  opacity: calc(0.18 * var(--avalon-i));
  filter: blur(1.5px);
  animation: avalonPortalCore 3.2s ease-in-out infinite;
}

@keyframes avalonPortalOuter {
  0%, 100% {
    opacity: calc(0.20 * var(--avalon-i));
    transform: translate(-50%, -50%) scale(0.96);
  }
  50% {
    opacity: calc(0.36 * var(--avalon-i));
    transform: translate(-50%, -50%) scale(1.04);
  }
}

@keyframes avalonPortalCore {
  0%, 100% {
    opacity: calc(0.14 * var(--avalon-i));
    transform: translate(-50%, -50%) scale(0.92);
  }
  45% {
    opacity: calc(0.28 * var(--avalon-i));
    transform: translate(-50%, -50%) scale(1.08);
  }
}

/* Secondary warm core — building doorway glow (right side) */
.np-avalon-energy {
  position: absolute;
  left: 58%;
  top: 52%;
  width: 8%;
  height: 10%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(196, 168, 120, calc(0.12 * var(--avalon-i))) 0%,
    transparent 70%);
  opacity: calc(0.16 * var(--avalon-i));
  animation: avalonEnergyPulse 5.6s ease-in-out infinite;
}

@keyframes avalonEnergyPulse {
  0%, 100% { opacity: calc(0.12 * var(--avalon-i)); }
  50% { opacity: calc(0.22 * var(--avalon-i)); }
}

/* ── Mist drift ─────────────────────────────────────────────── */
.np-avalon-mist {
  position: absolute;
  inset: -8% -12%;
  z-index: 1;
  pointer-events: none;
  opacity: calc(0.09 * var(--avalon-i));
  background:
    linear-gradient(105deg,
      transparent 8%,
      rgba(164, 210, 208, 0.14) 28%,
      rgba(140, 190, 188, 0.08) 42%,
      transparent 58%);
  mask-image: linear-gradient(180deg, transparent 0%, black 35%, black 75%, transparent 100%);
  animation: avalonMistA 12s ease-in-out infinite;
}

.np-avalon-mist--b {
  inset: -6% -10%;
  opacity: calc(0.07 * var(--avalon-i));
  background:
    linear-gradient(75deg,
      transparent 12%,
      rgba(130, 180, 190, 0.1) 38%,
      transparent 62%);
  animation: avalonMistB 9.5s ease-in-out infinite reverse;
}

@keyframes avalonMistA {
  0%, 100% { transform: translateX(-3%) translateY(1%); opacity: calc(0.07 * var(--avalon-i)); }
  50% { transform: translateX(4%) translateY(-1%); opacity: calc(0.11 * var(--avalon-i)); }
}

@keyframes avalonMistB {
  0%, 100% { transform: translateX(2%) translateY(2%); }
  50% { transform: translateX(-5%) translateY(0); }
}

/* ── Rune glints (crystal / banner positions in art) ─────────── */
.np-avalon-rune {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  background: rgba(180, 235, 228, 0.85);
  box-shadow: 0 0 4px rgba(140, 220, 210, 0.6);
  opacity: 0;
  animation: avalonRuneGlint 4.8s ease-in-out infinite;
}

.np-avalon-rune--a { left: 54%; top: 24%; animation-delay: 0s; }
.np-avalon-rune--b { left: 18%; top: 58%; animation-delay: 1.6s; }
.np-avalon-rune--c { left: 72%; top: 68%; animation-delay: 3.1s; }

@keyframes avalonRuneGlint {
  0%, 18%, 100% { opacity: 0; transform: scale(0.6); }
  28%, 42% { opacity: calc(0.55 * var(--avalon-i)); transform: scale(1); }
  52% { opacity: calc(0.25 * var(--avalon-i)); transform: scale(0.85); }
}

.np-orbit-card--avalon.is-interact .np-avalon-rune,
.np-orbit-card--avalon:focus-visible .np-avalon-rune {
  animation-duration: 3.6s;
}

/* ── Tiny particles ──────────────────────────────────────────── */
.np-avalon-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.np-avalon-particle {
  position: absolute;
  display: block;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(190, 232, 226, 0.55);
  box-shadow: 0 0 3px rgba(120, 200, 195, 0.45);
  opacity: 0;
  animation: avalonParticle var(--p-dur, 7s) ease-in-out infinite;
  animation-delay: var(--p-delay, 0s);
}

.np-avalon-particle:nth-child(1)  { left: 24%; top: 36%; --p-dur: 6.2s; --p-delay: 0s; }
.np-avalon-particle:nth-child(2)  { left: 29%; top: 44%; --p-dur: 7.8s; --p-delay: 0.8s; }
.np-avalon-particle:nth-child(3)  { left: 22%; top: 48%; --p-dur: 8.4s; --p-delay: 1.4s; }
.np-avalon-particle:nth-child(4)  { left: 31%; top: 38%; --p-dur: 6.8s; --p-delay: 2.1s; }
.np-avalon-particle:nth-child(5)  { left: 26%; top: 52%; --p-dur: 9.1s; --p-delay: 0.5s; }
.np-avalon-particle:nth-child(6)  { left: 52%; top: 28%; --p-dur: 7.2s; --p-delay: 1.9s; }
.np-avalon-particle:nth-child(7)  { left: 56%; top: 46%; --p-dur: 8.6s; --p-delay: 3s; }
.np-avalon-particle:nth-child(8)  { left: 48%; top: 54%; --p-dur: 6.5s; --p-delay: 2.6s; }
.np-avalon-particle:nth-child(9)  { left: 62%; top: 34%; --p-dur: 7.4s; --p-delay: 1.2s; }
.np-avalon-particle:nth-child(10) { left: 34%; top: 32%; --p-dur: 8.9s; --p-delay: 3.8s; }

@keyframes avalonParticle {
  0%, 100% {
    opacity: 0;
    transform: translate(0, 0);
  }
  12% {
    opacity: calc(0.35 * var(--avalon-i));
  }
  50% {
    opacity: calc(0.55 * var(--avalon-i));
    transform: translate(var(--p-x, 4px), var(--p-y, -8px));
  }
  78% {
    opacity: calc(0.2 * var(--avalon-i));
  }
}

.np-avalon-particle:nth-child(odd)  { --p-x: 5px;  --p-y: -10px; }
.np-avalon-particle:nth-child(even) { --p-x: -4px; --p-y: -7px; }

/* Hover awakening — faster portal response, no new scale on wrapper */
.np-orbit-card--avalon.is-interact .np-avalon-portal-outer,
.np-orbit-card--avalon:focus-visible .np-avalon-portal-outer {
  animation-duration: 3.4s;
  filter: blur(2px);
}

.np-orbit-card--avalon.is-interact .np-avalon-portal-core,
.np-orbit-card--avalon:focus-visible .np-avalon-portal-core {
  animation-duration: 2.6s;
}

.np-orbit-card--avalon.is-interact .np-avalon-mist,
.np-orbit-card--avalon:focus-visible .np-avalon-mist {
  opacity: calc(0.13 * var(--avalon-i));
}

/* Avalon card keeps teal overlay tint (not gold default) */
.np-orbit-card--avalon .np-orbit-card-inner::before {
  background:
    linear-gradient(180deg, rgba(6, 12, 14, 0.08), rgba(6, 12, 14, 0.78) 75%),
    radial-gradient(ellipse 70% 45% at 50% 18%, rgba(140, 220, 210, 0.08), transparent 80%);
}

/* ── Mobile tuning ───────────────────────────────────────────── */
@media (max-width: 980px) {
  .np-orbit-card--avalon {
    --avalon-i: 0.88;
  }

  .np-orbit-card--avalon.is-active {
    --avalon-i: 0.98;
  }

  .np-orbit-card--avalon.is-interact,
  .np-orbit-card--avalon:focus-visible {
    --avalon-i: 1.12;
  }

  .np-avalon-particle:nth-child(n+7) {
    display: none;
  }

  .np-avalon-portal-outer {
    filter: blur(2px);
  }

  .np-avalon-mist {
    opacity: calc(0.06 * var(--avalon-i));
  }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .np-avalon-cinemagraph .np-avalon-base {
    transform: none !important;
    transition: none !important;
  }

  .np-avalon-cinemagraph .np-avalon-portal-outer,
  .np-avalon-cinemagraph .np-avalon-portal-core,
  .np-avalon-cinemagraph .np-avalon-mist,
  .np-avalon-cinemagraph .np-avalon-energy,
  .np-avalon-cinemagraph .np-avalon-rune,
  .np-avalon-cinemagraph .np-avalon-particle {
    animation: none !important;
  }

  .np-avalon-portal-outer {
    opacity: 0.24;
  }

  .np-avalon-portal-core {
    opacity: 0.16;
  }

  .np-avalon-mist {
    opacity: 0.05;
    transform: none;
  }
}