// Pixelcius — Swordsman hero animation (12s loop, cinematic)
//
// Timeline (seconds):
// 0.0–0.7 cut1 First diagonal slash carves \
// 0.7–1.4 cut2 Second diagonal slash carves / → X-shaped rift
// 1.4–2.0 open Rift edges peel apart, dark void revealed inside
// 2.0–2.4 tip Sword TIP only pierces through rift
// 2.4–2.9 arm Hand + arm + cloak edge emerge (still half-inside)
// 2.9–3.6 step Full body pushes through, settles
// 3.6–5.4 comboX X slash combo
// 5.4–7.2 comboI I slash combo
// 7.2–8.4 exit Backs into rift (reverse layered)
// 8.4–9.2 close Rift edges retract
// 9.2–12.0 rest
//
// Key trick for the realistic emergence: the swordsman SVG is rendered TWICE —
// once clipped to the OUTSIDE of the rift's "void" shape (visible part)
// and once to the INSIDE (dimmed silhouette part). During the emerge phase,
// the void shape moves, revealing more of the character. We use a simple
// approach: a `clip-path` polygon on the hero container that animates from
// "everything cut off" to "no clip", combined with a darkened underlay
// to suggest depth.
function Swordsman() {
return (
{/* ─── BACK PLATE: dark void revealed inside the rift cuts ─── */}
{/* ─── RIFT EDGES (two slash lines + glow) ─── */}
{/* ─── SCREEN-WIDE SLASHES (X / I combo) ─── */}
{/* ─── CHARACTER (with rift-shaped reveal mask) ─── */}
{/* Silhouette layer — visible only when character is INSIDE the rift (darkened) */}
{/* Real character — clipped by rift shape during emergence */}
{/* Rim light flash bursting from rift behind character */}
{/* Subtle screen color flash on emergence */}
{/* Speed lines */}