*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
    --bg:#0f0f0f;
    --fg:#fafafa;
    --accent:#d4a574;
    --muted:#6b6b6b;
    --surface:#1a1a1a;
}

html{
    font-size:16px;
    -webkit-font-smoothing:antialiased;
    scroll-behavior:smooth;
}

body{
    font-family:'Outfit',sans-serif;
    background:var(--bg);
    color:var(--fg);
    overflow-x:hidden;
}

/* GRAIN TEXTURE OVERLAY */
.grain-overlay{
    position:fixed;
    inset:0;
    z-index:9999;
    pointer-events:none;
    opacity:.025;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='3.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    animation:grain 8s steps(10) infinite;
}

@keyframes grain{
    0%,100%{transform:translate(0,0)}
    10%{transform:translate(-5%,-10%)}
    20%{transform:translate(-15%,5%)}
    30%{transform:translate(7%,-25%)}
    40%{transform:translate(-5%,25%)}
    50%{transform:translate(-15%,10%)}
    60%{transform:translate(15%,0%)}
    70%{transform:translate(0%,15%)}
    80%{transform:translate(3%,35%)}
    90%{transform:translate(-10%,10%)}
}

/* CUSTOM CURSOR */
.cursor,.cursor-follower{
    position:fixed;
    border-radius:50%;
    pointer-events:none;
    z-index:10001;
    transition:transform .2s ease;
    display:none;
    mix-blend-mode:difference;
}

.cursor{
    width:8px;
    height:8px;
    background:var(--accent);
    transform:translate(-50%,-50%);
}

.cursor-follower{
    width:40px;
    height:40px;
    border:1px solid var(--accent);
    opacity:.5;
    transform:translate(-50%,-50%) scale(1);
    transition:transform .3s cubic-bezier(.75,-.5,.25,1.5),opacity .3s ease;
}

.cursor-follower.hover{
    transform:translate(-50%,-50%) scale(1.8);
    opacity:.9;
}

@media(min-width:1024px){
    .cursor,.cursor-follower{display:block}
    body{cursor:none}
    body *{cursor:none}
    a,button,[data-magnetic]{cursor:none}
}

/* PAGE REVEAL OPENING */
.page-reveal{
    position:fixed;
    inset:0;
    z-index:10000;
    pointer-events:none;
}

.page-reveal.opened{pointer-events:none}

