/* ============================================================
   Text Cloud (Foxco) — text-cloud.css v1.0.0
   ============================================================ */

/* ── Wrapper / Cloud ── */
.tcf-cloud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 0;
    width: 100%;
    position: relative;
}

.tcf-layout-single {
    flex-wrap: nowrap;
    overflow: hidden;
}

/* ── Individual Tag ── */
.tcf-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: 'Bebas Neue', 'Barlow', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff;
    cursor: default;
    user-select: none;
    white-space: nowrap;
    will-change: transform, opacity;
    transition: color 0.3s ease;
}

/* Dot */
.tcf-tag::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e85d04;
    box-shadow: 0 0 8px #e85d04;
    flex-shrink: 0;
    transition: box-shadow 0.3s ease;
}
.tcf-tag.tcf-no-dot::before {
    display: none;
}

/* ============================================================
   1. STATIC — no animation
   ============================================================ */
.tcf-style-static .tcf-tag {
    animation: none;
}

/* ============================================================
   2. FLOAT — gentle independent bobbing
   ============================================================ */
.tcf-style-float .tcf-tag {
    animation: tcf-float var(--tcf-speed, 3s) ease-in-out infinite;
}
/* Varied durations via nth-child so items never sync */
.tcf-style-float .tcf-tag:nth-child(2n+1) { animation-duration: calc(var(--tcf-speed, 3s) * 1.0);  }
.tcf-style-float .tcf-tag:nth-child(2n)   { animation-duration: calc(var(--tcf-speed, 3s) * 1.25); }
.tcf-style-float .tcf-tag:nth-child(3n)   { animation-duration: calc(var(--tcf-speed, 3s) * 0.85); }
.tcf-style-float .tcf-tag:nth-child(5n)   { animation-duration: calc(var(--tcf-speed, 3s) * 1.4);  }
.tcf-style-float .tcf-tag:nth-child(7n)   { animation-duration: calc(var(--tcf-speed, 3s) * 0.95); }

@keyframes tcf-float {
    0%   { transform: translateY(0)    rotate(-0.4deg); }
    30%  { transform: translateY(-10px) rotate(0.6deg); }
    65%  { transform: translateY(5px)  rotate(-0.3deg); }
    100% { transform: translateY(0)    rotate(-0.4deg); }
}

/* ============================================================
   3. WAVE — coordinated vertical wave
   ============================================================ */
.tcf-style-wave .tcf-tag {
    animation: tcf-wave var(--tcf-speed, 3s) ease-in-out infinite;
}
.tcf-style-wave .tcf-tag:nth-child(2n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.125); }
.tcf-style-wave .tcf-tag:nth-child(3n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.25);  }
.tcf-style-wave .tcf-tag:nth-child(4n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.375); }
.tcf-style-wave .tcf-tag:nth-child(5n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.5);   }
.tcf-style-wave .tcf-tag:nth-child(6n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.625); }
.tcf-style-wave .tcf-tag:nth-child(7n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.75);  }
.tcf-style-wave .tcf-tag:nth-child(8n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.875); }

@keyframes tcf-wave {
    0%, 100% { transform: translateY(0);    }
    50%       { transform: translateY(-14px); }
}

/* ============================================================
   4. PULSE — scale + color pop staggered
   ============================================================ */
.tcf-style-pulse .tcf-tag {
    animation: tcf-pulse var(--tcf-speed, 3s) ease-in-out infinite;
    opacity: 0.55;
}
.tcf-style-pulse .tcf-tag:nth-child(2n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.125); }
.tcf-style-pulse .tcf-tag:nth-child(3n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.25);  }
.tcf-style-pulse .tcf-tag:nth-child(4n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.375); }
.tcf-style-pulse .tcf-tag:nth-child(5n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.5);   }
.tcf-style-pulse .tcf-tag:nth-child(6n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.625); }
.tcf-style-pulse .tcf-tag:nth-child(7n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.75);  }
.tcf-style-pulse .tcf-tag:nth-child(8n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.875); }

@keyframes tcf-pulse {
    0%, 100% { transform: scale(1);    opacity: 0.55; color: inherit;  }
    50%       { transform: scale(1.22); opacity: 1;    color: #ff6b1a;  }
}

/* ============================================================
   5. SPOTLIGHT — JS-driven (see text-cloud.js)
               CSS sets dim state; .tcf-lit = bright
   ============================================================ */
.tcf-style-spotlight .tcf-tag {
    opacity: 0.22;
    transition: opacity 0.35s ease, color 0.35s ease, text-shadow 0.35s ease;
}
.tcf-style-spotlight .tcf-tag.tcf-lit {
    opacity: 1;
}
.tcf-style-spotlight .tcf-tag.tcf-lit::before {
    box-shadow: 0 0 14px 4px var(--tcf-spot-color, #ff6b1a);
}

/* ============================================================
   6. GLOW — opacity breathing with orange glow peak
   ============================================================ */
.tcf-style-glow .tcf-tag {
    animation: tcf-glow var(--tcf-speed, 3s) ease-in-out infinite;
    opacity: 0.3;
}
.tcf-style-glow .tcf-tag:nth-child(2n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.15); }
.tcf-style-glow .tcf-tag:nth-child(3n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.30); }
.tcf-style-glow .tcf-tag:nth-child(4n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.45); }
.tcf-style-glow .tcf-tag:nth-child(5n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.60); }
.tcf-style-glow .tcf-tag:nth-child(6n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.75); }
.tcf-style-glow .tcf-tag:nth-child(7n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.90); }
.tcf-style-glow .tcf-tag:nth-child(8n)  { animation-delay: calc(var(--tcf-speed, 3s) * 1.05); }

