/* Home engagement layer — loaded after style.css */

.home-page section[id]{
    scroll-margin-top: 5.5rem;
}
.hero-immersive{
    position: relative;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 0 !important;
    overflow: hidden;
    background: none !important;
    background-image: none !important;
}
.hero-media{ position: absolute; inset: 0; }
.hero-bg{
    position: absolute;
    inset: -8%;
    background-image: url('../imgs/banner.png');
    background-size: cover;
    background-position: center 30%;
    transform: scale(1.08);
    will-change: transform;
    animation: heroDrift 22s ease-in-out infinite alternate;
}
.hero-veil{
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(45, 28, 58, 0.42) 0%, rgba(74, 48, 96, 0.28) 45%, rgba(45, 28, 58, 0.55) 100%),
        radial-gradient(ellipse at 50% 20%, rgba(205,180,219,0.2), transparent 55%);
}
.hero-content{
    position: relative;
    z-index: 2;
    max-width: 42rem;
    padding: 6rem 1.25rem 5rem;
    animation: heroIn 1.1s cubic-bezier(.2,.7,.2,1) both;
}
.hero-date{
    font-family: var(--display);
    letter-spacing: 0.35em;
    font-size: clamp(0.95rem, 2.2vw, 1.15rem);
    margin-bottom: 0.85rem;
    opacity: 0.92;
    text-transform: uppercase;
}
.hero-title{
    text-shadow: 0 8px 40px rgba(0,0,0,0.25);
}
.hero-immersive .hero-title.ballet{
    font-size: clamp(3.2rem, 11vw, 6rem);
    line-height: 1.02;
}
.hero-immersive .lead{
    max-width: 34ch;
    margin: 0.75rem auto 1.5rem;
    font-weight: 400;
    line-height: 1.65;
    opacity: 0.95;
}
.hero-immersive .buttons{ margin-top: 0; }

.btn-glow{ box-shadow: 0 10px 28px rgba(157, 120, 176, 0.28); }
.btn-ghost{
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.55);
}
.btn-ghost:hover{
    background: rgba(255,255,255,0.12);
    color: #fff;
    opacity: 1;
}

.scroll-cue{
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 28px;
    height: 44px;
    border: 1.5px solid rgba(255,255,255,0.55);
    border-radius: 16px;
    display: grid;
    place-items: start center;
    padding-top: 8px;
}
.scroll-cue span{
    width: 4px;
    height: 8px;
    border-radius: 4px;
    background: #fff;
    animation: scrollBounce 1.6s ease-in-out infinite;
}
.scroll-cue:hover{ transform: translateX(-50%) translateY(-2px); color: #fff; }

.band-kicker{
    margin: 0 0 .5rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #907fa0;
}
.display-title{
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--ink);
    line-height: 1.1;
    margin: 0 0 .75rem;
}
.section-heading{
    text-align: center;
    max-width: 40rem;
    margin: 0 auto 2rem;
}
.section-lead{
    margin: .5rem auto 0;
    max-width: 42ch;
    color: var(--muted);
    line-height: 1.7;
}
.home-page .section-title{
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    margin-bottom: 0;
}