.reveal-left,.reveal-right{
    position:absolute;
    top:0;
    width:50%;
    height:100%;
    background:linear-gradient(135deg,#1a1a1a,#0f0f0f);
    transition:transform 2s cubic-bezier(.77,0,.18,1);
    z-index:2;
}

.reveal-left{left:0;transform-origin:left center}
.reveal-right{right:0;transform-origin:right center}

.page-reveal.opened .reveal-left{transform:translateX(-100%) rotateY(-15deg)}
.page-reveal.opened .reveal-right{transform:translateX(100%) rotateY(15deg)}

.reveal-content{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10002;
    transition:opacity 1.5s ease;
    pointer-events:all;
    padding:1rem;
}

.page-reveal.opened .reveal-content{
    opacity:0;
    pointer-events:none;
}

.reveal-card{
    text-align:center;
    padding:clamp(2rem,5vw,3rem);
    background:rgba(26,26,26,.9);
    border:2px solid var(--accent);
    backdrop-filter:blur(20px);
    position:relative;
    box-shadow:0 0 100px rgba(212,165,116,.6);
    max-width:90vw;
}

.reveal-ornaments{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.rev-ornament{
    position:absolute;
    width:clamp(40px,8vw,60px);
    height:clamp(40px,8vw,60px);
    border:1px solid var(--accent);
    opacity:.4;
}

.o-1{top:10px;left:10px;border-right:none;border-bottom:none}
.o-2{top:10px;right:10px;border-left:none;border-bottom:none}
.o-3{bottom:10px;left:10px;border-right:none;border-top:none}
.o-4{bottom:10px;right:10px;border-left:none;border-top:none}

.card-monogram{
    font-family:'Fraunces',serif;
    font-size:clamp(5rem,15vw,10rem);
    font-weight:300;
    line-height:.8;
    color:var(--accent);
    margin-bottom:clamp(1rem,3vw,1.5rem);
    text-shadow:0 0 40px rgba(212,165,116,.5);
}

.card-divider{
    width:clamp(120px,60vw,200px);
    height:1px;
    background:linear-gradient(90deg,transparent,var(--accent),transparent);
    margin:clamp(1rem,3vw,1.5rem) auto;
}

.card-invite-text{
    font-family:'Fraunces',serif;
    font-size:clamp(1.5rem,4vw,2.5rem);
    font-weight:300;
    font-style:italic;
    color:var(--fg);
    margin-bottom:clamp(.8rem,2vw,1rem);
    letter-spacing:.1em;
}

.card-flourish{
    font-size:clamp(1.2rem,3vw,1.5rem);
    color:var(--accent);
    opacity:.7;
    margin-bottom:clamp(1.5rem,4vw,2rem);
}

.card-btn{
    padding:clamp(1.2rem,3vw,1.5rem) clamp(2.5rem,6vw,4rem);
    font-family:'Outfit',sans-serif;
    font-size:clamp(.75rem,2vw,.9rem);
    font-weight:400;
    letter-spacing:.15em;
    text-transform:uppercase;
    background:transparent;
    border:2px solid var(--accent);
    color:var(--accent);
    cursor:pointer;
    transition:all .4s ease;
    position:relative;
    overflow:hidden;
    box-shadow:0 0 20px rgba(212,165,116,.3);
}

.card-btn::before{
    content:'';
    position:absolute;
    inset:0;
    background:var(--accent);
    transform:translateY(100%);
    transition:transform .5s cubic-bezier(.23,1,.32,1);
    z-index:-1;
}

.card-btn:hover{
    color:var(--bg);
    box-shadow:0 0 40px rgba(212,165,116,.6);
}

.card-btn:hover::before{transform:translateY(0)}

/* MAIN SITE */
.main-site{
    opacity:0;
    visibility:hidden;
    transition:opacity 1.5s ease 1s,visibility 1.5s ease 1s;
}

.main-site.visible{
    opacity:1;
    visibility:visible;
}

.section{
    min-height:100vh;
    position:relative;
    overflow:hidden;
}

/* HERO */
.hero-full{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    padding:clamp(4rem,12vh,8rem) clamp(1.5rem,5vw,8rem);
    padding-bottom:clamp(6rem,15vh,12rem);
    background:var(--bg);
    position:relative;
}

.giant-text{
    font-family:'Fraunces',serif;
    font-size:clamp(4.5rem,16vw,26rem);
    font-weight:300;
    line-height:.85;
    letter-spacing:-.02em;
    color:var(--fg);
    margin-bottom:clamp(1.5rem,4vh,3rem);
    position:relative;
    z-index:2;
}

.giant-line{
    display:block;
    overflow:hidden;
    position:relative;
}

.hero-meta{
    display:flex;
    flex-direction:column;
    gap:clamp(.8rem,2vh,1rem);
    position:relative;
    z-index:1;
    /* Overlap with giant text above */
    transform:translateY(clamp(-1rem,-2vh,-2rem));
}

.couple-names{
    font-size:clamp(1.5rem,4vw,3.5rem);
    font-weight:300;
    letter-spacing:.05em;
    color:var(--accent);
    text-shadow:0 2px 20px rgba(212,165,116,.4);
}

.wedding-year{
    font-size:clamp(1rem,2.5vw,1.8rem);
    font-weight:200;
    letter-spacing:.3em;
    text-transform:uppercase;
    color:var(--muted);
}

/* EVENTS - Overlapping heading with layered content */
.event-reveal{
    position:relative;
    background:var(--bg);
    min-height:100vh;
    opacity:0;
}

.event-container{
    position:relative;
    width:100%;
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

/* Heading that overlaps everything */
.event-heading-fixed{
    position:relative;
    z-index:20;
    padding:clamp(3rem,8vw,6rem) clamp(1.5rem,5vw,8rem);
    padding-bottom:0;
}

.event-heading-fixed.right{
    text-align:right;
}

.event-label{
    font-size:clamp(.85rem,1.8vw,1.1rem);
    font-weight:500;
    letter-spacing:.35em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:clamp(.8rem,2vw,1.5rem);
    opacity:1;
    text-shadow:0 0 20px rgba(212,165,116,.5);
}

.event-name{
    font-family:'Fraunces',serif;
    font-size:clamp(5rem,18vw,28rem);
    font-weight:300;
    line-height:.8;
    color:var(--fg);
    text-shadow:0 0 80px rgba(0,0,0,.9);
    position:relative;
    margin:0;
    mix-blend-mode:normal;
    /* Create overlap by extending down */
    padding-bottom:clamp(2rem,4vw,4rem);
}

/* Background image layer - sits behind heading but overlaps with it */
.event-bg-img{
    position:absolute;
    top:clamp(8rem,15vh,15rem);
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:calc(100% - clamp(8rem,15vh,15rem));
    z-index:5;
    clip-path:inset(0 0 0 0);
}

.event-bg-img::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
        to bottom,
        rgba(15,15,15,.9) 0%,
        rgba(15,15,15,.3) 25%,
        rgba(15,15,15,.4) 60%,
        rgba(15,15,15,.85) 100%
    );
    z-index:2;
}

.event-bg-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transform:scale(1.2);
    transform-origin:center center;
}

