/*
 * Alfamart Run 2026 shell styles
 * Diadaptasi dari https://run.alfamart.co.id/static/css/style.css
 * Aset (gambar & font) disalin ke public/static/...
 */

@font-face {
    font-family: 'Manrope';
    src: url('/static/font/Manrope/Manrope-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Russo One';
    src: url('/static/font/Russo_One/RussoOne-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.font-manrope {
    font-family: 'Manrope', sans-serif;
}

.font-russo {
    font-family: 'Russo One', sans-serif;
}

/* Background poster utama (runner) — sama seperti situs asli */
.bg-runner {
    background-image: url('/static/img/Main_Banner/bg-mainpage.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 126vh;
}

/* Panel logo Alfamart Run (shape-logo) */
.bg-banner-content {
    background-repeat: no-repeat;
}

@media (max-width: 1024px) {
    .bg-banner-content {
        background-image: unset !important;
    }
}

.menu-btn {
    transition: all 0.3s ease;
}

.menu-btn:hover {
    transform: translateX(10px);
    background-color: #fff;
}

.timer-box {
    backdrop-filter: blur(10px);
}

@keyframes alfamart-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

.animate-pulse-slow {
    animation: alfamart-pulse 2s ease-in-out infinite;
}

/* Dropdown menu (menu utama) */
.dropdown-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.dropdown-menu.active {
    max-height: 500px;
}

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

@keyframes scroll-right {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes scroll-left {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

.animate-scroll-right {
    animation: scroll-right 30s linear infinite;
}

.animate-scroll-left {
    animation: scroll-left 30s linear infinite;
}

.gallery-row:hover .animate-scroll-right,
.gallery-row:hover .animate-scroll-left {
    animation-play-state: paused;
}

/* Utility z-index yang dipakai situs asli */
.z-100 {
    z-index: 999999;
}

/* Hero content fixed positioning */
.hero-fixed {
    position: fixed;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
    top: 0;
    width: 100%;
}

.hero-unfixed {
    position: relative;
    left: unset;
    right: unset;
}

@media (max-width: 2220px) {
    .bg-runner {
        height: 160vh;
    }
}

@media (max-width: 1820px) {
    .bg-runner {
        height: 145vh;
    }
}

@media (max-width: 1720px) {
    .bg-runner {
        height: 140vh;
    }
}

@media (max-width: 1620px) {
    .bg-runner {
        height: 135vh;
    }
}

@media (max-width: 1520px) {
    .bg-runner {
        height: 130vh;
    }
}

@media (max-width: 1420px) {
    .bg-runner {
        height: 125vh;
    }
}

@media (max-width: 1320px) {
    .bg-runner {
        height: 120vh;
    }
}

@media (max-width: 1224px) {
    .bg-runner {
        height: 100vh;
    }
}

@media (max-width: 1024px) {
    .bg-runner {
        background-size: cover;
        background-position: center;
    }

    .hero-fixed {
        position: relative !important;
    }
}

/* ------------------------------------------------------------------
 * Layout section halaman statis Alfamart Run
 * Diadaptasi dari static/css/style.css template asli.
 * ------------------------------------------------------------------ */

/*
 * Template asli memakai margin-top: -275px + padding-top: 310px agar
 * konten section berjarak ~35px dari bawah poster hero. Di layout ini
 * poster hero sudah menjadi background penuh, jadi cukup padding.
 */
#guest-star {
    margin-top: -60px;
}

@media (max-width: 1620px) {
    #total-hadiah {
        margin-top: -250px;
    }
}

@media (max-width: 1024px) {
    #reason-run {
        background-size: cover;
        background-repeat: no-repeat;
    }

    #guest-star {
        margin-top: 0 !important;
        height: max-content;
        padding: 32px 12px;
    }

    #schedule,
    #total-hadiah {
        margin-top: 0;
    }
}

/* ------------------------------------------------------------------
 * Scroll Animation Styles — disamakan dengan run.alfamart.co.id
 * (static/css/style.css + animate.css yang dipakai template asli)
 * ------------------------------------------------------------------ */

[data-animation] {
    opacity: 0;
    transition: opacity 0.4s ease-out;
    will-change: opacity, transform;
    backface-visibility: hidden;
}

[data-animation].animate__animated {
    opacity: 1;
    animation-duration: 1.15s;
    /* Kurva ease-out yang lembut: cepat di awal, melambat halus di akhir */
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-fill-mode: both;
}

/* Delay bertingkat yang lebih rapat agar alurnya mengalir */
[data-animation].animate__animated:nth-child(1) {
    animation-delay: 0.08s;
}

[data-animation].animate__animated:nth-child(2) {
    animation-delay: 0.16s;
}

[data-animation].animate__animated:nth-child(3) {
    animation-delay: 0.24s;
}

[data-animation].animate__animated:nth-child(4) {
    animation-delay: 0.32s;
}

[data-animation].animate__animated:nth-child(5) {
    animation-delay: 0.4s;
}

[data-animation].animate__animated:nth-child(6) {
    animation-delay: 0.48s;
}

/* Keyframes inti animate.css yang dipakai template */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-48px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(48px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.94, 0.94, 0.94);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

.animate__animated {
    animation-duration: 1.15s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-fill-mode: both;
}

.animate__fadeIn {
    animation-name: fadeIn;
}

.animate__fadeInUp {
    animation-name: fadeInUp;
}

.animate__fadeInDown {
    animation-name: fadeInDown;
}

.animate__fadeInLeft {
    animation-name: fadeInLeft;
}

.animate__fadeInRight {
    animation-name: fadeInRight;
}

.animate__zoomIn {
    animation-name: zoomIn;
}

/* Aksesibilitas: tampilkan konten tanpa animasi bila pengguna memintanya */
@media (prefers-reduced-motion: reduce) {
    [data-animation],
    [data-animation].animate__animated {
        opacity: 1 !important;
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}