*{
box-sizing:border-box;
}

body{
margin:0;
font-family:Arial,sans-serif;
background:#fafafa;
overflow-x:hidden;
}

.dwi-section{
padding:30px 40px 50px 40px;
position:relative;  margin-bottom: 0px;
}

@media (max-width: 767px){
    .dwi-section{
        padding:30px 10px 60px 10px;
    }
}



.dwi-section h2 {
  text-align: center;
  font-size: 62px;
  margin-bottom: 0px;
 color:var(--dwi-cv);
  font-family: Great Vibes;
  margin-top: 10px;
}


#dwi-cover{
position:fixed;
inset:0;
z-index:999999;
}





/* HERO */

.dwi-hero{
height:100vh;
background-size:cover;
background-position:top;
display:flex;
justify-content:center;
align-items:center;
position:relative;
color:var(--dwi-text);
text-align:center;
}

.overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.5);
}

.content{
position:relative;
z-index:2;
}

/* COUPLE */


.dwi-section-title{

    width: 100%;

    flex: 0 0 100%;

}

.dwi-couple{

    flex-wrap: wrap;

}
.dwi-couple{
display:flex;
gap:40px;
justify-content:center;
flex-wrap:wrap;

}

.person {
  width: 100%;
  text-align: center;
 background:var(--dwi-card);
  padding: 42px 22px 22px 22px;
  border-radius: 20px;
  position:relative;
margin-top: -22px;
}


@media (max-width: 767px){

    .person{

        padding:42px 22px 62px 22px;

    }

}


.dwi-photo-wrap > img:first-child{

    width:280px;

    height:280px;

    object-fit:cover;

    display:block;

    margin:0 auto;

}



/* PUCUK */


.dwi-pucuk{

    width:120px;

    height:auto;

    position:absolute;

    z-index:20;

    pointer-events:none;

}


.dwi-pucuk-tl{

    top:10px;

    left:10px;

}

.dwi-pucuk-tr{

    top:10px;

    right:10px;

    transform:scaleX(-1);

}

.dwi-pucuk-bl{

    bottom:10px;

    left:10px;

    transform:scaleY(-1);

}

.dwi-pucuk-br{

    bottom:10px;

    right:10px;

    transform:scale(-1,-1);

}













.dwi-photo-wrap{

    position:relative;

    width:280px;

    margin:0 auto;

}

.dwi-couple-bingkai{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    pointer-events:none;

    z-index:5;

}











/* EVENT */

.dwi-event{
text-align:center;
}

.event-card {
 background:var(--dwi-card);
  padding: 30px;
  border-radius: 69px 0px 69px 0px;
  max-width: 500px;
  margin: 20px auto;
  font-family: cinzel;
  font-size: 22px;
  line-height: 33px;
  
  color:var(--dwi-text);
  border: 6px solid var(--dwi-text);
  
}


.dwi-event-value {
  display: block;
  margin-top: 0px;
  padding: 0px;
  font-size: 34px;
  line-height: 39px;
  font-weight: 900;
  
  color:var(--dwi-subtext);
 
}



.dwi-event-extra {
  background: var(--dwi-bg);
  padding: 30px;
  border-radius: 69px 0px 69px 0px;
  max-width: 500px;
  margin: 20px auto;
  font-family: cinzel;
  font-size: 22px;
  line-height: 33px;
  color: var(--dwi-text);
  border: 6px solid var(--dwi-text);
}







/* GALLERY */

.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:24px;
max-width:1200px;
margin:20px 0px 0px 0px;
}

.gallery-item{
overflow:hidden;
border-radius:24px;
}

.gallery-item img{
width:100%;
height:360px;
object-fit:cover;
display:block;
}

/* STORY */

.story-timeline{
max-width:900px;
margin:20px 0px 0px 0px;
}

.story-card{
background:var(--dwi-card);
border-radius:24px;
overflow:hidden;
margin-bottom:10px;
}

.story-card img{
width:100%;
height:420px;
object-fit:cover;
}

.story-content {
  padding: 30px;
  font-family: cinzel;
  font-size: 23px;
  line-height: 23px; color:var(--dwi-subtext);
}



.dwi-story-title{

    color:var(--dwi-text);

}

.dwi-story-text {
  color: var(--dwi-subtext);
  font-family: arial;
  font-weight: normal;
  line-height: 130%;
  font-size: 16px;
}


/* RSVP */

