.animated-couple-name {
    position: relative;
    display: block;
    text-align: center;
    text-wrap: balance;
    filter: drop-shadow(0 7px 24px color-mix(in srgb, var(--primary) 35%, transparent));
}
.animated-name-word {
    display: inline-block;
    white-space: nowrap;
}
.animated-name-ampersand-word {
    display: block;
    width: 100%;
    margin: -.06em auto;
    text-align: center;
    font-size: .72em;
    line-height: .72;
}
.animated-name-char {
    display: inline-block;
    color: var(--accent);
    opacity: 0;
    will-change: transform, opacity, filter;
    text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 25%, transparent);
}
.animated-name-char.name-ampersand {
    padding-inline: .04em;
    color: #fff3d0;
    text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 52%, transparent);
}
.animated-name-drop.is-playing .animated-name-char {
    animation: wedding-letter-drop .78s cubic-bezier(.18,.82,.25,1.18) forwards;
    animation-delay: calc(.18s + var(--char-index) * 72ms);
}
.animated-name-type.is-playing .animated-name-char {
    animation: wedding-letter-type .52s cubic-bezier(.16,.8,.22,1) forwards;
    animation-delay: calc(.2s + var(--char-index) * 58ms);
}
.animated-name-caret {
    display: inline-block;
    width: 2px;
    height: .72em;
    margin-left: .08em;
    vertical-align: .04em;
    border-radius: 2px;
    background: var(--accent);
    box-shadow: 0 0 14px var(--accent);
    opacity: 0;
}
.animated-couple-name.is-playing .animated-name-caret {
    opacity: 1;
    animation: wedding-caret .68s steps(1,end) infinite;
}
.animated-couple-name.is-complete .animated-name-caret {
    animation: wedding-caret-finish .5s ease forwards;
}
.animated-couple-name.is-complete {
    animation: wedding-name-glow 3.2s ease-in-out infinite;
}
.opening-card .animated-couple-name {
    max-width: 100%;
    font: clamp(43px, 8vw, 62px)/1.08 "Great Vibes", cursive;
}
.opening-card .animated-name-ampersand-word {
    margin-block: .02em;
    font-size: .64em;
    line-height: .62;
}
.hero .animated-couple-name {
    max-width: min(100%, 980px);
    margin-inline: auto;
}
@keyframes wedding-letter-drop {
    0% { opacity: 0; transform: translate3d(0,-82px,0) rotate(var(--char-rotate)) scale(.72); filter: blur(8px); }
    68% { opacity: 1; transform: translate3d(0,7px,0) rotate(0) scale(1.04); filter: blur(0); }
    100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes wedding-letter-type {
    0% { opacity: 0; transform: translate3d(14px,10px,0) scale(.7); filter: blur(5px); }
    72% { opacity: 1; transform: translate3d(-2px,0,0) scale(1.04); filter: blur(0); }
    100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes wedding-caret {
    0%,45% { opacity: 1; }
    46%,100% { opacity: .08; }
}
@keyframes wedding-caret-finish {
    to { opacity: 0; transform: translateY(5px); }
}
@keyframes wedding-name-glow {
    50% { filter: drop-shadow(0 8px 30px color-mix(in srgb, var(--accent) 38%, transparent)); }
}
@media (max-width: 640px) {
    .opening-card .animated-couple-name { font-size: clamp(40px, 12vw, 54px); }
    .animated-name-drop.is-playing .animated-name-char { animation-delay: calc(.12s + var(--char-index) * 60ms); }
    .animated-name-type.is-playing .animated-name-char { animation-delay: calc(.14s + var(--char-index) * 48ms); }
}
@media (prefers-reduced-motion: reduce) {
    .animated-couple-name,
    .animated-name-char,
    .animated-name-caret { animation: none !important; filter: none; }
    .animated-name-char { opacity: 1; transform: none; }
    .animated-name-caret { display: none; }
}