0,500;0,600;1,400&family=Dancing+Script:wght@400;500;600;700&display=swap");


/* ========================================================
   ROSE WATERCOLOR ELEGANT WEDDING
   ======================================================== */

:root{
    --rose-bg:#FCF8F5;
    --rose-paper:#FFFDFC;

    --rose:#B97886;
    --rose-light:#DDA6B2;
    --rose-pale:#F0D9DE;

    --sage:#AEBEA5;
    --sage-dark:#83987B;

    --ink:#4A393D;
    --muted:#866F74;

    --line:rgba(151,112,120,.19);

    --serif:var(--font-heading);
    --script:"Noto Serif",Georgia,serif;
}


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

html{
    scroll-behavior:smooth;
}

body{
    background:var(--rose-bg)!important;
    color:var(--ink)!important;

    font-family:var(--serif)!important;

    overflow-x:hidden;
}

p,
label,
input,
textarea,
button,
a{
    font-family:var(--serif);
}

.section{
    position:relative;

    padding-top:105px!important;
    padding-bottom:105px!important;
}

.section-heading{
    max-width:760px!important;
    margin-left:auto!important;
    margin-right:auto!important;

    text-align:center!important;
}

.section-heading .eyebrow,
.eyebrow{
    font-family:var(--serif)!important;

    font-size:12px!important;
    font-weight:600!important;

    letter-spacing:.28em!important;
    text-transform:uppercase!important;

    color:var(--rose)!important;
}

.section-heading h2{
    margin-top:12px!important;
    margin-bottom:14px!important;

    font-family:var(--serif)!important;

    font-size:clamp(42px,5vw,68px)!important;
    font-weight:400!important;
    line-height:.95!important;

    letter-spacing:-.02em!important;

    color:var(--ink)!important;
}

.section-heading > p:last-child{
    max-width:620px;
    margin-left:auto!important;
    margin-right:auto!important;

    font-size:18px!important;
    line-height:1.55!important;

    color:var(--muted)!important;
}


/* ========================================================
   HEADER
   ======================================================== */

.site-header{
    min-height:70px!important;

    padding:0 4vw!important;

    border-bottom:1px solid rgba(255,255,255,.24)!important;

    background:rgba(49,42,39,.14)!important;

    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
}

.site-header .desktop-nav{
    gap:28px!important;
}

.site-header .desktop-nav a{
    position:relative;

    font-family:var(--serif)!important;

    font-size:14px!important;
    font-weight:500!important;

    letter-spacing:.04em!important;
}

.site-header .desktop-nav a::after{
    content:"";

    position:absolute;
    left:50%;
    right:50%;
    bottom:-5px;

    height:1px;

    background:#fff;

    transition:left .22s ease,right .22s ease;
}

.site-header .desktop-nav a:hover::after{
    left:0;
    right:0;
}


/* Tên cặp đôi */

.monogram{
    font-family:var(--script)!important;

    font-size:28px!important;
    font-weight:600!important;

    letter-spacing:0!important;

    white-space:nowrap!important;
}

.monogram span{
    margin:0 .18em!important;

    font-family:var(--font-heading)!important;

    color:#F0B6C1!important;

    font-size:.55em!important;
}


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

.hero-section{
    min-height:92vh!important;

    position:relative!important;

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

    background:#36312d!important;
}

.hero-bg{
    background-position:center 38%!important;
    background-size:cover!important;

    transform:scale(1.015);
}

.hero-overlay{
    background:
      linear-gradient(
        to bottom,
        rgba(24,22,19,.17) 0%,
        rgba(24,22,19,.18) 35%,
        rgba(24,22,19,.45) 100%
      )!important;
}

.hero-content{
    max-width:1500px!important;

    padding:120px 28px 80px!important;

    text-align:center!important;
}


/* SAVE THE DATE */

.hero-content > .eyebrow{
    color:#fff!important;

    font-size:12px!important;

    letter-spacing:.35em!important;

    text-shadow:0 2px 14px rgba(0,0,0,.25);
}


/* FULL COUPLE NAMES */

.hero-content .couple-hero-name{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    flex-wrap:nowrap!important;

    width:100%!important;

    margin:18px auto 20px!important;

    white-space:nowrap!important;

    font-family:var(--script)!important;

    font-size:clamp(50px,6.2vw,92px)!important;
    font-weight:500!important;

    line-height:1!important;

    letter-spacing:-.02em!important;

    color:#fff!important;

    text-shadow:0 4px 30px rgba(0,0,0,.28);
}

.hero-content .couple-hero-name span{
    font-family:var(--script)!important;
    font-weight:500!important;

    order:initial!important;
}

.hero-content .couple-heart{
    order:initial!important;

    margin:0 .28em!important;

    font-family:var(--font-heading)!important;
    font-style:normal!important;

    font-size:.35em!important;

    color:#F2BCC7!important;

    text-shadow:0 3px 18px rgba(0,0,0,.25);
}


/* date */

.hero-date{
    margin-top:24px!important;

    font-family:var(--serif)!important;

    font-size:20px!important;
    font-weight:500!important;

    letter-spacing:.20em!important;

    color:#fff!important;
}

.hero-subtitle{
    margin-top:10px!important;

    font-family:var(--serif)!important;

    font-size:20px!important;
    font-style:italic!important;

    color:rgba(255,255,255,.94)!important;
}

.ghost-btn{
    margin-top:25px!important;

    padding:12px 27px!important;

    border:1px solid rgba(255,255,255,.72)!important;
    border-radius:999px!important;

    background:rgba(255,255,255,.05)!important;

    font-size:15px!important;

    backdrop-filter:blur(6px);
}

.ghost-btn:hover{
    background:#fff!important;
    color:var(--ink)!important;
}


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

.countdown-section{
    padding:50px 20px!important;

    background:#FFFDFC!important;

    border-bottom:1px solid var(--line);
}

.countdown{
    max-width:740px!important;

    margin:22px auto 0!important;
}

.countdown > div{
    border-right:1px solid var(--line)!important;
}

.countdown > div:last-child{
    border-right:0!important;
}

.countdown strong{
    font-family:var(--serif)!important;

    font-size:43px!important;
    font-weight:400!important;

    color:var(--rose)!important;
}

