/* Rebuild 2026 - Our Story page integration overrides.
   The component/layout rules live in the shared three-redesign.css copied from
   the approved reference. This file only localizes media paths and adds small
   runtime state helpers needed by the legacy MVC port. */

.story-page .botanical-fruit,
.story-page .botanical-berry {
    background-image: url('/Assets/images/story/article-resveratrol-eternel-antioxidant-support-2.webp');
}

.story-page .story-hero-video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .6s;
}

.story-page .story-hero-video.ready {
    opacity: 1;
}

.story-page .ingredient-composition,
.story-page .ingredient-orbit,
.story-page .formed-product,
.story-page .formation-ring,
.story-page [data-story-parallax="true"],
.story-page [data-story-ambient] {
    will-change: transform;
}

body.story-film-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .story-page .story-hero-video {
        display: none;
    }

    .story-page .ingredient-composition,
    .story-page [data-story-parallax="true"],
    .story-page [data-story-ambient] {
        will-change: auto;
    }
}