#dwi-rsvp-form {
  max-width: 700px;
  margin: 20px 0px 0px 0px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #ffffff80;
  padding: 22px;
  border-radius: 15px;
}

#dwi-rsvp-form input,
#dwi-rsvp-form select,
#dwi-rsvp-form textarea{
width:100%;
padding:16px;
border-radius:12px;
border:1px solid #ddd;
}

#dwi-rsvp-form button {
  padding: 18px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
 color:var(--dwi-cv);
background:var(--dwi-btn);
  font-family: cinzel;
  font-size: 23px;
}

#dwi-wishes-list{
max-width:700px;
margin:10px auto 10px;
display:flex;
flex-direction:column;
gap:20px;
}

.dwi-wish-card {
background:var(--dwi-card);
  border-radius: 20px;
  padding: 25px;
  font-family: cinzel;
  line-height: 4px;
  font-size: 22px; color:var(--dwi-subtext);
}




.dwi-wish-head{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

}



.dwi-wish-head span{

    background:var(--dwi-btn);

    color:#fff;

    padding:12px;

    border-radius:30px;

    font-size:12px;

    white-space:nowrap;

}



/* MUSIC */

.dwi-music-player{
position:fixed;
right:0px;
bottom:18px;
z-index:9999;
}

#dwi-music-toggle{
width:40px;
height:50px;
border:none;
border-radius:30px 0px 0px 3px;
cursor:pointer; background:var(--dwi-card);
}



#dwi-music-toggle.paused{

    opacity:0.5;

    transform:scale(0.9);

}

/* =========================
COVER
========================= */

body.dwi-lock{
overflow:hidden;
}

#dwi-cover{
position:fixed;
inset:0;
width:100%;
height:100vh;
z-index:999999;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
padding:40px;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
overflow:hidden;
}

#dwi-cover::before{

content:'';

position:absolute;

inset:0;

z-index:1;

background:

linear-gradient(
to top,
rgba(0,0,0,.95) 0%,
rgba(0,0,0,.82) 20%,
rgba(0,0,0,.55) 45%,
rgba(0,0,0,.18) 70%,
rgba(0,0,0,0) 100%
);

}
.dwi-cover-inner{
position:relative;
z-index:2;
max-width:700px;
width:100%;
color:var(--dwi-text);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}

.dwi-cover-subtitle{
font-size:18px;
letter-spacing:4px;
margin-bottom:20px;
text-transform:uppercase;
opacity:.9;
color:var(--dwi-cv);
}

#dwi-cover h1{
font-size:72px;
line-height:1.1;
margin:0 0 25px;
font-weight:700;
color:var(--dwi-cv); font-family: Great Vibes;
}

.dwi-cover-guest{
font-size:20px;
line-height:1.8;
margin-bottom:40px;
color:var(--dwi-cv);
}

#dwi-open-invitation{
padding:18px 42px;
border:none;
border-radius:999px;
cursor:pointer;
font-size:16px;
font-weight:600;
background:var(--dwi-card);
color:#111;
transition:.3s;
}

#dwi-open-invitation:hover{
transform:translateY(-3px);
}

#dwi-site-content{
opacity:0;
visibility:hidden;
transition:.8s;
}

#dwi-site-content.opened{
opacity:1;
visibility:visible;
}


 #footer-thankyou{
display:none !important;
}














/* =========================
COVER SLIDER
========================= */

.dwi-cover-slider{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

}

.dwi-cover-slide{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    opacity:0;

    transition:1s ease;

}

/* ACTIVE */

.dwi-cover-slide.active{

    opacity:1;

}

/* OVERLAY */

.dwi-cover-overlay{

    position:absolute;

    inset:0;

   background: var(--dwi-bg);
  opacity: .35;

    z-index:1;

}

/* CONTENT */

.dwi-cover-inner{

    position:relative;

    z-index:2;

}


.dwi-cover-single{

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}






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

.dwi-countdown{

    padding:30px 20px;

    text-align:center;

}

.dwi-countdown h2{

    font-size:62px;

    margin-bottom:50px;

}

.dwi-countdown-wrap{

    display:flex;

    justify-content:center;

    gap:12px;

    flex-wrap:nowrap; margin-bottom: 43px;

}

/* ITEM */

.dwi-count-item{

    width:25%;

    aspect-ratio:1/1;

    border-radius:24px;

  background:var(--dwi-card);
  
    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

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

    min-width:0;

}

