/**
 * OOI Platform — profondeur botanique.
 *
 * Décoration purement CSS, sans JavaScript ni requête d'image.
 * Les feuillages restent ponctuels afin de relier les scènes sans
 * concurrencer leurs contenus ni alourdir le rendu.
 */

:root {
    --ooi-botanical-cyan: #80c5cf;
    --ooi-botanical-green: #aacf80;
    --ooi-botanical-orange: #ffab4e;
    --ooi-botanical-violet: #7270ac;
}

:where(
    .ooi-home-events,
    .ooi-native-faces,
    .ooi-agenda-upcoming,
    .ooi-agenda-history,
    .ooi-identity-directory,
    .ooi-identity-profile__section--timeline,
    .ooi-moment-profile__section--participation
) {
    position: relative;
    isolation: isolate;
}

:where(
    .ooi-home-events,
    .ooi-agenda-upcoming,
    .ooi-identity-directory,
    .ooi-identity-profile__section--timeline,
    .ooi-moment-profile__section--participation
)::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -42px;
    right: clamp(18px, 5vw, 88px);
    width: clamp(82px, 9vw, 138px);
    aspect-ratio: 1.35;
    pointer-events: none;
    opacity: .62;
    transform: rotate(8deg);
    background:
        radial-gradient(ellipse at 72% 24%, color-mix(in srgb, var(--ooi-botanical-cyan) 74%, transparent) 0 18%, transparent 19%),
        radial-gradient(ellipse at 44% 42%, color-mix(in srgb, var(--ooi-botanical-green) 78%, transparent) 0 21%, transparent 22%),
        radial-gradient(ellipse at 22% 72%, color-mix(in srgb, var(--ooi-botanical-orange) 62%, transparent) 0 18%, transparent 19%),
        linear-gradient(116deg, transparent 47%, color-mix(in srgb, var(--ooi-botanical-violet) 64%, transparent) 48% 50%, transparent 51%);
    filter: saturate(.82);
}

:where(
    .ooi-native-faces,
    .ooi-agenda-history
)::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: clamp(14px, 4vw, 72px);
    bottom: -34px;
    width: clamp(72px, 8vw, 122px);
    aspect-ratio: 1.2;
    pointer-events: none;
    opacity: .48;
    transform: scaleX(-1) rotate(-9deg);
    background:
        radial-gradient(ellipse at 76% 28%, color-mix(in srgb, var(--ooi-botanical-green) 72%, transparent) 0 19%, transparent 20%),
        radial-gradient(ellipse at 45% 48%, color-mix(in srgb, var(--ooi-botanical-cyan) 70%, transparent) 0 21%, transparent 22%),
        radial-gradient(ellipse at 18% 75%, color-mix(in srgb, var(--ooi-botanical-violet) 55%, transparent) 0 17%, transparent 18%),
        linear-gradient(118deg, transparent 47%, color-mix(in srgb, var(--ooi-botanical-orange) 58%, transparent) 48% 50%, transparent 51%);
}

:where(
    .ooi-home-events,
    .ooi-native-faces,
    .ooi-agenda-upcoming,
    .ooi-agenda-history,
    .ooi-identity-directory,
    .ooi-identity-profile__section--timeline,
    .ooi-moment-profile__section--participation
) > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    :where(
        .ooi-home-events,
        .ooi-agenda-upcoming,
        .ooi-identity-directory,
        .ooi-identity-profile__section--timeline,
        .ooi-moment-profile__section--participation
    )::before {
        top: -23px;
        right: 10px;
        width: 70px;
        opacity: .42;
    }

    :where(
        .ooi-native-faces,
        .ooi-agenda-history
    )::after {
        bottom: -19px;
        left: 8px;
        width: 62px;
        opacity: .32;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(
        .ooi-home-events,
        .ooi-native-faces,
        .ooi-agenda-upcoming,
        .ooi-agenda-history,
        .ooi-identity-directory,
        .ooi-identity-profile__section--timeline,
        .ooi-moment-profile__section--participation
    )::before,
    :where(
        .ooi-home-events,
        .ooi-native-faces,
        .ooi-agenda-upcoming,
        .ooi-agenda-history,
        .ooi-identity-directory,
        .ooi-identity-profile__section--timeline,
        .ooi-moment-profile__section--participation
    )::after {
        transition: none;
        animation: none;
    }
}