/*==================================================
INTRO SECTION
==================================================*/
@font-face {
        font-family: 'IvoryMonoLight'; 
        src: url(https://drmarnie.com/cdn/shop/files/IvoryMonoLLWeb-Light.woff2?v=1762192591);
        font-weight: 300;
        font-style: normal;
        font-display: swap;
      }
      
  @font-face {
    font-family: 'knock_font';
    src: url('https://cdn.shopify.com/s/files/1/0269/8815/0837/files/Knockout-HTF69-FullLiteweight.woff2?v=1743115101') format('woff2');
         url('https://cdn.shopify.com/s/files/1/0269/8815/0837/files/Knockout-HTF69-FullLiteweight.woff?v=1743115099') format('woff'),
}
#intro{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    position:relative;
    overflow:hidden;
    padding:80px 25px;
}

#intro::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:radial-gradient(
        rgba(234,201,168,.35),
        transparent 70%
    );
    top:-250px;
    left:-150px;
    z-index:-1;
}

#intro::after{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    border-radius:50%;
    background:radial-gradient(
        rgba(184,134,91,.15),
        transparent 70%
    );
    bottom:-220px;
    right:-150px;
    z-index:-1;
}

/*==================================================
FLOWERS
==================================================*/

.flower{
    position:absolute;
    width:140px;
    opacity:.85;
    pointer-events:none;
}

.flower-top-left{
    top:0;
    left:0;
    transform:rotate(-15deg);
}

.flower-bottom-right{
    bottom:0;
    right:0;
    transform:rotate(15deg);
}

/*==================================================
PARTICLES
==================================================*/

.particles{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.particles span{
    position:absolute;
    width:6px;
    height:6px;
    border-radius:50%;
    background:rgba(184,134,91,.4);
}

/*==================================================
MAIN WEBSITE
==================================================*/
 

/*==================================================
HERO
==================================================*/

.hero{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    overflow:hidden;
    text-align:center;
    padding:100px 30px;
}

/*==================================================
HERO OVERLAY
==================================================*/

.hero-overlay{
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        rgba(255,255,255,.15),
        rgba(255,248,244,.9)
    );
    z-index:1;
}

/*==================================================
HERO SVG LAYER
==================================================*/

.hero-svg{
    position:absolute;
    inset:0;
    opacity:.08;
    background:
        radial-gradient(circle at top,
        var(--primary),
        transparent 60%);
}

/*==================================================
HERO CONTENT
==================================================*/

.hero-content{
    position:relative;
    z-index:5;
    max-width:340px;
    margin:auto;
}

.subtitle{
    display:block;
    color:var(--primary);
    letter-spacing:4px;
    text-transform:uppercase;
    font-size:12px;
    margin-bottom:20px;
}

.hero-title{
    font-size:4rem;
    line-height:1.15;
}

.hero-title span{
    display:block;
    margin:15px 0;
    font-size:2rem;
    color:var(--secondary);
}

.hero-date{
    font-size:1.2rem;
    color:var(--text);
    margin-top:15px;
    font-weight:500;
}

.hero-location{
    margin-top:10px;
    color:var(--text-light);
}

/*==================================================
LANTERNS
==================================================*/

.lantern{
    position:absolute;
    width:90px;
    z-index:2;
}

.lantern img{
    width:100%;
    display:block;
}

.lantern-left{
    left:10px;
    top:40px;
    transform-origin:top center;
}

.lantern-right{
    right:10px;
    top:40px;
    transform-origin:top center;
}

/*==================================================
SCROLL INDICATOR
==================================================*/

.scroll-indicator{
    position:absolute;
    bottom:35px;
    left:50%;
    transform:translateX(-50%);
    width:28px;
    height:52px;
    border:2px solid var(--primary);
    border-radius:20px;
    display:flex;
    justify-content:center;
    z-index:10;
}

.scroll-indicator span{
    width:5px;
    height:10px;
    border-radius:10px;
    background:var(--primary);
    margin-top:8px;
}

/*==================================================
SECTION SPACING
==================================================*/

#countdown,
#couple,
#story,
#events,
#gallery,
#venue,
#rsvp,
#thankyou{
    position:relative;
}

/*==================================================
PETALS LAYER
==================================================*/

