/* create a variable that holds the progress percentage
you can't animate custom properties by default; you have
to define what kind of value it is with @property */
@property --progress {
    initial-value: 0;
    inherits: false;
    syntax: '<number>';
}

@keyframes progress {
    from {
        --progress: 0;
    }
    to {
        --progress: 1;
    }
}

.shape-container {
    --PI: 3.1415;
    --WAVE-COUNT: 2; 
    --TOTAL-ANGLE: calc(var(--WAVE-COUNT) * 2 * var(--PI)); 
    --UNIT: 1vh; 
    --r: 5; 
    --CONTAINER-WIDTH: 110; 
    --x: calc(var(--progress) * var(--CONTAINER-WIDTH)); 
    --ROTATION-PER-LENGTH-UNIT: calc(var(--TOTAL-ANGLE) / var(--CONTAINER-WIDTH));
    --alpha-reference-angle: calc(var(--ROTATION-PER-LENGTH-UNIT) * var(--x) * 1rad); 
    --y: calc(-1 * var(--r) * sin(var(--alpha-reference-angle))); 
    --x-with-unit: calc(var(--x) * var(--UNIT));
    --y-with-unit: calc(var(--y) * var(--UNIT));
    --tan: calc(-1 * var(--r) * var(--ROTATION-PER-LENGTH-UNIT) * cos(var(--alpha-reference-angle)));
    --beta-tangent-angle: atan(var(--tan));
    position: absolute;
    top: 100px;
    left: 0;
    width: calc(var(--CONTAINER-WIDTH) * var(--UNIT));
    animation: progress 4s linear infinite;
}

.shape {
    --shape-width: 20px;
    --shape-height: 4px;
    position: absolute;
    z-index: 1;
    top: calc( -0.5 * var(--shape-height));
    left: calc( -0.5 * var(--shape-width));
    width: var(--shape-width);
    height: var(--shape-height);
    translate: var(--x-with-unit) var(--y-with-unit);
    rotate: var(--beta-tangent-angle);
}



.izq { transform: rotate(310deg); transform-origin: left bottom; left: -5%; } 
.der { transform: rotate(230deg); transform-origin: left bottom; left: 105%; }
.t1{ top: 105%; }
.t2{ top: 75%; }
.t3{ top: 50%; }
.t4{ top: 25%; }
.der.t1{ top: 100%; }
.der.t2{ top: 70%; }
.der.t3{ top: 45%; }
.der.t4{ top: 20%; }
.d1{animation-delay: .5s;}
.d2{animation-delay: 1s;}
.d3{animation-delay: 1.5s;}
.d4{animation-delay: 2s;}
.d5{animation-delay: 2.5s;}

.cont-uno {
    position: fixed;
    width: 100%;
    max-width: 480px;
    height: 100vh;
    overflow: hidden;
    display: block;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    transition: opacity 1s ease;
}

.cont-uno h2 {
    position: absolute; color: #A87144; left: 5%; right: 5%; text-align: center; top: 50%; transform: translateY(-50%); font-family: "Pinyon Script", cursive; font-weight: 400; font-style: normal; font-size: 30px;
}

body {
    margin: 0;
}
.cont-dos {
    width: 100%;
    max-width: 480px;
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background-color: #E8C0BE;
    margin: 0 auto;
    display: none;
    font-family: "Times New Roman", Times, serif;
    font-weight: 400;
    font-style: normal;
    opacity: 0;
    transition: opacity 1s ease;
}

.cormorant-sc-regular { font-family: "Cormorant SC", serif; }
.libre-bodoni { font-family: "Libre Bodoni", serif; font-optical-sizing: auto; font-style: italic;}
.cormorant-garamond { font-family: "Cormorant Garamond", serif; font-optical-sizing: auto; }
.montserrat { font-family: "Montserrat", sans-serif; font-optical-sizing: auto; ont-style: normal; }

