@import url("./aiCopyGenerator.css");

.instagramCaptionHero {
    animation: instagramCaptionHeroDots 5s linear infinite;
}

.instagramCaptionHero .aiCopyHeroGlow {
    background: radial-gradient(circle, rgba(225, 48, 108, 0.25), transparent 68%);
}

.instagramCaptionHero .aiCopyHeroEyebrow,
.instagramCaptionHero .aiCopyHeroPinMeta,
.instagramCaptionHero .aiCopyHeroPinImageSparkle,
.instagramCaptionHero .aiCopyHeroSparkle {
    color: #e1306c;
}

.instagramCaptionHero .aiCopyHeroSpecIcon,
.instagramCaptionHero .aiCopyHeroInsightIcon,
.instagramCaptionHero .aiCopyHeroHashtag {
    border-color: rgba(225, 48, 108, 0.35);
    background: linear-gradient(135deg, rgba(255, 220, 128, 0.13), rgba(225, 48, 108, 0.14), rgba(64, 93, 230, 0.13));
    color: #e1306c;
}

.instagramCaptionHero .aiCopyHeroPinImage {
    background:
        radial-gradient(ellipse at 72% 24%, rgba(255, 248, 222, 0.94) 0 5%, transparent 5.5%),
        radial-gradient(ellipse at 45% 100%, rgba(94, 54, 69, 0.83) 0 35%, transparent 35.5%),
        linear-gradient(145deg, transparent 0 47%, rgba(114, 58, 81, 0.74) 47.5% 70%, transparent 70.5%),
        linear-gradient(35deg, #ae6659 0 25%, #e2a17d 26% 44%, #f0c79d 45% 68%, #f7e7c9 69% 100%);
}

.instagramCaptionHero .aiCopyHeroPinMark {
    width: 76px;
    height: 76px;
    border-color: rgba(255, 255, 255, 0.75);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.9);
}

.instagramCaptionHero .aiCopyHeroPinMark img {
    display: block;
    width: 53px;
    height: 53px;
    object-fit: contain;
}

.instagramCaptionHero .aiCopyHeroPinAvatar {
    background: linear-gradient(135deg, #ffdc80, #e1306c 60%, #405de6);
    color: #fff;
}

.instagramCaptionHero .aiCopyHeroPinSave {
    color: #e1306c;
}

.instagramCaptionHero .aiCopyHeroFloatingOne,
.instagramCaptionHero .aiCopyHeroFloatingTwo {
    color: #e1306c;
}

@keyframes instagramCaptionHeroDots {
    from {
        background-position: center, 0 0;
    }

    to {
        background-position: center, 24px 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .instagramCaptionHero,
    .instagramCaptionHero .aiCopyHeroPinterestCard,
    .instagramCaptionHero .aiCopyHeroInsight {
        animation: none;
    }
}