.countdown span{
    font-size:12px!important;
    letter-spacing:.15em!important;
    text-transform:uppercase!important;

    color:var(--muted)!important;
}


/* ========================================================
   INTRO
   ======================================================== */

.intro-section{
    background:#FFFDFC!important;
}

.intro-section .narrow{
    max-width:790px!important;

    text-align:center!important;
}

.intro-section .ornament{
    color:var(--rose)!important;

    font-size:25px!important;
}

.lead-text{
    font-family:var(--serif)!important;

    font-size:clamp(24px,2.7vw,35px)!important;
    font-weight:400!important;
    font-style:italic!important;

    line-height:1.48!important;

    color:#604B51!important;
}


/* ========================================================
   STORY
   PHUONG AN B: ROSES HERE
   ======================================================== */

.story-section{
    isolation:isolate;

    overflow:hidden!important;

    background:#FFFCFA!important;
}

.story-section::before{
    content:"";

    position:absolute;
    z-index:-1;

    left:-80px;
    top:-45px;

    width:430px;
    height:430px;

    background:url("/public/rose-corner.svg") center/contain no-repeat;

    opacity:.67;

    pointer-events:none;
}

.story-section::after{
    content:"";

    position:absolute;
    z-index:-1;

    right:-105px;
    bottom:-80px;

    width:460px;
    height:460px;

    background:url("/public/rose-corner.svg") center/contain no-repeat;

    transform:rotate(180deg);

    opacity:.58;

    pointer-events:none;
}

.story-grid{
    position:relative;
    z-index:2;

    max-width:1120px!important;

    margin:55px auto 0!important;

    gap:80px!important;

    align-items:center!important;
}

.story-photo{
    position:relative;
}

.story-photo::before{
    content:"";

    position:absolute;

    inset:-14px 14px 14px -14px;

    border:1px solid rgba(185,120,134,.30);

    border-radius:3px;

    pointer-events:none;
}

.story-photo img{
    position:relative;

    border-radius:2px!important;

    box-shadow:
      0 22px 55px rgba(74,57,61,.12)!important;
}

.story-copy{
    padding:32px 0!important;
}

.big-quote{
    font-family:var(--font-heading)!important;

    font-size:78px!important;

    color:rgba(185,120,134,.27)!important;
}

.story-copy > p{
    font-family:var(--serif)!important;

    font-size:22px!important;
    line-height:1.7!important;

    color:#58464B!important;
}

.signature{
    margin-top:30px!important;

    display:flex!important;
    flex-wrap:nowrap!important;

    align-items:center!important;

    gap:.18em!important;

    white-space:nowrap!important;

    font-family:var(--script)!important;

    font-size:clamp(29px,3.2vw,45px)!important;
    font-weight:500!important;

    color:var(--rose)!important;
}

.signature span{
    font-family:var(--script)!important;
}

.signature .sign-heart{
    font-family:var(--font-heading)!important;

    font-size:.60em!important;

    color:#D597A5!important;
}


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

.gallery-section{
    background:#FCF7F5!important;
}

.gallery-section::before{
    content:"";

    position:absolute;

    top:0;
    left:50%;

    width:min(900px,80%);
    height:1px;

    transform:translateX(-50%);

    background:linear-gradient(
      to right,
      transparent,
      rgba(185,120,134,.35),
      transparent
    );
}

.wedding-carousel{
    max-width:1320px!important;

    margin:55px auto 0!important;

    padding:18px!important;

    border:1px solid rgba(185,120,134,.20)!important;
    border-radius:5px!important;

    background:rgba(255,255,255,.72)!important;

    box-shadow:
      0 25px 65px rgba(86,62,69,.07)!important;
}

.carousel-feature{
    background:#F4ECEA!important;

    border-radius:3px!important;
}

.carousel-feature img{
    background:#F4ECEA!important;

    border-radius:3px!important;
}

.carousel-arrow{
    border:1px solid rgba(185,120,134,.26)!important;

    background:rgba(255,255,255,.88)!important;
    color:var(--rose)!important;

    box-shadow:0 7px 22px rgba(74,57,61,.09)!important;
}

.carousel-arrow:hover{
    background:var(--rose)!important;
    color:#fff!important;
}

.carousel-thumb{
    border-radius:3px!important;

    border:2px solid transparent!important;

    opacity:.72!important;
}

.carousel-thumb.active{
    border-color:var(--rose)!important;
    opacity:1!important;
}


/* ========================================================
   SCHEDULE
   ======================================================== */

.schedule-section{
    background:#FFFDFC!important;
}

.event-list{
    max-width:1000px!important;

    margin:52px auto 0!important;
}

.event-card{
    border:0!important;
    border-bottom:1px solid var(--line)!important;

    border-radius:0!important;

    background:transparent!important;

    box-shadow:none!important;

    padding:32px 10px!important;
}

.event-number{
    font-family:var(--serif)!important;

    color:rgba(185,120,134,.55)!important;
}

.event-date-block strong{
    font-family:var(--serif)!important;

    font-size:50px!important;
    font-weight:400!important;

    color:var(--rose)!important;
}

.event-main h3{
    font-family:var(--serif)!important;

    font-size:30px!important;
    font-weight:500!important;

    color:var(--ink)!important;
}

.event-time{
    color:var(--rose)!important;

    font-size:15px!important;

    letter-spacing:.12em!important;
}

.venue{
    font-family:var(--serif)!important;

    font-size:19px!important;
}


/* ========================================================
   WISHES
   ======================================================== */

.wishes-banner{
    position:relative!important;

    overflow:hidden!important;

    background:
      linear-gradient(
        135deg,
        #6E5359 0%,
        #8D6871 52%,
        #A97B86 100%
      )!important;
}

.wishes-banner::before{
    content:"";

    position:absolute;

    left:-110px;
    bottom:-140px;

    width:390px;
    height:390px;

    background:url("/public/rose-corner.svg") center/contain no-repeat;

    filter:brightness(1.25);

    opacity:.14;

    pointer-events:none;
}

.wishes-banner .section-heading h2{
    color:#fff!important;
}

.wishes-banner .section-heading > p{
    color:rgba(255,255,255,.76)!important;
}

.wishes-banner .eyebrow{
    color:#F2CFD7!important;
}

