/* ============================================================
   火影主题入场动画  naruto-entrance
   流程：写轮眼开眼 → 红闪切换主题 → 螺旋丸冲击 → 幕布拉开 + Q版鸣人跑过
   JS 驱动时间轴（naruto-entrance.js），本文件只管样式与关键帧
   ============================================================ */

.ne-overlay {
  position: fixed;
  /* 比视口大一圈：body 震屏（±7px）时边缘不露白 */
  inset: -24px;
  z-index: 99999;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.ne-overlay.ne-show { opacity: 1; }
.ne-overlay.ne-fadeout {
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* ---------- 黑幕（左右两块，可拉开） ---------- */
.ne-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(88, 42, 160, 0.22), transparent 70%),
    #0A0A10;
  transition: transform 0.9s cubic-bezier(0.85, 0, 0.15, 1);
  will-change: transform;
}
.ne-panel-l { left: 0; }
.ne-panel-r { right: 0; }
.ne-overlay.ne-open .ne-panel-l { transform: translateX(-102%); }
.ne-overlay.ne-open .ne-panel-r { transform: translateX(102%); }

/* ---------- 红色闪光（开眼一瞬） ---------- */
.ne-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 46%, rgba(255, 90, 60, 0.95), rgba(192, 32, 24, 0.75) 45%, rgba(120, 8, 8, 0.4) 75%);
  opacity: 0;
  pointer-events: none;
}
.ne-flash.ne-on { animation: ne-flash-anim 0.24s ease-out; }
@keyframes ne-flash-anim {
  0%   { opacity: 0; }
  35%  { opacity: 0.9; }
  100% { opacity: 0; }
}

/* ---------- 屏幕震动 ---------- */
body.ne-shake { animation: ne-shake-anim 0.32s linear; }
@keyframes ne-shake-anim {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-7px, 3px); }
  30% { transform: translate(6px, -4px); }
  45% { transform: translate(-5px, -3px); }
  60% { transform: translate(5px, 3px); }
  75% { transform: translate(-3px, 1px); }
  90% { transform: translate(2px, -1px); }
}

