/*
 * assets/css/publik-gerak.css
 * Lapisan gerak halaman publik (mengikuti gaya "Arena" yoseeacademy.com, disesuaikan dengan tujuan Rodium:
 * lintasan slalom, gerbang waktu, podium, kartu ID Skater). Dimuat SETELAH publik.css (lewat $css_akhir).
 * Warna hanya dari token theme.css (--rd-navy*, --rd-aksen, --rd-langit, --rd-teks*, --rd-permukaan*), jadi ikut
 * mode terang & gelap. Tidak ada warna baru.
 *
 * Isi:
 *   1. Hero halaman (.rd-hh): pita navy miring, aurora, kisi, garis angin, judul, remah
 *   2. Motif podium (Ranking)
 *   3. Motif kartu ID Skater (Atlet, profil atlet)
 *   4. Motif lajur (daftar Klub)
 *   5. Motif orbit (profil Klub)
 *   6. Motif finish: gerbang waktu + HUD (Event, hasil event)
 *   7. Beranda: latar hero, judul per huruf, kilau baris aksen, podium kartu
 *   8. Judul per huruf ([data-rd-huruf]) & judul bagian
 *   9. Muncul berurutan (.rd-gerak-anak), ranking (baris start, kilau medali, sapuan garis finish)
 *  10. Kartu: sorot cahaya & miring 3D (PC), tombol: kilau & magnet
 *  11. Progres gulir (skater di bawah header), skater di garis cara kerja
 *  12. Jeda (di luar layar / tab tersembunyi), gerak dikurangi, responsif
 *
 * Variabel yang diisi publik-gerak.js: --rd-tx/--rd-ty (hero, -1..1), --rd-sx/--rd-sy (posisi sorot),
 * --rd-kx/--rd-ky (miring kartu), --rd-mx/--rd-my (magnet), --rd-gulir (0..1), --rd-g (urutan anak).
 * Tanpa JS nilainya 0: halaman tetap utuh, animasi CSS tetap jalan.
 */

/* =====================================================================
   1. HERO HALAMAN
   ===================================================================== */
.rd-hh {
    --rd-tx: 0;
    --rd-ty: 0;
    --rd-hh-miring: clamp(1.75rem, 4vw, 3.5rem);
    position: relative; z-index: 2; isolation: isolate;
    overflow-x: hidden; overflow-x: clip; overflow-y: visible;   /* saran pencarian boleh keluar ke bawah */
    color: var(--rd-navy-teks);
    padding: clamp(1.75rem, 4.5vw, 3.25rem) 0 calc(var(--rd-hh-miring) + clamp(1.5rem, 3vw, 2.5rem));
}
.rd-hh + .rd-halaman { padding-top: clamp(.5rem, 2vw, 1.25rem); }
.rd-hh-latar {
    position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--rd-navy);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--rd-hh-miring)), 0 100%);
}
/* Garis jersey oranye mengikuti tepi miring */
.rd-hh::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--rd-hh-miring); z-index: -2; pointer-events: none;
    background: linear-gradient(90deg, var(--rd-aksen), var(--rd-langit));
    clip-path: polygon(0 calc(100% - 5px), 100% 0, 100% 5px, 0 100%);
    transform-origin: left; animation: rd-g-garis-masuk 1.1s .35s cubic-bezier(.6, 0, .2, 1) both;
}
@keyframes rd-g-garis-masuk { from { clip-path: polygon(0 calc(100% - 5px), 0 calc(100% - 5px), 0 100%, 0 100%); } }

.rd-hh-aurora, .rd-hh-aurora::before, .rd-hh-aurora::after { position: absolute; }
.rd-hh-aurora { inset: 0; }
.rd-hh-aurora::before, .rd-hh-aurora::after { content: ""; border-radius: 50%; will-change: transform; }
.rd-hh-aurora::before {
    width: 60vmax; height: 60vmax; left: -24vmax; top: -38vmax;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--rd-langit) 22%, transparent), transparent);
    animation: rd-g-aurora-a 17s ease-in-out infinite alternate;
}
.rd-hh-aurora::after {
    width: 52vmax; height: 52vmax; right: -20vmax; bottom: -34vmax;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--rd-aksen) 24%, transparent), transparent);
    animation: rd-g-aurora-b 21s ease-in-out infinite alternate;
}
@keyframes rd-g-aurora-a { to { transform: translate3d(14vw, 10vh, 0) scale(1.18); } }
@keyframes rd-g-aurora-b { to { transform: translate3d(-12vw, -8vh, 0) scale(1.1); } }

/* Kisi lantai, sedikit bergeser mengikuti pointer */
.rd-hh-kisi {
    position: absolute; inset: -10%;
    background-image:
        linear-gradient(color-mix(in srgb, var(--rd-navy-teks) 6%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--rd-navy-teks) 6%, transparent) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(70% 80% at 75% 40%, black, transparent 75%);
            mask-image: radial-gradient(70% 80% at 75% 40%, black, transparent 75%);
    transform: translate3d(calc(var(--rd-tx) * -10px), calc(var(--rd-ty) * -8px), 0);
    transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}