.glass-form{
    border:1px solid rgba(255,255,255,.24)!important;

    background:rgba(255,255,255,.10)!important;

    box-shadow:none!important;

    backdrop-filter:blur(12px)!important;
}

.wish-card{
    border:1px solid rgba(255,255,255,.16)!important;

    background:rgba(255,255,255,.09)!important;

    box-shadow:none!important;
}


/* ========================================================
   RSVP
   PHUONG AN B: ROSES HERE
   ======================================================== */

.rsvp-section{
    isolation:isolate;

    overflow:hidden!important;

    background:#FFFCFA!important;
}

.rsvp-section::before{
    content:"";

    position:absolute;
    z-index:-1;

    left:-120px;
    bottom:-110px;

    width:410px;
    height:410px;

    background:url("/public/rose-corner.svg") center/contain no-repeat;

    opacity:.52;

    pointer-events:none;
}

.rsvp-section::after{
    content:"";

    position:absolute;
    z-index:-1;

    right:-110px;
    top:-80px;

    width:400px;
    height:400px;

    transform:rotate(180deg);

    background:url("/public/rose-corner.svg") center/contain no-repeat;

    opacity:.48;

    pointer-events:none;
}

.rsvp-paper{
    position:relative;
    z-index:2;

    max-width:720px!important;

    padding:65px 70px!important;

    border:1px solid rgba(185,120,134,.22)!important;
    border-radius:3px!important;

    background:rgba(255,255,255,.91)!important;

    box-shadow:
      0 24px 65px rgba(75,55,60,.08)!important;

    text-align:center!important;
}

.rsvp-paper h2{
    font-family:var(--script)!important;

    font-size:clamp(44px,5vw,66px)!important;
    font-weight:500!important;

    color:var(--rose)!important;
}

.rsvp-paper > p{
    font-size:18px!important;
    line-height:1.6!important;
}

.rsvp-form{
    margin-top:28px!important;
}

.attendance-options label span{
    border:1px solid rgba(185,120,134,.22)!important;

    background:#FFFBFA!important;

    transition:
      border-color .2s ease,
      background .2s ease,
      transform .2s ease!important;
}

.attendance-options label:hover span{
    transform:translateY(-2px);

    border-color:rgba(185,120,134,.55)!important;
}

.attendance-options input:checked + span{
    border-color:var(--rose)!important;

    background:#F9ECEF!important;
}


/* ========================================================
   FORMS
   ======================================================== */

.field input,
.field textarea,
.dark-field input{
    border:1px solid rgba(125,96,104,.22)!important;

    border-radius:2px!important;

    background:rgba(255,255,255,.86)!important;

    font-family:var(--serif)!important;

    font-size:17px!important;

    outline:none!important;
}

.field input:focus,
.field textarea:focus,
.dark-field input:focus{
    border-color:rgba(185,120,134,.70)!important;

    box-shadow:0 0 0 3px rgba(185,120,134,.08)!important;
}

.primary-btn{
    border-radius:999px!important;

    background:var(--rose)!important;

    box-shadow:none!important;

    font-family:var(--serif)!important;

    font-size:16px!important;

    letter-spacing:.03em!important;
}

.primary-btn:hover{
    background:#A76574!important;
}


/* ========================================================
   FOOTER
   PHUONG AN B: ROSES HERE
   ======================================================== */

.site-footer{
    position:relative!important;

    overflow:hidden!important;

    min-height:430px!important;

    padding:115px 20px 90px!important;

    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;

    background:#FFFDFC!important;

    color:var(--ink)!important;

    text-align:center!important;
}

.site-footer::before{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:-6px;

    height:190px;

    background:
      url("/public/rose-divider.svg")
      center bottom/cover no-repeat;

    opacity:.72;

    pointer-events:none;
}

.site-footer .ornament{
    position:relative;
    z-index:2;

    color:var(--rose)!important;
}

.footer-couple,
.site-footer h2{
    position:relative;
    z-index:2;

    margin:10px auto 12px!important;

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

    flex-wrap:nowrap!important;

    white-space:nowrap!important;

    font-family:var(--script)!important;

    font-size:clamp(38px,5vw,64px)!important;
    font-weight:500!important;

    color:var(--rose)!important;
}

.footer-couple span,
.site-footer h2 span:not(:only-child){
    font-family:var(--script)!important;
}

.footer-couple i{
    margin:0 .25em!important;

    font-family:var(--font-heading)!important;
    font-style:normal!important;

    font-size:.45em!important;

    color:#D599A6!important;
}

.site-footer > p,
.site-footer > small{
    position:relative;
    z-index:2;
}

.site-footer > p{
    max-width:660px;

    margin-left:auto!important;
    margin-right:auto!important;

    font-family:var(--serif)!important;

    font-size:19px!important;

    color:var(--muted)!important;
}

.site-footer > small{
    color:#A49095!important;
}


/* ========================================================
   MUSIC
   ======================================================== */

.music-toggle{
    border:1px solid rgba(185,120,134,.30)!important;

    background:rgba(255,253,252,.91)!important;

    color:var(--rose)!important;

    box-shadow:
      0 7px 25px rgba(76,55,61,.10)!important;

    backdrop-filter:blur(8px);
}


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

@media(max-width:700px){

    .section{
        padding-top:72px!important;
        padding-bottom:72px!important;
    }

    .section-heading h2{
        font-size:clamp(38px,11vw,52px)!important;
    }

    .section-heading > p:last-child{
        padding:0 15px!important;

        font-size:17px!important;
    }


    /* hero */

    .hero-section{
        min-height:78vh!important;
    }

    .hero-content{
        padding:100px 12px 70px!important;
    }

    .hero-content .couple-hero-name{
        font-size:clamp(31px,8.5vw,44px)!important;

        white-space:nowrap!important;
    }

    .hero-content .couple-heart{
        margin:0 .14em!important;
    }

    .hero-date{
        font-size:16px!important;
    }


    /* story */

    .story-section::before{
        width:250px;
        height:250px;

        left:-105px;
        top:-20px;

        opacity:.36;
    }

    .story-section::after{
        width:270px;
        height:270px;

        right:-130px;
        bottom:-50px;

        opacity:.30;
    }

    .story-grid{
        gap:42px!important;
    }

    .story-copy{
        text-align:center!important;
    }

    .story-copy > p{
        font-size:19px!important;
    }

    .signature{
        justify-content:center!important;

        font-size:clamp(23px,6vw,32px)!important;
    }


    /* gallery */

    .wedding-carousel{
        margin-top:35px!important;

        padding:7px!important;
    }


    /* RSVP */

    .rsvp-paper{
        padding:45px 20px!important;
    }

    .rsvp-section::before,
    .rsvp-section::after{
        width:240px;
        height:240px;

        opacity:.30;
    }


    /* footer */

    .site-footer{
        min-height:370px!important;

        padding:85px 12px 120px!important;
    }

    .site-footer::before{
        height:135px!important;

        background-size:auto 135px!important;
    }

    .footer-couple,
    .site-footer h2{
        font-size:clamp(29px,7.6vw,39px)!important;
    }

}


