/* =========================================================
   About Us – Ultra Premium v2 (Sparkys Theme)
   :root --brand (#841a78)  |  --accent (#E0C5DD)
   ========================================================= */

/* ─── Container ─── */
.about-container {
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}
@media (min-width: 768px) {
    .about-container { padding: 0 2rem; }
}

/* ─── Page Shell ─── */
.about-page {
    background: #fdfbfc;
    overflow-x: hidden;
}

/* =========================================================
   1. HERO – Rounded background + extra top space + orbs
   ========================================================= */
.about-hero {
    position: relative;
    margin: 1rem .75rem 0;
    border-radius: 28px;
    min-height: 52vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    box-shadow:
        0 30px 80px rgba(132,26,120,.22),
        0 8px 24px rgba(0,0,0,.12);
}

@media (min-width: 768px) {
    .about-hero {
        margin: 1.25rem 1.5rem 0;
        border-radius: 36px;
        min-height: 56vh;
        box-shadow:
            0 40px 100px rgba(132,26,120,.25),
            0 12px 32px rgba(0,0,0,.10);
    }
}

@media (min-width: 1024px) {
    .about-hero {
        margin: 1.5rem 2rem 0;
        min-height: 55vh;
    }
}

/* Background layer with gradient */
.about-hero__bg {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(ellipse 130% 90% at 50% 15%,
            color-mix(in srgb, var(--accent) 32%, var(--brand)),
            var(--brand) 65%,
            color-mix(in srgb, var(--brand) 85%, #1a0520) 100%);
    z-index: 0;
}

/* Floating orbs (animated background blobs) */
.about-hero__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
    will-change: transform;
}

.about-hero__orb--1 {
    width: 340px; height: 340px;
    top: -80px; left: -60px;
    background: color-mix(in srgb, var(--accent) 25%, transparent);
    animation: orbFloat1 8s ease-in-out infinite;
}

.about-hero__orb--2 {
    width: 260px; height: 260px;
    bottom: -40px; right: -40px;
    background: rgba(255,255,255,.08);
    animation: orbFloat2 10s ease-in-out infinite;
}

.about-hero__orb--3 {
    width: 180px; height: 180px;
    top: 30%; left: 60%;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    animation: orbFloat3 12s ease-in-out infinite;
}

@keyframes orbFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(30px, 20px) scale(1.08); }
    66%      { transform: translate(-15px, 30px) scale(.95); }
}
@keyframes orbFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-25px, -20px) scale(1.12); }
}
@keyframes orbFloat3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(20px, -15px) scale(1.1); }
}

/* Particles */
.about-hero__particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.hero-particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    animation: particleFloat linear infinite, particleTwinkle ease-in-out infinite;
    will-change: transform, opacity;
}

@keyframes particleFloat {
    0%   { transform: translateY(0) translateX(0) scale(1); }
    25%  { transform: translateY(-25px) translateX(8px) scale(1.2); }
    50%  { transform: translateY(-45px) translateX(-5px) scale(1.4); }
    75%  { transform: translateY(-20px) translateX(12px) scale(1.1); }
    100% { transform: translateY(0) translateX(0) scale(1); }
}

@keyframes particleTwinkle {
    0%, 100% { opacity: var(--p-opacity, .3); }
    50%      { opacity: calc(var(--p-opacity, .3) + .25); }
}

/* ─── Hero Content ─── */
.about-hero__content {
    position: relative;
    z-index: 2;
    padding: 5rem 1.5rem 3.5rem;
}

@media (min-width: 768px) {
    .about-hero__content {
        padding: 6rem 2rem 4rem;
    }
}

/* Badge pill */
.about-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    padding: .5rem 1.25rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: .04em;
    margin-bottom: 1.5rem;
    animation: badgeFadeIn .8s ease .3s both;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