/* Garis angin: goresan cepat melintas miring, seperti skater lewat */
.rd-hh-angin { position: absolute; inset: -10%; transform: rotate(-7deg); pointer-events: none; }
.rd-hh-angin i {
    position: absolute; left: 0; height: 2px; width: 34%; border-radius: 2px; opacity: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rd-navy-teks) 55%, transparent), transparent);
    animation: rd-g-angin 4.8s cubic-bezier(.5, 0, .3, 1) infinite;
}
.rd-hh-angin i:nth-child(1) { top: 22%; animation-delay: .4s; }
.rd-hh-angin i:nth-child(2) { top: 38%; width: 22%; animation-delay: 1.9s; background: linear-gradient(90deg, transparent, var(--rd-aksen), transparent); }
.rd-hh-angin i:nth-child(3) { top: 55%; animation-delay: 3.1s; }
.rd-hh-angin i:nth-child(4) { top: 70%; width: 18%; animation-delay: 2.5s; background: linear-gradient(90deg, transparent, var(--rd-langit), transparent); }
.rd-hh-angin i:nth-child(5) { top: 84%; width: 26%; animation-delay: .9s; }
@keyframes rd-g-angin {
    0% { opacity: 0; transform: translateX(-100%); }
    12% { opacity: 1; }
    60% { opacity: .6; }
    80%, 100% { opacity: 0; transform: translateX(380%); }
}