/* ========================================================
   DESKTOP WIDE
   ======================================================== */

@media(min-width:1400px){

    .story-grid{
        max-width:1200px!important;
    }

    .event-list{
        max-width:1080px!important;
    }

}


/* ===== HERO FAST LOAD ===== */

.hero-section{
    background:
      linear-gradient(145deg,#6f695f,#9e9386)!important;
}

.hero-bg{
    opacity:0;
    animation:heroReveal .45s ease forwards;
    will-change:opacity,transform;
}

@keyframes heroReveal{
    from{
        opacity:0;
        transform:scale(1.025);
    }
    to{
        opacity:1;
        transform:scale(1.015);
    }
}

@media (prefers-reduced-motion:reduce){
    .hero-bg{
        animation:none!important;
        opacity:1!important;
    }
}



/* ========================================================
   HERO IMAGE - SAFE / FAST
   ======================================================== */

.hero-section {
    position: relative !important;
    overflow: hidden !important;
}

.hero-bg {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    z-index: 0 !important;

    overflow: hidden !important;

    background: #736d65 !important;
}

.hero-bg-image {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: cover !important;
    object-position: center 38% !important;

    transform: scale(1.01);

    opacity: 1 !important;
}

/* lớp overlay */
.hero-overlay {
    position: absolute !important;
    inset: 0 !important;

    z-index: 1 !important;
}

/* chữ phải nằm trên ảnh */
.hero-content {
    position: relative !important;
    z-index: 2 !important;
}

/* header */
.site-header {
    z-index: 1000 !important;
}

@media(max-width:700px) {

    .hero-bg-image {
        object-position: center center !important;
    }

}



/* ========================================================
   GALLERY V3 - FORCE CLEAN STATE
   ======================================================== */

/* Lightbox cũ không được hiển thị nữa */
#lightbox {
    display:none !important;
}

/* main image */
#carouselMainImage {
    display:block !important;

    width:100% !important;
    height:100% !important;

    object-fit:contain !important;

    opacity:1 !important;

    visibility:visible !important;

    transform:none !important;

    transition:none !important;
}

/* tránh CSS carousel 3D cũ tác động lên album thường */
#weddingCarousel .ring-stage,
#weddingCarousel .ring-card,
#weddingCarousel .carousel-slide-layer {
    display:none !important;
}


/* viewer ring phải nổi trên tất cả */
.ring-viewer {
    z-index:2147483000 !important;
}



/* ========================================================
   LIGHTBOX HIGH QUALITY MODE
   ======================================================== */

/*
 * Ảnh trung tâm không dùng filter.
 */
.ring-viewer-card[data-distance="0"] {
    filter: none !important;

    opacity: 1 !important;

    /*
     * Không đẩy translateZ quá mạnh.
     * 3D transform có thể khiến Chromium rasterize
     * texture ở độ phân giải thấp hơn.
     */
    transform:
        translate(-50%, -50%)
        scale(1) !important;

    backface-visibility: visible !important;

    image-rendering: auto !important;
}


/*
 * IMG trung tâm tuyệt đối không blur/filter.
 */
.ring-viewer-card[data-distance="0"] img {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    filter: none !important;

    opacity: 1 !important;

    transform: none !important;

    image-rendering: auto !important;

    -webkit-transform: none !important;
}


/*
 * Cho ảnh chính lớn hơn một chút trên màn hình desktop.
 */
@media (min-width: 1000px) {

    .ring-viewer-card {
        width: min(42vw, 760px) !important;
        height: min(78vh, 900px) !important;
    }

}


/*
 * Màn hình rất lớn.
 */
@media (min-width: 1600px) {

    .ring-viewer-card {
        width: min(38vw, 820px) !important;
        height: min(80vh, 980px) !important;
    }

}


/*
 * Mobile vẫn dùng ảnh original khi ở giữa,
 * nhưng khung vừa màn hình.
 */
@media (max-width: 700px) {

    .ring-viewer-card {
        width: 88vw !important;
        height: 68vh !important;
    }

    .ring-viewer-card[data-distance="0"] {
        transform:
            translate(-50%, -50%)
            scale(1) !important;
    }

}


/* ========================================================
   OUR STORY IMAGE PERFORMANCE
   ======================================================== */

.story-photo {
    overflow: hidden !important;
    background: #f1e9e6 !important;
}

.story-photo .story-optimized-image {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    aspect-ratio: 4 / 5;

    object-fit: cover !important;

    opacity: 1 !important;

    transition: opacity .25s ease !important;
}



/* ========================================================
   HERO FLOATING WEDDING SCHEDULE
   ======================================================== */

.hero-wedding-schedule {

    position:relative;

    z-index:20;

    width:min(
      940px,
      calc(100% - 40px)
    );

    margin:
      -76px
      auto
      20px;

}


.hero-wedding-schedule-inner {

    min-height:142px;

    display:grid;

    grid-template-columns:
      1fr
      54px
      1fr;

    align-items:center;

    padding:18px 28px;

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

    border-radius:8px;

    background:
      rgba(255,252,250,.84);

    backdrop-filter:
      blur(18px);

    -webkit-backdrop-filter:
      blur(18px);

    box-shadow:
      0 25px 70px
      rgba(66,45,51,.18);

}


.hero-event-card {

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:4px;

    min-width:0;

    padding:12px;

    color:var(--ink);

    text-align:center;

    text-decoration:none;

}