.dwi-count-item span {
  font-size: 52px;
  font-weight: bold;
  color:var(--dwi-btn);
  line-height: 1;
  font-family: cinzel;
}

.dwi-count-item small{

    margin-top:8px;

    opacity:.7;

    font-size:14px;

}

/* MOBILE */

@media(max-width:768px){

    .dwi-countdown-wrap{
        gap:10px;
        flex-wrap:wrap;
    }

    .dwi-count-item{
        width:calc(50% - 5px);
        border-radius:18px;
    }

    .dwi-count-item span{
        font-size:50px;
    }

    .dwi-count-item small{
        font-size:25px;
    }

}


/* =========================
MAPS
========================= */

.dwi-maps{
padding:30px 20px;
text-align:center;
}

.dwi-maps h2{
font-size:62px;
margin-bottom:30px;
}

.dwi-map-frame{
border-radius:30px;
overflow:hidden;
max-width:1000px;
margin:auto;
box-shadow:0 20px 60px rgba(0,0,0,.15);
}

.dwi-map-frame iframe{
width:100%;
height:450px;
border:none;
display:block;
}

.dwi-map-button{
display:inline-block;
margin-top:40px;
padding:18px 40px;
border-radius:999px;
background:var(--dwi-btn);
color:var(--dwi-card);
text-decoration:none;
font-weight:bold;
transition:.3s;
}

.dwi-map-button:hover{
transform:translateY(-4px);
}





/* =========================
GIFT
========================= */

.dwi-gift{
padding:30px 20px;
text-align:center;
}

.dwi-gift h2{
font-size:62px;
margin-bottom:30px;
}

.dwi-gift-wrap{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:30px;
}

.dwi-gift-card{
background:var(--dwi-card);
padding:40px 30px;
border-radius:30px;
width:320px;
box-shadow:0 20px 60px rgba(0,0,0,.15); color:var(--dwi-subtext);
}

.dwi-gift-card h3{
font-size:30px;
margin-bottom:20px;
color:var(--dwi-bg); font-family: cinzen;
}

.dwi-gift-number{
font-size:28px;
font-weight:bold;
margin-bottom:15px;
word-break:break-all; font-family: cinzen;
}

.dwi-copy-bank{
margin-top:20px;
padding:14px 30px;
border:none;
border-radius:999px;
cursor:pointer;
background:var(--dwi-btn);
color:var(--dwi-card);
font-weight:bold;
transition:.3s; font-family: cinzen;
}

.dwi-copy-bank:hover{
transform:translateY(-3px);
}

.dwi-qris-box{
margin-top:40px;
width:320px;
}

.dwi-qris-box img{
width:100%;
border-radius:30px;
display:block;
}



/* =========================
COVER ENGINE
========================= */

#dwi-cover{
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}

.dwi-cover-logo{
width:140px;
height:auto;
margin:0 auto 20px;
display:block;
}



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

.dwi-hero{

    position: relative;
    min-height: 100vh;

    background-size: cover;
    background-position: top;

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

    padding: 40px 20px;

    overflow: hidden;

}

/* =========================
   HERO PREMIUM CINEMATIC
========================= */

.dwi-hero{

    position: relative;

    min-height: 100vh;

    background-size: cover;
    background-position: top;

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

    overflow: hidden;

}

.dwi-hero .overlay{

    position: absolute;
    inset: 0;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,0.82) 0%,
        rgba(0,0,0,0.58) 28%,
        rgba(0,0,0,0.15) 55%,
        rgba(0,0,0,0.00) 100%
    );

}

.dwi-hero .content{

    position: relative;
    z-index: 2;

    width: 100%;

    padding:
    0 25px 35px;

}

.dwi-hero-text{

    width: 100%;
    max-width: 720px;

    margin: 0 auto;

    text-align: center;

}

.dwi-hero-text h2{

    font-size: 38px;
    line-height: 1.4;

    color:var(--dwi-cv);

    margin-bottom: 20px; font-family: Great Vibes;

}




.dwi-hero-text p{

    font-size: 17px;
    line-height: 1.9;

    color:
    rgba(255,255,255,0.92);

}

















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

@media(max-width:768px){

    .dwi-hero{

        min-height: 92vh;

    }

   .dwi-hero .content{

    padding:
    0 22px 5px;

}

    .dwi-hero-text h2{

        font-size: 30px;

    }

    .dwi-hero-text p{

        font-size: 15px;

    }

}

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

