/* HP Mode round-start intro overlay — "who VS who" (docs/hp.md §4.1).
 * Recommended OBS size 1080×1080; everything scales with the viewport (vmin).
 *
 * Look: the two casts' files slide in from the edges and CLASH in the middle
 * (they meet on the centre line, overshoot into each other and recoil), the
 * layer shakes on impact, and the VS stamps down ON TOP of the images. Images
 * only — no name plates.
 *
 * OBS rule: the page is TRANSPARENT. html/body/.hpi never get a fill; only the
 * files, the VS stamp and a brief impact flash (a small radial burst that
 * fades out) paint. */

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    overflow: hidden;
    scrollbar-width: none;
}

:root {
    --c1: #ec4899;
    --c2: #3b82f6;
    --font-num: 'Bebas Neue', 'Noto Sans Thai', system-ui, sans-serif;
    --clash-at: .42s; /* when the two sides meet */
}

.hpi {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    pointer-events: none;
    overflow: hidden;
}
.hpi[hidden] { display: none; }

/* Each side is exactly half the stage and pushes its file against the centre
 * line, so the two images touch in the middle. */
.hpi-side {
    position: relative;
    flex: 0 0 50%;
    height: 100%;
    display: flex;
    align-items: center;
    min-width: 0;
}
.hpi-side--l { justify-content: flex-end; z-index: 1; }
.hpi-side--r { justify-content: flex-start; z-index: 1; }
/* A cast with no file for this side leaves it empty — only the VS shows. */
.hpi-side.is-empty { visibility: hidden; }

.hpi-media {
    width: 100%;
    height: 86vmin;
    display: flex;
    align-items: center;
}
.hpi-side--l .hpi-media { justify-content: flex-end; }
.hpi-side--r .hpi-media { justify-content: flex-start; }
.hpi-media video,
.hpi-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 1vmin 3vmin rgba(0, 0, 0, .55));
}
.hpi-side--l .hpi-media video,
.hpi-side--l .hpi-media img { object-position: right center; }
.hpi-side--r .hpi-media video,
.hpi-side--r .hpi-media img { object-position: left center; }

/* VS — centred over BOTH images, above everything. */
.hpi-vs {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 400 26vmin/0.9 var(--font-num);
    letter-spacing: 0.6vmin;
    color: #fff7ed;
    -webkit-text-stroke: 0.5vmin #b91c1c;
    text-shadow: 0 0 4vmin rgba(244, 63, 94, .95), 0 1.2vmin 0 #7f1d1d, 0 2vmin 5vmin rgba(0, 0, 0, .75);
    opacity: 0;
}

/* Impact flash at the centre line (small, fades to nothing). */
.hpi::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60vmin;
    height: 60vmin;
    margin: -30vmin 0 0 -30vmin;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 237, 213, .55) 25%, rgba(255, 255, 255, 0) 65%);
    opacity: 0;
    z-index: 2;
}

/* ── Entrance: slide in → clash → recoil, shake + flash, then VS ─────────── */
.hpi.is-in .hpi-side--l { animation: hpi-clash-l .62s cubic-bezier(.55, 0, .75, .3) both; }
.hpi.is-in .hpi-side--r { animation: hpi-clash-r .62s cubic-bezier(.55, 0, .75, .3) both; }
.hpi.is-in { animation: hpi-shake .38s ease-out var(--clash-at) both; }
.hpi.is-in::after { animation: hpi-flash .45s ease-out var(--clash-at) both; }
.hpi.is-in .hpi-vs { animation: hpi-vs .55s cubic-bezier(.2, 1.5, .4, 1) calc(var(--clash-at) + .08s) both; }

@keyframes hpi-clash-l {
    0%   { transform: translateX(-100%); opacity: 0; }
    15%  { opacity: 1; }
    68%  { transform: translateX(4vmin); }   /* hits the centre and overshoots */
    84%  { transform: translateX(-2.5vmin); } /* recoil */
    100% { transform: translateX(0); opacity: 1; }
}
@keyframes hpi-clash-r {
    0%   { transform: translateX(100%); opacity: 0; }
    15%  { opacity: 1; }
    68%  { transform: translateX(-4vmin); }
    84%  { transform: translateX(2.5vmin); }
    100% { transform: translateX(0); opacity: 1; }
}
@keyframes hpi-shake {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-1.6vmin, 1vmin); }
    40% { transform: translate(1.4vmin, -1.2vmin); }
    60% { transform: translate(-1vmin, .6vmin); }
    80% { transform: translate(.6vmin, -.4vmin); }
}
@keyframes hpi-flash {
    0%   { opacity: 0; transform: scale(.3); }
    25%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.6); }
}
@keyframes hpi-vs {
    0%   { opacity: 0; transform: scale(3.4) rotate(-12deg); filter: blur(6px); }
    60%  { opacity: 1; transform: scale(.88) rotate(3deg); filter: none; }
    100% { opacity: 1; transform: scale(1) rotate(-4deg); }
}

/* Exit: everything fades and lifts away. */
.hpi.is-out .hpi-side,
.hpi.is-out .hpi-vs { animation: hpi-out .45s ease-in both; }
@keyframes hpi-out { from { opacity: 1; } to { opacity: 0; transform: scale(1.08); } }