/* ==========================================================================
   Balikpapan Open — lapisan sporty di atas Tailwind.
   Terang & bersih; kesan sporty datang dari tipografi + geometri, bukan latar gelap.
   ========================================================================== */

/* --- 1. Batang aksen judul section (pengganti garis lurus lama) ----------- */
.accent-bar {
    display: flex;
    align-items: center;
    gap: 6px;
}

.accent-bar::before,
.accent-bar::after {
    content: "";
    display: block;
    height: 5px;
    border-radius: 1px;
    transform: skewX(-12deg);
}

.accent-bar::before {
    width: 44px;
    background: #C8102E;
}

.accent-bar::after {
    width: 16px;
    background: #D4A537;
}

.accent-bar.is-center {
    justify-content: center;
}

/* --- 2. Eyebrow bernomor: 03 / KATEGORI ---------------------------------- */
.eyebrow {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: #C8102E;
}

.eyebrow .eyebrow-num {
    font-family: "Archivo Black", system-ui, sans-serif;
    /* zinc-500, bukan zinc-400: teks 11px butuh kontras >= 4.5:1 di atas putih */
    color: #71717A;
    margin-right: .5rem;
}

/* --- 3. Chip miring (teks di-counter-skew agar tetap tegak) --------------- */
.chip-skew {
    display: inline-block;
    transform: skewX(-8deg);
}

.chip-skew>span {
    display: inline-block;
    transform: skewX(8deg);
}

/* --- 4. Pemisah section miring ------------------------------------------- */
.edge-top {
    clip-path: polygon(0 2.5vw, 100% 0, 100% 100%, 0 100%);
}

.edge-bottom {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5vw), 0 100%);
}

/* --- 5. Kartu sporty: garis aksen atas muncul saat hover/focus ------------ */
.card-sport {
    position: relative;
    background: #fff;
    border: 1px solid #E4E4E7;
    border-radius: 1rem;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.card-sport::before {
    content: "";
    position: absolute;
    inset: -1px -1px auto -1px;
    height: 3px;
    border-radius: 1rem 1rem 0 0;
    background: linear-gradient(90deg, #C8102E 0%, #D4A537 100%);
    opacity: 0;
    transition: opacity .25s ease;
}

.card-sport:hover,
.card-sport:focus-within {
    transform: translateY(-4px);
    border-color: #D4D4D8;
    box-shadow: 0 2px 4px rgba(11, 15, 20, .04), 0 16px 32px -16px rgba(11, 15, 20, .18);
}

.card-sport:hover::before,
.card-sport:focus-within::before {
    opacity: 1;
}

/* --- 6. Hairline racing di bawah navbar ---------------------------------- */
.rule-race {
    height: 2px;
    background: linear-gradient(90deg, #C8102E 0%, #C8102E 35%, #D4A537 65%, #D4A537 100%);
}

/* --- Frame gambar hero: miring + disatukan warnanya ---------------------- */
.hero-frame {
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
    background: #FEFCE8;
}

.hero-frame img {
    mix-blend-mode: multiply;
}

@media (max-width: 767px) {
    .hero-frame {
        clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
    }
}

/* --- Latar hero: glow lembut + grid halus -------------------------------- */
.hero-glow {
    background:
        radial-gradient(55% 45% at 15% 8%, rgba(200, 16, 46, .07), transparent 70%),
        radial-gradient(50% 45% at 88% 20%, rgba(212, 165, 55, .12), transparent 70%);
}

.hero-grid {
    background-image:
        linear-gradient(to right, rgba(11, 15, 20, .045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(11, 15, 20, .045) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 85%);
    mask-image: linear-gradient(to bottom, black 0%, transparent 85%);
}

/* --- Tombol primary ------------------------------------------------------ */
.btn-primary {
    background: linear-gradient(135deg, #C8102E 0%, #A50D26 100%);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #A50D26 0%, #881337 100%);
}

/* Teks gradien hanya untuk judul besar (>=24px bold) — kontras >= 4.5:1 */
.text-sport-gradient {
    background: linear-gradient(100deg, #C8102E 0%, #A50D26 60%, #8A6410 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- Animasi reveal ------------------------------------------------------ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp .7s ease-out forwards;
    opacity: 0;
}

.delay-100 {
    animation-delay: .1s;
}

.delay-200 {
    animation-delay: .2s;
}

.delay-300 {
    animation-delay: .3s;
}

.delay-400 {
    animation-delay: .4s;
}

.delay-500 {
    animation-delay: .5s;
}

/* --- Pita marquee (statis di alur dokumen, bukan fixed) ------------------ */
.marquee-container {
    width: 100%;
    overflow: hidden;
}

.marquee-content {
    display: flex;
    white-space: nowrap;
    animation: marquee 45s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.marquee-content:hover {
    animation-play-state: paused;
}

/* --- Tab kategori & kelas ------------------------------------------------ */
.tab-btn[aria-selected="true"] {
    background: #C8102E;
    color: #fff;
    border-color: #C8102E;
}

.tab-btn[aria-selected="true"] .tab-count {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* --- Nav aktif (scrollspy) ---------------------------------------------- */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: #C8102E;
    transform: scaleX(0);
    transition: transform .2s ease;
}

.nav-link[aria-current="true"] {
    color: #C8102E;
}

.nav-link[aria-current="true"]::after,
.nav-link:hover::after {
    transform: scaleX(1);
}

/* --- Sembunyikan scrollbar pada strip tab yang bisa digeser -------------- */
.no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* --- Hormati preferensi gerak ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after,
    .marquee-content {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .animate-fade-in-up {
        opacity: 1 !important;
    }

    .card-sport:hover,
    .card-sport:focus-within {
        transform: none;
    }
}