.rd-hh-isi { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 4vw, 3rem); }
.rd-hh-teks { min-width: 0; }
.rd-hh-remah { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1rem; font-size: .82rem; color: var(--rd-navy-redup); animation: rd-pudar-naik .5s both; }
.rd-hh-remah li + li::before { content: "/"; margin-right: .4rem; opacity: .5; }
.rd-hh-remah a { color: var(--rd-navy-redup); transition: color var(--rd-transisi); }
.rd-hh-remah a:hover { color: var(--rd-navy-teks); }
.rd-hh-remah li[aria-current] { color: var(--rd-navy-teks); max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-hh-kicker {
    display: inline-flex; align-items: center; gap: .55rem; padding: .35rem .9rem; border-radius: 999px;
    background: var(--rd-navy-2); border: 1px solid var(--rd-navy-garis); color: var(--rd-langit); font-size: .8rem; font-weight: 600;
    animation: rd-pudar-naik .55s .05s both;
}
.rd-hh-judul { font-size: clamp(2.2rem, 5.6vw, 3.9rem); line-height: 1.04; margin: .9rem 0 .7rem; overflow-wrap: anywhere; }
.rd-hh-sub { color: var(--rd-navy-redup); max-width: 36rem; margin: 0; font-size: clamp(.95rem, 1.4vw, 1.05rem); animation: rd-pudar-naik .7s .45s both; }
.rd-hh-slot { margin-top: 1.25rem; animation: rd-pudar-naik .7s .6s both; }
.rd-hh-slot .rd-btn-garis { color: var(--rd-navy-teks); border-color: var(--rd-navy-garis); background: color-mix(in srgb, var(--rd-navy-2) 70%, transparent); }
.rd-hh-slot .rd-btn-garis:hover { border-color: var(--rd-aksen); color: var(--rd-navy-teks); }
.rd-hh-slot .rd-cari-kecil input, .rd-hh-slot .form-select { background-color: var(--rd-permukaan); }
.rd-hh-slot .rd-cari-kecil { max-width: 24rem; }
.rd-cari-hero { max-width: 32rem; animation: none; }
.rd-hh-profil { display: flex; flex-direction: column; gap: .85rem; align-items: flex-start; }
.rd-hh-profil .rd-profil-klub, .rd-hh-profil .rd-profil-klub:hover { color: var(--rd-navy-teks); }
.rd-hh-profil .rd-profil-klub img { border-color: var(--rd-navy-garis); background: var(--rd-permukaan); }
.rd-hh-profil .rd-profil-klub strong { color: var(--rd-aksen); }
.rd-hh-profil .rd-profil-tautan a { color: var(--rd-langit); }
.rd-hh-profil-aksi { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.rd-subjudul-awal { margin-top: .5rem; }
.rd-hh-panggung {
    position: relative; min-width: 0; height: clamp(200px, 24vw, 280px);
    transform: translate3d(calc(var(--rd-tx) * 10px), calc(var(--rd-ty) * 8px), 0);
    transition: transform .8s cubic-bezier(.2, .7, .2, 1);
    animation: rd-g-panggung-masuk .9s .2s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes rd-g-panggung-masuk { from { opacity: 0; transform: translateY(24px) scale(.96); } }
.rd-hh-svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* =====================================================================
   2. MOTIF PODIUM (Ranking)
   ===================================================================== */
.rd-hh-sinar path { fill: color-mix(in srgb, var(--rd-navy-teks) 7%, transparent); transform-box: view-box; transform-origin: 50% 0; animation: rd-g-sinar 5s ease-in-out infinite alternate; }
.rd-hh-sinar .rd-hh-sinar--2 { fill: color-mix(in srgb, var(--rd-langit) 10%, transparent); transform-origin: 17% 0; animation-duration: 6.5s; animation-delay: -2s; }
.rd-hh-sinar .rd-hh-sinar--3 { fill: color-mix(in srgb, var(--rd-aksen) 10%, transparent); transform-origin: 83% 0; animation-duration: 5.8s; animation-delay: -1s; }
@keyframes rd-g-sinar { from { transform: rotate(-6deg); opacity: .5; } to { transform: rotate(6deg); opacity: 1; } }
.rd-hh-lantai { fill: color-mix(in srgb, var(--rd-langit) 14%, transparent); }
.rd-hh-blok { transform-box: fill-box; transform-origin: 50% 100%; animation: rd-g-naik .9s cubic-bezier(.34, 1.4, .64, 1) both; }
.rd-hh-blok rect:first-child { fill: var(--rd-navy-2); stroke: var(--rd-navy-garis); stroke-width: 1.5; }
.rd-hh-blok text { fill: color-mix(in srgb, var(--rd-navy-teks) 85%, transparent); font: italic 700 44px var(--rd-font); text-anchor: middle; }
.rd-hh-blok--1 { animation-delay: .55s; }
.rd-hh-blok--2 { animation-delay: .4s; }
.rd-hh-blok--3 { animation-delay: .7s; }
.rd-hh-blok--1 .rd-hh-blok-atas { fill: var(--rd-aksen); }
.rd-hh-blok--2 .rd-hh-blok-atas { fill: var(--rd-navy-teks); }
.rd-hh-blok--3 .rd-hh-blok-atas { fill: var(--rd-langit); }
@keyframes rd-g-naik { from { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } }
.rd-hh-medali { animation: rd-g-medali-jatuh .9s cubic-bezier(.34, 1.5, .64, 1) both; }
.rd-hh-medali--1 { animation-delay: 1.25s; }
.rd-hh-medali--2 { animation-delay: 1.1s; }
.rd-hh-medali--3 { animation-delay: 1.4s; }
@keyframes rd-g-medali-jatuh { from { opacity: 0; transform: translateY(-70px) rotate(-14deg); } }
.rd-hh-medali-ayun { transform-box: fill-box; transform-origin: 50% 0; animation: rd-g-ayun 3.4s ease-in-out infinite alternate; }
.rd-hh-medali--1 .rd-hh-medali-ayun { animation-delay: -1.2s; }
.rd-hh-medali--3 .rd-hh-medali-ayun { animation-delay: -2.3s; }
@keyframes rd-g-ayun { from { transform: rotate(-7deg); } to { transform: rotate(7deg) translateY(-3px); } }
.rd-hh-medali-pita { fill: var(--rd-navy-garis); }
.rd-hh-medali--1 .rd-hh-medali-luar { fill: var(--rd-aksen); }
.rd-hh-medali--2 .rd-hh-medali-luar { fill: var(--rd-navy-teks); }
.rd-hh-medali--3 .rd-hh-medali-luar { fill: var(--rd-langit); }
.rd-hh-medali-dalam { fill: none; stroke: var(--rd-navy); stroke-opacity: .35; stroke-width: 2; }
.rd-hh-medali-kilap { fill: none; stroke: var(--rd-navy-teks); stroke-width: 2.5; stroke-linecap: round; opacity: 0; animation: rd-g-kilap 3.2s ease-in-out infinite; }
.rd-hh-medali--2 .rd-hh-medali-kilap { stroke: var(--rd-langit); animation-delay: 1s; }
.rd-hh-medali--3 .rd-hh-medali-kilap { animation-delay: 2s; }
@keyframes rd-g-kilap { 0%, 100% { opacity: 0; } 20% { opacity: .95; } 40% { opacity: 0; } }
.rd-hh-kilau path { fill: var(--rd-navy-teks); transform-box: fill-box; transform-origin: center; opacity: 0; animation: rd-g-bintang 2.8s ease-in-out infinite; }
.rd-hh-kilau .rd-hh-kilau--2 { fill: var(--rd-aksen); animation-delay: .9s; }
.rd-hh-kilau .rd-hh-kilau--3 { fill: var(--rd-langit); animation-delay: 1.7s; }
@keyframes rd-g-bintang { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* =====================================================================
   3. MOTIF KARTU ID SKATER (Atlet, profil atlet)
   ===================================================================== */
.rd-hh-kartu-wadah { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; perspective: 900px; }
.rd-hh-kartu {
    --rd-kx: 0deg; --rd-ky: 0deg; --rd-sx: 50%; --rd-sy: 30%;
    position: relative; overflow: hidden; width: min(100%, 22rem); aspect-ratio: 1.586; padding: 1rem 1.15rem;
    display: flex; flex-direction: column; justify-content: space-between;
    border-radius: 1.25rem; color: var(--rd-teks); background: var(--rd-permukaan);
    border: 1px solid color-mix(in srgb, var(--rd-navy-teks) 30%, transparent);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
    transform: rotateX(var(--rd-kx)) rotateY(var(--rd-ky)) rotate(-4deg);
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
    animation: rd-g-kartu-apung 6s ease-in-out 1.2s infinite alternate;
}
@keyframes rd-g-kartu-apung { to { translate: 0 -10px; } }
.rd-hh-kartu::before { /* pita jersey di sisi kiri */
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
    background: linear-gradient(180deg, var(--rd-aksen), var(--rd-langit));
}
.rd-hh-kartu-kilau { /* kilau hologram mengikuti pointer, juga menyapu sendiri */
    position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
    background:
        radial-gradient(220px circle at var(--rd-sx) var(--rd-sy), color-mix(in srgb, var(--rd-langit) 55%, transparent), transparent 60%),
        linear-gradient(115deg, transparent 35%, color-mix(in srgb, var(--rd-navy-teks) 80%, transparent) 48%, transparent 60%);
    background-size: 100% 100%, 250% 100%;
    animation: rd-g-kartu-sapu 5s ease-in-out 1.6s infinite;
}
@keyframes rd-g-kartu-sapu { 0% { background-position: 0 0, 160% 0; } 30%, 100% { background-position: 0 0, -60% 0; } }
.rd-hh-kartu-pindai { /* garis pindai verifikasi */
    position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none;
    background: var(--rd-aksen); box-shadow: 0 0 14px 2px color-mix(in srgb, var(--rd-aksen) 60%, transparent);
    animation: rd-g-pindai 3.6s cubic-bezier(.6, 0, .4, 1) .9s infinite;
}
@keyframes rd-g-pindai { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 45% { transform: translateY(13rem); opacity: .9; } 55%, 100% { transform: translateY(13rem); opacity: 0; } }
.rd-hh-kartu-kepala { display: flex; justify-content: space-between; align-items: center; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rd-aksen-label); }
.rd-hh-kartu-cone { display: flex; gap: .35rem; }
.rd-hh-kartu-cone i { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid var(--rd-aksen); animation: rd-g-cone-tap 2.4s ease-in-out infinite; }
.rd-hh-kartu-cone i:nth-child(2) { border-bottom-color: var(--rd-langit); animation-delay: .15s; }
.rd-hh-kartu-cone i:nth-child(3) { animation-delay: .3s; }
@keyframes rd-g-cone-tap { 0%, 40%, 100% { transform: none; } 15% { transform: translateY(-4px) rotate(-10deg); } }
.rd-hh-kartu-isi { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.rd-hh-kartu-foto { flex: none; }
.rd-hh-kartu-foto .rd-avatar { width: 3.6rem; height: 3.6rem; font-size: 1.1rem; }
.rd-hh-kartu--contoh .rd-hh-kartu-foto { width: 3.6rem; height: 3.6rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--rd-primary-lembut); color: var(--rd-primary); font-size: 1.4rem; }
.rd-hh-kartu-teks { display: flex; flex-direction: column; gap: .35rem; min-width: 0; flex: 1; }
.rd-hh-kartu-teks strong { font-size: 1.15rem; font-weight: 700; font-style: italic; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-hh-kartu-teks small { color: var(--rd-teks-redup); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-hh-garis-isi { display: block; height: .7rem; width: 80%; border-radius: 999px; background: var(--rd-garis); position: relative; overflow: hidden; }
.rd-hh-garis-isi--pendek { width: 52%; }
.rd-hh-garis-isi::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--rd-permukaan-2), transparent); animation: rd-g-kerlip 1.6s ease-in-out infinite; }
@keyframes rd-g-kerlip { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.rd-hh-kartu-bawah { display: flex; justify-content: space-between; align-items: flex-end; gap: .5rem; }
.rd-hh-kartu-id { font-size: 1.05rem; font-weight: 700; letter-spacing: .04em; color: var(--rd-primary); white-space: nowrap; }
.rd-hh-kartu-stempel {
    display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px; font-size: .7rem; font-weight: 700;
    background: var(--rd-sukses-bg); color: var(--rd-sukses-teks); transform-origin: center;
    animation: rd-g-stempel .7s cubic-bezier(.34, 1.8, .64, 1) 1.5s both;
}
@keyframes rd-g-stempel { from { opacity: 0; transform: scale(2.2) rotate(-14deg); } }
.rd-hh-kartu-bayang { position: absolute; bottom: 4%; left: 50%; width: 60%; height: 18px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .45), transparent); animation: rd-g-bayang 6s ease-in-out 1.2s infinite alternate; }
@keyframes rd-g-bayang { to { transform: scaleX(.82); opacity: .6; } }

/* =====================================================================
   4. MOTIF LAJUR (daftar Klub): satu lajur sprint per klub
   ===================================================================== */
.rd-hh-lajur {
    position: absolute; inset: 6% 0; display: flex; flex-direction: column; justify-content: center; gap: .45rem;
    transform: perspective(700px) rotateX(18deg) rotateZ(-4deg);
}
.rd-hh-lajur-baris { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); align-items: center; gap: .6rem; animation: rd-g-lajur-masuk .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.35s + var(--rd-l) * 90ms); }
@keyframes rd-g-lajur-masuk { from { opacity: 0; transform: translateX(-30px); } }
.rd-hh-lajur-nama { font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--rd-navy-redup); text-align: right; font-family: var(--rd-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-hh-lajur-jalur {
    position: relative; height: 2.3rem; border-radius: .6rem; overflow: hidden;
    background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--rd-navy-teks) 9%, transparent) 0 18px, transparent 18px 34px) center / 100% 2px no-repeat, var(--rd-navy-2);
    border: 1px solid var(--rd-navy-garis);
}
.rd-hh-komet {
    position: absolute; top: 50%; left: -4rem; width: 3.5rem; height: .7rem; margin-top: -.35rem; border-radius: 999px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rd-aksen) 70%, transparent));
    animation: rd-g-komet calc(2.6s + var(--rd-l) * .35s) cubic-bezier(.45, 0, .25, 1) infinite;
    animation-delay: calc(.8s + var(--rd-l) * .22s);
}
.rd-hh-lajur-baris:nth-child(even) .rd-hh-komet { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rd-langit) 75%, transparent)); }
.rd-hh-komet::after { content: ""; position: absolute; right: -.2rem; top: 50%; width: .95rem; height: .95rem; translate: 0 -50%; border-radius: 50%; background: var(--rd-navy-teks); box-shadow: 0 0 12px 3px color-mix(in srgb, var(--rd-aksen) 55%, transparent); }
@keyframes rd-g-komet { 0% { left: -4rem; } 75%, 100% { left: 100%; } }
.rd-hh-petak { /* garis finish berpetak */
    position: absolute; right: 9%; top: 0; bottom: 0; width: 12px;
    background: conic-gradient(var(--rd-navy-teks) 25%, transparent 0 50%, var(--rd-navy-teks) 0 75%, transparent 0) 0 0 / 12px 12px;
    opacity: .55; border-radius: 2px;
}