@keyframes tcf-glow {
    0%, 100% {
        opacity: 0.3;
        text-shadow: none;
        color: #ffffff;
    }
    50% {
        opacity: 1;
        text-shadow: 0 0 20px rgba(232, 93, 4, 0.9), 0 0 40px rgba(232, 93, 4, 0.5);
        color: #ff8c42;
    }
}

/* ============================================================
   7. BOUNCE — vertical bounce with ease
   ============================================================ */
.tcf-style-bounce .tcf-tag {
    animation: tcf-bounce var(--tcf-speed, 3s) cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}
.tcf-style-bounce .tcf-tag:nth-child(2n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.1); }
.tcf-style-bounce .tcf-tag:nth-child(3n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.2); }
.tcf-style-bounce .tcf-tag:nth-child(4n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.3); }
.tcf-style-bounce .tcf-tag:nth-child(5n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.4); }
.tcf-style-bounce .tcf-tag:nth-child(6n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.5); }
.tcf-style-bounce .tcf-tag:nth-child(7n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.6); }
.tcf-style-bounce .tcf-tag:nth-child(8n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.7); }

@keyframes tcf-bounce {
    0%, 100% { transform: translateY(0) scaleY(1);     }
    10%       { transform: translateY(-18px) scaleY(1); }
    20%       { transform: translateY(0) scaleY(0.92);  }
    28%       { transform: translateY(-7px) scaleY(1);  }
    38%       { transform: translateY(0) scaleY(0.97);  }
}

/* ============================================================
   8. FLICKER — candle-like random flicker
   ============================================================ */
.tcf-style-flicker .tcf-tag {
    animation: tcf-flicker var(--tcf-speed, 3s) ease-in-out infinite;
}
.tcf-style-flicker .tcf-tag:nth-child(2n)  { animation-duration: calc(var(--tcf-speed, 3s) * 0.9);  animation-delay: -0.5s; }
.tcf-style-flicker .tcf-tag:nth-child(3n)  { animation-duration: calc(var(--tcf-speed, 3s) * 1.3);  animation-delay: -1.2s; }
.tcf-style-flicker .tcf-tag:nth-child(4n)  { animation-duration: calc(var(--tcf-speed, 3s) * 0.75); animation-delay: -0.8s; }
.tcf-style-flicker .tcf-tag:nth-child(5n)  { animation-duration: calc(var(--tcf-speed, 3s) * 1.1);  animation-delay: -2.0s; }
.tcf-style-flicker .tcf-tag:nth-child(6n)  { animation-duration: calc(var(--tcf-speed, 3s) * 1.45); animation-delay: -0.3s; }
.tcf-style-flicker .tcf-tag:nth-child(7n)  { animation-duration: calc(var(--tcf-speed, 3s) * 0.8);  animation-delay: -1.7s; }

@keyframes tcf-flicker {
    0%, 100% { opacity: 1;    transform: scale(1); }
    8%        { opacity: 0.4;  transform: scale(0.97); }
    12%       { opacity: 0.95; transform: scale(1.01); }
    20%       { opacity: 0.7;  transform: scale(0.99); }
    30%       { opacity: 1;    transform: scale(1); }
    55%       { opacity: 0.85; transform: scale(1); }
    60%       { opacity: 0.3;  transform: scale(0.96); }
    68%       { opacity: 0.95; }
    80%       { opacity: 0.6;  transform: scale(0.99); }
    90%       { opacity: 1;    transform: scale(1.01); }
}

/* ============================================================
   9. SPIN-IN — each tag periodically rotates 360
   ============================================================ */
.tcf-style-spin-in .tcf-tag {
    animation: tcf-spin-in var(--tcf-speed, 3s) ease-in-out infinite;
}
.tcf-style-spin-in .tcf-tag:nth-child(2n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.125); }
.tcf-style-spin-in .tcf-tag:nth-child(3n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.25);  }
.tcf-style-spin-in .tcf-tag:nth-child(4n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.375); }
.tcf-style-spin-in .tcf-tag:nth-child(5n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.5);   }
.tcf-style-spin-in .tcf-tag:nth-child(6n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.625); }
.tcf-style-spin-in .tcf-tag:nth-child(7n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.75);  }
.tcf-style-spin-in .tcf-tag:nth-child(8n)  { animation-delay: calc(var(--tcf-speed, 3s) * 0.875); }

