* { box-sizing: border-box; }

:root {
    --imperial-red: #8e1216;
    --deep-red: #5a0a0d;
    --gold: #d9a441;
    --gold-bright: #f2c968;
    --ink: #0c0a09;
    --parchment: #ecdfc3;
    --parchment-dark: #d9c69e;
    --line: rgba(217, 164, 65, .75);
}

html, body { height: 100%; }

body {
    margin: 0;
    font-family: 'Noto Serif', serif;
    background: var(--ink);
    color: var(--parchment);
    overflow: hidden; /* mode kiosk: semua muat satu layar */
}

/* ==================== ENTRANCE: INK SPLASH ==================== */

.entrance {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #000;
    overflow: hidden;
    cursor: pointer;
    transition: opacity 1s ease;
}

.entrance.leaving {
    opacity: 0;
    pointer-events: none;
}

.ink-layer {
    position: absolute;
    inset: 0;
    filter: url(#ink-rough);
}

.ink-blob {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, var(--parchment) 0%, var(--parchment-dark) 55%, transparent 72%);
    transform: scale(0);
    animation: ink-bloom 1.6s cubic-bezier(.16,.84,.28,1) forwards;
    will-change: transform;
}

.ink-blob.b1 { width: 46vmax; height: 42vmax; left: 26%; top: 8%;  animation-delay: .15s; }
.ink-blob.b2 { width: 34vmax; height: 36vmax; left: 4%;  top: 34%; animation-delay: .45s; }
.ink-blob.b3 { width: 40vmax; height: 34vmax; left: 48%; top: 40%; animation-delay: .7s; }
.ink-blob.b4 { width: 26vmax; height: 28vmax; left: 66%; top: 4%;  animation-delay: .95s; }
.ink-blob.b5 { width: 30vmax; height: 26vmax; left: 18%; top: 56%; animation-delay: 1.15s; }

