/*
 * FapYou Coral Interlock
 * Optional brand layer loaded after app.css. No layout contract is replaced.
 */

body.visual-style--coral-interlock {
    --bg: #100b0e;
    --surface: #171014;
    --surface-raised: #21161c;
    --surface-soft: #2b1b22;
    --text: #fff8f6;
    --text-muted: #bbaeb3;
    --line: rgba(255, 218, 211, 0.11);
    --accent: #ff3d73;
    --accent-hover: #ff725f;
    --focus: #ffb2a5;
    --brand-pink: #ff3d82;
    --brand-coral: #ff765d;
    --brand-red: #e92f50;
    --brand-gradient: linear-gradient(118deg, var(--brand-pink) 0%, #ff526e 48%, var(--brand-coral) 100%);
    --brand-gradient-soft: linear-gradient(118deg, rgba(255, 61, 130, 0.18), rgba(255, 118, 93, 0.12));
    --brand-glow: 0 0.75rem 2.2rem rgba(255, 69, 105, 0.2);
    --player-accent: #ff4d78;
    --player-accent-hover: #ff765d;
    --player-accent-gradient: linear-gradient(118deg, #ff3d82 0%, #ff526e 48%, #ff765d 100%);
    --player-accent-glow: rgba(255, 80, 107, 0.42);
    --player-control-surface: rgba(16, 11, 14, 0.88);
    --player-menu-surface: rgba(28, 17, 23, 0.97);
    --player-focus: #ffb2a5;
    --radius-sm: 0.65rem;
    --radius: 1rem;
    --radius-lg: 1.4rem;
    background:
        radial-gradient(circle at 76% -8%, rgba(255, 112, 91, 0.13), transparent 31rem),
        radial-gradient(circle at 12% 14%, rgba(255, 54, 125, 0.07), transparent 27rem),
        var(--bg);
}

.visual-style--coral-interlock .site-header {
    border-bottom-color: rgba(255, 111, 96, 0.16);
    background: rgba(16, 11, 14, 0.9);
    box-shadow: 0 0.5rem 2rem rgba(6, 2, 4, 0.22);
}

.visual-style--coral-interlock .brand__logo {
    filter: drop-shadow(0 0.45rem 1rem rgba(255, 64, 111, 0.13));
}

/* A restrained interlock stroke gives navigation a recognizable silhouette. */
.visual-style--coral-interlock .primary-nav__link {
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 0.75rem 0.75rem 0.75rem 0.34rem;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.visual-style--coral-interlock .primary-nav__link::after {
    position: absolute;
    right: 0.72rem;
    bottom: 0.34rem;
    left: 0.72rem;
    height: 0.12rem;
    border-radius: 99rem;
    background: var(--brand-gradient);
    content: "";
    opacity: 0;
    transform: scaleX(0.35);
    transform-origin: left center;
    transition: opacity 160ms ease, transform 160ms ease;
}

.visual-style--coral-interlock .primary-nav__link:hover {
    border-color: rgba(255, 102, 100, 0.15);
    background: var(--brand-gradient-soft);
    color: var(--text);
    transform: translateY(-0.08rem);
}

.visual-style--coral-interlock .primary-nav__link:hover::after,
.visual-style--coral-interlock .primary-nav__link.is-active::after {
    opacity: 1;
    transform: scaleX(1);
}

.visual-style--coral-interlock .primary-nav__link.is-active {
    border-color: rgba(255, 102, 100, 0.24);
    background: linear-gradient(135deg, rgba(255, 56, 119, 0.16), rgba(255, 117, 91, 0.08));
    color: var(--text);
}

.visual-style--coral-interlock .button,
.visual-style--coral-interlock .icon-button {
    position: relative;
    overflow: hidden;
    border-radius: 0.78rem 0.78rem 0.78rem 0.4rem;
    transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, color 150ms ease;
}

.visual-style--coral-interlock .button:hover,
.visual-style--coral-interlock .icon-button:hover {
    transform: translateY(-0.08rem);
}

.visual-style--coral-interlock .button--primary {
    border-color: rgba(255, 255, 255, 0.08);
    background: var(--brand-gradient);
    box-shadow: 0 0.55rem 1.4rem rgba(233, 47, 80, 0.2), inset 0 1px rgba(255, 255, 255, 0.18);
    color: #09090b !important;
    -webkit-text-fill-color: #09090b;
}

.visual-style--coral-interlock .button--primary::after {
    position: absolute;
    top: -75%;
    bottom: -75%;
    left: -45%;
    width: 30%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    content: "";
    pointer-events: none;
    transform: rotate(16deg);
    transition: left 420ms ease;
}

.visual-style--coral-interlock .button--primary:hover {
    background: linear-gradient(118deg, #ff4d8b 0%, #ff5e70 48%, #ff8068 100%);
    box-shadow: 0 0.7rem 1.8rem rgba(233, 47, 80, 0.3), inset 0 1px rgba(255, 255, 255, 0.22);
}

.visual-style--coral-interlock .button--primary:hover::after {
    left: 120%;
}

.visual-style--coral-interlock .button--quiet,
.visual-style--coral-interlock .icon-button,
.visual-style--coral-interlock .account-identity {
    border-color: rgba(255, 220, 214, 0.13);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 83, 105, 0.035));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.visual-style--coral-interlock .button--quiet:hover,
.visual-style--coral-interlock .icon-button:hover,
.visual-style--coral-interlock .account-identity:hover {
    border-color: rgba(255, 106, 99, 0.34);
    background: var(--brand-gradient-soft);
    color: var(--text);
}

.visual-style--coral-interlock .site-search input {
    border-color: rgba(255, 218, 211, 0.14);
    border-radius: 0.85rem 0 0 0.48rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 83, 105, 0.025));
}

.visual-style--coral-interlock .site-search:focus-within input {
    border-color: rgba(255, 99, 101, 0.52);
    box-shadow: inset 0 0 0 1px rgba(255, 98, 102, 0.08), 0 0 0 0.22rem rgba(255, 81, 112, 0.08);
}

.visual-style--coral-interlock .site-search button {
    border-radius: 0 0.85rem 0.48rem 0;
    background: var(--brand-gradient);
    color: #fff;
}

.visual-style--coral-interlock .discovery-strip {
    scrollbar-color: rgba(255, 98, 102, 0.45) transparent;
}

.visual-style--coral-interlock .discovery-strip a,
.visual-style--coral-interlock .listing-filters summary,
.visual-style--coral-interlock .profile-history-tabs button,
.visual-style--coral-interlock .profile-media-tabs button,
.visual-style--coral-interlock .mailbox-tabs a,
.visual-style--coral-interlock .account-tabs a {
    position: relative;
    border-color: rgba(255, 218, 211, 0.13);
    border-radius: 99rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 79, 111, 0.025));
    transition: transform 150ms ease, color 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.visual-style--coral-interlock .discovery-strip a:hover,