.save-band{
    padding: 3.5rem 0 3rem;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.55), rgba(246,242,251,0.9)),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23cdb4db' fill-opacity='0.12'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    text-align: center;
}
.save-band-inner{ max-width: 720px; }
.band-copy{
    max-width: 38ch;
    margin: 0 auto 1.75rem;
    line-height: 1.7;
}
.countdown{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    max-width: 520px;
    margin: 0 auto;
}
.count-unit{
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(205,180,219,0.35);
    border-radius: 16px;
    padding: 1rem .5rem;
    display: grid;
    gap: .25rem;
    justify-items: center;
    transition: transform .25s ease, box-shadow .25s ease;
}
.count-unit:hover{
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(109,89,123,0.1);
}
.count-unit span{
    font-family: var(--display);
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    font-weight: 600;
    color: var(--ink);
    line-height: 1;
}
.count-unit small{
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.home-page .couple{
    gap: 1rem;
    align-items: stretch;
    padding-top: 3.5rem;
    padding-bottom: 3rem;
}
.couple-grid{
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    width: 100%;
}
.person-block{
    display: grid;
    gap: 1.25rem;
    align-items: center;
}
.person-photo{
    overflow: hidden;
    border-radius: 18px;
    background: rgba(255,255,255,0.7);
    box-shadow: 0 16px 40px rgba(109,89,123,0.1);
}
.person-photo img{
    width: 100%;
    height: clamp(260px, 42vw, 420px);
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform .7s ease;
    padding: 0;
    background: none;
    box-shadow: none;
}
.person-block:hover .person-photo img{ transform: scale(1.04); }
.person-copy h3{
    font-family: var(--display);
    font-size: clamp(1.6rem, 3vw, 2rem);
    color: var(--ink);
    margin-bottom: .15rem;
}
.person-role{
    margin: 0 0 .75rem;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9a87a8;
    font-weight: 600;
}
.person-copy p:last-child{
    line-height: 1.75;
    color: var(--muted);
    text-align: left;
}
@media(min-width:880px){
    .person-block{
        grid-template-columns: 1.05fr 1fr;
        gap: 2rem;
    }
    .person-block.reverse{
        grid-template-columns: 1fr 1.05fr;
    }
    .person-block.reverse .person-photo{ order: 2; }
    .person-block.reverse .person-copy{ order: 1; text-align: right; }
    .person-block.reverse .person-copy p:last-child{ text-align: right; }
}

.home-page .story{
    background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(246,242,251,0.85));
    padding: 3.5rem 0;
}
.timeline{
    list-style: none;
    max-width: 680px;
    margin: 0 auto;
    padding: 0;
    position: relative;
}
.timeline::before{
    content: '';
    position: absolute;
    left: 11px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, rgba(205,180,219,0.2), rgba(205,180,219,0.85), rgba(205,180,219,0.2));
}
.timeline-item{
    position: relative;
    padding: 0 0 2rem 2.5rem;
}
.timeline-item:last-child{ padding-bottom: 0; }
.timeline-mark{
    position: absolute;
    left: 4px;
    top: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--primary-deep);
    box-shadow: 0 0 0 6px rgba(205,180,219,0.2);
}
.timeline-body h3{
    font-family: var(--display);
    font-size: 1.45rem;
    color: var(--ink);
    margin-bottom: .4rem;
}
.timeline-body p{
    line-height: 1.75;
    margin: 0;
    text-align: left;
}

