/**
 * Shared ambient drift — very small petals, birds, sparks and leaves floating
 * over any invitation template. Colour comes from the template via
 * `.inv-amb--{kind} { color: ... }` overrides; motion is pure CSS.
 */

.inv-ambient {
    position: fixed;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}

.inv-amb {
    position: absolute;
    top: 0;
    left: var(--amb-x, 50%);
    width: var(--amb-size, 10px);
    opacity: 0;
    will-change: transform, opacity;
}

.inv-amb svg {
    display: block;
    width: 100%;
    height: auto;
    fill: currentColor;
}

/* Petals and leaves fall and sway */
.inv-amb--petal,
.inv-amb--leaf {
    color: rgba(200, 150, 150, .55);
    animation: inv-amb-fall var(--amb-dur, 22s) linear var(--amb-delay, 0s) infinite;
}

/* Sparks lift from the bottom */
.inv-amb--spark {
    color: rgba(201, 169, 97, .7);
    animation: inv-amb-rise var(--amb-dur, 20s) linear var(--amb-delay, 0s) infinite;
}

/* Birds cross the frame */
.inv-amb--bird {
    color: rgba(120, 140, 160, .5);
    animation: inv-amb-cross var(--amb-dur, 34s) linear var(--amb-delay, 0s) infinite;
}

.inv-amb--bird svg { animation: inv-amb-flap .5s ease-in-out infinite alternate; }

@keyframes inv-amb-fall {
    0% { transform: translate3d(0, -12vh, 0) rotate(0deg); opacity: 0; }
    8% { opacity: var(--amb-opacity, .5); }
    50% { transform: translate3d(var(--amb-sway, 4vw), 52vh, 0) rotate(calc(var(--amb-rot, 180deg) / 2)); }
    92% { opacity: var(--amb-opacity, .5); }
    100% { transform: translate3d(calc(var(--amb-sway, 4vw) * -1), 112vh, 0) rotate(var(--amb-rot, 180deg)); opacity: 0; }
}

@keyframes inv-amb-rise {
    0% { transform: translate3d(0, 112vh, 0) scale(.7); opacity: 0; }
    12% { opacity: var(--amb-opacity, .55); }
    88% { opacity: var(--amb-opacity, .55); }
    100% { transform: translate3d(var(--amb-sway, 3vw), -12vh, 0) scale(1); opacity: 0; }
}

@keyframes inv-amb-cross {
    0% { transform: translate3d(-14vw, var(--amb-y, 30vh), 0); opacity: 0; }
    10% { opacity: var(--amb-opacity, .45); }
    90% { opacity: var(--amb-opacity, .45); }
    100% { transform: translate3d(118vw, calc(var(--amb-y, 30vh) - 14vh), 0); opacity: 0; }
}

@keyframes inv-amb-flap {
    from { transform: scaleY(.6); }
    to { transform: scaleY(1.15); }
}

@media (prefers-reduced-motion: reduce) {
    .inv-ambient { display: none; }
}