/* =====================================================================
   5. MOTIF ORBIT (profil Klub)
   ===================================================================== */
.rd-hh-orbit {
    --rd-kx: 0deg; --rd-ky: 0deg;
    position: absolute; inset: 0; transform: perspective(800px) rotateX(calc(14deg + var(--rd-kx))) rotateY(var(--rd-ky));
    transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.rd-hh-oval { fill: none; stroke: var(--rd-navy-garis); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.rd-hh-oval--dalam { stroke: color-mix(in srgb, var(--rd-navy-teks) 15%, transparent); stroke-dasharray: none; }
.rd-hh-oval-alir { fill: none; stroke: var(--rd-aksen); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 160 840; animation: rd-g-alir 6s linear infinite; opacity: .7; }
@keyframes rd-g-alir { to { stroke-dashoffset: -1000; } }
.rd-hh-cone-kecil { fill: var(--rd-aksen); transform-box: fill-box; transform-origin: 50% 100%; animation: rd-g-cone-tap 3s ease-in-out infinite; animation-delay: calc(var(--rd-c) * .5s); }
.rd-hh-cone-kecil:nth-of-type(even) { fill: var(--rd-langit); }
.rd-hh-orbit-cahaya { fill: var(--rd-aksen); opacity: .25; }
.rd-hh-orbit-titik { fill: var(--rd-navy-teks); stroke: var(--rd-aksen); stroke-width: 3; }
.rd-hh-orbit-logo {
    position: absolute; left: 50%; top: 50%; width: clamp(5rem, 9vw, 6.5rem); height: clamp(5rem, 9vw, 6.5rem); translate: -50% -50%;
    border-radius: 1.5rem; display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: var(--rd-permukaan); border: 3px solid var(--rd-aksen); box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
    animation: rd-g-logo-masuk 1s .4s cubic-bezier(.34, 1.5, .64, 1) both, rd-g-logo-apung 5s ease-in-out 1.5s infinite alternate;
}
.rd-hh-orbit-logo img { width: 100%; height: 100%; object-fit: contain; padding: 12%; }
.rd-hh-orbit-logo b { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 700; font-style: italic; color: var(--rd-primary); }
@keyframes rd-g-logo-masuk { from { opacity: 0; transform: translateY(-40px) scale(1.2) rotate(-10deg); } }
@keyframes rd-g-logo-apung { to { transform: translateY(-8px) rotate(-3deg); } }

/* =====================================================================
   6. MOTIF FINISH (Event, hasil event): gerbang waktu + HUD
   Satu putaran = --rd-lap. Pelari bergerak 0→100% lebar lintasan di 0–75% putaran; garis finish di 80% lebar
   → lewat pada 0.6 putaran. Sensor gerbang & kilat memakai titik yang sama. HUD dibaca publik-gerak.js.
   ===================================================================== */
.rd-hh-finish { --rd-lap: 4.6s; position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
.rd-hh-hud {
    align-self: flex-end; min-width: 12.5rem; padding: .8rem 1rem; border-radius: 1rem;
    background: color-mix(in srgb, var(--rd-navy-2) 85%, transparent); border: 1px solid var(--rd-navy-garis);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .3); backdrop-filter: blur(6px);
    animation: rd-g-hud-masuk .8s .5s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes rd-g-hud-masuk { from { opacity: 0; transform: translateY(-16px) rotate(2deg); } }
.rd-hh-hud-atas { display: flex; justify-content: space-between; gap: .75rem; font-size: .68rem; font-weight: 600; color: var(--rd-navy-redup); text-transform: uppercase; letter-spacing: .08em; }
.rd-hh-hud-status { color: var(--rd-langit); }
.rd-hh-hud.is-finish .rd-hh-hud-status { color: var(--rd-aksen); }
.rd-hh-hud-waktu { display: flex; align-items: baseline; gap: .35rem; margin: .15rem 0 .1rem; }
.rd-hh-hud-waktu b { font-size: clamp(1.9rem, 3.4vw, 2.5rem); font-weight: 700; font-style: italic; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--rd-navy-teks); }
.rd-hh-hud.is-finish .rd-hh-hud-waktu b { color: var(--rd-aksen); animation: rd-g-hud-kedip .5s ease-out; }
@keyframes rd-g-hud-kedip { 0% { transform: scale(1.12); } 100% { transform: none; } }
.rd-hh-hud-waktu small, .rd-hh-hud-sub { color: var(--rd-navy-redup); font-size: .75rem; }
.rd-hh-lintasan { position: relative; height: 5.5rem; transform: perspective(600px) rotateX(28deg); transform-origin: 50% 100%; }
.rd-hh-lintasan-lajur {
    position: absolute; inset: 0; border-radius: .8rem; background: var(--rd-navy-2); border: 1px solid var(--rd-navy-garis);
    background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--rd-navy-teks) 10%, transparent) 0 22px, transparent 22px 40px);
    background-size: 100% 2px; background-position: center; background-repeat: no-repeat;
}
.rd-hh-cone-baris { position: absolute; left: 6%; right: 26%; top: 50%; translate: 0 -60%; display: flex; justify-content: space-between; }
.rd-hh-cone-baris i { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 14px solid var(--rd-aksen); transform-origin: 50% 100%; animation: rd-g-cone-lewat var(--rd-lap) linear infinite; }
.rd-hh-cone-baris i:nth-child(even) { border-bottom-color: var(--rd-langit); }
.rd-hh-cone-baris i:nth-child(1) { animation-delay: calc(var(--rd-lap) * -.94); }
.rd-hh-cone-baris i:nth-child(2) { animation-delay: calc(var(--rd-lap) * -.85); }
.rd-hh-cone-baris i:nth-child(3) { animation-delay: calc(var(--rd-lap) * -.76); }
.rd-hh-cone-baris i:nth-child(4) { animation-delay: calc(var(--rd-lap) * -.67); }
.rd-hh-cone-baris i:nth-child(5) { animation-delay: calc(var(--rd-lap) * -.58); }
.rd-hh-cone-baris i:nth-child(6) { animation-delay: calc(var(--rd-lap) * -.49); }
@keyframes rd-g-cone-lewat { 0%, 6%, 100% { transform: none; } 2% { transform: scale(1.4) rotate(-10deg); } }
.rd-hh-garis-finish {
    position: absolute; left: 80%; top: 0; bottom: 0; width: 14px; translate: -50% 0;
    background: conic-gradient(var(--rd-navy-teks) 25%, var(--rd-navy) 0 50%, var(--rd-navy-teks) 0 75%, var(--rd-navy) 0) 0 0 / 14px 14px;
}
.rd-hh-gerbang { position: absolute; left: 80%; top: -1.6rem; bottom: -.3rem; width: 3.4rem; translate: -50% 0; border: 3px solid var(--rd-navy-garis); border-bottom: 0; border-radius: .6rem .6rem 0 0; }
.rd-hh-gerbang i { position: absolute; top: .35rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--rd-navy-garis); animation: rd-g-sensor var(--rd-lap) linear infinite; }
.rd-hh-gerbang i:first-child { left: .35rem; }
.rd-hh-gerbang i:last-child { right: .35rem; }
@keyframes rd-g-sensor { 0%, 59%, 76%, 100% { background: var(--rd-navy-garis); box-shadow: none; } 60%, 72% { background: var(--rd-aksen); box-shadow: 0 0 12px 3px var(--rd-aksen); } }
.rd-hh-pelari { position: absolute; left: 0; right: 0; top: 50%; height: 0; }
.rd-hh-pelari i {
    position: absolute; left: 0; top: 0; width: 4.5rem; height: .8rem; margin-top: -.4rem; border-radius: 999px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rd-aksen) 75%, transparent));
    animation: rd-g-pelari var(--rd-lap) linear infinite;
}
.rd-hh-pelari i::after { content: ""; position: absolute; right: -.3rem; top: 50%; width: 1.05rem; height: 1.05rem; translate: 0 -50%; border-radius: 50%; background: var(--rd-navy-teks); box-shadow: 0 0 14px 4px color-mix(in srgb, var(--rd-aksen) 60%, transparent); }
/* 0→75%: dari kiri ke kanan; kepala pelari (tepi kanan elemen) tepat di 80% lebar pada 60% putaran */
@keyframes rd-g-pelari {
    0% { left: -4.5rem; opacity: 0; }
    5% { opacity: 1; }
    60% { left: calc(80% - 4.2rem); }
    75% { left: 100%; opacity: 1; }
    76%, 100% { left: 100%; opacity: 0; }
}
.rd-hh-kilat { position: absolute; left: 80%; top: -30%; bottom: -30%; width: 40%; translate: -50% 0; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--rd-aksen) 45%, transparent), transparent); opacity: 0; animation: rd-g-kilat var(--rd-lap) linear infinite; }
@keyframes rd-g-kilat { 0%, 59%, 74%, 100% { opacity: 0; transform: scale(.6); } 61% { opacity: 1; transform: scale(1.1); } }

