/* Four finite, silent reveals. All layers pass mouse, touch and drag through. */
.battle-opening {
  position: fixed; inset: 0; z-index: 1100; overflow: hidden;
  pointer-events: none; user-select: none; contain: layout paint;
  animation: opening-exit 1800ms linear both;
}
.battle-opening *, .battle-opening::before, .battle-opening::after { pointer-events: none !important; }
.battle-opening i { position: absolute; display: none; }
.battle-opening__veil { inset: 0; background: #11110e; }
.battle-opening__particle {
  left: var(--x); top: 55%; width: 3px; height: 3px;
  background: #ffe0a1; border-radius: 50%; box-shadow: 0 0 8px #e7b34e;
  animation: opening-mote 1350ms ease-out var(--delay) both;
}
/* Parchment folds part along their gilded rollers, revealing the actual scene. */
.battle-opening--scroll .battle-opening__panel-top,
.battle-opening--scroll .battle-opening__panel-bottom {
  display: block; left: 0; width: 100%; height: 51%;
  background: repeating-linear-gradient(93deg, #60452a08 0 1px, transparent 1px 6px),
    radial-gradient(ellipse at 50% 100%, #f4dfac, #dac190 60%, #b89969);
  box-shadow: inset 0 0 80px #5e412846;
  animation: opening-scroll-top 1650ms cubic-bezier(.3,.02,.18,1) both;
}
.battle-opening--scroll .battle-opening__panel-top { top: 0; }
.battle-opening--scroll .battle-opening__panel-bottom { bottom: 0; transform-origin: bottom; animation-name: opening-scroll-bottom; }
.battle-opening--scroll .battle-opening__panel-top::before,
.battle-opening--scroll .battle-opening__panel-bottom::before {
  content:""; position:absolute; inset:0; opacity:.28;
  background:var(--battle-scene-image) var(--battle-scene-position) / cover no-repeat;
  mix-blend-mode:multiply;
}
.battle-opening--scroll .battle-opening__panel-top::after,
.battle-opening--scroll .battle-opening__panel-bottom::after {
  content:""; position:absolute; inset:22px 30px; border:4px double #8f692e90;
  box-shadow:inset 0 0 0 5px #edd5a138;
}
.battle-opening--scroll .battle-opening__rod-top,
.battle-opening--scroll .battle-opening__rod-bottom {
  display: block; left: -2%; top: calc(50% - 7px); width: 104%; height: 14px; border-radius: 8px;
  background: linear-gradient(#35200e, #b89250 26%, #f2d991 42%, #79562a 65%, #24180e);
  box-shadow: 0 3px 18px #21180ca8, 0 0 14px #efd79578;
  animation: opening-roller-top 1650ms cubic-bezier(.3,.02,.18,1) both;
}
.battle-opening--scroll .battle-opening__rod-bottom { animation-name: opening-roller-bottom; }
.battle-opening--scroll .battle-opening__seal {
  display: block; left: calc(50% - 31px); top: calc(50% - 31px); width: 62px; height: 62px;
  border: 4px double #8a2e20; border-radius: 4px; transform: rotate(-8deg);
  background: repeating-linear-gradient(90deg, transparent 0 9px, #8a2e2060 9px 13px), #a136251c;
  box-shadow: 0 0 0 5px #d8bc83; animation: opening-seal 800ms ease-out both;
}
.battle-opening--scroll .battle-opening__particle { display: block; }
/* A cold edge sweeps diagonally; the cut parts into two dark silk curtains. */
.battle-opening--blade .battle-opening__panel-top,
.battle-opening--blade .battle-opening__panel-bottom {
  display: block; inset: 0; background: radial-gradient(ellipse at 50% 50%, #243035, #0c1113 75%);
  clip-path: polygon(0 0,100% 0,0 100%); animation: opening-blade-top 1700ms ease-in-out both;
}
.battle-opening--blade .battle-opening__panel-bottom {
  clip-path: polygon(100% 0,100% 100%,0 100%); animation-name: opening-blade-bottom;
}
.battle-opening--blade .battle-opening__cut,
.battle-opening--blade .battle-opening__cut-echo {
  display: block; left: -30%; top: 49%; width: 160%; height: 3px;
  background: linear-gradient(90deg,transparent,#b9e8ee 15%,#fff 48%,#f2d292 80%,transparent);
  box-shadow: 0 0 12px 3px #d6f4ffb0, 0 0 38px 8px #80b5c774;
  transform: rotate(var(--opening-cut-angle, -29deg)); animation: opening-cut 1150ms ease-out both;
}
.battle-opening--blade .battle-opening__cut-echo { height: 1px; margin-top: 15px; animation-delay: 110ms; }
.battle-opening--blade .battle-opening__flare {
  display:block; inset:-30%; background:radial-gradient(ellipse,#fff8dc8f, #c3ebf138 15%,transparent 45%);
  animation:opening-blade-flash 900ms ease-out both;
}
.battle-opening--blade .battle-opening__particle { display: block; top: var(--x); animation-name: opening-shard; }
/* Molten edges and embers eat through the veil from the center outward. */
.battle-opening--flame .battle-opening__veil {
  display: block; background: radial-gradient(ellipse, #42170b, #160d08 70%);
  animation: opening-burn-veil 1700ms ease-out both;
}
.battle-opening--flame .battle-opening__flare {
  display: block; inset: -15%; border-radius: 50%;
  background: radial-gradient(ellipse, transparent 27%, #ffcf6475 32%, #ff6a1aac 38%, #a628007a 44%, transparent 58%);
  animation: opening-fire 1700ms ease-out both;
}
.battle-opening--flame .battle-opening__particle {
  display: block; top: 90%; width: 4px; height: 10px; background: #fff0b0;
  box-shadow: 0 0 7px #ffe083,0 0 18px #ff6900; animation-name: opening-ember;
}
.battle-opening--flame .battle-opening__particle::before {
  content:""; position:absolute; left:-16px; top:-65px; width:36px; height:95px;
  border-radius:80% 8% 60% 40%; transform:rotate(18deg);
  background:radial-gradient(ellipse at 40% 85%,#fff5b7 0 9%,#ffc34a 23%,#ff6414 48%,#b3260050 70%,transparent 76%);
  animation:opening-flame-tongue 420ms ease-in-out var(--delay) 4 alternate both;
}
/* An ink blossom breaks into a gold-rimmed ripple and drifting flecks. */
.battle-opening--ink .battle-opening__ink {
  display: block; inset: -30%; border-radius: 45%;
  background: radial-gradient(ellipse, #0d1817 0 25%, #1b302b 35%, #0a1517 50%, transparent 63%);
  animation: opening-ink 1700ms cubic-bezier(.22,.6,.22,1) both;
}
.battle-opening--ink .battle-opening__ring,
.battle-opening--ink .battle-opening__ring-outer {
  display: block; left: 50%; top: 50%; width: min(60vw,65vh); aspect-ratio: 1;
  border: 2px solid #ead6a0; border-radius: 50%; box-shadow: 0 0 18px #d8b65b65,inset 0 0 24px #b3975b50;
  animation: opening-ring 1500ms ease-out both;
}
.battle-opening--ink .battle-opening__ring-outer { border: 1px dashed #8baf9d; animation-delay: 130ms; }
.battle-opening--ink .battle-opening__particle { display: block; background: #dfd9ae; animation-name: opening-shard; }
.battle-opening--ink .battle-opening__particle::before {
  content:""; position:absolute; width:calc(24px + var(--n) * 2px); height:18px;
  border-radius:75% 35% 65% 25%; background:radial-gradient(ellipse,#162722c0,#30463e50 55%,transparent 75%);
  transform:rotate(calc(var(--n) * 23deg)); box-shadow:12px 14px 0 -7px #192d2760;
}
@keyframes opening-exit { 0%,75% {opacity:1} 100% {opacity:0} }
@keyframes opening-scroll-top { 0%,12% {transform:translateY(0)} 85%,100% {transform:translateY(-105%)} }
@keyframes opening-scroll-bottom { 0%,12% {transform:translateY(0)} 85%,100% {transform:translateY(105%)} }
@keyframes opening-roller-top { 0%,12% {transform:translateY(0)} 85%,100% {transform:translateY(-55vh)} }
@keyframes opening-roller-bottom { 0%,12% {transform:translateY(0)} 85%,100% {transform:translateY(55vh)} }
@keyframes opening-seal { 0%,15% {opacity:1;scale:1} 100% {opacity:0;scale:1.4} }
@keyframes opening-mote { 0% {opacity:0;transform:translate(0,0)} 20% {opacity:1} 100% {opacity:0;transform:translate(var(--drift),-140px)} }
@keyframes opening-blade-top { 0%,27% {transform:translate(0,0)} 100% {transform:translate(-65%,-65%)} }
@keyframes opening-blade-bottom { 0%,27% {transform:translate(0,0)} 100% {transform:translate(65%,65%)} }
@keyframes opening-cut { 0%,12% {opacity:0;transform:rotate(var(--opening-cut-angle, -29deg)) scaleX(0)} 32% {opacity:1;transform:rotate(var(--opening-cut-angle, -29deg)) scaleX(1)} 100% {opacity:0;transform:rotate(var(--opening-cut-angle, -29deg)) scaleX(1.2)} }
@keyframes opening-shard { 0%,20% {opacity:0;transform:translate(0,0) scale(.5)} 35% {opacity:1} 100% {opacity:0;transform:translate(var(--drift),calc(var(--drift) * -.8)) scale(0)} }
@keyframes opening-blade-flash { 0%,27% {opacity:0;transform:scale(.1)} 38% {opacity:1} 100% {opacity:0;transform:scale(1.4)} }
@keyframes opening-flame-tongue { from {transform:rotate(18deg) scaleY(.7)} to {transform:rotate(-12deg) scaleY(1.35)} }
@keyframes opening-burn-veil { 0%,10% {opacity:1;clip-path:circle(150% at 50% 50%)} 45% {opacity:.8} 100% {opacity:0;clip-path:circle(0% at 50% 50%)} }
@keyframes opening-fire { 0% {opacity:0;transform:scale(.15) rotate(-8deg)} 25% {opacity:1} 65% {opacity:.95} 100% {opacity:0;transform:scale(2.4) rotate(12deg)} }
@keyframes opening-ember { 0% {opacity:0;transform:translate(0,0) scale(.5)} 20% {opacity:1} 100% {opacity:0;transform:translate(var(--drift),-85vh) scale(.15)} }
@keyframes opening-ink { 0%,10% {opacity:1;transform:scale(1.2) rotate(-8deg)} 75%,100% {opacity:0;transform:scale(.05) rotate(18deg)} }
@keyframes opening-ring { 0%,10% {opacity:0;transform:translate(-50%,-50%) scale(.05) rotate(0)} 35% {opacity:1} 100% {opacity:0;transform:translate(-50%,-50%) scale(3) rotate(35deg)} }
@media (max-width:900px), (pointer:coarse) {
  .battle-opening__particle:nth-last-child(-n+8) { display:none; }
  .battle-opening--scroll .battle-opening__seal { width:44px;height:44px;left:calc(50% - 22px);top:calc(50% - 22px); }
}
@media (prefers-reduced-motion:reduce) { .battle-opening { display:none; } }