#petals{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:20;
}

.petal{
    position:absolute;
    width:14px;
    height:14px;
    background:rgba(255,182,193,.8);
    border-radius:60% 40% 60% 40%;
    filter:blur(.3px);
}

/*==================================================
THANK YOU BACKGROUND PLACEHOLDERS
==================================================*/

.moon,
.stars,
.floating-lanterns{
    position:absolute;
    inset:0;
    pointer-events:none;
}

/*==================================================
COUNTDOWN SECTION
==================================================*/

#countdown{
    text-align:center;
}

.countdown-grid{
    margin-top:50px;
}

.time-box{
    position:relative;
    overflow:hidden;
    transition:.35s ease;
}

.time-box::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        135deg,
        rgba(255,255,255,.6),
        transparent
    );
    opacity:0;
    transition:.35s;
}

.time-box:hover{
    transform:translateY(-8px);
}

.time-box:hover::before{
    opacity:1;
}

.time-box h3{
    font-size:2.7rem;
    font-weight:700;
}

.time-box span{
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:12px;
}

/*==================================================
COUPLE SECTION
==================================================*/

#couple{
    text-align:center;
    overflow:hidden;
}

#couple::before{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    background:radial-gradient(
        rgba(234,201,168,.25),
        transparent
    );
    left:-180px;
    top:120px;
}

#couple::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    background:radial-gradient(
        rgba(184,134,91,.15),
        transparent
    );
    right:-180px;
    bottom:120px;
}

/*==================================================
COUPLE CONTAINER
==================================================*/

.couple-container{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:50px;
    position:relative;
}

/*==================================================
PERSON CARD
==================================================*/

.person{
    width:100%;
    max-width:340px;
    background:rgba(255,255,255,.65);
    backdrop-filter:blur(15px);
    border:1px solid rgba(255,255,255,.45);
    border-radius:28px;
    padding:35px 25px;
    box-shadow:var(--shadow);
    transition:.4s;
}

.person:hover{
    transform:translateY(-10px);
}

.person h3{
    margin-top:25px;
    color:var(--primary);
    font-size:2rem;
}

.parents{
    margin-top:15px;
    line-height:2;
    color:var(--text-light);
}

/*==================================================
IMAGE FRAME
==================================================*/

.image-frame{
    position:relative;
    width:210px;
    height:210px;
    margin:auto;
}

.image-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
    border:8px solid #fff;
    box-shadow:0 20px 35px rgba(0,0,0,.08);
}

.frame-border{
    position:absolute;
    inset:-12px;
    border:2px dashed var(--primary);
    border-radius:50%;
}

/*==================================================
LOVE ICON
==================================================*/

.love-icon{
    width:90px;
    height:90px;
    border-radius:50%;
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );
    color:#fff;
    font-size:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    box-shadow:0 15px 30px rgba(184,134,91,.25);
}

.love-icon::before{
    content:"";
    position:absolute;
    inset:-15px;
    border-radius:50%;
    border:2px solid rgba(184,134,91,.2);
}

.love-icon::after{
    content:"";
    position:absolute;
    inset:-30px;
    border-radius:50%;
    border:1px dashed rgba(184,134,91,.2);
}

.pulse-ring{
    position:absolute;
    inset:-10px;
    border-radius:50%;
    border:2px solid var(--primary);
}

/*==================================================
COUPLE DIVIDER
==================================================*/

.couple-divider{
    width:2px;
    height:80px;
    background:linear-gradient(
        transparent,
        var(--primary),
        transparent
    );
}

/*==================================================
GOLDEN ORNAMENT
==================================================*/

.person::before{
    content:"❦";
    display:block;
    font-size:28px;
    color:var(--secondary);
    margin-bottom:10px;
}

/*==================================================
NAME DECORATION
==================================================*/

.person h3::after{
    content:"";
    display:block;
    width:80px;
    height:2px;
    margin:12px auto 0;
    background:linear-gradient(
        to right,
        transparent,
        var(--primary),
        transparent
    );
}

/*==================================================
RESPONSIVE IMAGE
==================================================*/

.person img{
    transition:.4s;
}

.person:hover img{
    transform:scale(1.05);
}

/*==================================================
BACKGROUND ORNAMENT
==================================================*/