/* =====================================================================
   7. BERANDA
   ===================================================================== */
.rd-hero .rd-hh-latar { clip-path: none; z-index: 0; background: transparent; }
.rd-hero .rd-hh-kisi { -webkit-mask-image: radial-gradient(60% 70% at 80% 30%, black, transparent 75%); mask-image: radial-gradient(60% 70% at 80% 30%, black, transparent 75%); }
.rd-hero-isi, .rd-jalur { z-index: 1; }
/* Baris aksen: kilau menyapu teks oranye */
.rd-hero-judul .rd-aksen-teks .rd-huruf-h {
    background: linear-gradient(110deg, var(--rd-aksen) 40%, color-mix(in srgb, var(--rd-aksen) 35%, var(--rd-navy-teks)) 50%, var(--rd-aksen) 60%) 0 0 / 300% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: rd-g-huruf .8s cubic-bezier(.2, .8, .2, 1) both, rd-g-kilau-teks 5s ease-in-out infinite;
    animation-delay: calc(.15s + var(--i) * 32ms), calc(2.4s + var(--i) * 25ms);
}
@keyframes rd-g-kilau-teks { 0% { background-position: 100% 0; } 25%, 100% { background-position: 0 0; } }
/* Garis kecepatan di bawah baris aksen */
.rd-hero-judul .rd-aksen-teks { position: relative; }
.rd-hero-judul .rd-aksen-teks::after {
    content: ""; position: absolute; left: 0; bottom: -.05em; width: min(100%, 9.5em); height: .09em; border-radius: 999px;
    background: linear-gradient(90deg, var(--rd-aksen), transparent); transform-origin: left;
    animation: rd-g-garis-bawah 1s 1.3s cubic-bezier(.6, 0, .2, 1) both;
}
@keyframes rd-g-garis-bawah { from { transform: scaleX(0); opacity: 0; } 20% { opacity: 1; } }
/* Kartu juara: kilau melintas bergiliran */
.rd-podium-kartu { position: relative; overflow: hidden; }
.rd-podium-kartu::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, color-mix(in srgb, var(--rd-navy-teks) 14%, transparent) 50%, transparent 65%) 0 0 / 250% 100%;
    animation: rd-g-kartu-sapu-x 6s ease-in-out infinite; animation-delay: calc(2s + var(--rd-urut, 0) * .6s);
}
@keyframes rd-g-kartu-sapu-x { 0% { background-position: 150% 0; } 25%, 100% { background-position: -60% 0; } }
.rd-podium-1 .rd-podium-pos { animation: rd-g-pos-denyut 2.6s ease-in-out 1.6s infinite; }
@keyframes rd-g-pos-denyut { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rd-aksen) 55%, transparent); } 50% { box-shadow: 0 0 0 10px transparent; } }
/* Angka ringkas: garis tipis tumbuh di bawah tiap angka saat muncul */
.rd-angka-grid > div { position: relative; padding-bottom: .5rem; }
.rd-angka-grid > div::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2.5rem; height: 3px; border-radius: 3px; background: var(--rd-aksen); transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.2, .7, .2, 1) .3s; }
.rd-angka-grid > div.is-terlihat::after, html:not(.rd-siap) .rd-angka-grid > div::after { transform: scaleX(1); }
/* CTA penutup: sapuan cahaya */
.rd-cta::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 40%, color-mix(in srgb, var(--rd-navy-teks) 12%, transparent) 50%, transparent 60%) 0 0 / 250% 100%;
    animation: rd-g-kartu-sapu-x 5.5s ease-in-out 1s infinite;
}

