/* ═══════════════════════════════════════════════════════════════════════════
   FEST-BODY DESIGN SYSTEM (v2 — refined palette + type)
   Scoped to .fest-body so they don't touch the nav/hero/footer.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Load the display/body/label fonts. Without this, devices that don't have
   Anton/Archivo installed locally fall back to a thin system sans-serif. */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700&family=Archivo+Narrow:wght@400;500;600;700&display=swap');
@layer components {
    /* Body-section palette (v2) */
    .fest-body {
        --fb-cream: #ffffff;
        --fb-cream-deep: #eef1f6;
        --fb-ink: #1a1a1a;
        --fb-red: #c2582a;
        --fb-red-2: #7a1f2b;
        --fb-teal: #1b323b;
        --fb-yellow: #f5c518;
        --fb-mist: #dfe9ec;
        --fb-sand: #d9c9a8;
        font-family: 'Archivo', system-ui, sans-serif;
        color: var(--fb-ink);
        background: var(--fb-cream);
    }

    /* Typography */
    .fest-body .fb-display {
        font-family: 'Anton', 'Archivo Black', sans-serif;
        font-weight: 400;
        letter-spacing: 0.01em;
        line-height: 0.95;
        text-transform: uppercase;
    }

    .fest-body .fb-label {
        font-family: 'Archivo Narrow', 'Archivo', sans-serif;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    .fest-body .fb-body {
        font-family: 'Archivo', system-ui, sans-serif;
        font-weight: 400;
        line-height: 1.55;
    }

    /* Background helpers */
    .fest-body .fb-bg-cream {
        background: var(--fb-cream);
    }

    .fest-body .fb-bg-cream-deep {
        background: var(--fb-cream-deep);
    }

    .fest-body .fb-bg-ink {
        background: var(--fb-ink);
        color: #fff;
    }

    .fest-body .fb-bg-red {
        background: var(--fb-red);
        color: #fff;
    }

    .fest-body .fb-bg-teal {
        background: var(--fb-teal);
        color: #fff;
    }

    .fest-body .fb-bg-yellow {
        background: var(--fb-yellow);
        color: var(--fb-ink);
    }

    .fest-body .fb-bg-mist {
        background: var(--fb-mist);
        color: var(--fb-ink);
    }

    .fest-body .fb-bg-sand {
        background: var(--fb-sand);
        color: var(--fb-ink);
    }

    /* Text color helpers */
    .fest-body .fb-t-red {
        color: var(--fb-red);
    }

    .fest-body .fb-t-red-2 {
        color: var(--fb-red-2);
    }

    .fest-body .fb-t-teal {
        color: var(--fb-teal);
    }

    .fest-body .fb-t-yellow {
        color: var(--fb-yellow);
    }

    .fest-body .fb-t-ink {
        color: var(--fb-ink);
    }

    .fest-body .fb-t-mute {
        color: #5a5a5a;
    }

    /* Card & Button base */
    .fest-body .fb-card,
    .fest-body .fb-btn {
        border: 2px solid var(--fb-ink);
        border-radius: 14px;
        box-shadow: 5px 5px 0 0 var(--fb-ink);
        transition: transform 150ms ease, box-shadow 150ms ease;
    }

    .fest-body .fb-card-lg {
        box-shadow: 7px 7px 0 0 var(--fb-ink);
    }

    /* Card-as-button: same lift-on-hover / press-on-active as .fb-btn */
    .fest-body .fb-card.fb-pop:hover {
        transform: translate(-2px, -2px);
        box-shadow: 7px 7px 0 0 var(--fb-ink);
    }

    .fest-body .fb-card.fb-pop:active {
        transform: translate(0, 0);
        box-shadow: 2px 2px 0 0 var(--fb-ink);
    }

    /* Button styles */
    .fest-body .fb-btn {
        display: inline-block;
        padding: 0.85rem 1.4rem;
        font-family: 'Anton', sans-serif;
        font-size: 1.05rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        text-decoration: none;
    }

    .fest-body .fb-btn:hover {
        transform: translate(-2px, -2px);
        box-shadow: 7px 7px 0 0 var(--fb-ink);
    }

    .fest-body .fb-btn:active {
        transform: translate(0, 0);
        box-shadow: 2px 2px 0 0 var(--fb-ink);
    }

    .fest-body .fb-btn-red {
        background: var(--fb-red);
        color: #fff;
    }

    .fest-body .fb-btn-cream {
        background: var(--fb-cream);
        color: var(--fb-ink);
    }

    .fest-body .fb-btn-yellow {
        background: var(--fb-yellow);
        color: var(--fb-ink);
    }

    /* Divider stripe */
    .fest-body .fb-stripe {
        background: var(--fb-ink);
    }

    /* Section rhythm variant — tight top.
   Use on a section that stacks directly below another full-padding section,
   so they visually group rather than each contributing equal vertical space.
   Top padding is ~50% of the standard `py-24 md:py-32 lg:py-40` rhythm;
   bottom stays full so the section breathes before whatever comes next. */
    .fest-body .fb-section-tight-top {
        padding-top: clamp(2.5rem, 5vw, 3.5rem);
        padding-bottom: clamp(5rem, 10vw, 7rem);
    }

    /* Grid/paper texture for placeholders */
    .fest-body .fb-grid-bg {
        background-image: linear-gradient(0deg, transparent 24%, rgba(0,0,0,.05) 25%, rgba(0,0,0,.05) 26%, transparent 27%, transparent 74%, rgba(0,0,0,.05) 75%, rgba(0,0,0,.05) 76%, transparent 77%),
        linear-gradient(90deg, transparent 24%, rgba(0,0,0,.05) 25%, rgba(0,0,0,.05) 26%, transparent 27%, transparent 74%, rgba(0,0,0,.05) 75%, rgba(0,0,0,.05) 76%, transparent 77%);
        background-size: 40px 40px;
    }

    /* ─── Carousel arrow buttons (blinker-style images) ─────────────────────── */
    .carousel-arrow {
        background: transparent;
        border: none;
        padding: 0;
        width: 56px;
        height: 56px;
        cursor: pointer;
        transition: transform 0.2s ease-out;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .carousel-arrow:hover {
        transform: rotate(-3deg) scale(1.08);
    }

    .carousel-arrow:active {
        transform: rotate(-2deg) scale(0.95);
    }

    /* ─── Carousel entrance wiggle (current-activity card) ──────────────────── */
    @keyframes arrow-wiggle {
        0% {
            transform: translateX(0) rotate(0deg);
        }

        15% {
            transform: translateX(-3px) rotate(-1.5deg);
        }

        30% {
            transform: translateX(3px) rotate(1.5deg);
        }

        45% {
            transform: translateX(-2px) rotate(-1deg);
        }

        60% {
            transform: translateX(2px) rotate(1deg);
        }

        75% {
            transform: translateX(-1px) rotate(-0.5deg);
        }

        100% {
            transform: translateX(0) rotate(0deg);
        }
    }

    .arrow-wiggle {
        animation: arrow-wiggle 0.6s ease-out;
    }
}