@keyframes ink-bloom {
    0%   { transform: scale(0) rotate(-8deg); }
    60%  { transform: scale(1.04) rotate(2deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.ink-drip {
    position: absolute;
    width: 3vmax;
    height: 8vmax;
    border-radius: 50% 50% 60% 60% / 30% 30% 70% 70%;
    background: var(--parchment-dark);
    transform: scale(0);
    animation: drip-fall 1s ease-out forwards;
}

.ink-drip.d1 { left: 20%; top: 12%; animation-delay: .9s; }
.ink-drip.d2 { left: 74%; top: 46%; animation-delay: 1.2s; }
.ink-drip.d3 { left: 44%; top: 70%; animation-delay: 1.45s; }

@keyframes drip-fall {
    0%   { transform: scale(0) translateY(-4vmax); opacity: 0; }
    60%  { opacity: 1; }
    100% { transform: scale(1) translateY(3vmax); opacity: .9; }
}

.entrance-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}

.entrance-hanzi {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: clamp(90px, 22vmin, 220px);
    line-height: 1;
    color: var(--ink);
    opacity: 0;
    animation: brush-in 1s ease-out 1.1s forwards;
}

.entrance-title {
    margin: 8px 0 4px;
    font-family: 'Cinzel', serif;
    font-weight: 900;
    font-size: clamp(22px, 4.5vw, 44px);
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--imperial-red);
    opacity: 0;
    animation: brush-in .8s ease-out 1.5s forwards;
}

.entrance-sub {
    margin: 0;
    font-style: italic;
    font-size: clamp(13px, 1.8vw, 18px);
    letter-spacing: 3px;
    color: var(--ink);
    opacity: 0;
    animation: brush-in .8s ease-out 1.8s forwards;
}

@keyframes brush-in {
    0%   { opacity: 0; transform: scale(1.35); filter: blur(6px); }
    100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

.ink-flood {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    width: 30vmax;
    height: 30vmax;
    margin: -15vmax 0 0 -15vmax;
    border-radius: 50%;
    background: radial-gradient(circle, var(--ink) 55%, transparent 70%);
    filter: url(#ink-rough);
    transform: scale(0);
    animation: flood 1s cubic-bezier(.6,0,.8,.4) 3.1s forwards;
    will-change: transform;
}

@keyframes flood {
    0%   { transform: scale(0) rotate(0deg); }
    100% { transform: scale(12) rotate(20deg); }
}

/* ==================== DUNIA: AULA ISTANA ==================== */

.world {
    display: flex;
    flex-direction: column;
    height: 100vh;
    transition: opacity 1.2s ease;
}

.world.hidden { opacity: 0; pointer-events: none; }

body.in-world {
    background-color: var(--ink);
    background-image:
        radial-gradient(ellipse at 50% 30%, transparent 30%, rgba(12,10,9,.72) 100%),
        linear-gradient(180deg, rgba(12,10,9,.55), rgba(12,10,9,.25) 30%, rgba(60,8,10,.35) 100%),
        url('../assets/img/bg1.png');
    background-size: 100% 100%, 100% 100%, cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* ---------- Lapisan animasi ambient ---------- */
.ambient {
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
}

/* berkas cahaya yang bernafas pelan dari jendela istana */
.light-rays {
    position: absolute;
    inset: -10%;
    background:
        linear-gradient(105deg, transparent 42%, rgba(242,201,104,.10) 47%, transparent 53%),
        linear-gradient(105deg, transparent 60%, rgba(242,201,104,.07) 66%, transparent 72%),
        linear-gradient(105deg, transparent 25%, rgba(255,235,190,.06) 30%, transparent 36%);
    animation: rays-breathe 9s ease-in-out infinite alternate;
    mix-blend-mode: screen;
}

@keyframes rays-breathe {
    0%   { opacity: .45; transform: translateX(-1.5%); }
    100% { opacity: 1; transform: translateX(1.5%); }
}

/* kelopak bunga jatuh */
.petal {
    position: absolute;
    top: -6vh;
    border-radius: 60% 5% 60% 5%;
    background: linear-gradient(135deg, #c94f52, #8e1216 70%);
    opacity: .8;
    animation: petal-fall linear infinite;
    will-change: transform;
}

.petal.gold { background: linear-gradient(135deg, var(--gold-bright), #a8781e 75%); }

@keyframes petal-fall {
    0% {
        transform: translate3d(0, -6vh, 0) rotate(0deg);
        opacity: 0;
    }
    8% { opacity: .85; }
    100% {
        transform: translate3d(var(--drift), 110vh, 0) rotate(var(--spin));
        opacity: .55;
    }
}

/* bara / debu emas yang melayang naik */
.ember {
    position: absolute;
    bottom: -3vh;
    border-radius: 50%;
    background: radial-gradient(circle, var(--gold-bright), rgba(242,201,104,0) 70%);
    animation: ember-rise ease-in infinite;
    will-change: transform, opacity;
}

@keyframes ember-rise {
    0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
    12%  { opacity: .9; }
    100% { transform: translate3d(var(--drift), -105vh, 0) scale(.4); opacity: 0; }
}

/* ---------- Vignette + grain film ---------- */
.film-grain {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.55) 100%);
}

.film-grain::before {
    content: '';
    position: absolute;
    inset: -60%;
    background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px);
    background-size: 3px 3px;
    opacity: .5;
    animation: grain-jitter .5s steps(2) infinite;
}

@keyframes grain-jitter {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-6px, 4px); }
    50%  { transform: translate(4px, -7px); }
    75%  { transform: translate(-3px, -3px); }
    100% { transform: translate(5px, 6px); }
}

/* ---------- Letterbox bioskop ---------- */
.cinema-bar {
    position: fixed;
    left: 0;
    right: 0;
    height: 7.5vh;
    z-index: 950;
    background: #000;
    transition: transform .8s cubic-bezier(.7,0,.3,1);
    pointer-events: none;
}

.cinema-bar.top { top: 0; transform: translateY(-101%); }
.cinema-bar.bottom { bottom: 0; transform: translateY(101%); }

body.cinema .cinema-bar.top,
body.cinema .cinema-bar.bottom { transform: translateY(0); }

/* ---------- Tinta penutup antar-loop ---------- */
.ink-out {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 1500;
    width: 36vmax;
    height: 36vmax;
    margin: -18vmax 0 0 -18vmax;
    border-radius: 50%;
    background: #050403;
    filter: url(#ink-rough);
    transform: scale(0);
    transition: transform 1s cubic-bezier(.6,0,.8,.4), opacity .5s ease;
    will-change: transform;
}

.ink-out.grow { transform: scale(14); }

/* ---------- Spanduk gerbang ---------- */
.court-banner {
    position: relative;
    z-index: 5;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 12px 24px;
    background: linear-gradient(180deg, var(--deep-red), var(--imperial-red));
    border-bottom: 3px solid var(--gold);
    box-shadow: 0 8px 30px rgba(0,0,0,.7);
}

.banner-text { display: flex; align-items: center; gap: 14px; }

.banner-hanzi {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 30px;
    color: var(--gold-bright);
    text-shadow: 0 2px 6px rgba(0,0,0,.6);
}

.court-banner h1 {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: clamp(14px, 1.8vw, 20px);
    letter-spacing: 2px;
    color: var(--gold-bright);
    text-shadow: 0 2px 6px rgba(0,0,0,.7);
}

.banner-ornament {
    flex: 1;
    height: 2px;
    max-width: 220px;
    background: linear-gradient(90deg, transparent, var(--gold));
}

.banner-ornament.right { background: linear-gradient(270deg, transparent, var(--gold)); }

.sound-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    background: rgba(0,0,0,.35);
    color: var(--gold-bright);
    font-size: 17px;
    cursor: pointer;
    transition: background .2s;
}

.sound-toggle:hover { background: rgba(0,0,0,.6); }
.sound-toggle.on { background: var(--gold); color: var(--deep-red); }

/* ---------- Panggung bagan (di-scale agar muat satu layar) ---------- */
#stage-outer {
    position: relative;
    flex: 1;
    overflow: hidden;
}

#stage {
    position: absolute;
    left: 0;
    top: 0;
    width: max-content;
    padding: 26px 40px 40px;
    transform-origin: 0 0;
    transition: transform 1.25s cubic-bezier(.45,.05,.25,1);
    will-change: transform;
}

