/* =====================================================================
   PRIMEz HUB — Live Themes (css/prz-live-theme.css)
   Base image pans fwd/back (body motion). A distortion layer, masked to
   an ELLIPSE over the HAIR ONLY, ripples the hair (face + hand untouched).
   Tanjiro adds a moving water-slash + wind streaks + fire embers.
   Both image layers share the SAME pan so they never drift apart.
   ===================================================================== */
.prz-svg { position: absolute; width: 0; height: 0; overflow: hidden; }

.prz-stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; display: none; pointer-events: none; }
body.prz-live-on .prz-stage { display: block; }
body.prz-live-on { background: transparent !important; }
body.prz-live-on .header-nav, body.prz-live-on main { position: relative; z-index: 1; }

.prz-layer { position: absolute; inset: -4vmax; }

/* BOTH image layers pan identically so they stay aligned (no face bleed) */
.prz-art, .prz-hair { animation: przPan 18s ease-in-out infinite alternate; }
.prz-art img, .prz-hair img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prz-art img { filter: saturate(1.1) contrast(1.03) brightness(.95); }
@keyframes przPan {
  0%   { transform: scale(1.02) translate3d(0, 0, 0); }
  50%  { transform: scale(1.06) translate3d(-0.6%, 0.8%, 0); }
  100% { transform: scale(1.10) translate3d(0.6%, -0.8%, 0); }
}

/* distortion layer masked to an ellipse over the hair only */
.prz-hair {
  -webkit-mask-image: radial-gradient(ellipse var(--prz-hair-rx, 16vw) var(--prz-hair-ry, 12vh) at var(--prz-hair-x, 46%) var(--prz-hair-y, 24%), #000 40%, transparent 78%);
          mask-image: radial-gradient(ellipse var(--prz-hair-rx, 16vw) var(--prz-hair-ry, 12vh) at var(--prz-hair-x, 46%) var(--prz-hair-y, 24%), #000 40%, transparent 78%);
}
.prz-hair img {
  filter: url(#prz-wind) saturate(1.18) brightness(1.04) contrast(1.03);
  animation: przSway 6.5s ease-in-out infinite;
}
@keyframes przSway { 0%,100% { transform: translateX(0); } 25% { transform: translateX(3px); } 50% { transform: translateX(-2px); } 75% { transform: translateX(3px); } }

/* particles */
.prz-fx { position: absolute; inset: 0; }

/* wind streaks */
.prz-wind { position: absolute; inset: -4vmax; pointer-events: none; mix-blend-mode: screen; opacity: .35;
  background: repeating-linear-gradient(104deg, transparent 0 46px, rgba(255,255,255,.07) 46px 48px, transparent 48px 96px);
  background-size: 220% 220%; animation: przWind 7s linear infinite; }
@keyframes przWind { 0% { background-position: 0 0; } 100% { background-position: -260px 220px; } }
body:not(.prz-wind-on) .prz-wind { display: none; }

/* moving water slashes */
.prz-water { position: absolute; inset: 0; mix-blend-mode: screen; opacity: .55; pointer-events: none;
  background:
    linear-gradient(102deg, transparent 40%, rgba(0,229,255,.22) 47%, rgba(255,255,255,.38) 50%, rgba(0,153,255,.22) 53%, transparent 60%),
    linear-gradient(102deg, transparent 58%, rgba(125,211,252,.18) 64%, transparent 72%),
    radial-gradient(40% 30% at 30% 66%, rgba(0,229,255,.14), transparent 70%);
  background-size: 220% 220%, 260% 260%, 100% 100%;
  animation: przWater 5s linear infinite; }
@keyframes przWater { 0% { background-position: 130% 10%, -40% 90%, 0 0; } 100% { background-position: -30% 90%, 140% 10%, 0 0; } }
body:not(.prz-water-on) .prz-water { display: none; }

/* moving moon (Cyber Night) */
.prz-moon { position: absolute; top: 15%; right: 20%; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, #a0a0ff 0%, #5050a0 50%, transparent 70%);
  box-shadow: 0 0 80px rgba(100,100,255,.6); animation: przMoon 30s ease-in-out infinite; }
@keyframes przMoon { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-30px,20px); } }
body:not(.prz-moon-on) .prz-moon { display: none; }

/* neon light sweep (Cyber Night) */
.prz-light { position: absolute; top: 0; left: 0; width: 200%; height: 100%; mix-blend-mode: overlay; opacity: .7; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(138,43,226,.20) 40%, rgba(0,191,255,.20) 60%, transparent 100%);
  animation: przLight 15s linear infinite; }
@keyframes przLight { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
body:not(.prz-light-on) .prz-light { display: none; }

.prz-vignette { position: absolute; inset: 0;
  background: radial-gradient(125% 92% at 50% 42%, transparent 50%, rgba(0,0,0,.6) 84%, rgba(0,0,0,.85) 100%); }

@media (prefers-reduced-motion: reduce) {
  .prz-art, .prz-hair, .prz-hair img, .prz-water, .prz-wind { animation: none !important; }
}

@media (max-width: 820px) {
  .prz-stage { background: radial-gradient(130% 90% at 50% 28%, #0b1020, #05060a 70%); }
  .prz-art, .prz-hair { animation: none !important; }
  .prz-art img, .prz-hair img { object-fit: contain !important; object-position: center top !important; filter: saturate(1.06) brightness(.98) !important; }
  .prz-hair, .prz-water, .prz-wind, .prz-moon, .prz-light { display: none !important; }
  .prz-vignette { background: linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.72)) !important; }
}

/* =====================================================================
   Live Theme High-Contrast Dark Controls & Buttons
   Guarantees all home page buttons, pills, search inputs, and cards
   remain boldly visible with crisp contrast over bright animated art
   ===================================================================== */
body.prz-live-on .btn,
body.prz-live-on .btn-subtle,
body.prz-live-on #homeHeroDocsBtn,
body.prz-live-on #homeDiscordBannerBtn,
body.prz-live-on .filter-pills-row .pill-button,
body.prz-live-on #view-home .btn {
  background: rgba(10, 12, 20, 0.92) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.75) !important;
  color: #f1f5f9 !important;
}

body.prz-live-on .btn:hover,
body.prz-live-on .btn-subtle:hover,
body.prz-live-on #homeHeroDocsBtn:hover,
body.prz-live-on #homeDiscordBannerBtn:hover,
body.prz-live-on #view-home .btn:hover {
  background: rgba(18, 22, 36, 0.96) !important;
  border-color: rgba(168, 85, 247, 0.6) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.85), 0 0 14px rgba(168, 85, 247, 0.35) !important;
  color: #ffffff !important;
}

body.prz-live-on .filter-pills-row .pill-button.active {
  background: rgba(147, 51, 234, 0.88) !important;
  border-color: #a855f7 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 22px rgba(168, 85, 247, 0.55) !important;
}

body.prz-live-on #homeHeroSignInBtn {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.8), 0 0 18px rgba(168, 85, 247, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
}

body.prz-live-on .spotlight-search,
body.prz-live-on .tool-card,
body.prz-live-on .script-card-r,
body.prz-live-on .detail-section-card {
  background: rgba(10, 13, 22, 0.92) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7) !important;
}