.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: var(--space-xl) var(--container-padding);
    background-color: transparent;
}

.hero-background {
    display: none;
}

.hero-overlay {
    display: none;
}

.hero-polaroids {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.polaroid {
    position: absolute;
    width: 144px;
    transition: transform 0.3s ease;
}

.polaroid-frame {
    background: var(--color-bg-surface);
    padding: 6px 6px 20px 6px;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.1),
        0 4px 16px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.12);
}

.polaroid-img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    filter: sepia(10%) contrast(95%) brightness(102%);
}

.polaroid-tape {
    position: absolute;
    width: 84px;
    height: auto;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.85;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.polaroid--1 {
    top: 8%;
    left: 3%;
    transform: rotate(-8deg);
}

.polaroid--2 {
    top: 12%;
    right: 3%;
    transform: rotate(6deg);
}

.polaroid--3 {
    bottom: 15%;
    left: 5%;
    transform: rotate(5deg);
}

.polaroid--4 {
    bottom: 10%;
    right: 4%;
    transform: rotate(-7deg);
}

.polaroid--1 .polaroid-tape { transform: translateX(-50%) rotate(-12deg); }
.polaroid--2 .polaroid-tape { transform: translateX(-50%) rotate(8deg); }
.polaroid--3 .polaroid-tape { transform: translateX(-50%) rotate(-5deg); }
.polaroid--4 .polaroid-tape { transform: translateX(-50%) rotate(10deg); }

@media (max-width: 767px) {
    .polaroid {
        width: 108px;
    }

    .polaroid-frame {
        padding: 5px 5px 16px 5px;
    }

    .polaroid-tape {
        width: 66px;
        top: -22px;
    }

    .polaroid--1 {
        top: 5%;
        left: 2%;
    }

    .polaroid--2,
    .polaroid--3 {
        display: none;
    }

    .polaroid--4 {
        bottom: 8%;
        right: 2%;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .polaroid {
        width: 156px;
    }

    .polaroid-tape {
        width: 96px;
        top: -31px;
    }
}

@media (min-width: 1024px) {
    .polaroid {
        width: 192px;
    }

    .polaroid-frame {
        padding: 10px 10px 32px 10px;
    }

    .polaroid-tape {
        width: 114px;
        top: -38px;
    }

    .polaroid--1 { top: 10%; left: 5%; }
    .polaroid--2 { top: 8%; right: 6%; }
    .polaroid--3 { bottom: 18%; left: 6%; }
    .polaroid--4 { bottom: 12%; right: 5%; }
}

@media (min-width: 1280px) {
    .polaroid {
        width: 216px;
    }

    .polaroid-tape {
        width: 126px;
        top: -46px;
    }

    .polaroid--1 { left: 8%; }
    .polaroid--2 { right: 8%; }
    .polaroid--3 { left: 10%; }
    .polaroid--4 { right: 9%; }
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    padding: var(--space-2xl) 0;
}

.hero-garland {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hero-garland-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.hero-garland-line--top {
    padding-top: var(--space-xs);
}

.hero-garland-line--bottom {
    padding-bottom: var(--space-xs);
}

.garland-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: var(--color-primary);
}

.garland-icon.dust-icon {
    display: inline-block;
    vertical-align: middle;
}

.garland-icon--flip {
    transform: scaleX(-1);
}

.garland-connector {
    width: 1.5rem;
    height: 2px;
    position: relative;
    flex-shrink: 0;
}

.garland-connector::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--color-text-heading) 15%,
        var(--color-text-heading) 85%,
        transparent 100%
    );
    opacity: 0.4;
    transform: translateY(-50%) rotate(-1deg);
}

.garland-connector:nth-child(2)::before { transform: translateY(-50%) rotate(1deg); }
.garland-connector:nth-child(4)::before { transform: translateY(-50%) rotate(-0.5deg); }
.garland-connector:nth-child(6)::before { transform: translateY(-50%) rotate(1.5deg); }
.garland-connector:nth-child(8)::before { transform: translateY(-50%) rotate(-1.5deg); }

@media (min-width: 768px) {
    .garland-icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    .garland-connector {
        width: 2rem;
    }

    .hero-content {
        padding: var(--space-3xl) var(--space-2xl);
    }
}

@media (min-width: 1024px) {
    .garland-icon {
        width: 1.75rem;
        height: 1.75rem;
    }

    .garland-connector {
        width: 2.5rem;
    }
}

.hero-subtitle {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: var(--space-lg);
    color: var(--color-text-muted);
}

