/* =========================================================
   Adaptive Identity Engine — Watermark Layer V1
   Active only in "Mi espacio". Uses Community first, then Club.
   ========================================================= */

:root {
    --na-watermark-global-opacity: 0;
    --na-watermark-hero-opacity: 0;
    --na-watermark-card-opacity: 0;
}

:root[data-identity="personal"][data-theme="dark"] {
    --na-watermark-global-opacity: .018;
    --na-watermark-hero-opacity: .055;
    --na-watermark-card-opacity: .035;
}

:root[data-identity="personal"][data-theme="light"] {
    --na-watermark-global-opacity: .026;
    --na-watermark-hero-opacity: .070;
    --na-watermark-card-opacity: .045;
}

/* Global, deliberately subtle. It sits behind content and never captures clicks. */
.na-identity-watermark-layer {
    display: none;
    position: fixed;
    right: clamp(2rem, 5vw, 6rem);
    bottom: clamp(1rem, 4vh, 3rem);
    width: min(42vw, 540px);
    aspect-ratio: 1;
    z-index: 0;
    pointer-events: none;
    background-image: var(--club-watermark-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: var(--na-watermark-global-opacity);
    filter: grayscale(.08) saturate(.88) contrast(1.04);
    transform: rotate(-7deg);
}

:root[data-identity="personal"] .na-identity-watermark-layer {
    display: block;
}

/* Keep the actual UI above the background identity layer without changing
   the positioning model defined by the shell layout. The previous version
   forced sidebar/topbar to position:relative and broke their fixed layout. */
.na-sidebar {
    z-index: 1200;
}

.na-topbar {
    z-index: 1100;
}

.na-main {
    z-index: 1;
}

/* Shared hero watermark. Intentionally limited to major hub surfaces. */
:root[data-identity="personal"] :is(
    .na-dashboard-intro,
    .na-license-hero,
    .na-club-hub-hero,
    .na-club-identity-hero,
    .na-discord-hero,
    .na-control-hero,
    .na-director-header,
    .broadcast-hero,
    .inbox-hero,
    .discover-hero,
    .intent-hero,
    .gallery-hero,
    .creator-form-intro,
    .community-membership-header,
    .na-flow-hero
) {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

:root[data-identity="personal"] :is(
    .na-dashboard-intro,
    .na-license-hero,
    .na-club-hub-hero,
    .na-club-identity-hero,
    .na-discord-hero,
    .na-control-hero,
    .na-director-header,
    .broadcast-hero,
    .inbox-hero,
    .discover-hero,
    .intent-hero,
    .gallery-hero,
    .creator-form-intro,
    .community-membership-header,
    .na-flow-hero
)::after {
    content: "";
    position: absolute;
    right: clamp(-2.5rem, -2vw, -.75rem);
    top: 50%;
    width: min(38%, 310px);
    aspect-ratio: 1;
    transform: translateY(-50%) rotate(-6deg);
    background-image: var(--club-watermark-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: var(--na-watermark-hero-opacity);
    filter: grayscale(.06) saturate(.92);
    pointer-events: none;
    z-index: -1;
}

/* Reusable class for future panels. Add na-watermarked to any important card. */
.na-watermarked {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

:root[data-identity="personal"] .na-watermarked::after {
    content: "";
    position: absolute;
    right: -1.5rem;
    bottom: -2.5rem;
    width: min(44%, 220px);
    aspect-ratio: 1;
    background: var(--club-watermark-image) center / contain no-repeat;
    opacity: var(--na-watermark-card-opacity);
    pointer-events: none;
    z-index: -1;
}

/* Avoid decorative motion for users who request less animation. */
@media (prefers-reduced-motion: reduce) {
    .na-identity-watermark-layer,
    :root[data-identity="personal"] :is(
        .na-dashboard-intro,
        .na-license-hero,
        .na-club-hub-hero,
        .na-club-identity-hero,
        .na-discord-hero,
        .na-control-hero,
        .na-director-header,
        .broadcast-hero,
        .inbox-hero
    )::after {
        transform: none;
    }
}

@media (max-width: 900px) {
    .na-identity-watermark-layer {
        width: min(62vw, 360px);
        right: -5rem;
        bottom: 1rem;
    }

    :root[data-identity="personal"] :is(
        .na-dashboard-intro,
        .na-license-hero,
        .na-club-hub-hero,
        .na-club-identity-hero,
        .na-discord-hero,
        .na-control-hero,
        .na-director-header,
        .broadcast-hero,
        .inbox-hero
    )::after {
        width: 44%;
        right: -3rem;
    }
}