/* ---------- 万花筒写轮眼 ---------- */
.ne-eye-wrap {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: min(44vmin, 340px);
  aspect-ratio: 1;
  pointer-events: none;
}
.ne-eye-glow {
  position: absolute;
  inset: -28%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.55), rgba(88, 28, 135, 0.28) 55%, transparent 72%);
  animation: ne-glow-pulse 1.1s ease-in-out infinite;
}
@keyframes ne-glow-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.12); opacity: 1; }
}
.ne-eye {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  filter: drop-shadow(0 0 24px rgba(192, 38, 30, 0.55));
  opacity: 0;
  will-change: transform, opacity;
}
.ne-eye.ne-in  { animation: ne-eye-in 0.85s cubic-bezier(0.22, 1.4, 0.36, 1) forwards; }
.ne-eye.ne-out { animation: ne-eye-out 0.42s cubic-bezier(0.55, 0, 0.9, 0.4) forwards; }
@keyframes ne-eye-in {
  0%   { opacity: 0; transform: rotate(-720deg) scale(0.05); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes ne-eye-out {
  0%   { opacity: 1; transform: rotate(0deg) scale(1); }
  100% { opacity: 0; transform: rotate(420deg) scale(0.04); }
}

/* ---------- 标题字「木叶参上」：书法艺术字切图（逐字砸入，保持原图2×2构图） ---------- */
.ne-title {
  position: absolute;
  left: 50%;
  top: calc(46% + min(17vmin, 140px));
  transform: translateX(-50%) rotate(-3deg);
  width: min(38vmin, 330px);
  aspect-ratio: 1;
  pointer-events: none;
}
.ne-title .ne-timg {
  position: absolute;
  opacity: 0;
  transform: scale(2.2) rotate(14deg) translateY(-10%);
  will-change: transform, opacity;
  filter: drop-shadow(0 0 14px rgba(242, 107, 29, 0.35));
}
/* 各字位置/尺寸对应原图构图（1920² 原图的相对坐标） */
.ne-t1 { left: 10.2%; top: 13.0%; width: 44.4%; }  /* 木 */
.ne-t2 { left: 44.4%; top: 12.0%; width: 42.6%; }  /* 叶 */
.ne-t3 { left: 13.0%; top: 43.5%; width: 47.2%; }  /* 参 */
.ne-t4 { left: 48.1%; top: 42.6%; width: 37.1%; }  /* 上 */
.ne-title .ne-timg.ne-in {
  animation: ne-timg-slam 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) forwards;
}
@keyframes ne-timg-slam {
  0%   { opacity: 0; transform: scale(2.2) rotate(14deg) translateY(-10%); }
  55%  { opacity: 1; transform: scale(0.92) rotate(-3deg) translateY(1%); }
  78%  { transform: scale(1.06) rotate(1.5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg) translateY(0); }
}

/* ---------- 螺旋丸 + 查克拉冲击环 ---------- */
.ne-rasengan {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(52vmin, 400px);
  aspect-ratio: 1;
  margin: calc(min(52vmin, 400px) / -2) 0 0 calc(min(52vmin, 400px) / -2);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 34px rgba(62, 155, 224, 0.8));
}
.ne-rasengan.ne-in  { animation: ne-rasengan-in 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) forwards; }
.ne-rasengan.ne-out { animation: ne-rasengan-out 0.43s cubic-bezier(0.6, 0, 0.9, 0.5) forwards; }
@keyframes ne-rasengan-in {
  0%   { opacity: 0; transform: rotate(-540deg) scale(0.05); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes ne-rasengan-out {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  100% { opacity: 0.9; transform: translate(60vw, -42vh) rotate(560deg) scale(0.32); }
}
.ne-ring {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(52vmin, 400px);
  aspect-ratio: 1;
  margin: calc(min(52vmin, 400px) / -2) 0 0 calc(min(52vmin, 400px) / -2);
  border-radius: 50%;
  border: 5px solid rgba(120, 200, 255, 0.9);
  box-shadow: 0 0 30px rgba(62, 155, 224, 0.8), inset 0 0 30px rgba(62, 155, 224, 0.5);
  opacity: 0;
  pointer-events: none;
}
.ne-ring.ne-on { animation: ne-ring-burst 0.7s cubic-bezier(0.1, 0.7, 0.3, 1) forwards; }
@keyframes ne-ring-burst {
  0%   { opacity: 0.95; transform: scale(0.15); border-width: 7px; }
  100% { opacity: 0;    transform: scale(2.6);  border-width: 1px; }
}

/* ---------- Q版鸣人跑过底部 ---------- */
.ne-chibi {
  position: absolute;
  bottom: 4vh;
  left: 0;
  width: min(22vmin, 170px);
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}
.ne-chibi.ne-run { animation: ne-chibi-run 1.15s cubic-bezier(0.35, 0.6, 0.5, 1) forwards; }
@keyframes ne-chibi-run {
  0%   { opacity: 0; transform: translateX(-30vw) translateY(0) rotate(-8deg); }
  10%  { opacity: 1; }
  30%  { transform: translateX(8vw) translateY(-9vh) rotate(5deg); }
  55%  { transform: translateX(44vw) translateY(0) rotate(-4deg); }
  78%  { transform: translateX(76vw) translateY(-11vh) rotate(6deg); }
  100% { opacity: 1; transform: translateX(118vw) translateY(-4vh) rotate(0deg); }
}

/* ---------- 折纸手里剑飘飞 ---------- */
.ne-paper {
  position: absolute;
  width: min(13vmin, 92px);
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}
.ne-paper.ne-p1 { animation: ne-paper-fly1 1.4s linear forwards; }
.ne-paper.ne-p2 { animation: ne-paper-fly2 1.5s linear 0.12s forwards; }
@keyframes ne-paper-fly1 {
  0%   { opacity: 0; transform: translate(8vw, 92vh) rotate(0deg); }
  12%  { opacity: 0.95; }
  100% { opacity: 0.9; transform: translate(88vw, 6vh) rotate(640deg); }
}
@keyframes ne-paper-fly2 {
  0%   { opacity: 0; transform: translate(90vw, 88vh) rotate(0deg); }
  12%  { opacity: 0.9; }
  100% { opacity: 0.85; transform: translate(10vw, 10vh) rotate(-580deg); }
}

/* ---------- 跳过提示 ---------- */
.ne-skip-hint {
  position: absolute;
  right: 18px;
  bottom: 14px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  letter-spacing: 0.1em;
  pointer-events: none;
  animation: ne-hint-blink 1.6s ease-in-out infinite;
}
@keyframes ne-hint-blink {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.7; }
}

/* ============================================================
   云雾氛围（黑幕阶段；.ne-atmo 在幕布拉开时淡出）
   ============================================================ */
.ne-overlay.ne-open .ne-atmo {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* 漂移云团（模糊椭圆） */
.ne-cloud {
  position: absolute;
  border-radius: 50%;
  filter: blur(24px);
  pointer-events: none;
  will-change: transform;
}
.ne-cloud-c1 {
  width: 52vmin; height: 17vmin;
  top: 6%; left: -24%;
  background: rgba(126, 112, 182, 0.32);
  animation: ne-cloud-drift1 9s ease-in-out infinite alternate;
}
.ne-cloud-c2 {
  width: 44vmin; height: 14vmin;
  top: 22%; right: -20%;
  background: rgba(96, 100, 150, 0.28);
  animation: ne-cloud-drift2 11s ease-in-out infinite alternate;
}
.ne-cloud-c3 {
  width: 58vmin; height: 18vmin;
  top: 58%; left: -18%;
  background: rgba(70, 66, 110, 0.3);
  animation: ne-cloud-drift1 13s ease-in-out infinite alternate-reverse;
}
/* 晓 · 红云 */
.ne-cloud-red {
  width: 30vmin; height: 11vmin;
  top: 12%; right: 8%;
  background: rgba(192, 57, 43, 0.26);
  filter: blur(18px);
  animation: ne-cloud-drift2 8s ease-in-out infinite alternate;
}
@keyframes ne-cloud-drift1 {
  0%   { transform: translateX(0); }
  100% { transform: translateX(38vw); }
}
@keyframes ne-cloud-drift2 {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-34vw); }
}

