.oolly-cloud {
    position: relative;
    text-align: center;
    padding: 2em 3em;
    line-height: 2.4;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    margin-left: auto;
    margin-right: auto;
}

.oolly-cloud__svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.oolly-cloud__svg svg {
    width: 100%;
    height: 100%;
}

.oolly-cloud__row {
    position: relative;
    z-index: 1;
    display: block;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
}

.oolly-cloud__term {
    display: inline-block;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.4;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.oolly-cloud__term:hover {
    transform: scale(1.3);
}

/* =========================================================================
   Hover reflow (opt-in via shortcode arg hover_reflow="1").
   Replaces the visual-only transform: scale with a real font-size growth so
   neighbouring words shift to make room. Em-based margins on terms scale
   automatically with font-size, so spacing stays proportional.
   ========================================================================= */

.oolly-cloud--reflow .oolly-cloud__term {
    transition: font-size 0.2s ease;
}

.oolly-cloud--reflow .oolly-cloud__term:hover {
    transform: none;
    font-size: calc(var(--oolly-size) * 1.3) !important;
}

/* =========================================================================
   Word wandering (opt-in via shortcode arg wander="1").
   oolly-wander.js writes each word's offset into the --oolly-wander custom
   property. Applying it here (rather than via element.style.transform) lets
   the hover effects below compose with the wander offset. These rules sit
   after the reflow block so the combined wander+reflow selectors win.
   ========================================================================= */

.oolly-cloud--wander .oolly-cloud__term {
    transform: var(--oolly-wander, none);
    transition: none;
    will-change: transform;
}

.oolly-cloud--wander .oolly-cloud__term:hover {
    transform: var(--oolly-wander, none) scale(1.3);
}

.oolly-cloud--wander.oolly-cloud--reflow .oolly-cloud__term {
    transition: font-size 0.2s ease;
}

.oolly-cloud--wander.oolly-cloud--reflow .oolly-cloud__term:hover {
    transform: var(--oolly-wander, none);
}

/* =========================================================================
   Underline modifiers: !important to defeat theme-supplied underlines.
   The cloud container always carries one of these two classes.

   Themes draw "underlines" in a surprising number of ways: text-decoration,
   border-bottom, box-shadow with a vertical offset, linear-gradient
   backgrounds, and ::after pseudo-elements. The no-underline ruleset blocks
   all of them so we don't have to identify which one a given theme uses.
   ========================================================================= */

.oolly-cloud--no-underline .oolly-cloud__term,
.oolly-cloud--no-underline .oolly-cloud__term:link,
.oolly-cloud--no-underline .oolly-cloud__term:visited,
.oolly-cloud--no-underline .oolly-cloud__term:hover,
.oolly-cloud--no-underline .oolly-cloud__term:focus,
.oolly-cloud--no-underline .oolly-cloud__term:active {
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}

.oolly-cloud--no-underline .oolly-cloud__term::before,
.oolly-cloud--no-underline .oolly-cloud__term::after,
.oolly-cloud--no-underline .oolly-cloud__term:hover::before,
.oolly-cloud--no-underline .oolly-cloud__term:hover::after {
    display: none !important;
    content: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.oolly-cloud--underlined .oolly-cloud__term,
.oolly-cloud--underlined .oolly-cloud__term:hover {
    text-decoration: underline !important;
}

@media (max-width: 768px) {
    .oolly-cloud {
        padding: 1.5em 0.5em;
        line-height: 2;
        overflow: hidden;
    }

    .oolly-cloud__row {
        padding: 0 !important;
    }
}

@media (max-width: 480px) {
    .oolly-cloud {
        padding: 1em 0.5em;
        line-height: 1.8;
    }
}