.hero-event-side {

    margin-bottom:4px;

    font-size:11px;

    font-weight:600;

    letter-spacing:.22em;

    color:var(--rose);

}


.hero-event-card strong {

    font-family:
      var(--serif);

    font-size:28px;

    font-weight:500;

}


.hero-event-card > span {

    font-size:15px;

    color:#735e64;

}


.hero-event-card small {

    max-width:290px;

    margin-top:3px;

    overflow:hidden;

    color:#8c777c;

    font-size:13px;

    text-overflow:ellipsis;

    white-space:nowrap;

}


.hero-event-heart {

    display:flex;

    align-items:center;

    justify-content:center;

    color:#d894a3;

    font-size:18px;

}


.hero-event-heart::before,
.hero-event-heart::after {

    content:"";

    width:12px;
    height:1px;

    margin:0 7px;

    background:
      rgba(185,120,134,.35);

}



/* ========================================================
   WEDDING SCHEDULE V2
   ======================================================== */

.wedding-schedule-v2 {

    padding-top:
      95px !important;

    background:
      #fffdfb !important;

}


.family-wedding-grid {

    width:min(
      1180px,
      calc(100% - 36px)
    );

    margin:
      58px
      auto
      0;

    display:grid;

    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:28px;

}


.family-wedding-card {

    position:relative;

    min-width:0;

    padding:
      47px
      45px
      40px;

    border:
      1px solid
      rgba(185,120,134,.20);

    border-radius:6px;

    overflow:hidden;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.97),
        rgba(252,245,244,.94)
      );

    box-shadow:
      0 20px 55px
      rgba(90,59,68,.07);

}


.family-wedding-card::before {

    content:"";

    position:absolute;

    width:230px;
    height:230px;

    right:-100px;
    top:-100px;

    border:
      1px solid
      rgba(185,120,134,.10);

    border-radius:50%;

}


.family-card-decoration {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    margin-bottom:20px;

}


.family-card-decoration span {

    width:55px;
    height:1px;

    background:
      rgba(185,120,134,.32);

}


.family-card-decoration b {

    color:#d494a1;

    font-size:11px;

}


.family-side-label {

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:5px;

    text-align:center;

}


.family-side-label > span {

    color:#c98c99;

    font-size:19px;

}


.family-side-label strong {

    font-family:
      var(--serif);

    font-size:13px;

    font-weight:600;

    letter-spacing:.24em;

    color:#896970;

}


.family-title {

    margin-top:12px;

    text-align:center;

    font-family:
      var(--script);

    font-size:30px;

    color:var(--rose);

}


.family-parents {

    margin:
      24px
      auto;

    text-align:center;

}


.family-parents small,
.wedding-date-block small,
.wedding-detail-row small {

    display:block;

    margin-bottom:5px;

    font-size:10px;

    letter-spacing:.18em;

    color:#a0888d;

}


.family-parents p {

    margin:0;

    font-family:
      var(--serif);

    font-size:19px;

    line-height:1.45;

    color:#57464a;

}


.wedding-date-block {

    margin:
      28px
      auto;

    text-align:center;

}


.wedding-date-block strong {

    display:block;

    font-family:
      var(--serif);

    font-size:
      clamp(
        35px,
        4vw,
        48px
      );

    font-weight:400;

    line-height:1;

    color:var(--ink);

}


.lunar-date {

    display:block;

    margin-top:10px;

    font-family:
      var(--serif);

    font-size:15px;

    font-style:italic;

    color:#a06e79;

}


.wedding-info-divider {

    margin:
      25px
      0;

    text-align:center;

    color:#d49aa6;

    font-size:12px;

}


.wedding-detail-row {

    display:grid;

    grid-template-columns:
      32px
      minmax(0,1fr);

    gap:12px;

    padding:
      17px
      0;

    border-top:
      1px solid
      rgba(185,120,134,.13);

}


.detail-symbol {

    padding-top:3px;

    color:#b97886;

    font-size:19px;

}


.wedding-detail-row strong {

    display:block;

    font-family:
      var(--serif);

    font-size:19px;

    font-weight:500;

}


.wedding-detail-row p {

    margin:
      4px
      0
      0;

    color:#806c71;

    font-size:15px;

    line-height:1.45;

}


.wedding-event-description {

    margin:
      22px
      0;

    text-align:center;

    font-size:16px;

    font-style:italic;

    line-height:1.55;

    color:#806c71;

}


.wedding-map-link {

    width:max-content;

    margin:
      22px
      auto
      4px;

    display:block;

    padding:
      9px
      19px;

    border:
      1px solid
      rgba(185,120,134,.38);

    border-radius:999px;

    color:#9f6170;

    text-decoration:none;

    font-size:14px;

}


.wedding-map-link:hover {

    background:
      var(--rose);

    color:#fff;

}


/* COUNTDOWN TUNG GIA DINH */

.family-countdown {

    display:grid;

    grid-template-columns:
      repeat(4,1fr);

    margin-top:32px;

    padding-top:25px;

    border-top:
      1px solid
      rgba(185,120,134,.18);

}


.family-countdown > div {

    text-align:center;

    border-right:
      1px solid
      rgba(185,120,134,.15);

}


.family-countdown > div:last-child {
    border-right:0;
}


.family-countdown strong {

    display:block;

    font-family:
      var(--serif);

    font-size:31px;

    font-weight:400;

    color:var(--rose);

}


.family-countdown span {

    display:block;

    margin-top:2px;

    font-size:9px;

    letter-spacing:.11em;

    text-transform:uppercase;

    color:#9b858a;

}


.family-countdown.finished {

    display:block;

    padding:
      25px
      0
      0;

    text-align:center;

    font-family:
      var(--script);

    font-size:27px;

    color:var(--rose);

}


/*
 * Countdown cũ không dùng nữa.
 */

.countdown-section {
    display:none !important;
}


/* MOBILE */