@keyframes badgeFadeIn {
    from { opacity: 0; transform: translateY(16px) scale(.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Title */
.about-hero__title {
    font-size: clamp(2.4rem, 7vw, 4.5rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.08;
    letter-spacing: -.03em;
    margin: 0 0 1.2rem;
    text-shadow: 0 4px 40px rgba(0,0,0,.30);
    animation: heroTitleIn 1s cubic-bezier(.16,1,.3,1) .5s both;
}

@keyframes heroTitleIn {
    from { opacity: 0; transform: translateY(36px) scale(.94); filter: blur(8px); }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Tagline */
.about-hero__tagline {
    max-width: 38rem;
    margin: 0 auto;
    font-size: clamp(.95rem, 2vw, 1.2rem);
    color: rgba(255,255,255,.88);
    line-height: 1.75;
    animation: heroTagIn .8s ease .9s both;
}

@keyframes heroTagIn {
    from { opacity: 0; transform: translateY(20px); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* =========================================================
   2. STORY SECTION – Glass cards with shimmer
   ========================================================= */
.about-story {
    padding: 3.5rem 0 2rem;
}

.story-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .story-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

.story-card {
    position: relative;
    border-radius: 24px;
    padding: 2rem 1.75rem;
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(132,26,120,.08);
    box-shadow:
        0 24px 56px rgba(132,26,120,.08),
        0 8px 16px rgba(0,0,0,.04),
        0 1px 0 rgba(255,255,255,.8) inset;
    transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease;
    overflow: hidden;
}

.story-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    border-radius: 24px 24px 0 0;
    background: linear-gradient(90deg, var(--brand), var(--accent));
}

.story-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 36px 72px rgba(132,26,120,.12),
        0 12px 24px rgba(0,0,0,.06),
        0 1px 0 rgba(255,255,255,.8) inset;
}

/* Story card shimmer */
.story-card__shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 45%, transparent 55%);
    transform: translateX(-130%);
    transition: transform .8s ease;
    pointer-events: none;
    border-radius: 24px;
    z-index: 0;
}
.story-card:hover .story-card__shimmer {
    transform: translateX(130%);
}

.story-card__icon {
    position: relative; z-index: 1;
    width: 56px; height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 70%, var(--accent)));
    box-shadow: 0 10px 28px color-mix(in srgb, var(--brand) 28%, transparent);
    margin-bottom: 1.25rem;
    animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

.story-card__title {
    position: relative; z-index: 1;
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--brand);
    margin: 0 0 .75rem;
    letter-spacing: -.01em;
}

.story-card__text {
    position: relative; z-index: 1;
    margin: 0;
    font-size: .94rem;
    line-height: 1.85;
    color: rgba(30,41,59,.85);
    font-family: 'myriad-pro', sans-serif;
}

/* =========================================================
   3. FIREFLIES BANNER – Dual glow + neon divider
   ========================================================= */
.fireflies-banner {
    position: relative;
    padding: 4.5rem 0;
    text-align: center;
    overflow: hidden;
    background:
        linear-gradient(180deg,
            #fdfbfc 0%,
            color-mix(in srgb, var(--brand) 5%, #fdfbfc) 20%,
            color-mix(in srgb, var(--brand) 8%, #fdfbfc) 50%,
            color-mix(in srgb, var(--brand) 5%, #fdfbfc) 80%,
            #fdfbfc 100%);
}

.fireflies-banner__glow {
    position: absolute;
    top: 50%; left: 50%;
    width: 500px; height: 500px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 65%);
    animation: glowPulse 4s ease-in-out infinite;
    pointer-events: none;
}

.fireflies-banner__glow--2 {
    width: 350px; height: 350px;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand) 12%, transparent), transparent 60%);
    animation: glowPulse2 5s ease-in-out 1.5s infinite;
}

@keyframes glowPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .5; }
    50%      { transform: translate(-50%, -50%) scale(1.18); opacity: .8; }
}

@keyframes glowPulse2 {
    0%, 100% { transform: translate(-50%, -50%) scale(.9); opacity: .3; }
    50%      { transform: translate(-50%, -50%) scale(1.1); opacity: .6; }
}

.fireflies-banner__inner {
    position: relative;
    z-index: 1;
    max-width: 48rem;
    margin: 0 auto;
}

.fireflies-banner__title {
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    font-weight: 900;
    color: var(--brand);
    margin: 0 0 1.25rem;
    letter-spacing: -.02em;
}

