/* Wedding Souls — motion accents (docs/superpowers/specs/2026-10-08-new-assets-motion-design.md §4).

   Every hidden start state in this file sits under html.motion-on, a class
   motion.js adds only when it is running and reduced motion is not requested.
   Without it, everything below shows its final state. */

/* Read by screen readers while a number is counting up. */
.motion-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- reels (hero-reel.js) -------------------------------------------------
   Film clips and stills over a photo: .hero-home-image in the hero, .films-reel-photo
   in the films block. Each slide fades in above the
   last and settles from a slight zoom over its whole time on screen. The orange
   wash (.blend-color) and the mirroring the template gave the hero flattened and
   flipped the footage, so the home hero drops both (owner: "blurry", 2026-10-14). */
.hero-home-area .blend-color {
    display: none;
}

.hero-home-area .hero-home-image {
    transform: none;
}

/* Dark at the top for the navigation, clear through the middle, dark at the
   bottom for the heading, then into the page colour. */
.hero-home-area .home-hero-overlay.home {
    background-image: linear-gradient(180deg, rgba(4, 2, 0, .45) 0%, rgba(4, 2, 0, 0) 22%, rgba(4, 2, 0, 0) 45%, rgba(4, 2, 0, .55) 72%, var(--_color---body-color) 100%);
}

/* The template's dark blur behind the service list sat over the couple's faces in the footage. */
.hero-home-area .small-overlay {
    opacity: .55;
}

.reel {
    position: absolute;
    inset: 0;
    overflow: hidden;
    isolation: isolate;
    pointer-events: none;
}

.reel-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(.65, 0, .35, 1);
}

/* Until hero-reel.js queues it, so the browser does not fetch every slide with the page. */
.reel-slide:not(.is-queued) {
    display: none;
}

.reel-slide.is-active {
    z-index: 2;
    opacity: 1;
    animation: hero-settle var(--slide-ms, 6200ms) linear both;
}

/* Keeps its animation (same name, so it does not restart) while it fades out under the next slide. */
.reel-slide.is-leaving {
    z-index: 1;
    opacity: 0;
    animation: hero-settle var(--slide-ms, 6200ms) linear both;
}

.reel.is-paused .reel-slide {
    animation-play-state: paused;
}

/* The films block ("Wedding Films That Move People") holds the hero reel used before
   2026-11-07, over its first frame, with the template's play/pause button. */
.films-reel-frame {
    position: relative;
    overflow: hidden;
}

.films-reel-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.films-reel-toggle {
    position: relative;
    z-index: 3;
    padding: 0;
    cursor: pointer;
}

.films-reel-toggle[hidden],
.films-reel-toggle > [hidden] {
    display: none;
}

@keyframes hero-settle {
    from {
        transform: scale(1.08);
    }
    to {
        transform: scale(1);
    }
}

@media screen and (max-width: 991px) {
    .hero-home-area .home-hero-overlay.home {
        background-image: linear-gradient(180deg, rgba(4, 2, 0, .5) 0%, rgba(4, 2, 0, .2) 30%, rgba(4, 2, 0, .45) 60%, var(--_color---body-color) 100%);
    }
}

/* ---- tick-list ---------------------------------------------------------- */
html.motion-on [data-motion~="tick-list"] > * {
    opacity: 0;
    transform: translateY(.6rem);
    transition: opacity .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(var(--i, 0) * 60ms);
}

html.motion-on [data-motion~="tick-list"].is-in > * {
    opacity: 1;
    transform: none;
}

/* ---- draw: shapes carry pathLength="1", so one dash is the whole stroke -- */
html.motion-on [data-motion~="draw"] .motion-stroke {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset .9s cubic-bezier(.22, 1, .36, 1);
}

html.motion-on [data-motion~="draw"].is-in .motion-stroke {
    stroke-dashoffset: 0;
}