.visual-style--coral-interlock .discovery-strip a.is-active,
.visual-style--coral-interlock .listing-filters summary:hover,
.visual-style--coral-interlock .profile-history-tabs button:hover,
.visual-style--coral-interlock .profile-history-tabs button.is-active,
.visual-style--coral-interlock .profile-media-tabs button:hover,
.visual-style--coral-interlock .profile-media-tabs button.is-active,
.visual-style--coral-interlock .mailbox-tabs a:hover,
.visual-style--coral-interlock .mailbox-tabs a.is-active,
.visual-style--coral-interlock .account-tabs a:hover {
    border-color: rgba(255, 102, 100, 0.38);
    background: var(--brand-gradient-soft);
    box-shadow: 0 0.45rem 1rem rgba(222, 35, 76, 0.1);
    color: var(--text);
    transform: translateY(-0.08rem);
}

.visual-style--coral-interlock .eyebrow {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.visual-style--coral-interlock .section-heading h1,
.visual-style--coral-interlock .section-heading h2 {
    position: relative;
    letter-spacing: -0.025em;
}

.visual-style--coral-interlock .section-heading h1::after,
.visual-style--coral-interlock .section-heading h2::after {
    width: 2.7rem;
    height: 0.16rem;
    display: block;
    margin-top: 0.48rem;
    border-radius: 99rem;
    background: var(--brand-gradient);
    content: "";
    opacity: 0.82;
}

.visual-style--coral-interlock .filter-count {
    background: var(--brand-gradient);
    box-shadow: 0 0.25rem 0.7rem rgba(255, 61, 115, 0.22);
}

.visual-style--coral-interlock .category-intro {
    border-left-color: var(--brand-coral);
    background: linear-gradient(90deg, rgba(255, 67, 116, 0.1), rgba(255, 118, 93, 0.025), transparent);
}

.visual-style--coral-interlock .media-card__visual {
    border-color: rgba(255, 218, 211, 0.11);
    border-radius: 1rem 1rem 1rem 0.58rem;
    box-shadow: 0 0.7rem 1.7rem rgba(5, 1, 3, 0.14);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.visual-style--coral-interlock .media-card__link:hover .media-card__visual {
    border-color: rgba(255, 99, 102, 0.42);
    box-shadow: 0 0.9rem 2rem rgba(8, 2, 5, 0.28), 0 0 0 1px rgba(255, 90, 108, 0.05);
    transform: translateY(-0.12rem);
}

.visual-style--coral-interlock .media-card__play {
    background: var(--brand-gradient);
    box-shadow: 0 0.65rem 1.5rem rgba(255, 55, 107, 0.38);
}

.visual-style--coral-interlock .media-card__play::after {
    border-left-color: #fff;
}

.visual-style--coral-interlock .media-card__history-progress span,
.visual-style--coral-interlock .pagination .is-active {
    background: var(--brand-gradient);
}

.visual-style--coral-interlock .media-card__save.is-saved {
    border-color: rgba(255, 180, 165, 0.55);
    background: var(--brand-gradient);
    box-shadow: 0 0.45rem 1.2rem rgba(255, 62, 112, 0.28);
}

.visual-style--coral-interlock .pagination a,
.visual-style--coral-interlock .pagination__pages > span {
    border-color: rgba(255, 218, 211, 0.12);
    border-radius: 0.68rem 0.68rem 0.68rem 0.34rem;
    background: rgba(255, 255, 255, 0.025);
    transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.visual-style--coral-interlock .pagination a:hover {
    border-color: rgba(255, 102, 100, 0.42);
    background: var(--brand-gradient-soft);
    color: var(--text);
    transform: translateY(-0.08rem);
}

.visual-style--coral-interlock .pagination .is-active {
    border-color: rgba(255, 153, 136, 0.46);
    box-shadow: var(--brand-glow);
    color: #fff;
}

.visual-style--coral-interlock .tag-chip,
.visual-style--coral-interlock .media-chip,
.visual-style--coral-interlock .listing-filters__panel a,
.visual-style--coral-interlock .creator-filters a {
    border-color: rgba(255, 218, 211, 0.11);
    background: rgba(255, 255, 255, 0.025);
    transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.visual-style--coral-interlock .tag-chip:hover,
.visual-style--coral-interlock .media-chip:hover,
.visual-style--coral-interlock .listing-filters__panel a:hover,
.visual-style--coral-interlock .listing-filters__panel a.is-active,
.visual-style--coral-interlock .creator-filters a:hover,
.visual-style--coral-interlock .creator-filters a.is-active {
    border-color: rgba(255, 102, 100, 0.34);
    background: var(--brand-gradient-soft);
    color: var(--text);
    transform: translateY(-0.06rem);
}

.visual-style--coral-interlock .modern-form--wide,
.visual-style--coral-interlock .filter-panel,
.visual-style--coral-interlock .listing-filters__panel,
.visual-style--coral-interlock .account-menu__panel,
.visual-style--coral-interlock .search-suggestions,
.visual-style--coral-interlock .media-grid__ad-island {
    border-color: rgba(255, 218, 211, 0.12);
    background:
        radial-gradient(circle at 100% 0, rgba(255, 107, 96, 0.06), transparent 13rem),
        var(--surface);
    box-shadow: 0 1.1rem 2.8rem rgba(5, 1, 3, 0.22);
}

.visual-style--coral-interlock input:focus,
.visual-style--coral-interlock textarea:focus,
.visual-style--coral-interlock select:focus {
    border-color: rgba(255, 102, 100, 0.55);
}

.visual-style--coral-interlock :focus-visible {
    outline-color: var(--focus);
}

@media (max-width: 52rem) {
    .visual-style--coral-interlock .site-header {
        background:
            linear-gradient(180deg, rgba(255, 69, 111, 0.045), transparent),
            var(--bg);
    }

    .visual-style--coral-interlock .primary-nav {
        border-left-color: rgba(255, 109, 98, 0.16);
        background:
            radial-gradient(circle at 100% 0, rgba(255, 105, 96, 0.11), transparent 18rem),
            var(--bg);
    }

    .visual-style--coral-interlock .primary-nav__link {
        border: 0;
        border-bottom: 1px solid rgba(255, 218, 211, 0.1);
        border-radius: 0.7rem 0.7rem 0.7rem 0.32rem;
    }

    .visual-style--coral-interlock .primary-nav__link::after {
        top: 50%;
        right: auto;
        bottom: auto;
        left: 0;
        width: 0.18rem;
        height: 55%;
        transform: translateY(-50%) scaleY(0.35);
        transform-origin: center;
    }

    .visual-style--coral-interlock .primary-nav__link:hover::after,
    .visual-style--coral-interlock .primary-nav__link.is-active::after {
        transform: translateY(-50%) scaleY(1);
    }

    .visual-style--coral-interlock .mobile-nav-account__identity,
    .visual-style--coral-interlock .mobile-nav-account__links a {
        border-color: rgba(255, 218, 211, 0.12);
        border-radius: 0.8rem 0.8rem 0.8rem 0.4rem;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 77, 112, 0.025));
    }
}

@media (prefers-reduced-motion: reduce) {
    .visual-style--coral-interlock .button,
    .visual-style--coral-interlock .icon-button,
    .visual-style--coral-interlock .primary-nav__link,
    .visual-style--coral-interlock .media-card__visual,
    .visual-style--coral-interlock .pagination a {
        transition: none;
    }
}