#couple .ornament{
    position:absolute;
    opacity:.06;
    font-size:12rem;
    color:var(--primary);
}

#couple .ornament.left{
    left:-40px;
    top:0;
}

#couple .ornament.right{
    right:-40px;
    bottom:0;
}

/*==================================================
SECTION END SPACING
==================================================*/

#couple{
    padding-bottom:120px;
}
/*==================================================
LOVE STORY
==================================================*/

#story{
    position:relative;
    overflow:hidden;
}

#story::before{
    content:"";
    position:absolute;
    left:50%;
    top:220px;
    width:2px;
    height:calc(100% - 280px);
    background:linear-gradient(
        transparent,
        var(--primary),
        transparent
    );
    transform:translateX(-50%);
    opacity:.25;
}

.story-item{
    position:relative;
    margin-bottom:70px;
}

.story-dot{
    position:relative;
    z-index:5;
}

.story-card{
    transition:.4s ease;
}

.story-card:hover{
    transform:translateY(-10px);
    box-shadow:0 30px 60px rgba(0,0,0,.12);
}

.story-card h3{
    margin-bottom:12px;
    color:var(--primary);
}

.story-card p{
    line-height:1.8;
}

.story-card img{
    transition:.5s;
}

.story-card:hover img{
    transform:scale(1.05);
}

.story-card{
    overflow:hidden;
}

/*==================================================
TIMELINE LINE
==================================================*/

.story-line{
    position:absolute;
    left:50%;
    top:0;
    width:3px;
    height:100%;
    transform:translateX(-50%);
    opacity:.08;
}

/*==================================================
EVENTS
==================================================*/

#events{
    overflow:hidden;
}

.events-grid{
    margin-top:50px;
}

.event-card{
    position:relative;
    transition:.35s ease;
}

.event-card:hover{
    transform:translateY(-12px);
}

.event-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:22px;

    padding:1px;

    background:linear-gradient(
        135deg,
        rgba(184,134,91,.4),
        transparent
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

}

.event-card h3{

    margin-bottom:12px;

    color:var(--primary);

}

.event-card p{

    margin-bottom:10px;

}

.event-card span{

    display:inline-block;

    margin-top:8px;

    font-weight:600;

    color:var(--primary);

}

/*==================================================
FEATURED EVENT
==================================================*/

.featured{

    background:linear-gradient(
        180deg,
        #fff,
        #fff8f2
    );

    transform:scale(1.03);

}

.featured .event-icon{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

}

.featured::after{

    content:"Main Event";

    position:absolute;

    top:18px;

    right:18px;

    background:var(--primary);

    color:#fff;

    font-size:10px;

    letter-spacing:1px;

    padding:6px 10px;

    border-radius:20px;

    text-transform:uppercase;

}

/*==================================================
EVENT ICON
==================================================*/

.event-icon{

    transition:.35s;

}

.event-card:hover .event-icon{

    transform:rotate(10deg) scale(1.08);

}

/*==================================================
EVENT DIVIDER
==================================================*/

.event-card hr{

    border:none;

    height:1px;

    background:rgba(184,134,91,.15);

    margin:18px 0;

}

/*==================================================
DECORATIVE BACKGROUND
==================================================*/

#events::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:radial-gradient(

        rgba(234,201,168,.18),

        transparent

    );

    top:-220px;

    right:-180px;

}

#events::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:radial-gradient(

        rgba(184,134,91,.08),

        transparent

    );

    left:-150px;

    bottom:-150px;

}
/*==================================================
GALLERY
==================================================*/

#gallery{
    position:relative;
    overflow:hidden;
}

#gallery::before{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    border-radius:50%;
    background:radial-gradient(
        rgba(234,201,168,.20),
        transparent
    );
    top:-180px;
    left:-180px;
}

.gallery-stack{
    display:grid;
    gap:35px;
    margin-top:50px;
}

.gallery-card{
    position:relative;
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:.4s ease;
    cursor:pointer;
}

.gallery-card img,.gallery-card video{
    width:100%;
    height:300px;
    object-fit:cover;
    transition:.6s;
}

.gallery-card span{
    display:block;
    padding:18px;
    font-family:var(--font-heading);
    font-size:1.25rem;
    text-align:center;
    color:var(--primary);
}