/* Neon animated divider */
.fireflies-banner__divider {
    position: relative;
    width: 100px;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
    margin: 0 auto 1.5rem;
    overflow: visible;
}

.fireflies-banner__divider-glow {
    position: absolute;
    inset: -4px -8px;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
    filter: blur(10px);
    opacity: .5;
    animation: dividerNeon 2.5s ease-in-out infinite;
}

@keyframes dividerNeon {
    0%, 100% { opacity: .3; transform: scaleX(.9); }
    50%      { opacity: .7; transform: scaleX(1.1); }
}

.fireflies-banner__desc {
    margin: 0 auto;
    font-size: 1.02rem;
    line-height: 1.85;
    color: rgba(30,41,59,.82);
    font-family: 'myriad-pro', sans-serif;
    max-width: 42rem;
}

/* =========================================================
   4. FIREFLY FRIENDS – Unique cards per character
   ========================================================= */
.firefly-friends {
    padding: 2rem 0 3rem;
}

.friends-section__title {
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    font-weight: 900;
    text-align: center;
    margin: 0 0 2.5rem;
    letter-spacing: -.02em;
    background: linear-gradient(90deg, var(--brand), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Grid layouts */
.ff-grid {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.ff-grid--top  { grid-template-columns: 1fr; }
.ff-grid--bottom { grid-template-columns: 1fr; }

@media (min-width: 768px) {
    .ff-grid--top { grid-template-columns: repeat(3, 1fr); }
    .ff-grid--bottom {
        grid-template-columns: repeat(2, 1fr);
        max-width: 66.666%;
        margin-left: auto;
        margin-right: auto;
    }
    .ff-grid { gap: 2.5rem; }
}

/* ─── Card Variables per Character ─── */
.ff-card {
    --ff-glow: rgba(255,79,183,.35);
    --ff-solid: #ff4fbb;
    --ff-bg-tint: rgba(255,79,183,.04);
    --ff-border-tint: rgba(255,79,183,.12);
    --ff-name-color: var(--brand);
}

/* Speed = Orange / Yellow */
.ff-card--speed {
    --ff-glow: rgba(255, 165, 0, .45);
    --ff-solid: #f59e0b;
    --ff-bg-tint: rgba(255, 165, 0, .05);
    --ff-border-tint: rgba(255, 165, 0, .16);
    --ff-name-color: #d97706;
}
/* Spin = Purple */
.ff-card--spin {
    --ff-glow: rgba(147, 51, 234, .45);
    --ff-solid: #9333ea;
    --ff-bg-tint: rgba(147, 51, 234, .05);
    --ff-border-tint: rgba(147, 51, 234, .16);
    --ff-name-color: #7e22ce;
}
/* Swing = Green */
.ff-card--swing {
    --ff-glow: rgba(34, 197, 94, .45);
    --ff-solid: #22c55e;
    --ff-bg-tint: rgba(34, 197, 94, .05);
    --ff-border-tint: rgba(34, 197, 94, .16);
    --ff-name-color: #16a34a;
}
/* Splash = Blue */
.ff-card--splash {
    --ff-glow: rgba(59, 130, 246, .45);
    --ff-solid: #3b82f6;
    --ff-bg-tint: rgba(59, 130, 246, .05);
    --ff-border-tint: rgba(59, 130, 246, .16);
    --ff-name-color: #2563eb;
}
/* Smiley = Red / Dark Pink */
.ff-card--smiley {
    --ff-glow: rgba(220, 38, 75, .45);
    --ff-solid: #dc264b;
    --ff-bg-tint: rgba(220, 38, 75, .05);
    --ff-border-tint: rgba(220, 38, 75, .16);
    --ff-name-color: #be123c;
}

/* ─── Card Base ─── */
.ff-card {
    position: relative;
    border-radius: 28px;
    background:
        linear-gradient(180deg, var(--ff-bg-tint), rgba(255,255,255,.88) 40%, rgba(255,255,255,.92));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1.5px solid var(--ff-border-tint);
    padding: 2.5rem 1.5rem 2rem;
    margin-top: 3rem;
    text-align: center;
    overflow: visible;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
    box-shadow:
        0 20px 50px rgba(0,0,0,.06),
        0 1px 0 rgba(255,255,255,.9) inset;
}

.ff-card:hover {
    border-color: var(--ff-solid);
    box-shadow:
        0 30px 70px rgba(0,0,0,.08),
        0 0 0 1px var(--ff-border-tint),
        0 0 60px var(--ff-glow),
        0 1px 0 rgba(255,255,255,.9) inset;
}

/* Clip only the shimmer/accent decorations, not the image */
.ff-card__shimmer,
.ff-card__accent-line {
    overflow: hidden;
}

/* ─── Background Shadow div (behind the card) ─── */
.ff-card__bg-shadow {
    position: absolute;
    inset: 8px;
    border-radius: 24px;
    z-index: -1;
    box-shadow:
        0 25px 60px var(--ff-glow),
        0 10px 30px rgba(0,0,0,.06);
    opacity: 0;
    transition: opacity .4s ease;
}

.ff-card:hover .ff-card__bg-shadow {
    opacity: 1;
}

/* ─── Accent Line (top gradient border, always visible, char color) ─── */
.ff-card__accent-line {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ff-solid), var(--accent));
    border-radius: 28px 28px 0 0;
    opacity: .6;
    transition: opacity .35s ease, height .35s ease;
}

.ff-card:hover .ff-card__accent-line {
    opacity: 1;
    height: 5px;
}

/* ─── Shimmer Sweep ─── */
.ff-card__shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        115deg,
        transparent 0%,
        rgba(255,255,255,.35) 42%,
        rgba(255,255,255,.1) 50%,
        transparent 58%
    );
    transform: translateX(-140%);
    transition: transform .75s cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
    border-radius: 28px;
    z-index: 3;
}

