/* ==========================================================
   Wedding Invitation
   style.css
========================================================== */

/* =========================
   VARIABLES
========================= */

:root{
    --bg:#faf4eb;
    --paper:#fffdf9;

    --text:#5b4642;
    --title:#6e5550;
    --accent:#9b726d;

    --line:#eadfce;

    --radius:30px;

    --shadow:0 18px 45px rgba(115,90,70,.08);

    --transition:.35s ease;

}

/* =========================
   RESET
========================= */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:
    radial-gradient(circle at center,
    #fffdfa 0%,
    #faf4eb 55%,
    #f3e9dd 100%);

    color:var(--text);

    font-family:"Montserrat",sans-serif;

    overflow-x:hidden;

}

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

    color:inherit;

}

main{

    width:100%;

    position:relative;

}

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

.hero{

    position:relative;

    min-height:100svh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    padding:30px 28px;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at center,

    rgba(255,255,255,.42) 0%,

    rgba(255,255,255,0) 68%);

    pointer-events:none;

    z-index:0;

}

.hero-content{

    position:relative;

    z-index:5;

    width:100%;

    max-width:470px;

    text-align:center;

}

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

.flower{

    position:absolute;

    pointer-events:none;

    user-select:none;

    z-index:1;

}

.flower-top{

    width:820px;

    left:-75px;

    top:-55px;

}

.flower-top-right{

    width:470px;

    right:-40px;

    top:-25px;

}

.flower-bottom{

    width:620px;

    right:-80px;

    bottom:-50px;

}

.flower-bottom-left{

    width:320px;

    left:-25px;

    bottom:-20px;

}

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

.invite{

    margin-top:78px;

    margin-bottom:62px;

    font-size:15px;

    line-height:2;

    letter-spacing:.30em;

    text-transform:uppercase;

    color:#9b736d;

}

h1{

    font-family:"Cormorant Garamond",serif;

    font-size:66px;

    font-style:italic;

    font-weight:300;

    line-height:1.05;

    color:#66504b;

    margin:0;

}

h1 span{

    display:block;

    margin:18px 0;

    font-size:56px;

    font-style:italic;

    color:#9a726d;

}

.date{

    margin-top:56px;

    font-size:21px;

    letter-spacing:.18em;

    color:#6b5550;

}

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

.scroll-indicator{

    margin-top:42px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.scroll-indicator span{

    display:block;

    font-size:34px;

    line-height:1;

    color:#b38b84;

    font-family:"Cormorant Garamond",serif;

    animation:arrowFloat 2.2s ease-in-out infinite;

    user-select:none;

}

@keyframes arrowFloat{

    0%,100%{

        transform:translateY(0);

        opacity:.6;

    }

    50%{

        transform:translateY(8px);

        opacity:1;

    }
}
/* ==========================================================
   SECTIONS
========================================================== */

.section{

    position:relative;

    min-height:100svh;

    padding:72px 30px 56px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    text-align:center;

    overflow:hidden;

}

.section.compact{

    padding-top:130px;

}

.section.intro{

    justify-content:flex-start;

    padding-top:140px;

}

.section:nth-child(even){

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

}

.botanical{

    width:68px;

    margin:0 auto 24px;

    opacity:.92;

}
.section h2{

    font-family:"Cormorant Garamond",serif;

    font-size:54px;

    font-weight:400;

    color:#745954;

    margin:0 0 42px;

    line-height:1.08;

}

.section p{

    max-width:620px;

    margin:0 auto 30px;

    font-size:20px;

    line-height:1.85;

    color:var(--text);

}

.card{

    max-width:500px;

    margin:42px auto 0;

    padding:36px 30px;

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

    border-radius:32px;

    border:1px solid rgba(190,170,150,.18);

    backdrop-filter:blur(8px);

    box-shadow:0 18px 45px rgba(120,90,70,.08);

}

.card h3{

    font-family:"Cormorant Garamond",serif;

    font-size:32px;

    font-weight:500;

    color:var(--title);

    margin-bottom:18px;

}

.card p{

    margin:0;

    font-size:19px;

    line-height:1.8;

}

.button{

    display:inline-block;

    margin-top:32px;

    padding:17px 42px;

    border-radius:999px;

    background:#97706a;

    color:white;

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:14px;

    transition:.3s;

}

.button:hover{

    transform:translateY(-2px);

    background:#84605b;

}

.section-arrow{

    margin-top:48px;

    padding-top:28px;

    font-size:24px;

    color:#9b726d;

    cursor:pointer;

}

.section{

    opacity:0;

    transform:translateY(30px);

    transition:.7s ease;

}

.section.visible{

    opacity:1;

    transform:none;

}

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

.timeline{

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

    margin:55px auto 0;

}

.event{

    display:grid;

    grid-template-columns:78px 1fr;

    column-gap:22px;

    align-items:flex-start;

}

.event:not(:last-child){

    margin-bottom:34px;

}

.time{

    font-family:"Cormorant Garamond",serif;

    font-size:27px;

    text-align:right;

    color:#7b5f59;

    line-height:1.4;

}

.text{

    position:relative;

    padding-left:42px;

    text-align:left;

    font-size:20px;

    line-height:1.55;

}

.dot{

    position:absolute;

    left:0;

    top:3px;

    width:14px;

    height:14px;

    border-radius:50%;

    background:#b7867f;

    border:3px solid var(--paper);

    z-index:2;

}

.event:not(.last) .text::after{

    content:"";

    position:absolute;

    left:6px;

    top:17px;

    width:2px;

    height:calc(100% + 36px);

    background:rgba(183,134,127,.45);

}

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

#countdown{

    display:grid;

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

    gap:18px;

    max-width:340px;

    margin:42px auto 34px;

}

.count-card{

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

    border-radius:24px;

    padding:22px 10px;

    box-shadow:0 12px 30px rgba(120,90,70,.08);

    border:1px solid rgba(180,160,145,.15);

    backdrop-filter:blur(8px);

}

.count-card span{

    display:block;

    font-family:"Cormorant Garamond",serif;

    font-size:56px;

    color:#7b5f59;

    line-height:1;

}

.count-card small{

    display:block;

    margin-top:10px;

    font-size:15px;

    letter-spacing:.12em;

    text-transform:uppercase;

    color:#9b726d;

}

/* ==========================================================
   BACK TO TOP
========================================================== */

.back-to-top{

    margin-top:56px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    color:#a97d75;

    cursor:pointer;

    transition:.3s;

    animation:arrowFloat 2.2s ease-in-out infinite;

}

.back-to-top:hover{

    transform:translateY(-4px);

    color:#8e6760;

}