@media(max-width:768px){

    .dwi-hero-text{

        padding: 30px 22px;

    }

    .dwi-hero-text h2{

        font-size: 38px;

    }

    .dwi-hero-text p{

       font-size: 18px;
    line-height: 22px;

    }

}



.dwi-footer{

    position:relative;

    min-height:70vh;

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

    text-align:center;

    overflow:hidden;

    background-size:cover;
    background-position:center;

    padding:80px 20px;

}

.dwi-footer-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.85),
        rgba(0,0,0,.3)
    );

}

.dwi-footer-content{

    position:relative;

    z-index:2;

    max-width:700px;

   color:var(--dwi-cv);

}

.dwi-footer-content h3{

    font-size:22px;

    line-height:1.8;

    margin-bottom:30px; 
    
    color:var(--dwi-cv); font-weight: normal;

}

.dwi-footer-love{

    font-size:42px;

    margin-bottom:20px;

    animation:pulse 2s infinite; 

}

.dwi-footer-content h2{

    font-size:66px;

    margin-bottom:25px;

}

.dwi-footer-content p{

    font-size:22px;

}


/* =========================
FAMILY SECTION
========================= */

.dwi-family-grid{

    display:grid;
    grid-template-columns:repeat(1,1fr);
    gap:20px;
    margin-top:30px;

}

.family-card {
  background: var(--dwi-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 24px;
  padding: 20px 25px;
  text-align: center;
  overflow: hidden;
  margin: 0px;
  color: var(--dwi-subtext);
}

.family-card h3 {
  margin-bottom: 25px;
  font-size: 28px;
  font-family: cinzel;
  color: var(--dwi-text);
}

.family-person{

    margin-bottom:25px; font-size: 28px; font-family: cinzel;

}

.family-person strong{

    display:block;

    font-size:32px;

    margin-bottom:6px; font-family: cinzel;

}

.family-person small{

    display:block;

    opacity:.8;

    line-height:1.6;

    margin-top:4px; font-family: cinzel;

}

/* =========================
TURUT MENGUNDANG
========================= */

.dwi-turut-grid {
  display: grid;
 
  gap: 0px;
  margin-top: 20px;
}

/* FIX LIST AGAR TIDAK FLEX / SEBARIS */

.dwi-turut-grid ul,
.family-card ul{

    display:block !important;

    list-style:disc !important;

    padding-left:24px !important;

    margin:20px 0 0 !important;

    width:100%;

}

.dwi-turut-grid li,
.family-card li

{
  display: list-item !important;
  width: 100% !important;
  margin-bottom: 12px;
  text-align: left;
  white-space: normal;
  font-size: 18px;
  line-height: 18px;
}



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

@media(max-width:768px){

    .dwi-family-grid{

        grid-template-columns:1fr;

    }

    .dwi-turut-grid{

        grid-template-columns:1fr;

    }

}


/* =========================
DESKTOP SPLIT LAYOUT
========================= */

.dwi-main-layout{

    display:flex;

    min-height:100vh;

   background:var(--dwi-bg);

}

/* =========================
LEFT PREVIEW
========================= */

.dwi-desktop-preview{

    width:65%;

    position:sticky;

    top:0;

    height:100vh;

    overflow:hidden;

}

/* PREVIEW BACKGROUND */

.dwi-preview-slider{

    position:relative;

    width:100%;

    height:100vh;

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:flex-end;

    justify-content:flex-start;

    padding:60px;

}

/* OVERLAY */

.dwi-preview-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        to top,
        rgba(0,0,0,.75),
        rgba(0,0,0,.2)
    );

}

/* TEXT */

.dwi-preview-content{

    position:relative;

    z-index:2;

   color:var(--dwi-text);

}

.dwi-preview-content p{

    font-size:18px;

    margin-bottom:10px;

    letter-spacing:2px;

}

.dwi-preview-content h1{

    font-size:84px;

    line-height:1.1;

    margin:0; color:var(--dwi-cv);
 font-family: Great Vibes;
}

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

.dwi-main-content{

    width:35%;

    min-height:100vh;

    overflow:hidden;

  background:var(--dwi-bg);
}

/* SECTION WIDTH */

.dwi-main-content .dwi-section{

    width:100%;

}

/* =========================
SCROLLBAR
========================= */