.gallery-card:hover{

    transform:translateY(-12px) rotate(0deg);

    box-shadow:0 30px 60px rgba(0,0,0,.15);

}

.gallery-card:hover img{

    transform:scale(1.08);

}

.rotate-left{

    transform:rotate(-4deg);

}

.rotate-right{

    transform:rotate(4deg);

}

.gallery-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        transparent 50%,
        rgba(0,0,0,.08)
    );

    pointer-events:none;

}

/*==================================================
VENUE
==================================================*/

#venue{

    position:relative;

    overflow:hidden;

}

.venue-card{

    background:#fff;

    border-radius:28px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.4s;

}

.venue-card:hover{

    transform:translateY(-10px);

}

.venue-image{

    overflow:hidden;

}

.venue-image img{

    width:100%;

    height:280px;

    object-fit:cover;

    transition:.6s;

}

.venue-card:hover img{

    transform:scale(1.08);

}

.venue-content{

    padding:35px;

    text-align:center;

}

.venue-content h3{

    color:var(--primary);

    font-size:2rem;

    margin-bottom:12px;

}

.venue-content p{

    line-height:1.9;

    margin-bottom:30px;

}

.venue-buttons{

    display:flex;

    gap:15px;

    justify-content:center;

    flex-wrap:wrap;

}

.venue-buttons .btn{

    flex:1;

    min-width:140px;

}

/*==================================================
VENUE DECORATION
==================================================*/

#venue::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:radial-gradient(

        rgba(184,134,91,.12),

        transparent

    );

    right:-150px;

    top:-100px;

}

#venue::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

    background:radial-gradient(

        rgba(234,201,168,.18),

        transparent

    );

    left:-120px;

    bottom:-120px;

}

/*==================================================
MAP BUTTON EFFECT
==================================================*/

.venue-buttons .btn{

    transition:.35s;

}

.venue-buttons .btn:hover{

    transform:translateY(-4px);

}

/*==================================================
IMAGE SHINE
==================================================*/

.gallery-card::before,
.venue-image::before{

    content:"";

    position:absolute;

    top:-100%;

    left:-50%;

    width:50%;

    height:300%;

    background:rgba(255,255,255,.18);

    transform:rotate(25deg);

    transition:.8s;

}

.gallery-card:hover::before,
.venue-card:hover .venue-image::before{

    left:130%;

}

/*==================================================
SECTION SPACING
==================================================*/

#gallery{

    padding-bottom:110px;

}

#venue{

    padding-bottom:110px;

}

/*==================================================
RSVP SECTION
==================================================*/

#rsvp{
    position:relative;
    overflow:hidden;
}

#rsvp::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(
        rgba(234,201,168,.18),
        transparent
    );
    left:-180px;
    top:-180px;
}

#rsvp::after{
    content:"";
    position:absolute;
    width:380px;
    height:380px;
    border-radius:50%;
    background:radial-gradient(
        rgba(184,134,91,.10),
        transparent
    );
    right:-180px;
    bottom:-180px;
}

/*==================================================
LETTER CARD
==================================================*/

.letter{
    position:relative;
    background:#fff;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 25px 60px rgba(0,0,0,.08);
}

.letter::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:6px;
    background:linear-gradient(
        to right,
        var(--primary),
        var(--secondary),
        var(--primary)
    );
}

.letter-text{
    max-width:320px;
    margin:0 auto 35px;
    line-height:1.9;
}

/*==================================================
FORM
==================================================*/

#rsvpForm{
    margin-top:25px;
}

#rsvpForm input,
#rsvpForm textarea,
#rsvpForm select{

    background:#fffdfb;

}

#rsvpForm textarea{

    resize:none;

}

#rsvpForm button{

    margin-top:10px;

}

#rsvpForm button:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(184,134,91,.25);

}

/*==================================================
THANK YOU
==================================================*/

#thankyou{

    position:relative;

    min-height:80vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    overflow:hidden;

}

/*==================================================
NIGHT BACKGROUND
==================================================*/

#thankyou{

    background:linear-gradient(

        180deg,

        #fffdfb,

        #fff4ec

    );

}