@media(max-width:760px) {

    .hero-wedding-schedule {

        width:
          calc(100% - 20px);

        margin-top:-48px;

    }


    .hero-wedding-schedule-inner {

        grid-template-columns:
          1fr
          25px
          1fr;

        min-height:115px;

        padding:
          12px
          8px;

    }


    .hero-event-card {

        padding:
          7px
          4px;

    }


    .hero-event-side {

        font-size:8px;

        letter-spacing:.14em;

    }


    .hero-event-card strong {

        font-size:18px;

    }


    .hero-event-card small {

        max-width:125px;

        font-size:10px;

    }


    .hero-event-heart {

        font-size:12px;

    }


    .hero-event-heart::before,
    .hero-event-heart::after {

        display:none;

    }


    .family-wedding-grid {

        width:
          calc(100% - 20px);

        grid-template-columns:1fr;

        gap:20px;

        margin-top:35px;

    }


    .family-wedding-card {

        padding:
          38px
          20px
          30px;

    }


    .family-countdown strong {

        font-size:25px;

    }

}



/* ========================================================
   HERO V3
   Header removed + schedule inside hero
   ======================================================== */


/* HEADER CU KHONG CON CHIEM CHO */

.site-header {
    display:none !important;
}


/* HERO CO THE TU GIAN THEO NOI DUNG */

.hero-section {

    min-height:100vh !important;

    height:auto !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;

    justify-content:flex-start !important;

    padding:
      90px
      20px
      38px !important;

    box-sizing:border-box !important;

}


/*
 * Background vẫn phủ toàn bộ Hero,
 * kể cả khi schedule làm Hero cao hơn.
 */

.hero-bg,
.hero-overlay {

    position:absolute !important;

    inset:0 !important;

    width:100% !important;

    height:100% !important;

}


/* ========================================================
   TEN CO DAU / CHU RE
   DAY LEN TREN
   ======================================================== */

.hero-content {

    position:relative !important;

    z-index:3 !important;

    width:100% !important;

    max-width:1500px !important;

    padding:
      28px
      20px
      20px !important;

    margin:
      0
      auto !important;

    flex:0 0 auto !important;

}


.hero-content .couple-hero-name {

    margin:
      5px
      auto
      12px !important;

}


/*
 * Bỏ khoảng trống do nút lịch cũ.
 */

.hero-content .ghost-btn {

    display:none !important;

}


/* ========================================================
   FLOAT GLASS SCHEDULE
   ======================================================== */

.hero-schedule-panel {

    position:relative;

    z-index:5;

    width:min(
      1120px,
      calc(100% - 30px)
    );

    height:auto;

    margin:
      clamp(50px,8vh,115px)
      auto
      0;

    padding:
      22px;

    box-sizing:border-box;

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

    border-radius:14px;

    background:
      rgba(255,250,248,.82);

    backdrop-filter:
      blur(18px)
      saturate(1.12);

    -webkit-backdrop-filter:
      blur(18px)
      saturate(1.12);

    box-shadow:

      0 30px 80px
      rgba(33,23,25,.28),

      0 4px 18px
      rgba(70,44,52,.10),

      inset 0 1px 0
      rgba(255,255,255,.70);

}


/* schedule title */

.hero-schedule-heading {

    display:grid;

    grid-template-columns:
      1fr
      auto
      1fr;

    gap:18px;

    align-items:center;

    margin:
      3px
      auto
      18px;

    max-width:600px;

}


.hero-schedule-heading > span {

    height:1px;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(185,120,134,.42)
      );

}


.hero-schedule-heading > span:last-child {

    background:
      linear-gradient(
        90deg,
        rgba(185,120,134,.42),
        transparent
      );

}


.hero-schedule-heading > div {

    text-align:center;

}


.hero-schedule-heading small {

    display:block;

    margin-bottom:1px;

    font-size:8px;

    letter-spacing:.26em;

    color:#aa7884;

}


.hero-schedule-heading strong {

    display:block;

    font-family:
      var(--script);

    font-size:25px;

    font-weight:500;

    color:#a46574;

}


/* ========================================================
   TWO FAMILY COLUMNS
   ======================================================== */

.hero-family-grid {

    display:grid;

    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:0;

}


.hero-family-card {

    position:relative;

    min-width:0;

    height:auto;

    padding:
      15px
      38px
      20px;

    box-sizing:border-box;

}


.hero-family-card + .hero-family-card {

    border-left:
      1px solid
      rgba(185,120,134,.18);

}


/* ========================================================
   FAMILY HEADER
   ======================================================== */

.hero-family-decoration {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    margin-bottom:7px;

}


.hero-family-decoration span {

    width:38px;

    height:1px;

    background:
      rgba(185,120,134,.32);

}


.hero-family-decoration b {

    color:#d997a5;

    font-size:8px;

}


.hero-family-side {

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:3px;

}


.hero-family-side i {

    color:#ca8998;

    font-size:16px;

    font-style:normal;

}


.hero-family-side strong {

    font-size:10px;

    letter-spacing:.25em;

    color:#825e67;

}


/* ========================================================
   FAMILY / PARENTS
   ======================================================== */

.hero-family-title {

    margin-top:8px;

    text-align:center;

    font-family:
      var(--script);

    font-size:23px;

    color:#a46a77;

}


.hero-family-parents {

    margin:
      14px
      auto;

    text-align:center;

}


.hero-family-parents small,
.hero-family-date small,
.hero-detail-row small {

    display:block;

    margin-bottom:3px;

    font-size:8px;

    letter-spacing:.17em;

    color:#a28289;

}


.hero-family-parents p {

    margin:0;

    font-family:
      var(--serif);

    font-size:16px;

    line-height:1.35;

    color:#58464a;

}


/* ========================================================
   DATE + LUNAR
   ======================================================== */

.hero-family-date {

    display:grid;

    grid-template-columns:
      1fr
      1fr;

    gap:15px;

    margin:
      17px
      0;

    text-align:center;

}


.hero-family-date > div {

    min-width:0;

}


.hero-family-date strong {

    display:block;

    font-family:
      var(--serif);

    font-size:
      clamp(
        25px,
        2.6vw,
        38px
      );

    font-weight:400;

    line-height:1;

    color:#49383d;

}


.hero-lunar-date {

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding-left:15px;

    border-left:
      1px solid
      rgba(185,120,134,.17);

}


.hero-lunar-date span {

    font-family:
      var(--serif);

    font-size:15px;

    font-style:italic;

    line-height:1.25;

    color:#a06774;

}


/*
 * Nếu chưa có âm lịch thì ngày dương tự chiếm rộng.
 */