/* Content overlay - sits on top and overlaps with heading */
.event-content-overlay{
    position:relative;
    z-index:25;
    padding:0 clamp(1.5rem,5vw,8rem);
    padding-bottom:clamp(3rem,8vw,8rem);
    margin-top:auto;
    /* Negative margin to overlap with heading */
    transform:translateY(clamp(-4rem,-8vw,-8rem));
}

.event-content-overlay.right{
    display:flex;
    justify-content:flex-end;
}

.event-info-card{
    background:rgba(15,15,15,.85);
    backdrop-filter:blur(40px);
    -webkit-backdrop-filter:blur(40px);
    padding:clamp(2rem,4vw,4rem);
    border:1px solid rgba(212,165,116,.3);
    display:flex;
    flex-direction:column;
    gap:clamp(2rem,3vw,3rem);
    max-width:min(100%,520px);
    position:relative;
    box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 1px rgba(212,165,116,.5) inset;
}

.event-info-card::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--accent),transparent);
    opacity:.4;
}

.info-item{
    display:flex;
    flex-direction:column;
    gap:.8rem;
    position:relative;
}

.info-key{
    font-size:.65rem;
    font-weight:500;
    letter-spacing:.3em;
    text-transform:uppercase;
    color:var(--accent);
    opacity:.9;
}

.info-val{
    font-size:clamp(1.3rem,2.5vw,1.7rem);
    font-weight:300;
    line-height:1.5;
    color:var(--fg);
}

/* GALLERY - Simple clean boxes with overlapping heading */
.gallery-showcase{
    padding:clamp(6rem,12vh,12rem) clamp(1.5rem,5vw,8rem);
    padding-bottom:clamp(8rem,15vh,15rem);
    background:var(--bg);
    position:relative;
}

.gallery-heading{
    font-family:'Fraunces',serif;
    font-size:clamp(3.5rem,10vw,9rem);
    font-weight:300;
    line-height:.9;
    color:var(--fg);
    margin-bottom:clamp(2rem,4vh,3rem);
    text-align:center;
    position:relative;
    z-index:5;
    /* Make heading overlap with boxes below */
    padding-bottom:clamp(2rem,4vh,4rem);
}

.journey-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:clamp(2rem,4vw,4rem);
    position:relative;
    /* Overlap with heading above */
    transform:translateY(clamp(-2rem,-4vw,-4rem));
}

.journey-box{
    aspect-ratio:1;
    position:relative;
    border:2px solid rgba(212,165,116,.8);
    background:linear-gradient(135deg,rgba(50,50,50,1),rgba(35,35,35,1));
    backdrop-filter:blur(10px);
    transition:all .5s cubic-bezier(.23,1,.32,1);
    overflow:hidden;
    box-shadow:0 10px 40px rgba(0,0,0,.8),0 0 0 1px rgba(212,165,116,.4) inset,0 0 20px rgba(212,165,116,.15);
}

.journey-box::before{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 30% 30%,rgba(212,165,116,.3),transparent 70%);
    opacity:1;
    transition:opacity .5s ease;
}

.journey-box::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:2px;
    background:linear-gradient(90deg,transparent,var(--accent),transparent);
    opacity:.7;
    transition:opacity .5s ease;
}

.journey-box:hover{
    border-color:rgba(212,165,116,1);
    transform:translateY(-8px);
    box-shadow:0 25px 70px rgba(0,0,0,.9),0 0 0 1px rgba(212,165,116,.7) inset,0 0 50px rgba(212,165,116,.3);
}

.journey-box:hover::before{
    opacity:1;
    background:radial-gradient(circle at 30% 30%,rgba(212,165,116,.4),transparent 70%);
}

.journey-box:hover::after{
    opacity:1;
}