@keyframes tcf-spin-in {
    0%, 60%, 100% { transform: rotateY(0deg)   scale(1);    opacity: 1;   }
    20%            { transform: rotateY(180deg) scale(0.85); opacity: 0.6; }
    40%            { transform: rotateY(360deg) scale(1);    opacity: 1;   }
}

/* ============================================================
   LINKS — inherit everything, override nothing
   ============================================================ */
a.tcf-tag,
a.tcf-tag:link,
a.tcf-tag:visited,
a.tcf-tag:active {
    color: inherit;           /* never inherit WP/theme link color */
    text-decoration: none;
    outline: none;
}

/* ============================================================
   HOVER EFFECTS — shared transition base
   ============================================================ */
.tcf-hover-lift .tcf-tag,
.tcf-hover-glow .tcf-tag,
.tcf-hover-expand .tcf-tag,
.tcf-hover-underline .tcf-tag,
.tcf-hover-fill .tcf-tag {
    transition:
        color         var(--tcf-hover-speed, 260ms) cubic-bezier(0.25, 0.46, 0.45, 0.94),
        background    var(--tcf-hover-speed, 260ms) cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform     var(--tcf-hover-speed, 260ms) cubic-bezier(0.25, 0.46, 0.45, 0.94),
        text-shadow   var(--tcf-hover-speed, 260ms) ease,
        letter-spacing var(--tcf-hover-speed, 260ms) ease,
        opacity       var(--tcf-hover-speed, 260ms) ease;
    cursor: pointer;
}

/* ── 1. LIFT ─────────────────────────────────────────────── */
/* Floats up + subtle glow; sibling tags dim slightly */
.tcf-hover-lift .tcf-cloud:hover .tcf-tag {
    opacity: 0.55;
}
.tcf-hover-lift .tcf-tag:hover {
    transform: translateY(-6px) !important;
    opacity: 1 !important;
    text-shadow:
        0 4px 18px rgba(232, 93, 4, 0.7),
        0 8px 32px rgba(232, 93, 4, 0.35);
    letter-spacing: 0.14em;
}
.tcf-hover-lift .tcf-tag:hover::before {
    transform: scale(1.3);
}

/* ── 2. GLOW ─────────────────────────────────────────────── */
/* Text glows outward; no movement */
.tcf-hover-glow .tcf-tag:hover {
    text-shadow:
        0 0 12px rgba(255, 107, 26, 0.95),
        0 0 28px rgba(255, 107, 26, 0.65),
        0 0 55px rgba(255, 107, 26, 0.3);
    letter-spacing: 0.15em;
}
.tcf-hover-glow .tcf-tag:hover::before {
    box-shadow: 0 0 16px 5px rgba(255, 107, 26, 0.8);
    transform: scale(1.4);
}

/* ── 3. EXPAND ───────────────────────────────────────────── */
/* Scales up slightly; siblings shrink */
.tcf-hover-expand .tcf-cloud:hover .tcf-tag {
    transform: scale(0.9);
    opacity: 0.6;
}
.tcf-hover-expand .tcf-tag:hover {
    transform: scale(1.18) !important;
    opacity: 1 !important;
    text-shadow: 0 2px 14px rgba(232, 93, 4, 0.5);
}

/* ── 4. UNDERLINE ────────────────────────────────────────── */
/* A fine line draws in from left; very elegant */
.tcf-hover-underline .tcf-tag {
    position: relative;
    overflow: visible;      /* keep the ::after visible outside padding */
}
.tcf-hover-underline .tcf-tag::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 1.5px;
    background: currentColor;
    transition: width var(--tcf-hover-speed, 260ms) cubic-bezier(0.25, 0.46, 0.45, 0.94),
                left  var(--tcf-hover-speed, 260ms) cubic-bezier(0.25, 0.46, 0.45, 0.94),
                background var(--tcf-hover-speed, 260ms) ease;
}
.tcf-hover-underline .tcf-tag:hover::after {
    width: 100%;
    left: 0;
    background: #ff6b1a;
    box-shadow: 0 0 8px rgba(255, 107, 26, 0.7);
}
.tcf-hover-underline .tcf-tag:hover {
    transform: translateY(-2px) !important;
    letter-spacing: 0.13em;
}

/* ── 5. FILL ─────────────────────────────────────────────── */
/* Background sweeps in from left (clip-path wipe) */
.tcf-hover-fill .tcf-tag {
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.tcf-hover-fill .tcf-tag::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(232, 93, 4, 0.18);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--tcf-hover-speed, 260ms) cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: -1;
}
.tcf-hover-fill .tcf-tag:hover::after {
    transform: scaleX(1);
}
.tcf-hover-fill .tcf-tag:hover {
    letter-spacing: 0.13em;
}

/* ── Dot base transition ──────────────────────────────────── */
.tcf-hover-lift .tcf-tag::before,
.tcf-hover-glow .tcf-tag::before,
.tcf-hover-expand .tcf-tag::before {
    transition: transform var(--tcf-hover-speed, 260ms) ease,
                box-shadow var(--tcf-hover-speed, 260ms) ease,
                background var(--tcf-hover-speed, 260ms) ease;
}