/* Landing
******************************************************************************* */
.section-py {
    padding-block: 6.25rem;
    padding-inline: 0;
}

@media (max-width: 1199.98px) {
    .section-py {
        padding-block: 5rem;
        padding-inline: 0;
    }
}

@media (max-width: 767.98px) {
    .section-py {
        padding-block: 3rem;
        padding-inline: 0;
    }
}

/* Tribute Hero */
.tribute-hero {
    background-color: var(--bs-body-bg);
}

/* Gradient Background */
.hero-bg {
    --background: 30 15% 8%;
    --secondary: 30 25% 18%;

    background: linear-gradient(
        180deg,
        hsl(var(--secondary)) 0%,   /* top */
        hsl(var(--background) / 0.5) 40%, /* middle, semi-transparent */
        hsl(var(--background)) 100%  /* bottom */
    );
}

/* Image */
.hero-image-wrapper {
    width: 400px;
    height: 400px;
    position: relative;
}

.hero-image {
    width: 100%;
    height: 100%;
    border: 4px solid var(--bs-primary);
    box-shadow: 0 0 40px rgba(var(--bs-primary-rgb), 0.35);
    object-fit: cover;
    object-position: top;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .hero-image-wrapper {
        width: 220px;
        height: 220px;
        margin-bottom: 1.5rem;
        margin-top: 1.5rem;
    }

    .tribute-hero {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .display-5 {
        font-size: 2rem;
    }

    .fs-lg-3 {
        font-size: 1.1rem;
    }

    .layout-navbar {
        padding-bottom: 1rem;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .hero-image-wrapper {
        width: 180px;
        height: 180px;
        margin-top: 2rem;
    }
    .tribute-hero {
        padding-top: 3rem;
    }
}


/* Outer Ring */
.hero-image-ring {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 2px solid rgba(var(--bs-primary-rgb), 0.25);
}

/* Decorative Line */
.decorative-line {
    width: 80px;
    height: 3px;
    background: var(--bs-primary);
}

/* Scroll Indicator */
.scroll-indicator .mouse {
    width: 26px;
    height: 44px;
    border: 2px solid var(--bs-primary);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    padding-top: 6px;
}

.scroll-indicator .wheel {
    width: 4px;
    height: 8px;
    background: var(--bs-primary);
    border-radius: 2px;
    animation: scroll 1.4s infinite;
}

@keyframes scroll {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(10px);
    }
}