/* 正面動畫(動畫/) 與 背面動畫(動畫2/) — 原稿座標 2362×904，類名皆限定在 .a1 / .a2 內 */
.anim { position: absolute; left: 0; top: 0; width: 2362px; height: 904px; overflow: hidden; transform-origin: 0 0; isolation: isolate; }
.anim img { position: absolute; display: block; max-width: none; user-select: none; -webkit-user-drag: none; }

/* ---------- 正面：刀身進場 → 標題 → 刀光 → 高光掃略帶出眼神 ---------- */
.a1 { background: #fff; }
.a1 .bg { left: 0; top: 0; width: 2362px; height: 904px; }
.a1 .blade { position: absolute; left: -2806px; top: 119px; width: 5168px; height: 587px; overflow: hidden; transform: translateX(5168px); }
.a1 .blade .body { left: 0; top: 0; width: 5168px; height: 587px; }
.a1 .blade .eye {
  -webkit-mask: linear-gradient(115deg, transparent 15%, #000 40%, #000 60%, transparent 85%) no-repeat;
          mask: linear-gradient(115deg, transparent 15%, #000 40%, #000 60%, transparent 85%) no-repeat;
  -webkit-mask-size: 1400px 587px; mask-size: 1400px 587px;
  -webkit-mask-position: var(--m0) var(--my); mask-position: var(--m0) var(--my);
}
.a1 .eye1 { left: 4041px; top: 49px; width: 1127px; height: 538px; --m0: -2535px; --m1: 1027px; --my: -49px; }
.a1 .eye2 { left: 3628px; top: 0;    width: 1540px; height: 587px; --m0: -2122px; --m1: 1440px; --my: 0px; }
.a1 .eye3 { left: 3657px; top: 92px; width: 1511px; height: 495px; --m0: -2151px; --m1: 1411px; --my: -92px; }
.a1 .blade .sweep {
  position: absolute; top: 0; left: 0; width: 1200px; height: 587px;
  background: linear-gradient(115deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.55) 42%, rgba(255,255,255,.95) 50%, rgba(255,255,255,.55) 58%, rgba(255,255,255,0) 80%);
  mix-blend-mode: overlay; transform: translateX(1606px);
}
.a1 .light { left: 0; top: 0; width: 1564px; height: 392px; opacity: 0; }
.a1 .title { left: 214px; top: 206px; width: 731px; height: 186px; opacity: 0; }

.a1.play .blade { animation: a1-bladeIn .45s cubic-bezier(.16,1,.3,1) .1s forwards; }
.a1.play .title { animation: a-fadeIn .35s ease-out .5s forwards; }
.a1.play .light { animation: a1-pulse 1.6s ease-in-out .9s infinite alternate; }
.a1.play .sweep { animation: a1-sweep 4s cubic-bezier(.45,0,.25,1) 1s infinite; }
.a1.play .eye   { animation: a1-eyeMask 12s cubic-bezier(.45,0,.25,1) infinite; }
.a1.play .eye1  { animation-delay: 1s; }
.a1.play .eye2  { animation-delay: 5s; }
.a1.play .eye3  { animation-delay: 9s; }
@keyframes a1-bladeIn { 0% { transform: translateX(5168px); filter: blur(4px); } 100% { transform: translateX(0); filter: blur(0); } }
@keyframes a1-pulse { from { opacity: 0; } to { opacity: 1; } }
@keyframes a1-sweep { 0% { transform: translateX(1606px); } 40%, 100% { transform: translateX(5168px); } }
@keyframes a1-eyeMask {
  0%            { -webkit-mask-position: var(--m0) var(--my); mask-position: var(--m0) var(--my); }
  13.333%, 100% { -webkit-mask-position: var(--m1) var(--my); mask-position: var(--m1) var(--my); }
}
@keyframes a-fadeIn  { to { opacity: 1; } }
@keyframes a-fadeOut { to { opacity: 0; } }

/* ---------- 背面：三把劍進場 → 三組特寫 → 主標打字 ---------- */
.a2 { background: #000; }
.a2 .full-canvas { left: 0; top: 0; width: 2362px; height: 904px; }
.a2 .closeup { position: absolute; opacity: 0; isolation: isolate; }
.a2 .closeup img { left: 0; top: 0; width: 100%; height: 100%; }
.a2 .closeup .full { opacity: 0; mix-blend-mode: plus-lighter; }
.a2 .sword, .a2 .sword-shadow { transform: translate(var(--fx), var(--fy)); }
.a2 .sword-shadow { mix-blend-mode: multiply; }
.a2 .type-line { position: absolute; width: 0; overflow: hidden; }
.a2 .sub-fade { position: absolute; }
.a2 .sub-fade img { opacity: 0; }
.a2 .title-shadow { mix-blend-mode: multiply; }
.a2 .s-elu { --fx: -1602px; --fy: 1404px; }
.a2 .s-exc { --fx: 2000px;  --fy: 1030px; }
.a2 .s-nic { --fx: -2341px; --fy: 906px; }
.a2.play .c-fate       { animation: a-fadeIn .5s ease-out 1.4s forwards; }
.a2.play .c-fate .char { animation: a-fadeOut .45s ease-in-out 1.9s forwards; }
.a2.play .c-fate .full { animation: a-fadeIn .45s ease-in-out 1.9s forwards; }
.a2.play .c-sao        { animation: a-fadeIn .5s ease-out 2.45s forwards; }
.a2.play .c-sao .char  { animation: a-fadeOut .45s ease-in-out 2.95s forwards; }
.a2.play .c-sao .full  { animation: a-fadeIn .45s ease-in-out 2.95s forwards; }
.a2.play .c-kny        { animation: a-fadeIn .5s ease-out 3.5s forwards; }
.a2.play .c-kny .char  { animation: a-fadeOut .45s ease-in-out 4.0s forwards; }
.a2.play .c-kny .full  { animation: a-fadeIn .45s ease-in-out 4.0s forwards; }
.a2.play .s-exc { animation: a2-swordIn .6s cubic-bezier(.16,1,.3,1) .2s forwards; }
.a2.play .s-elu { animation: a2-swordIn .6s cubic-bezier(.16,1,.3,1) .45s forwards; }
.a2.play .s-nic { animation: a2-swordIn .6s cubic-bezier(.16,1,.3,1) .7s forwards; }
.a2.play .sub-fade img { animation: a-fadeIn 1.33s ease-out 4.55s forwards; }
@keyframes a2-swordIn { to { transform: translate(0, 0); } }

/* ---------- 內裏：三把劍與年份依序淡入（原稿 2362×354） ---------- */
.anim.a3 { height: 354px; background: #000; }
.a3 .bg { left: 0; top: 0; width: 2362px; height: 354px; }
.a3 .el { opacity: 0; }
.a3.play .el { animation: a-fadeIn .6s ease-out forwards; }
.a3.play .e0 { animation-delay: .3s; }
.a3.play .e1 { animation-delay: .45s; }
.a3.play .e2 { animation-delay: 1.05s; }
.a3.play .e3, .a3.play .e4 { animation-delay: 1.2s; }
.a3.play .e5 { animation-delay: 1.8s; }
.a3.play .e6, .a3.play .e7 { animation-delay: 1.95s; }