.court {
    display: flex;
    justify-content: center;
    /* kamera "bernafas" pelan ala dokumenter */
    animation: court-breathe 18s ease-in-out infinite alternate;
}

@keyframes court-breathe {
    0%   { transform: scale(1); }
    100% { transform: scale(1.02); }
}

/* ---------- Pohon silsilah ---------- */
.node {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.branch {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    margin-top: 30px;
    position: relative;
}

/* garis silsilah ikut muncul/lenyap bersama para warrior */
.branch::before,
.branch > .node::before,
.branch > .node::after {
    opacity: 0;
    transition: opacity 1.2s ease .6s;
}

.world.lines .branch::before,
.world.lines .branch > .node::before,
.world.lines .branch > .node::after {
    opacity: 1;
}

/* garis turun dari kartu atasan ke garis saudara */
.branch::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-1px);
    width: 2px;
    height: 30px;
    background: linear-gradient(180deg, var(--gold-bright), var(--line));
    box-shadow: 0 0 6px rgba(217,164,65,.5);
}

.branch > .node {
    position: relative;
    padding-top: 30px;
}

/* garis naik dari tiap anak ke garis saudara */
.branch > .node::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-1px);
    width: 2px;
    height: 30px;
    background: var(--line);
    box-shadow: 0 0 6px rgba(217,164,65,.4);
}

/* garis mendatar penghubung antar saudara */
.branch > .node::after {
    content: '';
    position: absolute;
    top: 0;
    left: -11px;   /* setengah gap agar menyambung dengan tetangga */
    right: -11px;
    height: 2px;
    background: var(--line);
    box-shadow: 0 0 6px rgba(217,164,65,.4);
}

.branch > .node:first-child::after { left: 50%; }
.branch > .node:last-child::after { right: 50%; }
.branch > .node:only-child::after { display: none; }

/* ---------- Gulungan lukisan (hanging scroll) ---------- */
.warrior-scroll {
    --scroll-w: 148px;
    --portrait-h: 138px;
    width: var(--scroll-w);
    cursor: pointer;
    opacity: 0;
    transform: scaleY(.05);
    transform-origin: top center;
    will-change: transform, opacity;
}

.warrior-scroll[data-depth="0"] { --scroll-w: 190px; --portrait-h: 190px; }
.warrior-scroll[data-depth="1"] { --scroll-w: 170px; --portrait-h: 160px; }

.warrior-scroll.revealed {
    animation:
        scroll-unroll .8s cubic-bezier(.2,.9,.3,1.05) forwards,
        scroll-sway 7s ease-in-out 1.2s infinite;
}

@keyframes scroll-unroll {
    0%   { opacity: 0; transform: scaleY(.05); }
    55%  { opacity: 1; transform: scaleY(1.03); }
    100% { opacity: 1; transform: scaleY(1); }
}