.ff-card:hover .ff-card__shimmer {
    transform: translateX(140%);
}

/* ─── Character Image ─── */
.ff-card__img-wrap {
    position: relative;
    width: 200px; height: 200px;
    margin: -5rem auto .5rem;
    z-index: 4;
}

/* Rotating ring behind image */
.ff-card__img-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px dashed var(--ff-border-tint);
    opacity: 0;
    transition: opacity .4s ease;
    animation: ringRotate 20s linear infinite paused;
}

.ff-card:hover .ff-card__img-ring {
    opacity: .5;
    animation-play-state: running;
}

@keyframes ringRotate {
    to { transform: rotate(360deg); }
}

/* Color glow behind image */
.ff-card__img-glow {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--ff-glow), transparent 70%);
    filter: blur(28px);
    opacity: 0;
    transition: opacity .4s ease, transform .4s ease;
    z-index: 0;
}

.ff-card:hover .ff-card__img-glow {
    opacity: .65;
    transform: scale(1.1);
}

/* Image */
.ff-card__img {
    position: relative;
    z-index: 1;
    width: 100%; height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 14px 22px rgba(0,0,0,.14));
    transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .45s ease;
    will-change: transform;
    /* Per-character animation is set via .ff-card--xxx .ff-card__img above */
}

/* Each character has its own breathing/swing animation */
@keyframes imgSwing {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25%      { transform: translateY(-6px) rotate(1.5deg); }
    50%      { transform: translateY(-3px) rotate(0deg); }
    75%      { transform: translateY(-6px) rotate(-1.5deg); }
}

.ff-card--speed .ff-card__img  { animation: imgSwingFast 2.5s ease-in-out infinite; }
.ff-card--spin .ff-card__img   { animation: imgSpinBob 3.8s ease-in-out infinite; }
.ff-card--swing .ff-card__img  { animation: imgSwingBig 2.8s ease-in-out infinite; }
.ff-card--splash .ff-card__img { animation: imgBounce 3s ease-in-out infinite; }
.ff-card--smiley .ff-card__img { animation: imgSway 3.5s ease-in-out infinite; }

/* Speed – fast energetic swing */
@keyframes imgSwingFast {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25%      { transform: translateY(-8px) rotate(2deg); }
    50%      { transform: translateY(-2px) rotate(0deg); }
    75%      { transform: translateY(-8px) rotate(-2deg); }
}