.dwi-main-content{

    overflow-y:auto;

    scrollbar-width:none;

}

.dwi-main-content::-webkit-scrollbar{

    display:none;

}

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

@media(max-width:768px){

    .dwi-main-layout{

        display:block;

    }

    .dwi-desktop-preview{

        display:none;

    }

    .dwi-main-content{

        width:100%;

        min-height:auto;

        overflow:visible;

    }

}



/* =========================
PREVIEW SLIDESHOW
========================= */

.dwi-preview-slider{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;

    display:flex;

    align-items:flex-end;

    padding:60px;

}

.dwi-preview-slide{

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;

    opacity:0;

    transition:opacity 1.5s ease;

    transform:scale(1.05);

}

/* ACTIVE SLIDE */

.dwi-preview-slide.active{

    opacity:1;

}



.dwi-section-ornament{
    width:100%;
    line-height:0;
    position:relative;
    z-index:2;
    overflow:hidden;

    opacity:0;
    transform:translateY(40px);

    transition:
    opacity 1s ease,
    transform 1s ease;
}

.dwi-section-ornament.active{

    opacity:1;
    transform:translateY(0);

}

.dwi-section-ornament img{

    width:100%;
    display:block;

    animation:dwiOrnamentFloat 6s ease-in-out infinite;

}

/* FLOATING */

@keyframes dwiOrnamentFloat{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0px);
    }

}


@media(max-width:768px){

    .dwi-main-layout{

        display:block;

    }

    .dwi-desktop-preview{

        display:none;

    }

}

@media(max-width:768px){

    body.dwi-editor-preview-mode
    .dwi-desktop-preview{

        display:block !important;

        width:100%;

        height:50vh;

    }

}

/* =========================
SECTION WRAPPER
========================= */

.dwi-section-wrap{

    position:relative;
    overflow:hidden;  

}


/* =========================
SECTION BACKDROP
========================= */

.dwi-section-backdrop{

    position:absolute;

    inset:0;

    z-index:0;

    background-size:100% auto;

    background-position:top center;

    background-repeat:no-repeat;

    pointer-events:none;

}

/* =========================
FRAME CORNER
========================= */

.dwi-corner{

    position:absolute;

    width:90px;
    height:90px;

    background-size:contain;
    background-repeat:no-repeat;

    z-index:20;

    opacity:.9;

    pointer-events:none;

}


.dwi-section-wrap .dwi-section{

    position:relative;

    z-index:5;

}

/* =========================
FRAME DISABLE
========================= */

.frame-disable .dwi-corner{

    display:none;

}


/* =========================
TOP LEFT
========================= */

.top-left{

    top:0;
    left:0;

}


/* =========================
TOP RIGHT
========================= */

.top-right{

    top:0;
    right:0;

    transform:scaleX(-1);

}


/* =========================
BOTTOM LEFT
========================= */

.bottom-left{

    bottom:0;
    left:0;

    transform:scaleY(-1);

}


/* =========================
BOTTOM RIGHT
========================= */

.bottom-right{

    bottom:0;
    right:0;

    transform:scale(-1);

}



/* =========================
GLOBAL BACKGROUND
========================= */

body.single-dwi_invitation{

    background-image:
    var(--dwi-global-background);

    background-size:
    var(--dwi-global-bg-size);

    background-position:center;

    background-repeat:no-repeat;

    background-attachment:fixed;

}





/* =========================================
   COUPLE NAME FONT
========================================= */

.dwi-couple-name{

    font-family: 'Cinzel', serif;

    font-size: 46px;

    font-weight: 700;

    line-height: 96%;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-top: 20px;

    margin-bottom: 20px;

    color: #d4af37;

}


/* KHUSUS PRIA */

.groom-name{

  color:var(--dwi-text);

}


/* KHUSUS WANITA */

.bride-name{

   color:var(--dwi-text);

}


/* =========================================
   COUPLE DESCRIPTION
========================================= */

.dwi-couple-desc {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.3;
color:var(--dwi-subtext);

 font-family: Cinzel;
}

/* STRONG */

.dwi-couple-desc strong{

    font-size: 34px;

    font-weight: 600;

 color:var(--dwi-subtext);
 font-family: Cinzel;

}


/* SMALL JOB TEXT */

.dwi-couple-desc small{

    font-size: 24px;

    opacity: .8;

    letter-spacing: 1px; font-family: Cinzel;

}



/* =========================
OPENING PREMIUM V2
========================= */

