/* Small, targeted overrides that must win over minified bundles. */

.feature-icon img.feature-discord-icon {
    width: auto;
    height: 40px;
    aspect-ratio: 528 / 400;
}

/* Settled hero logo size - doubled from original 120px */
.hero-logo {
    width: 320px !important;
}
@media (max-width: 768px) {
    .hero-logo {
        width: 260px !important;
    }
}
@media (max-width: 600px) {
    .hero-logo {
        width: 200px !important;
    }
}
@media (max-width: 460px) {
    .hero-logo {
        width: 160px !important;
    }
}

.hero-section .site-preloader-member-btn .discord-icon {
    width: 22px;
    height: auto;
    display: block;
}

/* Chrome deprecated warning: avoid `overflow: visible` on <img> elements. */
.hero-logo.hero-logo-loop {
    overflow: hidden;
    overflow: clip;
}

.home-audio-controls .home-audio-track-title-cat {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    appearance: none;
}

.home-audio-controls .home-audio-catbox video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: sepia(1) hue-rotate(345deg) saturate(4.2) brightness(0.74) contrast(1.05);
}

.home-audio-controls[data-cat-danger="1"] .home-audio-catbox video {
    filter: sepia(0.6) saturate(2.3) hue-rotate(-10deg) brightness(0.9) contrast(1.15);
    transform: scaleX(-1);
}

/* Homepage hero background: use the real `.hero-bg-image` layer for the planet+overlay.
   This disables the legacy `.hero::before` planet background layer (Layer 1) and
   moves the dark gradient overlay onto Layer 2 so transforms/animations apply cleanly. */
.hero::before,
.hero:before {
    content: none !important;
}

.hero-section .hero-bg-image::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Match the legacy hero overlay gradient that used to live on `.hero::before`. */
    background: linear-gradient(
        180deg,
        rgba(15, 23, 42, 0.8) 0%,
        rgba(15, 23, 42, 0.7) 40%,
        rgba(15, 23, 42, 0.6) 100%
    );
    opacity: 1;
}