.hero-names {
    font-family: var(--font-heading);
    font-size: clamp(3.5rem, 12vw, 6rem);
    font-weight: var(--font-weight-regular);
    line-height: 1.1;
    margin-bottom: var(--space-md);
    color: var(--color-text-heading);
}

.hero-name {
    display: block;
}

.hero-connector {
    display: block;
    font-family: var(--font-body);
    font-size: 0.3em;
    font-weight: var(--font-weight-regular);
    font-style: normal;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin: var(--space-sm) 0;
    color: var(--color-text-muted);
}

@media (min-width: 768px) {
    .hero-names {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-lg);
    }

    .hero-name {
        display: inline;
    }

    .hero-connector {
        display: inline;
        font-size: 0.25em;
        margin: 0;
    }
}

.hero-date {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: var(--font-weight-regular);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: var(--space-2xl);
    color: var(--color-text-body);
}

.hero-countdown {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    color: var(--color-text-muted);
}

@media (min-width: 768px) {
    .hero-countdown {
        gap: var(--space-md);
    }
}

.countdown-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    background: transparent;
    border: none;
}

.countdown-item::before {
    content: '';
    position: absolute;
    inset: -1px;
    background-color: currentColor;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
}
.countdown-item:nth-child(1)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M5,3 C12,1 25,4 40,2 S70,4 95,3 C97,8 96,20 97,40 S96,75 97,95 C90,97 75,96 55,97 S25,96 5,97 C3,90 4,70 3,50 S2,15 5,3 Z' fill='none' stroke='white' stroke-width='1.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M5,3 C12,1 25,4 40,2 S70,4 95,3 C97,8 96,20 97,40 S96,75 97,95 C90,97 75,96 55,97 S25,96 5,97 C3,90 4,70 3,50 S2,15 5,3 Z' fill='none' stroke='white' stroke-width='1.2'/%3E%3C/svg%3E");
}
.countdown-item:nth-child(2)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M4,4 C15,2 30,5 50,3 S80,2 96,4 C98,12 97,30 98,50 S97,80 96,96 C85,98 65,97 45,98 S15,97 4,96 C2,85 3,65 2,45 S3,15 4,4 Z' fill='none' stroke='white' stroke-width='1.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M4,4 C15,2 30,5 50,3 S80,2 96,4 C98,12 97,30 98,50 S97,80 96,96 C85,98 65,97 45,98 S15,97 4,96 C2,85 3,65 2,45 S3,15 4,4 Z' fill='none' stroke='white' stroke-width='1.2'/%3E%3C/svg%3E");
}
.countdown-item:nth-child(3)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M6,2 C20,3 35,1 55,3 S85,1 95,4 C97,15 98,35 97,55 S98,85 95,96 C80,98 60,97 40,98 S12,97 4,95 C2,80 3,60 2,40 S3,12 6,2 Z' fill='none' stroke='white' stroke-width='1.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M6,2 C20,3 35,1 55,3 S85,1 95,4 C97,15 98,35 97,55 S98,85 95,96 C80,98 60,97 40,98 S12,97 4,95 C2,80 3,60 2,40 S3,12 6,2 Z' fill='none' stroke='white' stroke-width='1.2'/%3E%3C/svg%3E");
}
.countdown-item:nth-child(4)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M3,5 C10,2 28,4 48,2 S78,4 97,3 C98,18 97,38 98,58 S97,88 96,97 C82,98 58,97 38,98 S10,97 3,95 C2,78 3,55 2,35 S2,12 3,5 Z' fill='none' stroke='white' stroke-width='1.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M3,5 C10,2 28,4 48,2 S78,4 97,3 C98,18 97,38 98,58 S97,88 96,97 C82,98 58,97 38,98 S10,97 3,95 C2,78 3,55 2,35 S2,12 3,5 Z' fill='none' stroke='white' stroke-width='1.2'/%3E%3C/svg%3E");
}

@media (min-width: 768px) {
    .countdown-item {
        width: 7rem;
        height: 7rem;
    }
}

.countdown-value {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: var(--font-weight-light);
    line-height: 1;
    color: var(--color-text-heading);
}

@media (min-width: 768px) {
    .countdown-value {
        font-size: 2.5rem;
    }
}

.countdown-label {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: var(--space-xs);
    color: var(--color-text-muted);
}

.hero-scroll-indicator {
    position: absolute;
    bottom: var(--space-xl);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-text-muted);
    transition: color var(--transition-normal);
    cursor: pointer;
    animation: scrollBounce 2.5s ease-in-out infinite;
}

.hero-scroll-indicator:hover {
    color: var(--color-text-heading);
}

.scroll-arrow {
    width: 1rem;
    height: 1rem;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
}

@keyframes scrollBounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(8px);
    }
}