/* =============================================================================================
   The small drop of light and its dot (draft "Tropfen 3", 2026-10-23), for the subpages. The drop
   of the worlds of the home page (welcome/tropfen.css, .drop), calmer and without its miniature:
   an aura in the world's colour, liquid light along the rim (one conic gradient), a body of dark
   liquid with a pool of the world's light at the bottom, a breath of gloss. Inside an image (cut
   round and set into the liquid by a soft edge), an icon or a sign. Its size comes from its width;
   depth and glow scale with it (container units). Markup: site_drop.php (SiteDrop). Motion only on
   transform and opacity; none under reduced motion.
   ============================================================================================= */

.sdrop {
    --c: var(--w-pearl);

    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    container-type: inline-size;
    border-radius: 50%;
    isolation: isolate;
}

.sdrop-aura {
    position: absolute;
    inset: -24%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in oklab, var(--c) 24%, transparent), color-mix(in oklab, var(--c) 7%, transparent) 58%, transparent);
    opacity: 0.7;
    pointer-events: none;
    transition: opacity 0.7s var(--ease-out);
}

.sdrop-skin {
    position: absolute;
    inset: -1.5px;
    border-radius: 50%;
    background: conic-gradient(from 200deg, transparent 0%, color-mix(in oklab, var(--c) 85%, white) 7%, transparent 21%, color-mix(in oklab, var(--c) 45%, transparent) 44%, transparent 60%, color-mix(in oklab, var(--c) 70%, white) 79%, transparent 93%);
    opacity: 0.72;
    transition: opacity 0.7s var(--ease-out);
}

.sdrop-body {
    position: absolute;
    inset: 1px;
    display: grid;
    place-items: center;
    overflow: clip;
    border-radius: 50%;
    background:
        radial-gradient(120% 70% at 50% 110%, color-mix(in oklab, var(--c) 28%, transparent), transparent 62%),
        radial-gradient(circle at 46% 38%, color-mix(in oklab, var(--c) 10%, #0a0d12) 0%, color-mix(in oklab, var(--c) 5%, #06080b) 55%, color-mix(in oklab, var(--c) 13%, #080b10) 82%, color-mix(in oklab, var(--c) 24%, #0c1118) 100%);
    box-shadow:
        inset 0 0 0 1px color-mix(in oklab, var(--c) 28%, transparent),
        inset 0 0 4.5cqw color-mix(in oklab, var(--c) 24%, transparent),
        0 7cqw 14cqw -7cqw rgba(0, 0, 0, 0.9);
}

/* An image lies in the liquid: cut round, its edge sinks into the drop's own light. */
.sdrop-body > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
}

.sdrop-body:has(> img)::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 46%, transparent 58%, color-mix(in oklab, var(--c) 16%, rgba(5, 7, 10, 0.62)) 100%);
    box-shadow: inset 0 0 6cqw color-mix(in oklab, var(--c) 30%, transparent);
    pointer-events: none;
}

/* A sign or an emblem: drawn in the drop's own light. */
.sdrop-body > svg,
.sdrop-body > .sdrop-sign {
    width: 44%;
    height: 44%;
    color: color-mix(in oklab, var(--c) 78%, white);
    filter: drop-shadow(0 0 2.4cqw color-mix(in oklab, var(--c) 55%, transparent));
}

/* The sign of a world (Worlds::glimpse, the same small views as on the home page). */
.sdrop-body > .glimpse {
    width: 62%;
    height: 62%;
    overflow: visible;
    fill: none;
    stroke: color-mix(in oklab, var(--c) 78%, white);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sdrop-body > .glimpse :is(.g-fill, .g-dot) {
    fill: color-mix(in oklab, var(--c) 72%, white);
    stroke: none;
}

.sdrop-body > .glimpse .g-soft {
    stroke: color-mix(in oklab, var(--c) 55%, transparent);
    stroke-dasharray: 2 3;
}

.sdrop-gloss {
    position: absolute;
    top: 6%;
    left: 15%;
    width: 46%;
    height: 26%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025) 62%, transparent);
    rotate: -24deg;
    pointer-events: none;
}

/* Lit (its link is pointed at or focused, or the page lights it): the aura and the rim brighten
   and the drop rises a little towards the reader. */
.sdrop.is-lit .sdrop-aura,
:is(a, button):is(:hover, :focus-visible) > .sdrop .sdrop-aura {
    opacity: 1;
}

.sdrop.is-lit .sdrop-skin,
:is(a, button):is(:hover, :focus-visible) > .sdrop .sdrop-skin {
    opacity: 0.95;
}

/* Floating (a row of drops): each one breathes up and down on its own beat (--fi), by 8 % of its own
   height (a percentage of translate: composited, alike at every size; container units here would
   resolve against an ancestor, without one the window). A page may let the row rest while it
   cannot be seen (products: .pp-arc.is-live). */
@media (prefers-reduced-motion: no-preference) {
    .sdrop--float {
        animation: sdrop-float 7s ease-in-out infinite alternate;
        animation-delay: calc(var(--fi, 0) * -1.3s);
    }
}

@keyframes sdrop-float {
    from {
        translate: 0 -8%;
    }

    to {
        translate: 0 8%;
    }
}

/* --- The dot and the kicker line ------------------------------------------------------------- */

/* The dot: a world's light in miniature (as before the kicker of a world on the home page). */
.sdot {
    --c: var(--w-pearl);

    display: inline-block;
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 34%, #fff 0 10%, var(--c) 46%, color-mix(in oklab, var(--c) 30%, transparent));
    box-shadow: 0 0 12px color-mix(in oklab, var(--c) 60%, transparent);
}

/* The kicker line of a page or section: dot, words in mono capitals, a name in the world's light. */
.skicker {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: center;
    margin-bottom: 14px;
    color: var(--fg-3);
    font-family: var(--font-data);
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.skicker-name {
    color: color-mix(in oklab, var(--c, var(--w-pearl)) 78%, white);
}

@media (prefers-reduced-motion: reduce) {
    .sdrop-aura,
    .sdrop-skin {
        transition: none;
    }
}