.gallery-section{ padding: 3.5rem 0 2rem; }
.gallery-feature{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
}
@media(min-width:800px){
    .gallery-feature{
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
    .gallery-item:nth-child(2),
    .gallery-item:nth-child(3){ margin-top: 1.5rem; }
}
.gallery-item{
    margin: 0;
    overflow: hidden;
    border-radius: 14px;
    position: relative;
    box-shadow: 0 10px 28px rgba(109,89,123,0.1);
    transition: transform .35s ease, box-shadow .35s ease;
}
.gallery-item::after{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(45,28,58,0.28));
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.gallery-item:hover{
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 18px 40px rgba(109,89,123,0.16);
}
.gallery-item:hover::after{ opacity: 1; }
.gallery-item img{
    width: 100%;
    height: clamp(160px, 22vw, 240px);
    object-fit: cover;
    display: block;
    border-radius: 14px;
    padding: 0;
    background: none;
    box-shadow: none;
    transition: transform .6s ease;
}
.gallery-item:hover img{ transform: scale(1.06); }

.expect-section{ padding: 2rem 0 3.5rem; }
.expect-grid{
    display: grid;
    gap: 1rem;
}
@media(min-width:760px){
    .expect-grid{ grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
.expect-item{
    padding: 1.35rem 1.2rem;
    border-radius: 18px;
    background: rgba(255,255,255,0.65);
    border: 1px solid rgba(205,180,219,0.28);
    transition: transform .25s ease, box-shadow .25s ease;
}
.expect-item:hover{
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(109,89,123,0.1);
}
.expect-item h3{
    font-family: var(--display);
    font-size: 1.4rem;
    color: var(--ink);
    margin-bottom: .45rem;
}
.expect-item p{ margin: 0; line-height: 1.65; }

.venue-section{ margin: 1rem 0 0; }
.venue-split{
    display: grid;
    min-height: 420px;
}
.venue-visual{
    position: relative;
    min-height: 280px;
    overflow: hidden;
}
.venue-visual img{
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
    display: block;
    transform: scale(1.04);
    transition: transform 1.2s ease;
}
.venue-section:hover .venue-visual img{ transform: scale(1.08); }
.venue-visual-veil{
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(45,28,58,0.15), rgba(45,28,58,0.35));
}
.venue-copy{
    padding: 2.5rem 1.5rem;
    display: grid;
    align-content: center;
    gap: .75rem;
    background: linear-gradient(160deg, #f3ebf7, #faf7fc);
}
.venue-copy .section-title{ text-align: left; }
.venue-copy p{ margin: 0; line-height: 1.7; }
.venue-note{ max-width: 38ch; }
@media(min-width:900px){
    .venue-split{ grid-template-columns: 1.1fr 1fr; }
    .venue-copy{ padding: 3.5rem; }
    .venue-visual img{ min-height: 100%; }
}

.invite-band,
.final-cta{
    padding: 3.5rem 1rem;
    text-align: center;
}
.gifts-invite{
    background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(232,214,240,0.55));
}
.invite-inner{
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    text-align: left;
    max-width: 900px;
}
.invite-inner p{ max-width: 42ch; line-height: 1.7; margin: 0; }
.final-cta{
    background:
        radial-gradient(ellipse at 50% 0%, rgba(205,180,219,0.35), transparent 55%),
        linear-gradient(180deg, rgba(246,242,251,0.4), rgba(255,255,255,0.7));
}
.final-cta-inner{ max-width: 560px; }
.final-cta-inner p{
    margin: 0 auto 1.5rem;
    max-width: 36ch;
    line-height: 1.7;
}

.sticky-rsvp{
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%) translateY(120%);
    z-index: 90;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .65rem .75rem .65rem 1.1rem;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(205,180,219,0.45);
    border-radius: 999px;
    box-shadow: 0 16px 40px rgba(61, 40, 78, 0.18);
    backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s ease;
}
.sticky-rsvp.is-visible{
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.sticky-rsvp p{
    margin: 0;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    font-size: .92rem;
}
.sticky-rsvp .btn{
    padding: .55rem 1rem;
    border-radius: 999px;
}

.site-footer{
    text-align: center;
    padding: 3rem 1rem 5.5rem;
    color: var(--muted);
}
.footer-brand{
    font-size: 2rem;
    color: var(--text);
    margin-bottom: .35rem;
}

.reveal-up,
.reveal-left,
.reveal-right{
    opacity: 0;
    transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal-up{ transform: translateY(28px); }
.reveal-left{ transform: translateX(-36px); }
.reveal-right{ transform: translateX(36px); }
.reveal-up.visible,
.reveal-left.visible,
.reveal-right.visible{
    opacity: 1;
    transform: none;
}

@keyframes heroIn{
    from{ opacity: 0; transform: translateY(28px); }
    to{ opacity: 1; transform: none; }
}
@keyframes heroDrift{
    from{ transform: scale(1.08) translate3d(0,0,0); }
    to{ transform: scale(1.14) translate3d(0,-2%,0); }
}
@keyframes scrollBounce{
    0%, 100%{ transform: translateY(0); opacity: .9; }
    50%{ transform: translateY(10px); opacity: .4; }
}

@media(max-width:600px){
    .sticky-rsvp p{ display: none; }
    .sticky-rsvp{ padding: .55rem; }
    .invite-inner{ text-align: center; justify-content: center; }
    .invite-inner .btn{ width: 100%; }
    .hero-content{ padding-top: 5.5rem; }
}

@media (prefers-reduced-motion: reduce){
    .hero-bg{ animation: none; }
    .hero-content{ animation: none; }
    .scroll-cue span{ animation: none; }
    .reveal-up,
    .reveal-left,
    .reveal-right{
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.confirm-intro .display-title{
    margin-bottom: .5rem;
}
.confirm-intro p{
    max-width: 36ch;
    margin: 0 auto;
}
.page-hero-mini{
    text-align: center;
    padding: 2.5rem 1rem 1rem;
}
.page-hero-mini .display-title{ margin-bottom: .5rem; }
.local-extras{
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
}
@media(min-width:760px){
    .local-extras{ grid-template-columns: repeat(3, 1fr); }
}
.local-extra{
    padding: 1.2rem;
    border-radius: 16px;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(205,180,219,0.3);
}
.local-extra h3{
    font-family: var(--display);
    color: var(--ink);
    margin-bottom: .35rem;
}