/**
 * c-cosmos — orbit field (motion: t_lead_scroll.js, t_hero_village.js)
 * Source of truth — PHP-enqueued via functions.php. Do not duplicate in Etch Custom CSS.
 * Lead-specific overrides live in pattern/t-lead.css.
 * Flat selectors — no nesting.
 */

.c-cosmos {
    --cosmos-size: min(92vmin, 52rem);
    --cosmos-arc-color: var(--dark-o-2);
    --cosmos-arc-width: 1px;
    --cosmos-dot-1: var(--pink);
    --cosmos-dot-2: var(--red);
    --cosmos-dot-3: var(--aqua);
    --cosmos-dot-4: var(--red);
    --cosmos-avatar-size: clamp(3.5rem, 11vmin, 8.25rem);
    --cosmos-avatar-orbit: clamp(9rem, 28vmin, 18rem);
    --cosmos-dot-size: 0.65rem;

    display: grid;
    inset: 0;
    place-items: center;
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

.c-cosmos__stage {
    block-size: var(--cosmos-size);
    inline-size: var(--cosmos-size);
    position: relative;
}

.c-cosmos__glow {
    border-radius: 50%;
    inset: 8%;
    isolation: isolate;
    overflow: hidden;
    position: absolute;
    transform-origin: center center;
    will-change: transform, opacity;
    z-index: 1;
}

.c-cosmos__glow-layer {
    border-radius: 50%;
    inset: 0;
    backdrop-filter: var(--blur-control);
    position: absolute;
}

.c-cosmos__glow-layer--red {
    /* Lead / generic cosmos — village overrides: .c-cosmos--village .c-cosmos__glow-layer--red */
    background: radial-gradient(ellipse 58% 52% at 42% 38%, var(--red) 0%, var(--red-t) 72%);
}

.c-cosmos__glow-layer--pink {
    /* Lead / generic cosmos — village overrides: .c-cosmos--village .c-cosmos__glow-layer--pink */
    background: radial-gradient(ellipse 54% 48% at 62% 58%, var(--pink) 0%, var(--pink-t) 70%);
    mix-blend-mode: screen;
}

.c-cosmos__grd-blob {
    mix-blend-mode: screen;
}

.c-cosmos__grd-blob--a {
    fill: var(--pink-o-3);
}

.c-cosmos__grd-blob--b {
    fill: var(--red-o-3);
}

.c-cosmos__grd-blob--c {
    fill: var(--primary-o-4);
}

.c-cosmos__svg {
    display: block;
    block-size: 100%;
    inline-size: 100%;
    overflow: visible;
}

.c-cosmos__rings,
.c-cosmos__arc-group,
.c-cosmos__dot-orbit,
.c-cosmos__dots {
    transform-box: fill-box;
    transform-origin: center center;
}

.c-cosmos__arc {
    fill: none;
    stroke: var(--cosmos-arc-color);
    stroke-dasharray: 1 8;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.c-cosmos__arc--1,
.c-cosmos__arc--2,
.c-cosmos__arc--3 {
    stroke-width: var(--cosmos-arc-width);
}

.c-cosmos__dot {
    fill: currentColor;
    transform-box: fill-box;
    transform-origin: center center;
}

.c-cosmos__dot--1 {
    color: var(--cosmos-dot-1);
}

.c-cosmos__dot--2 {
    color: var(--cosmos-dot-2);
}

.c-cosmos__dot--3 {
    color: var(--cosmos-dot-3);
}

.c-cosmos__dot--4 {
    color: var(--cosmos-dot-4);
}

.c-cosmos__avatars {
    inset: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    transform-origin: 50% 50%;
}

.c-cosmos__avatar {
    --avatar-angle: 0deg;
    --avatar-radius: var(--cosmos-avatar-orbit);
    list-style: none;
    block-size: var(--cosmos-avatar-size);
    inline-size: var(--cosmos-avatar-size);
    left: 50%;
    margin-block: calc(var(--cosmos-avatar-size) * -0.5);
    margin-inline: calc(var(--cosmos-avatar-size) * -0.5);
    position: absolute;
    top: 50%;
    transform:
        rotate(var(--avatar-angle))
        translateY(calc(var(--avatar-radius) * -1))
        rotate(calc(var(--avatar-angle) * -1));
    transform-origin: center center;
    will-change: transform, opacity;
    & figure{
        background-color: var(--dark);
    }
    & img{
        transition: transform var(--bezier-in) var(--time-in);
    }
}

/* Sticker focus — class on avatar wrapper; style inner figure (orbit transform must stay on wrapper) */
.c-cosmos--village .c-cosmos__avatar .c-application__member-avatar{
    transition: all var(--bezier-in) var(--time-in);
}
.c-cosmos--village .c-cosmos__avatar.is-sticker-focus .c-application__member-avatar {
    & img{
        transform: scale(1.2);
        transition: all var(--bezier-bounce) var(--time-in);
    }
}

.c-cosmos--village .c-cosmos__avatar.is-sticker-dim .c-application__member-avatar {
    filter: brightness(1.15) var(--blur-control);
    opacity: 0.2;
    transition: all var(--bezier-in) var(--time-slow);
}

.c-cosmos__avatar:nth-child(1) {
    --avatar-angle: -72deg;
}

.c-cosmos__avatar:nth-child(2) {
    --avatar-angle: 0deg;
}

.c-cosmos__avatar:nth-child(3) {
    --avatar-angle: 72deg;
}

.c-cosmos__avatar:nth-child(4) {
    --avatar-angle: 144deg;
}

.c-cosmos__avatar:nth-child(5) {
    --avatar-angle: 216deg;
}

.c-cosmos__avatar img {
    border-radius: 50%;
    block-size: 100%;
    display: block;
    inline-size: 100%;
    object-fit: cover;
    transform-origin: center center;
    will-change: transform, filter, opacity;
}

.c-cosmos--village {
    --cosmos-avatar-size: var(--village-avatar-size, var(--gap-25));
    /* Arc radii in SVG viewBox units (400×400). Gap = difference between values. Update Etch path `d` to match. */
    --village-arc-radius-1: 90;
    --village-arc-radius-2: 150;
    --village-arc-radius-3: 190;
    /* Dot diameter — synced to SVG ellipse rx/ry by t_hero_village.js */
    --cosmos-dot-size: 0.65rem;
    --village-dot-4-scale: 1.4;
    --village-cosmos-bleed: 10%;
    --village-glow-scale: .85;
    --village-glow-red-offset-x: -15%;
    --village-glow-red-offset-y: 0;
    --village-glow-pink-offset-x: 0;
    --village-glow-pink-offset-y: 0;
    --village-glow-red-scale: 1;
    --village-glow-pink-scale: 1;

    block-size: auto;
    display: grid;
    inline-size: auto;
    inset: calc(var(--village-cosmos-bleed) * -1);
    margin: 0;
    max-inline-size: none;
    place-items: center;
    pointer-events: auto;
    position: absolute;
    z-index: 1;
}

.c-cosmos--village .c-cosmos__stage {
    aspect-ratio: 1;
    block-size: min(100cqw, 100cqh);
    container-type: size;
    inline-size: min(100cqw, 100cqh);
    max-block-size: none;
    max-inline-size: none;
    position: relative;
}

.c-cosmos--village .c-cosmos__glow {
    aspect-ratio: 1;
    block-size: calc(min(100cqw, 100cqh) * var(--village-glow-scale));
    border-radius: 50%;
    filter: var(--blur-gradient);
    inline-size: calc(min(100cqw, 100cqh) * var(--village-glow-scale));
    backdrop-filter: var(--blur-control);
    inset: 0;
    isolation: auto;
    margin: auto;
    overflow: visible;
    pointer-events: auto;
    position: absolute;
    z-index: 0;
}

.c-cosmos--village .c-cosmos__glow-layer {
    pointer-events: none;
    translate: var(--village-glow-offset-x, 0) var(--village-glow-offset-y, 0);
    will-change: transform;
}

.c-cosmos--village .c-cosmos__glow-layer--red {
    --village-glow-offset-x: var(--village-glow-red-offset-x);
    --village-glow-offset-y: var(--village-glow-red-offset-y);
    --village-glow-layer-scale: var(--village-glow-red-scale);
    background: radial-gradient(ellipse 52% 54% at 48% 46%, var(--red) 0%, var(--red-t) 100%);
    scale: var(--village-glow-layer-scale);
}

.c-cosmos--village .c-cosmos__glow-layer--pink {
    --village-glow-offset-x: var(--village-glow-pink-offset-x);
    --village-glow-offset-y: var(--village-glow-pink-offset-y);
    --village-glow-layer-scale: var(--village-glow-pink-scale);
    background: radial-gradient(ellipse 50% 52% at 50% 48%, var(--pink) 0%, var(--pink-t) 100%);
    scale: var(--village-glow-layer-scale);
}

.c-cosmos--village .c-cosmos__svg {
    position: relative;
    z-index: 1;
}

.c-cosmos--village .c-cosmos__avatars {
    pointer-events: none;
    z-index: 3;
}

.c-cosmos--village .c-cosmos__avatars--ring-1,
.c-cosmos--village [data-cosmos-avatars='1'] {
    --cosmos-avatar-orbit: calc(min(100cqw, 100cqh) * var(--village-arc-radius-1) / 400);
}

.c-cosmos--village .c-cosmos__avatars--ring-1 .c-cosmos__avatar:nth-child(1),
.c-cosmos--village [data-cosmos-avatars='1'] .c-cosmos__avatar:nth-child(1) {
    --avatar-angle: -118deg;
}

.c-cosmos--village .c-cosmos__avatars--ring-1 .c-cosmos__avatar:nth-child(2),
.c-cosmos--village [data-cosmos-avatars='1'] .c-cosmos__avatar:nth-child(2) {
    --avatar-angle: -31deg;
}

.c-cosmos--village .c-cosmos__avatars--ring-1 .c-cosmos__avatar:nth-child(3),
.c-cosmos--village [data-cosmos-avatars='1'] .c-cosmos__avatar:nth-child(3) {
    --avatar-angle: 54deg;
}

.c-cosmos--village .c-cosmos__avatars--ring-1 .c-cosmos__avatar:nth-child(4),
.c-cosmos--village [data-cosmos-avatars='1'] .c-cosmos__avatar:nth-child(4) {
    --avatar-angle: 167deg;
}

.c-cosmos--village .c-cosmos__avatars--ring-1 .c-cosmos__avatar:nth-child(5),
.c-cosmos--village [data-cosmos-avatars='1'] .c-cosmos__avatar:nth-child(5) {
    --avatar-angle: -90deg;
}

.c-cosmos--village .c-cosmos__avatars--ring-2,
.c-cosmos--village [data-cosmos-avatars='2'] {
    --cosmos-avatar-orbit: calc(min(100cqw, 100cqh) * var(--village-arc-radius-2) / 400);
}

.c-cosmos--village .c-cosmos__avatars--ring-2 .c-cosmos__avatar:nth-child(1),
.c-cosmos--village [data-cosmos-avatars='2'] .c-cosmos__avatar:nth-child(1) {
    --avatar-angle: -72deg;
}

.c-cosmos--village .c-cosmos__avatars--ring-2 .c-cosmos__avatar:nth-child(2),
.c-cosmos--village [data-cosmos-avatars='2'] .c-cosmos__avatar:nth-child(2) {
    --avatar-angle: 41deg;
}

.c-cosmos--village .c-cosmos__avatars--ring-2 .c-cosmos__avatar:nth-child(3),
.c-cosmos--village [data-cosmos-avatars='2'] .c-cosmos__avatar:nth-child(3) {
    --avatar-angle: 143deg;
}

.c-cosmos--village .c-cosmos__avatar {
    pointer-events: auto;
    cursor: default;
}

.c-cosmos--village .c-cosmos__avatar[data-cursor] {
    cursor: none;
}

.c-cosmos--village .c-cosmos__avatar .c-application__member-avatar {
    transform-origin: 50% 50%;
}


/* ── Village — entering state ─────────────────────────────── */

.c-application--village[data-hero-village-entering] .c-cosmos__avatar,
.c-application[data-app='village'][data-hero-village-entering] .c-cosmos__avatar {
    pointer-events: none;
}

/* ── Village — cosmos placement in application media ──────── */

.c-application--village .c-application__media,
.c-application[data-app='village'] .c-application__media {
    align-items: center;
    container-type: size;
    display: flex;
    justify-content: center;
    pointer-events: auto;
    position: relative;
}