/* Stacked story-card hero (home landing) */

.fq-share-story-hero {
    position: relative;
    margin: 0 auto 20px;
    padding: 8px 0 4px;
    max-width: 100%;
    text-align: center;
}

.fq-share-story-hero__glow {
    position: absolute;
    left: 50%;
    top: 42%;
    width: min(320px, 92vw);
    height: min(380px, 70vw);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 120, 120, 0.35) 0%,
        rgba(255, 180, 160, 0.12) 45%,
        transparent 72%
    );
    pointer-events: none;
    z-index: 0;
}

.fq-share-story-hero__deck {
    position: relative;
    z-index: 1;
    width: min(68vw, 240px);
    max-width: 100%;
    margin: 0 auto;
    touch-action: pan-x pinch-zoom;
    overflow-x: clip;
    overflow-y: visible;
}

/* Flow spacer: absolute cards do not give the deck a height otherwise */
.fq-share-story-hero__deck::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 390 / 844;
    padding-top: 0;
    pointer-events: none;
}

@supports not (aspect-ratio: 390 / 844) {
    .fq-share-story-hero__deck::before {
        aspect-ratio: auto;
        height: 0;
        padding-top: 216.41%;
    }
}

.fq-share-story-hero__card {
    position: absolute;
    inset: 0;
    border: none;
    border-radius: 22px;
    overflow: hidden;
    background: transparent;
    box-shadow:
        0 18px 40px rgba(23, 33, 74, 0.14),
        0 4px 14px rgba(23, 33, 74, 0.08);
    transform-origin: center center;
    transition:
        transform 0.48s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.42s ease,
        box-shadow 0.35s ease;
    will-change: transform, opacity;
}

.fq-share-story-hero__card.is-back {
    z-index: 1;
    transform: translate(6px, 12px) rotate(4deg) scale(0.92);
    opacity: 0.65;
}

.fq-share-story-hero__card.is-mid {
    z-index: 2;
    transform: translate(3px, 6px) rotate(2deg) scale(0.96);
    opacity: 0.82;
}

.fq-share-story-hero__card.is-front {
    z-index: 3;
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    box-shadow:
        0 22px 48px rgba(23, 33, 74, 0.22),
        0 8px 20px rgba(0, 0, 0, 0.12);
}

.fq-share-story-hero__card.is-exit-left {
    z-index: 4;
    transform: translate(-115%, -4px) rotate(-10deg) scale(0.92);
    opacity: 0;
    pointer-events: none;
}

.fq-share-story-hero__card.is-exit-right {
    z-index: 4;
    transform: translate(115%, -4px) rotate(10deg) scale(0.92);
    opacity: 0;
    pointer-events: none;
}

.fq-share-story-hero__card.is-enter {
    z-index: 3;
    transform: translate(18%, 0) rotate(2deg) scale(0.98);
    opacity: 0.85;
}

.fq-share-story-hero__card.is-enter.is-front {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
}

.fq-share-story-hero__img {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    object-fit: cover;
    object-position: top center;
    border-radius: 22px;
    user-select: none;
    -webkit-user-drag: none;
}

/* Home landing hero column */
.fq-landing .fq-hero-visual .fq-landing-story-hero {
    margin: 0;
    padding: 0;
    width: 100%;
}

.fq-landing .fq-hero-visual {
    overflow: visible;
    padding-bottom: 8px;
}

.fq-landing .fq-hero-visual .fq-share-story-hero__deck {
    width: min(68vw, 240px);
}

.fq-landing .fq-hero-visual .fq-share-story-hero__glow {
    width: min(100%, calc(min(68vw, 240px) + 56px));
    height: calc(min(68vw, 240px) * 844 / 390 + 48px);
    max-height: none;
}

body.fq-landing-page.fq-theme-dark .fq-landing .fq-hero-visual .fq-share-story-hero__glow {
    background: radial-gradient(
        ellipse at center,
        rgba(255, 120, 120, 0.28) 0%,
        rgba(123, 97, 255, 0.12) 50%,
        transparent 72%
    );
}

body.mobile-dark-ui.fq-theme-light .fq-share-page .fq-share-story-hero__glow {
    background: radial-gradient(
        ellipse at center,
        rgba(255, 138, 61, 0.22) 0%,
        rgba(123, 97, 255, 0.1) 50%,
        transparent 72%
    );
}

@media (prefers-reduced-motion: reduce) {
    .fq-share-story-hero__card {
        transition: none;
    }
}

@media (max-width: 719px) {
    .fq-landing .fq-hero {
        overflow: visible;
    }

    .fq-share-story-hero {
        margin-bottom: 12px;
        padding-bottom: 12px;
    }

    .fq-share-story-hero__deck,
    .fq-landing .fq-hero-visual .fq-share-story-hero__deck {
        width: min(62vw, 210px);
    }

    .fq-landing .fq-hero-visual .fq-share-story-hero__glow {
        width: min(100%, calc(min(62vw, 210px) + 48px));
        height: calc(min(62vw, 210px) * 844 / 390 + 36px);
    }
}

@media (min-width: 480px) {
    .fq-share-story-hero__deck,
    .fq-landing .fq-hero-visual .fq-share-story-hero__deck {
        width: min(260px, 42vw);
    }
}

@media (min-width: 720px) {
    .fq-landing .fq-hero {
        overflow: hidden;
        padding-bottom: 44px;
    }

    .fq-share-story-hero__deck,
    .fq-landing .fq-hero-visual .fq-share-story-hero__deck {
        width: min(260px, 100%);
    }
}