.dwi-opening{

position:relative;

padding:
160px 30px
120px;

overflow:hidden;

text-align:center;

background:
transparent;

}


/* LIGHT GLOW */

.dwi-opening-bg-op{

position:absolute;

inset:0;

background-image:

var(--opening-bg);

background-size:

cover;

background-position:

center;

filter:

blur(3px);

transform:

scale(1);

animation:

openingZoom

18s ease-in-out infinite;

}

.dwi-opening-bg-op::after{

content:'';

position:absolute;

inset:0;

background:

rgba(
0,
0,
0,
.45
);

}


@keyframes openingZoom{

0%{

transform:
scale(1);

}

50%{

transform:
scale(1.08);

}

100%{

transform:
scale(1);

}

}




/* Desktop */
.dwi-opening-card-op {
  position: relative;
  z-index: 5;
  width: 70%;
  margin: auto;
  margin-bottom: auto;
  padding: 40px 20px;
  background: var(--dwi-card);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 28px;
  margin-bottom: -100px;
}

/* Mobile */
@media (max-width: 767px) {
  .dwi-opening-card-op {
    width: 85%;
  }
}

.dwi-opening-card-op{

    background:var(--dwi-card);

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            #000 0%,
            #000 75%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            #000 0%,
            #000 75%,
            transparent 100%
        );
}

/* MOBILE */

@media(max-width:768px){

.dwi-opening-card-op{

padding:

36px
24px;

border-radius:

22px;

}

}




/* GOLD LINE */

.dwi-opening-line-op{

width:80px;

height:2px;

margin:auto;

margin-bottom:36px;

background:
var(--dwi-btn);

opacity:.7;

animation:
lineGrow
1.8s; display: none;

}


@keyframes lineGrow{

from{

width:0;

}

}



/* TITLE */

.dwi-opening h2{

font-size:

clamp(
28px,
5vw,
42px
);

line-height:1.0;

font-weight:500;

color:
var(--dwi-bg);

opacity:0;

transform:
translateY(40px);

animation:

fadeUp
1.1s
forwards;

}



/* DESC */

.dwi-opening p{

margin-top:26px;

font-size:16px;

line-height:1.4;

color:

var(--dwi-subtext);

max-width:580px;

margin-left:auto;

margin-right:auto;

opacity:0;

transform:
translateY(40px);

animation:

fadeUp
1.2s
.3s
forwards;

}



/* SCROLL */

.dwi-opening-scroll{

margin-top:60px;

font-size:22px;

color:

var(--dwi-btn);

opacity:.7;

animation:

bounce
2.5s infinite; display: none;

}


@keyframes fadeUp{

to{

opacity:1;

transform:none;

}

}


@keyframes bounce{

50%{

transform:
translateY(10px);

}

}



/* MOBILE */

@media(max-width:768px){

.dwi-opening{

padding:
120px 24px
90px;

}



}



/* =========================
OPENING DECOR
========================= */




/* CONTENT FLOAT */

.dwi-opening-card-op{

animation:

openingFloat

8s ease-in-out infinite;

}

@keyframes openingFloat{

0%{

transform:
translateY(0);

}

50%{

transform:
translateY(-8px);

}

100%{

transform:
translateY(0);

}

}










/* FRAMEx */

.dwi-opening-frame-left-op,
.dwi-opening-frame-right-op{

position:absolute;

top:0;

width:100px;

max-width:240px;

height:auto;

z-index:5;

pointer-events:none;

opacity:1;

}


/* LEFT RIGHT */

.dwi-opening-frame-left-op{

left:0;

opacity:0;

transform:translateX(-80px);

}

.dwi-opening-frame-right-op{

right:0;

left:auto;

opacity:0;

transform:translateX(80px);

}


.show-frame-left{

animation:
frameLeft 3s cubic-bezier(.19,1,.22,1)
1.4s
forwards;

}

.show-frame-right{

animation:
frameRight 3s cubic-bezier(.19,1,.22,1)
1.6s
forwards;

}


@keyframes frameLeft{

0%{

opacity:0;

transform:
translateX(-120px);

}

100%{

opacity:1;

transform:
translateX(0);

}

}

@keyframes frameRight{

0%{

opacity:0;

transform:
translateX(120px);

}

100%{

opacity:1;

transform:
translateX(0);

}

}


/* OPENING BOTTOM */