/* goyangan halus seperti gulungan tergantung tertiup angin */
@keyframes scroll-sway {
    0%, 100% { transform: scaleY(1) rotate(.5deg); }
    50%      { transform: scaleY(1) rotate(-.5deg); }
}

.warrior-scroll.focus .scroll-body {
    box-shadow: 0 14px 34px rgba(0,0,0,.65), 0 0 0 2px var(--gold-bright), 0 0 30px rgba(242,201,104,.75);
}

/* kilat emas gelombang finale */
.warrior-scroll.flash .scroll-body {
    box-shadow: 0 0 0 3px var(--gold-bright), 0 0 46px 14px rgba(242,201,104,.95) !important;
    transition: box-shadow .12s ease;
}

.scroll-roller {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(180deg, #6b4a26, #3a2712 60%, #241708);
    box-shadow: 0 3px 8px rgba(0,0,0,.6);
    position: relative;
}

.scroll-roller::before,
.scroll-roller::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--gold-bright), #8a6420 70%);
    transform: translateY(-50%);
}

.scroll-roller::before { left: -6px; }
.scroll-roller::after { right: -6px; }

.scroll-body {
    position: relative;
    margin: 0 8px;
    padding: 9px 8px 10px;
    background:
        linear-gradient(180deg, rgba(120,90,40,.14), transparent 12%, transparent 88%, rgba(120,90,40,.18)),
        linear-gradient(180deg, #f3e9d2, var(--parchment) 50%, #e3d3ae);
    border-left: 2px solid var(--imperial-red);
    border-right: 2px solid var(--imperial-red);
    box-shadow: 0 12px 28px rgba(0,0,0,.6), inset 0 0 20px rgba(120,90,40,.25);
    transition: box-shadow .4s ease;
}

.scroll-portrait {
    height: var(--portrait-h);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(90,10,13,.3);
    background: #f6f1e6;
}

.scroll-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    filter: brightness(0) contrast(1.2);
    transition: filter 1s ease .4s;
    user-select: none;
}

.warrior-scroll.revealed .scroll-portrait img { filter: brightness(1) contrast(1); }

.scroll-info {
    text-align: center;
    padding-top: 8px;
    color: #241708;
}

.scroll-info h3 {
    margin: 0 0 2px;
    font-family: 'Cinzel', serif;
    font-weight: 900;
    font-size: 13px;
    letter-spacing: .5px;
    color: var(--deep-red);
}

.scroll-info p {
    margin: 0;
    font-size: 9.5px;
    font-style: italic;
    line-height: 1.35;
    color: #4a3418;
}

.seal {
    position: absolute;
    right: 12px;
    top: 14px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 14px;
    color: #fff;
    background: var(--imperial-red);
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0,0,0,.4), inset 0 0 6px rgba(0,0,0,.35);
    opacity: 0;
    transform: scale(3) rotate(-14deg);
}

.warrior-scroll.revealed .seal {
    animation: seal-stamp .4s cubic-bezier(.2,.8,.3,1.2) .85s forwards;
}

@keyframes seal-stamp {
    0%   { opacity: 0; transform: scale(3) rotate(-14deg); }
    100% { opacity: 1; transform: scale(1) rotate(-6deg); }
}

.empty-state { text-align: center; padding: 60px; }

/* ---------- Sang Raja: sosok misterius ---------- */
.warrior-scroll.mystery .scroll-portrait {
    position: relative;
    background: radial-gradient(circle at 50% 25%, #2b2118, #120d0a 75%);
}

.warrior-scroll.mystery .scroll-portrait img,
.warrior-scroll.mystery.revealed .scroll-portrait img {
    filter: brightness(0) contrast(1.35) drop-shadow(0 0 14px rgba(217,164,65,.35));
}

.warrior-scroll.mystery .scroll-portrait::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse 70% 30% at 30% 85%, rgba(217,164,65,.28), transparent 70%),
        radial-gradient(ellipse 60% 25% at 75% 70%, rgba(142,18,22,.3), transparent 70%);
    animation: mist-roll 5s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes mist-roll {
    0%   { transform: translateX(-6%) scaleY(1); opacity: .7; }
    100% { transform: translateX(6%) scaleY(1.25); opacity: 1; }
}