.hero-family-date > div:only-child {

    grid-column:
      1 / -1;

}


/* ========================================================
   DETAIL
   ======================================================== */

.hero-detail-row {

    display:grid;

    grid-template-columns:
      25px
      minmax(0,1fr);

    gap:9px;

    padding:
      10px
      0;

    border-top:
      1px solid
      rgba(185,120,134,.12);

}


.hero-detail-icon {

    padding-top:1px;

    color:#c58190;

    font-size:15px;

}


.hero-detail-row strong {

    display:block;

    font-family:
      var(--serif);

    font-size:16px;

    font-weight:500;

    color:#4e3d42;

}


.hero-detail-row p {

    margin:
      2px
      0
      0;

    font-size:13px;

    line-height:1.35;

    color:#806a70;

}


.hero-event-description {

    margin:
      11px
      0;

    text-align:center;

    font-family:
      var(--serif);

    font-size:13px;

    font-style:italic;

    line-height:1.4;

    color:#826b71;

}


.hero-map-link {

    width:max-content;

    display:block;

    margin:
      10px
      auto;

    padding:
      6px
      14px;

    border:
      1px solid
      rgba(185,120,134,.40);

    border-radius:999px;

    color:#9d6170;

    text-decoration:none;

    font-size:11px;

}


/* ========================================================
   COUNTDOWN INSIDE EACH COLUMN
   ======================================================== */

.hero-schedule-panel
.family-countdown {

    display:grid;

    grid-template-columns:
      repeat(4,1fr);

    margin-top:17px;

    padding-top:15px;

    border-top:
      1px solid
      rgba(185,120,134,.16);

}


.hero-schedule-panel
.family-countdown > div {

    text-align:center;

    border-right:
      1px solid
      rgba(185,120,134,.14);

}


.hero-schedule-panel
.family-countdown > div:last-child {

    border-right:0;

}


.hero-schedule-panel
.family-countdown strong {

    display:block;

    font-family:
      var(--serif);

    font-size:24px;

    font-weight:400;

    color:#bd7182;

}


.hero-schedule-panel
.family-countdown span {

    display:block;

    margin-top:1px;

    font-size:7px;

    letter-spacing:.11em;

    text-transform:uppercase;

    color:#987f85;

}


/* ========================================================
   EMPTY SIDE
   ======================================================== */

.hero-family-empty {

    min-height:180px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#9e888d;

    font-family:
      var(--serif);

    font-size:14px;

    font-style:italic;

}


/* ========================================================
   HIDE OLD SCHEDULE + COUNTDOWN
   ======================================================== */

.schedule-section,
.wedding-schedule-v2,
.hero-wedding-schedule,
.countdown-section {

    display:none !important;

}


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

@media(max-width:760px) {


    .hero-section {

        padding:
          65px
          8px
          20px !important;

    }


    .hero-content {

        padding:
          14px
          4px
          6px !important;

    }


    .hero-content
    .couple-hero-name {

        font-size:
          clamp(
            28px,
            8.3vw,
            42px
          ) !important;

    }


    .hero-schedule-panel {

        width:
          calc(100% - 8px);

        margin-top:
          45px;

        padding:
          13px
          9px;

        border-radius:10px;

    }


    .hero-schedule-heading {

        margin-bottom:11px;

    }


    .hero-family-grid {

        grid-template-columns:1fr;

    }


    .hero-family-card {

        padding:
          20px
          12px;

    }


    .hero-family-card +
    .hero-family-card {

        border-left:0;

        border-top:
          1px solid
          rgba(185,120,134,.18);

    }


    .hero-family-date strong {

        font-size:27px;

    }


    .hero-lunar-date span {

        font-size:13px;

    }


    .hero-schedule-panel
    .family-countdown strong {

        font-size:21px;

    }

}



/* ========================================================
   MOTION V4 — HIGH REFRESH FEEL
   ======================================================== */

:root{
    --motion-fast: 220ms;
    --motion-normal: 420ms;
    --motion-slow: 650ms;

    --ease-smooth:
        cubic-bezier(.22,.61,.36,1);

    --ease-spring:
        cubic-bezier(.16,1,.3,1);
}


/* ========================================================
   GENERAL RENDERING
   ======================================================== */

html{
    scroll-behavior:smooth;
}

body{
    overscroll-behavior-y:none;
}

img{
    -webkit-user-drag:none;
}


/* ========================================================
   SCROLL REVEAL
   ======================================================== */

.motion-reveal{
    opacity:0;

    transform:
      translate3d(0,42px,0)
      scale(.985);

    transition:
      opacity 720ms var(--ease-smooth),
      transform 850ms var(--ease-spring);

    will-change:
      opacity,
      transform;
}

.motion-reveal.motion-visible{
    opacity:1;

    transform:
      translate3d(0,0,0)
      scale(1);
}


/* nhỏ hơn cho nội dung con */

.motion-reveal-soft{
    opacity:0;

    transform:
      translate3d(0,24px,0);

    transition:
      opacity 600ms var(--ease-smooth),
      transform 700ms var(--ease-spring);

    will-change:
      opacity,
      transform;
}

.motion-reveal-soft.motion-visible{
    opacity:1;
    transform:translate3d(0,0,0);
}


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

.hero-content{
    animation:
      heroContentIn
      950ms
      var(--ease-spring)
      both;
}

@keyframes heroContentIn{

    from{
        opacity:0;

        transform:
          translate3d(0,28px,0)
          scale(.985);
    }

    to{
        opacity:1;

        transform:
          translate3d(0,0,0)
          scale(1);
    }
}


.hero-schedule-panel{
    animation:
      heroScheduleIn
      1100ms
      160ms
      var(--ease-spring)
      both;
}

@keyframes heroScheduleIn{

    from{
        opacity:0;

        transform:
          translate3d(0,46px,0)
          scale(.975);
    }

    to{
        opacity:1;

        transform:
          translate3d(0,0,0)
          scale(1);
    }
}


/* ========================================================
   NORMAL ALBUM MAIN IMAGE TRANSITION
   ======================================================== */

#carouselFeature{
    overflow:hidden!important;
}