/* =====================================================================
   8. JUDUL PER HURUF
   publik-gerak.js memecah [data-rd-huruf] (dan .rd-judul-bagian) per huruf; teks utuh tetap untuk pembaca layar.
   Huruf "meluncur" masuk dari kanan dengan kemiringan (seperti skater mengerem).
   ===================================================================== */
.rd-huruf-kata { display: inline-block; white-space: nowrap; }
.rd-huruf-h { display: inline-block; }
.is-pecah .rd-huruf-h { animation: rd-g-huruf .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.15s + var(--i) * 32ms); }
@keyframes rd-g-huruf { from { opacity: 0; transform: translateX(.7em) skewX(-24deg) scaleX(1.35); } 55% { opacity: 1; } }
/* Judul bagian: menunggu terlihat dulu */
.rd-gerak-siap .rd-judul-bagian.is-pecah:not(.is-terlihat) .rd-huruf-h { animation: none; opacity: 0; }
.rd-judul-bagian.is-pecah .rd-huruf-h { animation-delay: calc(var(--i) * 24ms); }
/* Label bagian: garis kecil memanjang */
.rd-label-bagian { position: relative; padding-left: 1.6rem; }
.rd-label-bagian::before { content: ""; position: absolute; left: 0; top: 50%; width: 1.1rem; height: 2px; border-radius: 2px; background: currentColor; transform-origin: left; animation: rd-g-garis-bawah .8s .2s cubic-bezier(.6, 0, .2, 1) both; }
.rd-hh .rd-label-bagian, .rd-rincian .rd-label-bagian { padding-left: 0; }
.rd-hh .rd-label-bagian::before, .rd-rincian .rd-label-bagian::before { display: none; }

