/* Frontend + editor shared styles */
.ic-intro {
    position: relative;
    overflow: hidden;
    background: var(--ic-intro-bg, #141a20);
    color: var(--ic-intro-text, #d0ccc6);
    padding-top: var(--ic-intro-pt-mobile, 80px);
    padding-bottom: var(--ic-intro-pb-mobile, 80px);
}

.ic-intro__container {
    width: min(var(--ic-intro-container-max, 1280px), calc(100% - (var(--ic-intro-side-mobile, 24px) * 2)));
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.ic-intro__content {
    max-width: var(--ic-intro-content-max, 900px);
}

.ic-intro--centered .ic-intro__content {
    margin-inline: auto;
    text-align: center;
}

.ic-intro__eyebrow {
    margin: 0 0 1rem;
    color: var(--ic-intro-eyebrow, #c5a95e);
    font-size: var(--ic-intro-eyebrow-size, 14px);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ic-intro__heading {
    margin: 0 0 1.5rem;
    color: var(--ic-intro-heading, #faf8f5);
    font-size: var(--ic-intro-heading-size-mobile, 40px);
    line-height: var(--ic-intro-heading-line-height, 1.1);
    font-weight: 700;
    text-wrap: balance;
}

.ic-intro__lead {
    margin-bottom: 2rem;
}

.ic-intro__lead p {
    margin: 0;
    color: var(--ic-intro-text, #d0ccc6);
    font-size: var(--ic-intro-lead-size-mobile, 20px);
    line-height: var(--ic-intro-lead-line-height, 1.7);
}

.ic-intro__lead-highlight {
    color: var(--ic-intro-accent, #faf8f5);
    font-weight: 700;
}

.ic-intro__body p {
    margin: 0 0 1.25rem;
    color: var(--ic-intro-text, #d0ccc6);
    font-size: var(--ic-intro-body-size-mobile, 18px);
    line-height: var(--ic-intro-body-line-height, 1.85);
}

.ic-intro__body p:last-child {
    margin-bottom: 0;
}

.ic-intro__glow {
    position: absolute;
    width: var(--ic-intro-glow-size, 220px);
    height: var(--ic-intro-glow-size, 220px);
    right: -2rem;
    top: 10%;
    border-radius: 999px;
    background: var(--ic-intro-glow-color, #c5a95e);
    opacity: var(--ic-intro-glow-opacity, 0.08);
    filter: blur(var(--ic-intro-glow-blur, 60px));
    pointer-events: none;
}

.ic-intro--animate .ic-intro__eyebrow,
.ic-intro--animate .ic-intro__heading,
.ic-intro--animate .ic-intro__lead,
.ic-intro--animate .ic-intro__body {
    opacity: 0;
    animation: icIntroFadeUp var(--ic-intro-animation-duration, 0.8s) ease-out both;
}

.ic-intro--animate .ic-intro__eyebrow { animation-delay: calc(var(--ic-intro-animation-delay, 0s) + 0s); }
.ic-intro--animate .ic-intro__heading { animation-delay: calc(var(--ic-intro-animation-delay, 0s) + 0.08s); }
.ic-intro--animate .ic-intro__lead { animation-delay: calc(var(--ic-intro-animation-delay, 0s) + 0.16s); }
.ic-intro--animate .ic-intro__body { animation-delay: calc(var(--ic-intro-animation-delay, 0s) + 0.24s); }

@keyframes icIntroFadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 1024px) {
    .ic-intro {
        padding-top: var(--ic-intro-pt-desktop, 128px);
        padding-bottom: var(--ic-intro-pb-desktop, 128px);
    }

    .ic-intro__container {
        width: min(var(--ic-intro-container-max, 1280px), calc(100% - (var(--ic-intro-side-desktop, 48px) * 2)));
    }

    .ic-intro__heading {
        font-size: var(--ic-intro-heading-size-desktop, 56px);
    }

    .ic-intro__lead p {
        font-size: var(--ic-intro-lead-size-desktop, 24px);
    }

    .ic-intro__body p {
        font-size: var(--ic-intro-body-size-desktop, 19px);
    }
}

.ic-intro__list {
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--ic-intro-list-gap, 14px);
}

.ic-intro__list li {
    position: relative;
    padding-left: 1.4rem;
    color: var(--ic-intro-text, #d0ccc6);
    font-size: var(--ic-intro-body-size-mobile, 18px);
    line-height: var(--ic-intro-body-line-height, 1.85);
}

.ic-intro__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--ic-intro-list-marker, #c5a95e);
    transform: translateY(-50%);
}

@media (min-width: 1024px) {
    .ic-intro__list li {
        font-size: var(--ic-intro-body-size-desktop, 19px);
    }
}


/* Frontend-only scroll animation support */
.ic-intro.ic-animate-on-scroll .ic-intro__eyebrow,
.ic-intro.ic-animate-on-scroll .ic-intro__heading,
.ic-intro.ic-animate-on-scroll .ic-intro__lead,
.ic-intro.ic-animate-on-scroll .ic-intro__body { animation-play-state: paused; }
.ic-intro.ic-animate-on-scroll.is-visible .ic-intro__eyebrow,
.ic-intro.ic-animate-on-scroll.is-visible .ic-intro__heading,
.ic-intro.ic-animate-on-scroll.is-visible .ic-intro__lead,
.ic-intro.ic-animate-on-scroll.is-visible .ic-intro__body { animation-play-state: running; }