.warrior-scroll.mystery .scroll-portrait::after {
    content: '?';
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 58px;
    color: var(--gold-bright);
    text-shadow: 0 0 22px rgba(242,201,104,.8);
    animation: mystery-pulse 2.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes mystery-pulse {
    0%, 100% { opacity: .35; transform: scale(.94); }
    50%      { opacity: .95; transform: scale(1.04); }
}

.warrior-scroll.mystery .scroll-info h3 { letter-spacing: 6px; color: var(--ink); }

.warrior-scroll.mystery .scroll-body {
    animation: royal-aura 3.2s ease-in-out infinite alternate;
}

@keyframes royal-aura {
    0%   { box-shadow: 0 12px 28px rgba(0,0,0,.6), inset 0 0 20px rgba(120,90,40,.25), 0 0 14px rgba(217,164,65,.25); }
    100% { box-shadow: 0 12px 28px rgba(0,0,0,.6), inset 0 0 20px rgba(120,90,40,.25), 0 0 30px rgba(217,164,65,.55); }
}

/* ==================== SPOTLIGHT: PROFIL SATU LAYAR ==================== */

.spotlight {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: stretch;
    background:
        radial-gradient(ellipse at 28% 50%, rgba(60,8,10,.35), transparent 60%),
        linear-gradient(100deg, rgba(12,10,9,.94) 0%, rgba(12,10,9,.88) 45%, rgba(60,8,10,.92) 100%);
    opacity: 1;
    transition: opacity .55s ease;
}

.spotlight.hidden { opacity: 0; pointer-events: none; }

.spot-char {
    position: relative;
    flex: 1 1 46%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 2vw;
}

/* pancaran sinar emas berputar di belakang karakter, ala layar pemilihan hero */
.spot-char::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 130vh;
    height: 130vh;
    transform: translate(-50%, -50%);
    background: repeating-conic-gradient(from 0deg,
        rgba(242,201,104,.14) 0deg 5deg,
        transparent 5deg 16deg);
    border-radius: 50%;
    -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 66%);
    mask-image: radial-gradient(circle, #000 18%, transparent 66%);
    animation: rays-rotate 46s linear infinite;
    pointer-events: none;
}

@keyframes rays-rotate {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.spark {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold-bright);
    box-shadow: 0 0 8px var(--gold-bright);
    opacity: 0;
    animation: spark-float linear infinite;
    pointer-events: none;
}

@keyframes spark-float {
    0%   { transform: translateY(0) scale(1); opacity: 0; }
    15%  { opacity: .9; }
    100% { transform: translateY(-18vh) scale(.3); opacity: 0; }
}

.spot-char-frame {
    height: 86vh;
    aspect-ratio: 3 / 4.4;
    max-width: 42vw;
    padding: 2.2vh 1.2vw;
    background:
        linear-gradient(180deg, rgba(120,90,40,.14), transparent 12%, transparent 88%, rgba(120,90,40,.18)),
        linear-gradient(180deg, #f3e9d2, var(--parchment) 50%, #e3d3ae);
    border-left: 5px solid var(--imperial-red);
    border-right: 5px solid var(--imperial-red);
    box-shadow: 0 24px 70px rgba(0,0,0,.8), inset 0 0 40px rgba(120,90,40,.25);
    transform: translateX(-40px);
    transition: transform .6s cubic-bezier(.2,.8,.3,1);
}

.spotlight:not(.hidden) .spot-char-frame { transform: translateX(0); }

.spot-char-frame { position: relative; }

.spot-char-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    mix-blend-mode: multiply; /* latar putih PNG lebur ke kertas gulungan */
}

.spotlight.mystery .spot-char-frame img { display: none; }

.spotlight.mystery .spot-char-frame::after {
    content: '?';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Ma Shan Zheng', cursive;
    font-size: clamp(160px, 30vh, 340px);
    color: var(--ink);
    text-shadow: 0 0 40px rgba(217,164,65,.5);
    animation: mystery-pulse 2.6s ease-in-out infinite;
}

.spot-info {
    flex: 1 1 54%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 6vh 5vw 6vh 2vw;
    transform: translateX(40px);
    transition: transform .6s cubic-bezier(.2,.8,.3,1);
}

.spotlight:not(.hidden) .spot-info { transform: translateX(0); }

.spot-kicker {
    font-size: clamp(11px, 1.2vw, 15px);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);
}