/* 底部雾气压底 */
.ne-mist {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 0;
  height: 30%;
  background: linear-gradient(to top, rgba(190, 190, 215, 0.2), rgba(190, 190, 215, 0.05) 55%, transparent);
  filter: blur(8px);
  pointer-events: none;
}

/* ============================================================
   影分身烟雾 + 角色登场（揭幕阶段）
   ============================================================ */

/* 白烟爆开（影分身之术的烟） */
.ne-smoke {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248, 248, 252, 0.95) 0%, rgba(222, 222, 238, 0.55) 45%, transparent 70%);
  filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.ne-smoke.ne-puff { animation: ne-smoke-puff 1.05s ease-out forwards; }
@keyframes ne-smoke-puff {
  0%   { opacity: 0;    transform: scale(0.15) translateY(0); }
  22%  { opacity: 0.95; }
  100% { opacity: 0;    transform: scale(1.9) translateY(-5vh); }
}

/* 角色卡（从烟中升起，带画框） */
.ne-char {
  position: absolute;
  bottom: 9vh;
  width: min(25vmin, 195px);
  border: 3px solid #22314F;
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(201, 210, 221, 0.3);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.ne-char-l { left: 6vw; }
.ne-char-r { right: 6vw; }
.ne-char.ne-rise-l { animation: ne-char-rise-l 1.05s cubic-bezier(0.2, 0.9, 0.3, 1) forwards; }
.ne-char.ne-rise-r { animation: ne-char-rise-r 1.05s cubic-bezier(0.2, 0.9, 0.3, 1) forwards; }
@keyframes ne-char-rise-l {
  0%   { opacity: 0; transform: translateY(28vh) rotate(-11deg) scale(0.65); }
  35%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) rotate(-4deg) scale(1); }
}
@keyframes ne-char-rise-r {
  0%   { opacity: 0; transform: translateY(28vh) rotate(11deg) scale(0.65); }
  35%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) rotate(4deg) scale(1); }
}