.dwi-opening-bottom-full-op{

position:absolute;

left:0;
bottom:0;

width:100%;

height:auto;

z-index:10;

pointer-events:none;

}




/* ORNAMENT */

.dwi-opening-spin-op{

position:absolute;

width:200px;

z-index:10;

pointer-events:none;

opacity:1;

object-fit:contain;

animation:

spinSlow

40s linear infinite;

}

.or1-op{

top:-90px;

left:-90px;

}

.or2-op{

top:-90px;

right:-90px;

}

.or3-op{

bottom:-90px;

left:-90px;

}

.or4-op{

bottom:-90px;

right:-90px;

}


@keyframes spinSlow{

to{

transform:

rotate(
360deg
);

}

}


.dwi-opening{

overflow:hidden;

isolation:isolate;

}



/* BADGE */

.dwi-opening-badge-op{

position:absolute;

top:40px;

left:50%;

transform:
translateX(-50%);

width:110px;

height:110px;

border-radius:999px;

overflow:hidden;

z-index:20;

background:#fff;

box-shadow:

0 10px 30px
rgba(0,0,0,.25);

animation:

badgePop
1.4s ease;

}

.dwi-opening-badge-op img{

width:100%;

height:100%;

object-fit:cover;

display:block;

}

@keyframes badgePop{

from{

opacity:0;

transform:
translateX(-50%)
translateY(-30px)
scale(.8);

}

to{

opacity:1;

transform:
translateX(-50%)
translateY(0)
scale(1);

}

}



@media(min-width:769px){

.dwi-opening-badge-op{

top:55px;

width:130px;

height:130px;

}

}







/* FOOTER SPIN */

.dwi-footer{

position:relative;
overflow:hidden;

}

.dwi-footer-spin-op{

position:absolute;
width:190px;
opacity:1;
pointer-events:none;
z-index:99;

animation:
dwiSpinFooter 30s linear infinite;

}

.dwi-footer-spin-op.or1-op{

top:-95px;
left:-95px;

}

.dwi-footer-spin-op.or2-op{

top:-95px;
right:-95px;

}

.dwi-footer-spin-op.or3-op{

bottom:-95px;
left:-95px;

}

.dwi-footer-spin-op.or4-op{

bottom:-95px;
right:-95px;

}

@keyframes dwiSpinFooter{

from{
transform:rotate(0deg);
}

to{
transform:rotate(360deg);
}

}



/* =========================
FLOATING ICON NAV
========================= */

.dwi-bottom-nav{
position:fixed;
left:50%;
bottom:24px;
transform:translateX(-50%);

display:flex;
align-items:center;
gap:12px;

z-index:9999;

opacity:0;
visibility:hidden;

transition:
opacity .4s ease,
visibility .4s ease,
transform .4s ease;
}

.dwi-bottom-nav.show{
opacity:1;
visibility:visible;
}





/* =========================
MENU ITEM
========================= */

.dwi-bottom-nav a{

width:54px;
height:54px;

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

text-decoration:none;

background:var(--dwi-bg);
color:var(--dwi-text,#000);

border-radius:18px;

font-size:20px;

border: 2px solid var(--dwi-card);

box-shadow:
0 4px 16px rgba(0,0,0,.08);

transition:
all .35s cubic-bezier(.22,1,.36,1);
}

/* hover */

.dwi-bottom-nav a:hover{

transform:
translateY(-5px);

background:var(--dwi-card);

box-shadow:
0 10px 30px rgba(0,0,0,.12);
}

/* active */

.dwi-bottom-nav a.active{

background:var(--dwi-bg);

transform:
translateY(-3px)
scale(1.05);

box-shadow:
0 12px 32px rgba(0,0,0,.15);
}

/* =========================
AUTO HIDE
========================= */

.dwi-bottom-nav.hide-nav{

opacity:0;

transform:
translateX(-50%)
translateY(120px);
}

/* =========================
SCROLL ANIMATION
========================= */

.dwi-animate{

opacity:0;

transform:
translateY(60px);

transition:
all .8s cubic-bezier(.22,1,.36,1);
}

.dwi-animate.show{

opacity:1;
transform:translateY(0);
}

html{
scroll-behavior:smooth;
}

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

@media(max-width:768px){

.dwi-bottom-nav{
gap:10px;
bottom:18px;
}

.dwi-bottom-nav a{
width:48px;
height:48px;
font-size:18px;
}

}