.spot-info h2 {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-weight: 900;
    font-size: clamp(34px, 5vw, 68px);
    line-height: 1.05;
    color: var(--gold-bright);
    text-shadow: 0 4px 18px rgba(0,0,0,.8);
}

/* sekuens masuk sinematik tiap spotlight dibuka */
.spotlight:not(.hidden) .spot-info h2 { animation: sweep-in .7s .15s both; }
.spotlight:not(.hidden) .spot-title { animation: rise-in .5s .4s both; }
.spotlight:not(.hidden) .spot-desc { animation: rise-in .5s .55s both; }
.spotlight:not(.hidden) .spot-stats { animation: rise-in .5s .7s both; }
.spotlight:not(.hidden) .spot-seal { animation: seal-stamp .45s 1s both; }
.spotlight:not(.hidden) .spot-hanzi { animation: hanzi-in 1.4s .2s both; }

@keyframes sweep-in {
    from { clip-path: inset(0 100% 0 0); transform: translateX(18px); }
    to   { clip-path: inset(0 0 0 0); transform: none; }
}

@keyframes rise-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

@keyframes hanzi-in {
    from { opacity: 0; transform: translateY(-46%) scale(1.3); filter: blur(8px); }
    to   { opacity: 1; transform: translateY(-50%) scale(1); filter: blur(0); }
}

.spot-hanzi {
    position: absolute;
    right: 1.5vw;
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    font-family: 'Ma Shan Zheng', cursive;
    font-size: clamp(120px, 22vh, 230px);
    letter-spacing: 18px;
    color: rgba(242, 201, 104, .09);
    pointer-events: none;
    user-select: none;
}

.spot-title {
    margin: 0;
    font-style: italic;
    font-size: clamp(16px, 1.9vw, 24px);
    color: var(--parchment);
}

.spot-desc {
    margin: 6px 0 4px;
    max-width: 560px;
    font-size: clamp(13px, 1.4vw, 17px);
    line-height: 1.7;
    color: var(--parchment-dark);
    border-left: 3px solid var(--imperial-red);
    padding-left: 16px;
}

.spot-stats { display: flex; flex-direction: column; gap: 9px; max-width: 520px; }

.stat-row { display: flex; align-items: center; gap: 12px; }

.stat-label {
    flex: none;
    width: 130px;
    font-size: clamp(11px, 1.1vw, 14px);
    letter-spacing: 1px;
    color: var(--parchment);
}

.stat-track {
    flex: 1;
    height: 10px;
    border-radius: 5px;
    background: rgba(236,223,195,.14);
    border: 1px solid rgba(217,164,65,.35);
    overflow: hidden;
}

.stat-fill {
    position: relative;
    display: block;
    height: 100%;
    width: 0;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--imperial-red), var(--gold) 80%, var(--gold-bright));
    box-shadow: 0 0 10px rgba(242,201,104,.5);
    transition: width 1s cubic-bezier(.2,.8,.3,1);
    overflow: hidden;
}

/* kilau menyapu bar statistik */
.stat-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    transform: translateX(-100%);
    animation: bar-shine 2.8s ease-in-out 1.6s infinite;
}

@keyframes bar-shine {
    0%   { transform: translateX(-100%); }
    45%, 100% { transform: translateX(100%); }
}

.stat-value {
    flex: none;
    width: 34px;
    text-align: right;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: clamp(12px, 1.2vw, 15px);
    color: var(--gold-bright);
}

.spot-mystery {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: clamp(22px, 2.6vw, 34px);
    color: var(--gold);
    text-shadow: 0 0 18px rgba(242,201,104,.5);
    animation: mystery-pulse 2.6s ease-in-out infinite;
}

.spot-seal {
    position: absolute;
    right: 5vw;
    bottom: 6vh;
    width: 74px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 44px;
    color: #fff;
    background: var(--imperial-red);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,.5), inset 0 0 10px rgba(0,0,0,.35);
    transform: rotate(-6deg);
    opacity: .92;
}

/* ---------- Aksesibilitas ---------- */
@media (prefers-reduced-motion: reduce) {
    .ink-blob, .ink-drip, .ink-flood,
    .entrance-hanzi, .entrance-title, .entrance-sub { animation-duration: .01s !important; animation-delay: 0s !important; }
    .warrior-scroll.revealed { animation-duration: .01s; }
    #stage { transition-duration: .01s; }
}