/* 0REI shared backdrop (components/zp/backdrop.tsx). Japanese motifs only: seigaiha waves and dragon scales. */
.zb { position: absolute; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; background: #000000; }

.zb__scales {
  position: absolute; inset: -10% 0 -40%; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='28' viewBox='0 0 48 28'%3E%3Cg fill='none' stroke='%23e0b04a' stroke-width='1.2'%3E%3Cpath d='M0 28a24 24 0 0 1 24-24 24 24 0 0 1 24 24'/%3E%3Cpath d='M-24 14a24 24 0 0 1 24-24 24 24 0 0 1 24 24M24 14a24 24 0 0 1 24-24 24 24 0 0 1 24 24'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 48px 28px;
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 80%, transparent);
}

.zb__light { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 45% at 62% 108%, rgba(224, 176, 74, .34), rgba(224, 176, 74, .1) 45%, transparent 72%); }

.zb__shafts { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(transparent 5%, #000 60%, #000); mask-image: linear-gradient(transparent 5%, #000 60%, #000); }
.zb__shafts span { position: absolute; bottom: -10%; width: 14%; height: 120%; background: linear-gradient(0deg, rgba(240, 200, 110, .16), rgba(240, 200, 110, 0) 85%); filter: blur(18px); transform-origin: 50% 100%; }
.zb__shafts span:nth-child(1) { left: 44%; transform: rotate(-9deg); }
.zb__shafts span:nth-child(2) { left: 56%; width: 9%; transform: rotate(-2deg); opacity: .8; }
.zb__shafts span:nth-child(3) { left: 66%; transform: rotate(5deg); opacity: .9; }
.zb__shafts span:nth-child(4) { left: 72%; width: 8%; transform: rotate(12deg); opacity: .6; }

.zb__waves {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34%; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cg fill='none' stroke='%23e0b04a' stroke-width='1.3'%3E%3Cg id='w'%3E%3Ccircle cx='40' cy='40' r='38'/%3E%3Ccircle cx='40' cy='40' r='30'/%3E%3Ccircle cx='40' cy='40' r='22'/%3E%3Ccircle cx='40' cy='40' r='14'/%3E%3C/g%3E%3Cuse href='%23w' x='-40' y='-20'/%3E%3Cuse href='%23w' x='40' y='-20'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 40px; background-position: center bottom;
  -webkit-mask-image: linear-gradient(transparent, #000 45%); mask-image: linear-gradient(transparent, #000 45%);
}

.zb__embers span {
  position: absolute; bottom: -12px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%;
  background: #f0c86e; box-shadow: 0 0 8px 2px rgba(224, 176, 74, .55); opacity: 0;
}

@media (max-width: 719px) {
  .zb__embers span:nth-child(n+16) { display: none; }
  .zb__shafts span:nth-child(4) { display: none; }
  .zb__shafts span { transform: none !important; }
  .zb__shafts span:nth-child(1) { left: 30%; } .zb__shafts span:nth-child(2) { left: 50%; } .zb__shafts span:nth-child(3) { left: 70%; }
}

@media (prefers-reduced-motion: no-preference) {
  .zb__scales { animation: zb-scales 60s linear infinite; }
  .zb__embers span { animation: zb-ember var(--d) linear var(--delay) infinite; }
  .zb__shafts span { animation: zb-shaft 9s ease-in-out infinite alternate; }
  .zb__shafts span:nth-child(2) { animation-delay: -3s; }
  .zb__shafts span:nth-child(3) { animation-delay: -6s; }
}
@media (prefers-reduced-motion: reduce) {
  .zb__embers span { opacity: .5; bottom: auto; top: var(--y); }
}
@keyframes zb-scales { from { transform: translateY(0); } to { transform: translateY(-28px); } }
@keyframes zb-ember {
  0% { opacity: 0; transform: translate(0, 0); }
  10% { opacity: .9; }
  80% { opacity: .5; }
  100% { opacity: 0; transform: translate(var(--drift), -105vh); }
}
@keyframes zb-shaft { from { opacity: .55; } to { opacity: 1; } }