.journey-box-inner{
    position:relative;
    z-index:1;
    padding:clamp(2rem,4vw,3.5rem);
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.journey-number{
    font-family:'Fraunces',serif;
    font-size:clamp(1.1rem,2vw,1.3rem);
    font-weight:400;
    letter-spacing:.3em;
    color:var(--accent);
    opacity:1;
    text-shadow:0 0 15px rgba(212,165,116,.6);
}

.journey-title{
    font-family:'Fraunces',serif;
    font-size:clamp(2.5rem,5vw,4rem);
    font-weight:300;
    line-height:1;
    color:var(--fg);
    margin-bottom:.8rem;
    text-shadow:0 2px 20px rgba(0,0,0,.8);
}

.journey-text{
    font-size:clamp(1rem,1.6vw,1.25rem);
    font-weight:300;
    color:rgba(250,250,250,.95);
    letter-spacing:.03em;
    line-height:1.6;
    text-shadow:0 1px 8px rgba(0,0,0,.5);
}

/* FOOTER */
.finale{
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--bg);
    padding:clamp(5rem,12vh,10rem) clamp(1.5rem,5vw,2rem);
    position:relative;
}

.finale-overlay{
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 50% 50%,rgba(212,165,116,.12),transparent 60%);
    pointer-events:none;
}

.finale-content{
    text-align:center;
    position:relative;
    z-index:1;
}

.finale-message{
    font-family:'Fraunces',serif;
    font-size:clamp(3rem,9vw,7rem);
    font-weight:300;
    font-style:italic;
    line-height:1.3;
    color:var(--accent);
    text-shadow:0 0 60px rgba(212,165,116,.3);
}

/* RESPONSIVE MOBILE OPTIMIZATIONS */
@media(max-width:768px){
    .hero-full{
        padding:clamp(3rem,10vh,5rem) 1.5rem;
        padding-bottom:clamp(5rem,12vh,8rem);
    }

    .giant-text{
        font-size:clamp(3.5rem,13vw,5rem);
        margin-bottom:1.5rem;
    }

    .hero-meta{
        transform:translateY(clamp(-.8rem,-1.5vh,-1.5rem));
    }

    .event-heading-fixed{
        padding:2.5rem 1.5rem 0;
    }

    .event-name{
        font-size:clamp(4rem,15vw,7rem);
        padding-bottom:2rem;
    }

    .event-bg-img{
        top:clamp(6rem,12vh,10rem);
        height:calc(100% - clamp(6rem,12vh,10rem));
    }

    .event-content-overlay{
        padding:0 1.5rem 2.5rem;
        transform:translateY(clamp(-2.5rem,-5vw,-4rem));
    }

    .event-info-card{
        padding:2rem 1.5rem;
        gap:1.8rem;
        max-width:100%;
    }

    .gallery-heading{
        margin-bottom:1.5rem;
        padding-bottom:2rem;
    }

    .journey-grid{
        transform:translateY(clamp(-1.5rem,-3vw,-2rem));
    }

    .info-val{
        font-size:1.2rem;
    }

    .journey-grid{
        grid-template-columns:1fr;
        gap:2rem;
    }

    .gallery-showcase{
        padding:5rem 1.5rem;
    }

    .gallery-heading{
        font-size:clamp(2.5rem,10vw,4rem);
        margin-bottom:3rem;
    }

    .journey-box-inner{
        padding:2rem;
    }

    .finale{
        padding:4rem 1.5rem;
    }
}

@media(max-width:480px){
    .hero-meta{
        transform:translateY(-.6rem);
    }

    .event-heading-fixed{
        padding:2rem 1.2rem 0;
    }

    .event-name{
        font-size:clamp(3.5rem,14vw,6rem);
        padding-bottom:1.5rem;
    }

    .event-bg-img{
        top:clamp(5rem,10vh,8rem);
        height:calc(100% - clamp(5rem,10vh,8rem));
    }

    .event-content-overlay{
        padding:0 1.2rem 2rem;
        transform:translateY(clamp(-2rem,-4vw,-3rem));
    }

    .event-info-card{
        padding:1.5rem;
        gap:1.5rem;
    }

    .journey-box-inner{
        padding:1.5rem;
    }

    .gallery-heading{
        padding-bottom:1.5rem;
    }

    .journey-grid{
        transform:translateY(-1rem);
    }
}

/* Touch device optimizations */
@media(hover:none){
    .journey-box:active{
        transform:scale(.98);
    }

    .card-btn:active{
        transform:scale(.95);
    }
}