/* =====================================================================
   9. MUNCUL BERURUTAN & RANKING
   ===================================================================== */
.rd-gerak-siap .rd-gerak-anak { opacity: 0; }
.rd-gerak-siap .is-masuk > .rd-gerak-anak, .rd-gerak-siap .is-masuk > tr.rd-gerak-anak { animation: rd-g-anak .65s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--rd-g, 0) * 55ms); }
@keyframes rd-g-anak { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.rd-gerak-siap .rd-gerak-anak.is-selesai { opacity: 1; animation: none; }

/* Baris ranking: "barisan start" — baris meluncur dari kiri berurutan, tombol (bukan <li>) yang bergerak
   supaya tidak bentrok dengan animasi FLIP pada <li> di publik.js */
.rd-gerak-siap .rd-ranking-daftar.rd-start-siap > li > .rd-baris-atlet { opacity: 0; }
.rd-gerak-siap .rd-ranking-daftar.rd-start-siap.is-masuk > li > .rd-baris-atlet { animation: rd-g-start .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--rd-g, 0) * 60ms); }
@keyframes rd-g-start { from { opacity: 0; transform: translateX(-40px) skewX(-8deg); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
.rd-ranking-daftar.is-masuk .rd-pos-1, .rd-ranking-daftar.is-masuk .rd-pos-2, .rd-ranking-daftar.is-masuk .rd-pos-3 { animation: rd-g-pos-pop .6s cubic-bezier(.34, 1.8, .64, 1) both; animation-delay: calc(.25s + var(--rd-g, 0) * 60ms); }
@keyframes rd-g-pos-pop { from { transform: scale(.3) rotate(-25deg); } }
/* Medali 1–3: kilau melintas bergiliran */
.rd-pos-1, .rd-pos-2, .rd-pos-3 { position: relative; overflow: hidden; }
.rd-pos-1::after, .rd-pos-2::after, .rd-pos-3::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%) 0 0 / 300% 100%;
    animation: rd-g-kartu-sapu-x 4.5s ease-in-out infinite;
}
.rd-pos-2::after { animation-delay: .4s; }
.rd-pos-3::after { animation-delay: .8s; }
/* Ganti filter: garis finish menyapu tabel */
.rd-ranking { position: relative; }
.rd-ranking::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 14px; z-index: 3; pointer-events: none; opacity: 0;
    background: conic-gradient(var(--rd-aksen) 25%, transparent 0 50%, var(--rd-aksen) 0 75%, transparent 0) 0 0 / 14px 14px;
    box-shadow: 0 0 24px 6px color-mix(in srgb, var(--rd-aksen) 35%, transparent);
}
.rd-ranking.is-sapu::after { animation: rd-g-sapu-finish .85s cubic-bezier(.6, 0, .3, 1); }
@keyframes rd-g-sapu-finish { 0% { opacity: 0; left: 0; } 10% { opacity: .9; } 90% { opacity: .9; } 100% { opacity: 0; left: calc(100% - 14px); } }
/* Rincian poin: angka total memantul */
.rd-rincian.show .rd-rincian-total b { animation: rd-g-pos-pop .6s cubic-bezier(.34, 1.8, .64, 1) .1s both; }

/* Hasil event: podium dalam daftar mendapat garis aksen di kiri */
.rd-hasil-daftar li { position: relative; }
.rd-hasil-daftar li:has(.rd-pos-1)::before, .rd-hasil-daftar li:has(.rd-pos-2)::before, .rd-hasil-daftar li:has(.rd-pos-3)::before {
    content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 0 3px 3px 0; background: var(--rd-aksen);
    transform: scaleY(0); transition: transform .5s cubic-bezier(.34, 1.5, .64, 1) .3s;
}
.rd-hasil-daftar li:has(.rd-pos-2)::before { background: var(--rd-primary); }
.rd-hasil-daftar li:has(.rd-pos-3)::before { background: var(--rd-langit); }
.is-masuk > li::before, html:not(.rd-gerak-siap) .rd-hasil-daftar li::before { transform: scaleY(1) !important; }

/* =====================================================================
   10. KARTU (sorot & miring) dan TOMBOL (kilau & magnet)
   ===================================================================== */