.moon{

    position:absolute;

    width:120px;

    height:120px;

    border-radius:50%;

    top:70px;

    right:40px;

    background:rgba(255,255,255,.9);

    box-shadow:

    0 0 40px rgba(255,255,255,.8);

}

.stars{

    position:absolute;

    inset:0;

    background-image:

    radial-gradient(#ffffff 1px, transparent 1px);

    background-size:45px 45px;

    opacity:.35;

}

/*==================================================
THANK CONTENT
==================================================*/

.thank-content{

    position:relative;

    z-index:5;

    max-width:330px;

}

.thank-content h2{

    color:var(--primary);

    margin-bottom:20px;

}

.thank-content p{

    line-height:2;

}

.thank-content h3{

    font-family:var(--font-title);

    font-size:2.5rem;

}

/*==================================================
FLOATING LANTERNS PLACEHOLDER
==================================================*/

.floating-lanterns{

    position:absolute;

    inset:0;

    pointer-events:none;

}

/*==================================================
COMMON HOVER
==================================================*/

.gallery-card,
.event-card,
.person,
.venue-card,
.story-card{

    will-change:transform;

}

/*==================================================
SECTION TRANSITION
==================================================*/

section{

    scroll-margin-top:50px;

}

/*==================================================
FADE CLASS
==================================================*/

.fade-up{

    opacity:0;

    transform:translateY(60px);

}

.fade-left{

    opacity:0;

    transform:translateX(-60px);

}

.fade-right{

    opacity:0;

    transform:translateX(60px);

}

.fade-scale{

    opacity:0;

    transform:scale(.9);

}

/*==================================================
GSAP READY
==================================================*/

.reveal{

    visibility:hidden;

}

/*==================================================
END OF FILE
==================================================*/




/*==============================
Luxury Curtain
==============================*/

#intro{

    position:fixed;

    inset:0;

    overflow:hidden;
 max-width: 420px;
    margin: auto;
    background:#0d0d0d;

    z-index:99999;

}

.curtain{

    position:absolute;

    top:0;

    width:50%;

    height:100%;

    background:
    linear-gradient(
    90deg,
    #090909,
    #161616,
    #090909
    );

    overflow:hidden;

}

.curtain::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    repeating-linear-gradient(

        90deg,

        transparent,

        transparent 20px,

        rgba(255,255,255,.03) 22px,

        transparent 24px

    );

}

.left{

    left:0;

    border-right:1px solid rgba(212,175,55,.35);

}

.right{

    right:0;

    border-left:1px solid rgba(212,175,55,.35);

}

.gold-line{

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:2px;

    height:100%;

    background:#D4AF37;

    box-shadow:0 0 20px rgba(212,175,55,.6);

}

.center-glow{

    position:absolute;

    left:50%;

    top:50%;

    width:220px;

    height:220px;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:radial-gradient(

        rgba(212,175,55,.18),

        transparent 70%

    );

}
 .luxury-button{

    position:absolute;
    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    width:150px;
    height:150px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:8px;

    border:none;
    border-radius:50%;

    background:rgba(255,255,255,.06);
    backdrop-filter:blur(18px);

    color:#fff;
    cursor:pointer;
}

 .luxury-button{

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);
}
.initials{

    display:flex;
    justify-content:center;
    align-items:center;

    width:100%;

    font-family:"Great Vibes",cursive;
    font-size:42px;
    line-height:1;

    text-align:center;
}

.initials span{

    color:#D4AF37;

    margin:0 6px;

    font-size:.8em;
}

.luxury-button small{

    margin-top:10px;

    letter-spacing:3px;

    font-size:11px;

    text-transform:uppercase;

}

.luxury-button::before{

    content:"";

    position:absolute;

    inset:-10px;

    border-radius:50%;

    border:1px solid rgba(212,175,55,.25);

    animation:pulse 2.5s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(.95);

        opacity:.7;

    }

    100%{

        transform:scale(1.18);

        opacity:0;

    }

}



/* ===========================
   Curtain Button V2
=========================== */

.curtain-btn{

    position:absolute !important;
    
    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    width:150px;
    height:150px;

    border:none;
    outline:none;

    

    background:transparent; 
    cursor:pointer;

    z-index:100;

   

    transition:.35s;

}

.curtain-btn:hover{

    transform:translate(-50%,-50%) scale(1.05);

}