/* Spin – gentle spinning bob */
@keyframes imgSpinBob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33%      { transform: translateY(-5px) rotate(3deg); }
    66%      { transform: translateY(-5px) rotate(-3deg); }
}

/* Swing – big playful swing */
@keyframes imgSwingBig {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    20%      { transform: translateY(-10px) rotate(3deg); }
    40%      { transform: translateY(-4px) rotate(-2deg); }
    60%      { transform: translateY(-10px) rotate(2deg); }
    80%      { transform: translateY(-4px) rotate(-3deg); }
}

/* Splash – bouncy energy */
@keyframes imgBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    30%      { transform: translateY(-10px) scale(1.02); }
    50%      { transform: translateY(-3px) scale(1); }
    70%      { transform: translateY(-10px) scale(1.02); }
}

/* Smiley – gentle happy sway */
@keyframes imgSway {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-6px) rotate(2deg); }
}

.ff-card:hover .ff-card__img {
    transform: translateY(-14px) scale(1.12) rotate(0deg);
    filter:
        drop-shadow(0 28px 36px rgba(0,0,0,.18))
        drop-shadow(0 0 32px var(--ff-glow));
    animation: none !important;
}

/* ─── Card Body ─── */
.ff-card__body {
    position: relative;
    z-index: 2;
    padding-top: .75rem;
}

/* Color identity dot */
.ff-card__color-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--ff-solid);
    margin-bottom: .5rem;
    box-shadow: 0 0 10px var(--ff-glow);
    animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% { box-shadow: 0 0 6px var(--ff-glow); transform: scale(1); }
    50%      { box-shadow: 0 0 16px var(--ff-glow); transform: scale(1.2); }
}

.ff-card__name {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--ff-name-color);
    margin: 0 0 .6rem;
    letter-spacing: .02em;
    transition: color .3s ease;
}

.ff-card__desc {
    margin: 0;
    font-size: .88rem;
    line-height: 1.75;
    color: rgba(71,85,105,.9);
    font-family: 'myriad-pro', sans-serif;
}

/* =========================================================
   5. SCROLL REVEAL
   ========================================================= */
.ab-reveal {
    opacity: 0;
    transform: translateY(36px) scale(.98);
    transition:
        opacity .7s cubic-bezier(.16,1,.3,1),
        transform .7s cubic-bezier(.16,1,.3,1);
    transition-delay: var(--reveal-delay, 0ms);
}

.ab-reveal.ab-revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* =========================================================
   6. RESPONSIVE
   ========================================================= */
@media (max-width: 767px) {
    .about-hero {
        min-height: 42vh;
        margin: .5rem .5rem 0;
        border-radius: 22px;
    }

    .about-hero__content {
        padding: 4rem 1rem 2.5rem;
    }

    .story-card {
        padding: 1.5rem 1.25rem;
    }

    .ff-card__img-wrap {
        width: 170px; height: 170px;
        margin-top: -4rem;
    }

    .ff-card {
        padding: 2rem 1.25rem 1.5rem;
        margin-top: 2.5rem;
    }

    .fireflies-banner {
        padding: 2.5rem 0;
    }
}

@media (min-width: 1024px) {
    .ff-card__img-wrap {
        width: 220px; height: 220px;
        margin-top: -5.5rem;
    }

    .ff-card {
        padding: 2.5rem 2rem 2.25rem;
        margin-top: 3.5rem;
    }
}

/* =========================================================
   7. REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .ab-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .hero-particle,
    .about-hero__orb,
    .fireflies-banner__glow,
    .fireflies-banner__divider-glow,
    .about-hero__badge,
    .about-hero__title,
    .about-hero__tagline,
    .ff-card__img,
    .ff-card__color-dot,
    .story-card__icon,
    .ff-card--speed .ff-card__img,
    .ff-card--spin .ff-card__img,
    .ff-card--swing .ff-card__img,
    .ff-card--splash .ff-card__img,
    .ff-card--smiley .ff-card__img {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .ff-card__shimmer,
    .story-card__shimmer,
    .ff-card__img-ring { display: none !important; }
}