/* ======================= */
/* FOOTER */
/* ======================= */
.footer {
    background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal) 40%, var(--teal-light) 100%);
    color: var(--cream);
    text-align: center;
    padding: clamp(40px, 8vh, 60px) clamp(20px, 5vw, 40px);
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(0.85rem, 2vw, 1rem);
    scroll-snap-align: start;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    position: relative;
    overflow: hidden;
}

.footer-content {
    opacity: 1;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
    visibility: visible;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    width: 100%;
}

.footer-content.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.footer-name {
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 4px 6px;
    border-radius: 3px;
    user-select: none;
}

.footer-name:hover {
    text-shadow: 0 2px 8px rgba(201, 169, 98, 0.4);
    transform: scale(1.05);
}

.footer-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
    pointer-events: none;
    padding: clamp(20px, 5vw, 40px);
}

.footer-card.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.footer-card picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.footer-card-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.2s ease;
    border-radius: 8px;
    filter:
        drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5))
        drop-shadow(0 0 40px rgba(14, 47, 44, 0.8))
        drop-shadow(0 0 80px rgba(14, 47, 44, 0.6));
    /* Soft transparent edges with corner fading for rounded image */
    mask-image:
        /* Corner fades - targets the sharp black corners */
        radial-gradient(circle at 0% 0%, transparent 0%, black 8%),
        radial-gradient(circle at 100% 0%, transparent 0%, black 8%),
        radial-gradient(circle at 0% 100%, transparent 0%, black 8%),
        radial-gradient(circle at 100% 100%, transparent 0%, black 8%),
        /* Edge fades - subtle fade on all sides */
        linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 2%, black 98%, transparent 100%);
    -webkit-mask-image:
        radial-gradient(circle at 0% 0%, transparent 0%, black 8%),
        radial-gradient(circle at 100% 0%, transparent 0%, black 8%),
        radial-gradient(circle at 0% 100%, transparent 0%, black 8%),
        radial-gradient(circle at 100% 100%, transparent 0%, black 8%),
        linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 2%, black 98%, transparent 100%);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
}

.footer-card-image:hover {
    transform: scale(1.02);
}

.footer-names {
    font-family: 'Italiana', serif;
    font-size: clamp(1.4rem, 4vw, 2rem);
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--gold);
    margin-bottom: clamp(8px, 1.5vh, 12px);
    display: inline-flex;
    align-items: center;
    gap: clamp(12px, 2.5vw, 18px);
}

/* Footer ampersand / magic hat toggle container */
.footer-ampersand-container {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    min-height: clamp(2.5rem, 6vw, 4rem);
    min-width: clamp(2.5rem, 6vw, 4rem);
}

.footer-ampersand {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: var(--gold);
    transition: opacity 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    opacity: 1;
    transform: scale(1);
    line-height: 1;
}

.footer-magic-hat {
    position: absolute;
    width: clamp(40px, 8vw, 56px);
    height: auto;
    aspect-ratio: 54 / 62;
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

/* Toggled state - show hat, hide ampersand */
.footer-ampersand-container.show-hat .footer-ampersand {
    opacity: 0;
    transform: scale(0.8) rotate(-10deg);
}

.footer-ampersand-container.show-hat .footer-magic-hat {
    opacity: 1;
    transform: scale(1);
}

/* Hover effect */
.footer-ampersand-container:hover .footer-ampersand {
    transform: scale(1.1);
}

.footer-ampersand-container.show-hat:hover .footer-magic-hat {
    transform: scale(1.08);
}

.footer-date {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.9rem, 2.2vw, 1.1rem);
    font-weight: 700;
    letter-spacing: clamp(0.15em, 0.2em, 0.25em);
    color: var(--gold-light);
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: clamp(8px, 1.8vw, 12px);
}

.footer-suit {
    width: clamp(16px, 3.5vw, 22px);
    height: auto;
    aspect-ratio: 24 / 26;
    flex-shrink: 0;
}

.footer-divider {
    width: clamp(150px, 40vw, 250px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.6;
    margin: clamp(20px, 4vh, 30px) 0 0 0;
}

.footer-contact-divider {
    width: clamp(150px, 40vw, 250px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.6;
    margin: clamp(20px, 4vh, 30px) auto;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
    margin-top: clamp(20px, 4vh, 30px);
}

.footer-venue-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(0.95rem, 2.4vw, 1.2rem);
    font-style: italic;
    color: var(--cream);
    text-decoration: none;
    margin-bottom: 0;
    padding: clamp(6px, 1.2vh, 10px) clamp(12px, 2.5vw, 20px);
    border-bottom: 2px solid transparent;
    transition: all var(--transition-smooth);
    position: relative;
    flex-shrink: 0;
    align-self: center;
    animation: venueBounce 2.5s infinite;
}

.footer-venue-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    transition: transform var(--transition-smooth);
}

.footer-venue-link:hover {
    color: var(--gold-light);
    text-shadow: 0 2px 8px rgba(201, 169, 98, 0.2);
    animation: none;
}

.footer-venue-link:hover::after {
    transform: translateX(-50%) scaleX(1);
}

.footer-venue-link .venue-icon {
    display: inline-flex;
    align-items: center;
    width: clamp(18px, 4vw, 22px);
    height: clamp(18px, 4vw, 22px);
    color: var(--gold);
    transition: all var(--transition-smooth);
}

.footer-venue-link:hover .venue-icon {
    color: var(--gold-light);
    transform: scale(1.1);
}

.footer-email {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(0.9rem, 2.2vw, 1.05rem);
    color: var(--cream);
    opacity: 0.9;
    line-height: 1.8;
    margin: 0;
}

.footer-email a {
    color: var(--gold-light);
    text-decoration: none;
    transition: all var(--transition-fast);
    border-bottom: 1px solid transparent;
}

.footer-email a:hover {
    color: var(--gold);
    border-bottom: 1px solid var(--gold);
    transform: translateY(-1px);
    text-shadow: 0 1px 4px rgba(201, 169, 98, 0.2);
}

.footer-divider-container {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: clamp(20px, 4vh, 30px) 0 0 0;
}

.footer-divider-container .footer-divider,
.footer-divider-container .footer-contact-divider {
    margin: 0;
}

.footer-gift-note {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(0.7rem, 1.8vw, 0.85rem);
    color: var(--cream);
    opacity: 0.75;
    line-height: 1.6;
    margin: clamp(16px, 3vh, 24px) auto 0 auto;
    max-width: clamp(280px, 60vw, 400px);
    font-style: italic;
}

.footer-roman {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.8rem, 2vw, 1rem);
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--gold);
    opacity: 0.8;
    text-align: center;
    position: absolute;
    bottom: clamp(15px, 3vh, 25px);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}