.rd-sorot { position: relative; isolation: isolate; }
.rd-sorot::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s ease;
    background: radial-gradient(260px circle at var(--rd-sx, 50%) var(--rd-sy, 50%), color-mix(in srgb, var(--rd-aksen) 13%, transparent), transparent 70%);
}
.rd-sorot:hover::before { opacity: 1; }
.rd-miring { transform: perspective(900px) rotateX(var(--rd-kx, 0deg)) rotateY(var(--rd-ky, 0deg)) translateY(var(--rd-angkat, 0)); transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow var(--rd-transisi), border-color var(--rd-transisi); }
.rd-miring:hover { --rd-angkat: -3px; }
a.rd-podium-kartu.rd-miring:hover { transform: perspective(900px) rotateX(var(--rd-kx, 0deg)) rotateY(var(--rd-ky, 0deg)) translateX(-6px); }

.rd-btn-aksen { position: relative; overflow: hidden; translate: var(--rd-mx, 0) var(--rd-my, 0); transition: translate .35s var(--rd-pegas), box-shadow var(--rd-transisi), transform var(--rd-transisi), background-color var(--rd-transisi); }
.rd-btn-aksen::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%) 0 0 / 250% 100%;
    background-position: 160% 0;
}
.rd-btn-aksen:hover::after { animation: rd-g-tombol-sapu .7s ease-out; }
@keyframes rd-g-tombol-sapu { from { background-position: 160% 0; } to { background-position: -60% 0; } }
.rd-btn .rd-geser { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.rd-btn:hover .rd-geser { transform: translateX(4px) skewX(-10deg); }
/* Masuk di header: cincin berdenyut pelan, mengundang klub masuk */
.rd-ph-aksi .rd-btn-aksen::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--rd-aksen); opacity: 0; animation: rd-g-cincin 3.4s ease-out 2s infinite; pointer-events: none; }
@keyframes rd-g-cincin { 0% { opacity: .8; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(1.25, 1.6); } }
.rd-ph-aksi .rd-btn-aksen { overflow: visible; }
.rd-ph-aksi .rd-btn-aksen::after { overflow: hidden; }

/* =====================================================================
   11. PROGRES GULIR & SKATER CARA KERJA
   ===================================================================== */
.rd-progres-gulir { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none; }
.rd-progres-gulir span { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(90deg, var(--rd-langit), var(--rd-aksen)); transform-origin: left; transform: scaleX(var(--rd-gulir, 0)); }
.rd-progres-gulir i { position: absolute; top: 50%; left: calc(var(--rd-gulir, 0) * 100%); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--rd-navy-teks); box-shadow: 0 0 10px 2px var(--rd-aksen); opacity: 0; transition: opacity .3s ease; }
.rd-ph.is-gulir .rd-progres-gulir i { opacity: 1; }
.rd-langkah-skater { position: absolute; z-index: 2; left: calc(1.4rem + (100% - 2.8rem) * var(--rd-progres, 0)); top: calc(1.4rem + 2px); width: 14px; height: 14px; translate: -50% -50%; border-radius: 50%; background: var(--rd-permukaan); border: 3px solid var(--rd-aksen); box-shadow: 0 0 0 5px color-mix(in srgb, var(--rd-aksen) 20%, transparent); transition: left .15s linear; pointer-events: none; }
.rd-langkah-item.is-lewat .rd-langkah-cone { animation: rd-g-cone-lompat .6s cubic-bezier(.34, 1.6, .64, 1); }
@keyframes rd-g-cone-lompat { 40% { transform: scale(1.3) rotate(-14deg) translateY(-6px); } }

/* =====================================================================
   12. JEDA, GERAK DIKURANGI, RESPONSIF
   ===================================================================== */
.rd-hh.is-diam *, .rd-hh.is-diam *::before, .rd-hh.is-diam *::after, .rd-hh.is-diam::after,
.rd-jeda *, .rd-jeda *::before, .rd-jeda *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
    .rd-gerak-siap .rd-gerak-anak, .rd-gerak-siap .rd-ranking-daftar.rd-start-siap > li > .rd-baris-atlet { opacity: 1; }
    .rd-hh-angin, .rd-hh-kartu-pindai, .rd-hh-pelari, .rd-hh-kilat, .rd-hh-komet { display: none; }
    .rd-miring, .rd-hh-kartu, .rd-hh-orbit { transform: none !important; }
    .rd-btn-aksen { translate: none; }
}

@media (max-width: 991.98px) {
    .rd-hh-isi { grid-template-columns: 1fr; }
    .rd-hh-isi { gap: 1.25rem; }
    .rd-hh-panggung { height: clamp(150px, 40vw, 220px); }
    .rd-progres-gulir { display: none; }
}
@media (max-width: 767.98px) {
    .rd-langkah-skater { left: 1.3rem; top: calc(.5rem + (100% - 1rem) * var(--rd-progres, 0)); translate: -50% -50%; margin-left: 2px; transition: top .15s linear; }
    .rd-hh-judul { font-size: clamp(2rem, 9vw, 2.6rem); }
    .rd-hh-panggung { height: 150px; }
    .rd-hh--kartu .rd-hh-panggung { height: 200px; }
    .rd-hh--podium .rd-hh-panggung { height: 140px; }
    .rd-hh-kartu { width: min(100%, 19rem); }
    .rd-hh-hud { min-width: 0; padding: .6rem .8rem; }
    .rd-hh-lajur-jalur { height: 1.8rem; }
    .rd-hh-angin i:nth-child(n+4) { display: none; }
}
@media print {
    .rd-hh-latar, .rd-hh-panggung, .rd-hh::after, .rd-progres-gulir { display: none; }
    .rd-hh { color: var(--rd-teks); padding: 0 0 1rem; }
}