sectio { padding-bottom: 30vw;}
[hero] {
    position: relative; text-align: center;
    [flores] { width: 124%; position: absolute; top: 0; left: -12%;}
    [nombre] { width: 94%; position: absolute; top: 6vw; left: 0%; height: auto;}
    video { display: block; width: 90%; left: 5%; border-radius: 50%; position: absolute; top: 33vw;}
    #countdown { display: flex; justify-content: center; align-items: baseline; padding-top: 150vw; position: relative; color: white; font-size: 36px; }
    .numero { margin: 0 10px; }
    h1 { position: relative; color: white; font-size: 64px; margin-top: 0; font-weight: 400;}
    p { color: #A87144; font-size: 36px; margin: 15vw 0 0;}
    p img { width: 90px; vertical-align: middle}
    h3 { color: #A87144; font-size: 48px; margin: 0;}
    #sello { width: 50vw; margin: 0 auto -22vw; }
}

[marip] {
    position: relative; width: 100%; height: 1px; z-index: 1;

    img { width: 30vw; position: absolute; right: 0; top: -20vw; }
    img:first-child { width: 25vw; right: 20vw; top: -5vw; }
    img:last-child { top: 5vw; }

    &.izqe {
        img { left: 0; right: auto; scale: -1 1; }
        img:first-child { left: 20vw; }
    }
}

[intro] {
    background-size: contain; padding: 12vw 5vw;
    
    h2 { font-size: 32px; font-weight: 400; text-align: center; margin: 0; }
    h3 { font-size: 24px; font-weight: 400; text-align: center; margin: 0; }
    h4 { font-size: 14px; font-weight: 400; text-align: center; margin: 10px 0; padding: 10px 0; border-top: 2px solid #A87144; border-bottom: 2px solid #A87144; }
    li { font-size: 1.2em; font-weight: 700; }
    p { font-size: 1.2em; }
}

[fecha] {
    padding: 15vw 5vw;
    
    h2 { font-weight: 400; color: #9B5F36; text-align: center; position: relative; }
    h2:before { content: ""; display: block; position: absolute; left: 50%; top: -30%; transform: translateX(-50%); background-color: #BA8D2D; height: 3px; width: 50%;}
    h2:after { content: ""; display: block; position: absolute; left: 50%; bottom: -30%; transform: translateX(-50%); background-color: #BA8D2D; height: 3px; width: 50%;}
    div { position: relative; margin-top: 15vw; padding: 5vw; text-align: center;}
    img.arco { position: absolute; width: 96vw; left: -3vw; top: -10vw; }
    date { display: flex; justify-content: space-between; flex-wrap: wrap;
        h4 { font-weight: 400; font-size: 24px; text-align: center; margin: 22vw 0 0; width: 100%;}
        h3 { font-weight: 400; font-size: 70px; text-align: center; width: 100%; color: #A87144; margin: 0 }
        p { font-weight: 700; font-size: 24px; margin: 22vw 0 0; border: 1px solid #404570; border-width: 1px 0; padding: 5px 10px; margin: 5vw 0 3vw; }
    }
    div > p { width: 70%; margin: 0 auto 3vw; position: relative; text-align: center; font-size: 12px;}
    div > p:before { content: ""; display: block; position: absolute; left: 100%; top: 50%; background-color: #404570; height: 1px; width: 20%;}
    div > p:after { content: ""; display: block; position: absolute; right: 100%; top: 50%; background-color: #404570; height: 1px; width: 20%;}
    a { color: #9B5F36; background-color: #E5D1C5; padding: 5px 20px; border-radius: 50px; display: inline-block; margin: 3vw auto; }
    .colm { position: absolute; top: 70vw; left: -25vw; width: 45vw; }
    .sello { width: 30%; margin: 4vw auto -10vw; display: block;}
}

[crono] {
    padding: 5vw 7vw; text-align: center; position: relative;
    h2 { font-weight: 400; color: #9B5F36; position: relative;  width: 90%; margin: 0 auto}
    h2:after { content: ""; display: block; position: absolute; left: 50%; bottom: -30%; transform: translateX(-50%); background-color: #BA8D2D; height: 3px; width: 50%;}
    h2 + p { margin-top: 10vw; font-size: 20px; }
    .crono { position: relative;}
    span { position: absolute; right: 238px; top: 30px; background-color: #9B5F36; bottom: 20px; width: 2px;}
    .crono div {
        display: flex; justify-content: end; align-items: center;
        img { width: 40px; margin-right: auto;}
        time { color: #9B5F36; margin-right: 20px; background-color: #E8C0BE; position: relative; }
        p { text-align: left; width: 200px; font-size: 16px; }
    }
    div + p {margin-top: 10vw; font-size: 20px;}
    
}

.carru { display: flex; overflow-x: scroll; margin-bottom: 10px;}
.carru img { flex: 0 0 50vw; height: 50vw; object-fit: cover; margin-right: 5vw;}
.lightbox-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.9); display:flex; justify-content:center; align-items:center; z-index:9999; animation:fade .25s ease; } 
.lightbox-overlay img{ max-width:90%; max-height:90%; border-radius:14px; animation:zoom .25s ease; }
.lightbox-close{ position:absolute; top:25px; right:40px; font-size:40px; color:white; cursor:pointer; }

@keyframes fade{ from{opacity:0} to{opacity:1} }
@keyframes zoom{ from{transform:scale(.8)} to{transform:scale(1)} }

[vesti] {
    background-size: cover; background-size: contain; padding: 5vw 0 5vw 5vw;
    h2 { font-size: 30px; font-weight: 400; text-align: center; margin: 0 5vw 0 0; }
    h3 { font-size: 24px; font-weight: 400; text-align: center; margin: 10px 5vw 0 0; }
    h4 { font-size: 14px; font-weight: 400; text-align: center; margin: 10px 5vw 10px 0; padding: 10px 0; border-top: 2px solid #A87144; border-bottom: 2px solid #A87144; }
    p { margin-right: 5vw;}
}

[sobre] {
    background-size: cover; margin: 15vw 5vw 20vw; padding: 5vw; text-align: center;
    
    h2 { font-weight: 400; text-align: center; position: relative; "Times New Roman", Times, serif; }
    h2:before { content: ""; display: block; position: absolute; left: 50%; top: -30%; transform: translateX(-50%); background-color: #BA8D2D; height: 3px; width: 30%;}
    h2:after { content: ""; display: block; position: absolute; left: 50%; bottom: -30%; transform: translateX(-50%); background-color: #BA8D2D; height: 3px; width: 30%;}
    .sobre {width: 20%;}
    .sello { height: 30vw; margin: 4vw auto -20vw; display: block;}
}

[fotos] {
    padding: 5vw 0 0 2vw;
}

[lugar] {
    background-size: cover; text-align: center; padding: 35vw 5vw 0;
    .papel { padding: 7vw 5vw 20vw; }
    p { font-family: "Cormorant Garamond", serif; font-optical-sizing: auto; }
    h2, h3 { color: #A87144; }
    a { color: #9B5F36; background-color: #CCAD98; padding: 5px 20px; border-radius: 50px; display: inline-block; margin: 0 3vw; }
}

[confi] {
    background-size: cover; margin: 15vw 5vw 20vw; padding: 5vw 10vw; text-align: center; position: relative;
    h2 { font-weight: 400; text-align: center; position: relative; margin-bottom: 10vw }
    h2:after { content: ""; display: block; position: absolute; left: 50%; bottom: -30%; transform: translateX(-50%); background-color: #BA8D2D; height: 3px; width: 30%;}
    p { font-family: "Cormorant Garamond", serif; font-optical-sizing: auto; font-size: 20px; }
    img { position: absolute; bottom: 0; left: -30vw; width: 45vw; }
    a { color: #9B5F36; background-color: #E5D1C5; padding: 5px 20px; border-radius: 50px; display: inline-block; margin: 3vw auto; cursor: pointer; }
    span { color: #9B5F36; }
}

[despe] {
    background-size: cover; text-align: center; padding: 35vw 5vw 0;
    div { padding: 7vw 5vw 20vw; }
    h2 { font-size: 24px; font-weight: 400; text-align: center; margin: 0; }
    h3 { font-size: 14px; font-weight: 400; text-align: center; margin: 10px 0; padding: 10px 0; border-top: 2px solid #A87144; border-bottom: 2px solid #A87144; }
}

[modal] {
    position: fixed; inset: 0; background: rgba(0,0,0,.6); align-items: center; justify-content: center; top: 0; left: 0; width: 100%; height: 100%; overflow-y: scroll; z-index: 9999; display: none;
    
    form { padding: 5vw; width: 80vw; margin: 5vw; background-size: contain; text-align: center; position: absolute; top: 0; }
    h2 { font-weight: 400; text-align: center; position: relative; margin-bottom: 10vw }
    h2:after { content: ""; display: block; position: absolute; left: 50%; bottom: -30%; transform: translateX(-50%); background-color: #BA8D2D; height: 3px; width: 30%;}
    span { color: #BA8D2D; }
    button { color: #9B5F36; background-color: #CCAD98; padding: 5px 20px; border-radius: 50px; display: inline-block; margin: 5vw auto; cursor: pointer; box-shadow: none; border: none;}
    img { height: 30vw; margin: 4vw auto -20vw; display: block;}
    select { width: 50%; font-size: 18px; }
}

#abrirInvitacionBtn{
    opacity: 0;
    pointer-events:none;
    cursor: pointer;
    position:absolute;
    bottom: 18vh;
    left:50%;
    transform:translateX(-50%);
    background:#A87144;
    color:white;
    padding:14px 26px;
    border-radius:40px;
    transition:.6s opacity ease;
}

#abrirInvitacionBtn.show{
    opacity:1;
    pointer-events:auto;
}

#musicToggle{
    position: fixed;
    bottom: 25px;
    right: 25px;
    background: #fff;
    color: #000;
    border: none;
    padding: 12px 18px;
    font-size: 14px;
    letter-spacing: 1px;
    border-radius: 30px;
    cursor: pointer;
    z-index: 9999;
    transition: 0.3s ease;
    opacity: .5;
}

#musicToggle:hover{
    transform: scale(1.08);
}

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

    #abrirInvitacionBtn {

        transform: none !important;
        opacity:1;

    }

}