#carouselMainImage{

    will-change:
      transform,
      opacity;

    transform:
      translate3d(0,0,0)
      scale(1);

    backface-visibility:hidden;

    -webkit-backface-visibility:hidden;

    transition:none!important;
}


/* ảnh hiện tại đi ra trái */

#carouselMainImage.motion-out-left{

    animation:
      galleryOutLeft
      260ms
      var(--ease-smooth)
      both;
}

@keyframes galleryOutLeft{

    from{
        opacity:1;
        transform:
          translate3d(0,0,0)
          scale(1);
    }

    to{
        opacity:0;
        transform:
          translate3d(-9%,0,0)
          scale(.985);
    }

}


/* ảnh hiện tại đi ra phải */

#carouselMainImage.motion-out-right{

    animation:
      galleryOutRight
      260ms
      var(--ease-smooth)
      both;
}

@keyframes galleryOutRight{

    from{
        opacity:1;
        transform:
          translate3d(0,0,0)
          scale(1);
    }

    to{
        opacity:0;
        transform:
          translate3d(9%,0,0)
          scale(.985);
    }

}


/* ảnh mới đi vào từ phải */

#carouselMainImage.motion-in-right{

    animation:
      galleryInRight
      480ms
      var(--ease-spring)
      both;
}

@keyframes galleryInRight{

    from{
        opacity:0;

        transform:
          translate3d(10%,0,0)
          scale(.985);
    }

    to{
        opacity:1;

        transform:
          translate3d(0,0,0)
          scale(1);
    }

}


/* ảnh mới đi vào từ trái */

#carouselMainImage.motion-in-left{

    animation:
      galleryInLeft
      480ms
      var(--ease-spring)
      both;
}

@keyframes galleryInLeft{

    from{
        opacity:0;

        transform:
          translate3d(-10%,0,0)
          scale(.985);
    }

    to{
        opacity:1;

        transform:
          translate3d(0,0,0)
          scale(1);
    }

}


/* ========================================================
   THUMBNAILS
   ======================================================== */

.carousel-thumb{

    transform:
      translate3d(0,0,0)
      scale(1);

    transition:
      transform 260ms var(--ease-spring),
      opacity 220ms ease,
      border-color 220ms ease!important;

    will-change:
      transform,
      opacity;
}

.carousel-thumb:hover{

    transform:
      translate3d(0,-3px,0)
      scale(1.035);
}

.carousel-thumb.active{

    transform:
      translate3d(0,-2px,0)
      scale(1.045);
}


/* ========================================================
   RING VIEWER 120HZ FEEL
   ======================================================== */

.ring-viewer-card{

    transform-style:preserve-3d;

    backface-visibility:hidden;

    -webkit-backface-visibility:hidden;

    will-change:
      transform,
      opacity;

    transition:
      transform 520ms var(--ease-spring),
      opacity 360ms var(--ease-smooth),
      filter 300ms ease!important;
}


/*
 * giảm filter trong lúc chuyển để GPU nhẹ hơn
 */

.ring-viewer.ring-moving
.ring-viewer-card{

    filter:none!important;
}


/* CENTER */

.ring-viewer-card[data-distance="0"]{

    transform:
      translate3d(-50%,-50%,0)
      rotateY(0deg)
      scale(1)!important;

    opacity:1!important;

    z-index:50;
}


/* LEFT 1 */

.ring-viewer-card[data-distance="-1"]{

    transform:
      translate3d(-132%,-50%,-100px)
      rotateY(23deg)
      scale(.76)!important;

    opacity:.62!important;

    z-index:40;
}


/* RIGHT 1 */

.ring-viewer-card[data-distance="1"]{

    transform:
      translate3d(32%,-50%,-100px)
      rotateY(-23deg)
      scale(.76)!important;

    opacity:.62!important;

    z-index:40;
}


/* LEFT 2 */

.ring-viewer-card[data-distance="-2"]{

    transform:
      translate3d(-185%,-50%,-280px)
      rotateY(38deg)
      scale(.58)!important;

    opacity:.30!important;

    z-index:30;
}


/* RIGHT 2 */

.ring-viewer-card[data-distance="2"]{

    transform:
      translate3d(85%,-50%,-280px)
      rotateY(-38deg)
      scale(.58)!important;

    opacity:.30!important;

    z-index:30;
}


/* LEFT 3 */

.ring-viewer-card[data-distance="-3"]{

    transform:
      translate3d(-222%,-50%,-420px)
      rotateY(48deg)
      scale(.45)!important;

    opacity:.12!important;
}


/* RIGHT 3 */

.ring-viewer-card[data-distance="3"]{

    transform:
      translate3d(122%,-50%,-420px)
      rotateY(-48deg)
      scale(.45)!important;

    opacity:.12!important;
}


/* ========================================================
   LIGHTBOX OPEN / CLOSE
   ======================================================== */

.ring-viewer{

    opacity:0;

    pointer-events:none;

    transition:
      opacity 240ms ease;

}

.ring-viewer.open{

    opacity:1;

    pointer-events:auto;
}


/* backdrop entrance */

.ring-viewer.open::before{

    animation:
      ringBackdropIn
      500ms
      ease
      both;

}

@keyframes ringBackdropIn{

    from{
        opacity:0;
        transform:scale(1.12);
    }

    to{
        opacity:.55;
        transform:scale(1.08);
    }

}


/* ========================================================
   BUTTON MOTION
   ======================================================== */

.carousel-arrow,
.ring-viewer-arrow,
.music-toggle,
.hero-map-link{

    transition:
      transform 180ms var(--ease-spring),
      background 180ms ease,
      box-shadow 180ms ease!important;
}

.carousel-arrow:hover,
.ring-viewer-arrow:hover{

    transform:scale(1.08);
}

.carousel-arrow:active,
.ring-viewer-arrow:active{

    transform:scale(.92);
}


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

@media(max-width:700px){

    .motion-reveal{

        transform:
          translate3d(0,26px,0);

    }


    .ring-viewer-card{

        transition:
          transform 460ms var(--ease-spring),
          opacity 300ms ease!important;

    }

}


/* ========================================================
   REDUCED MOTION
   ======================================================== */

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{

        animation-duration:.01ms!important;

        animation-iteration-count:1!important;

        transition-duration:.01ms!important;

        scroll-behavior:auto!important;

    }

}