/* mwg effect100 — orbiting media ring around a centered heading. The
   original effect styles, with fleura reconciliations vs the downloaded file:
   - no hard `body { background:#121212 }` and no `overflow:hidden` on
     html/body, so the shared light/dark palette drives the background and
     the footer stays reachable on scroll (same as the OS waitlist).
   - flora photos fill the tiles (object-fit: cover) instead of contained
     icons, and the centered <p> styling is dropped — the fleura waitlist
     (heading + form) lives in the center instead (see site.css). */

/* NORMALIZE */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    appearance: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* NORMALIZE */

.mwg_effect100 {
    height: 100dvh;
}

.mwg_effect100 .media {
    position: absolute;
    --effect-tile-size: clamp(7.4rem, 9.5vw, 11.5rem);
    top: calc(50% - var(--effect-tile-size) / 2);
    left: calc(50% - var(--effect-tile-size) / 2);
    width: var(--effect-tile-size);
    height: var(--effect-tile-size);
    object-fit: cover;
    will-change: transform;
    border-radius: 1.4vw;
    box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
    .mwg_effect100 .media {
        --effect-tile-size: clamp(6rem, 22vw, 8rem);
        top: calc(50% - var(--effect-tile-size) / 2);
        left: calc(50% - var(--effect-tile-size) / 2);
        width: var(--effect-tile-size);
        height: var(--effect-tile-size);
        border-radius: 3vw;
    }
}