.curtain-btn-inner{

    width:100%;
    height:100%;
transition: .35s;
    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;
     border-radius:100%;

    background:#c69564;
 box-shadow:
        0 15px 40px rgba(0,0,0,.35),
        inset 0 2px 3px rgba(255,255,255,.2);

}

.curtain-logo{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:2px;

    font-size:48px;

      font-family: 'IvoryMonoLight';

    color:white;

    line-height:1;

}

.curtain-logo span{

    color:#FFD95A;

    font-size:36px;

}

.curtain-text{

    margin-top:10px;

    font-size:10px;

    letter-spacing:3px;

    color:white;

}

/*scrach csss*/

/*==================================================
    PREMIUM SCRATCH CARD
==================================================*/

.scratch-section{
flex-direction:column;
    padding:120px 20px;
    display:flex;
    justify-content:center;
    align-items:center;

}

.scratch-card{

    position:relative;

    width:min(92vw,700px);

    border-radius:32px;

    overflow:hidden;

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.10),
        rgba(255,255,255,.03)
    );

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.15);

    box-shadow:
        0 25px 70px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.25);

}


/*======================================
    GOLD BORDER
======================================*/

.scratch-card::before{

    content:"";

    position:absolute;

    inset:0;

    padding:2px;

    border-radius:32px;

    background:
        linear-gradient(
            135deg,
            #f7d978,
            #d4af37,
            #fff3b0,
            #c79a00
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    pointer-events:none;

}


/*======================================
    CONTENT
======================================*/

.scratch-content{

    height:430px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:60px;

}

.scratch-content h2{

    font-size:42px;

    color:#d4af37;

    margin-bottom:20px;

}

.scratch-content p{

    color:#fff;

    opacity:.85;

    line-height:1.8;

}

.scratch-result{

    margin-top:40px;

}

.scratch-result h3{

    font-size:46px;

    color:#d4af37;

}

.scratch-result p{

    font-size:22px;

}


/*======================================
    CANVAS
======================================*/

#scratchCanvas{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    cursor:grab;

}

#scratchCanvas:active{

    cursor:grabbing;

}


/*======================================
    PROGRESS
======================================*/

.scratch-progress{

    position:absolute;

    top:28px;

    right:28px;

    width:90px;

    height:90px;

    z-index:5;

}

.scratch-progress svg{

    width:100%;

    height:100%;

    transform:rotate(-90deg);

}

.progress-bg{

    fill:none;

    stroke:rgba(255,255,255,.12);

    stroke-width:6;

}

.progress-fill{

    fill:none;

    stroke:#d4af37;

    stroke-width:6;

    stroke-linecap:round;

    stroke-dasharray:276;

    stroke-dashoffset:276;

    transition:.25s linear;

}

.progress-text{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    color:#fff;

}

.progress-text span{

    font-size:20px;

    font-weight:700;

}

.progress-text small{

    opacity:.7;

}


/*======================================
    METALLIC SCRATCH LAYER
======================================*/

.scratch-metal{

    background:
        linear-gradient(
            120deg,
            #f9f9f9 0%,
            #d8d8d8 18%,
            #ffffff 35%,
            #bfbfbf 55%,
            #ffffff 70%,
            #d3d3d3 100%
        );

}


/*======================================
    SHINE EFFECT
======================================*/

.scratch-glow{

    position:absolute;

    inset:0;

    pointer-events:none;

    overflow:hidden;

}

.scratch-glow::before{

    content:"";

    position:absolute;

    top:-40%;

    left:-120%;

    width:45%;

    height:180%;

    transform:rotate(20deg);

    background:

        linear-gradient(

            transparent,

            rgba(255,255,255,.65),

            transparent

        );

    animation:shine 4s linear infinite;

}

@keyframes shine{

    from{

        left:-120%;

    }

    to{

        left:150%;

    }

}


/*======================================
    MOBILE
======================================*/

@media(max-width:768px){

    .scratch-content{

        padding:35px;

        height:360px;

    }

    .scratch-content h2{

        font-size:30px;

    }

    .scratch-result h3{

        font-size:34px;

    }

    .scratch-progress{

        width:72px;

        height:72px;

        top:18px;

        right:18px;

    }

}