@import url('https://fonts.googleapis.com/css2?family=Salsa&display=swap');
    
    /* Css Reset */

    body{ 
        overflow: hidden;
        background-color: #ca86ec;
    }
    
    img{
        width: 20vw;
    }

    .dd{
         position: absolute;
  bottom: 0px; /* Distância do fundo */
  right: -70px;
  width: 40vw;
    }
    * { margin: 0; padding: 0; font-family: "Salsa", cursive; }
    *, *::before, *::after { box-sizing: border-box; }
    body { min-height: 100dvh; }
    input, button, textarea, select { font: inherit; }
    p { text-wrap: pretty; }
    h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
    img, video, svg { height: auto; max-width: 100%; }
    @media (prefers-reduced-motion: reduce)  {
    *, *::before, *::after { 
    animation-duration: 0.01ms !important; 
    animation-iteration-count: 1 !important; 
    transition-duration: 0.01ms !important; 
    scroll-behavior: auto !important;
    transition: none;}}
    
    /* Variables */
    
    :root{
        --color-background: #e3b8ea;
        --color-primary: #802daf;
        --color-secondary: #9e66e2;
        --color-accent: #ca86ec;
        --color-sheet: #FCFFE7;
        --color-text: #d89efa;
        
        /* --color-primary: #49108B;
        --color-secondary: #49108B;
        --color-background: #F3F8FF;
        --color-accent: #E26EE5;
        --color-sheet: #FFFFFF;
        --color-text: #7E30E1; */

        /* --color-primary: #EB455F;
        --color-secondary: #EB455F;
        --color-background: #FFFFFF;
        --color-accent: #BAD7E9;
        --color-sheet: #FCFFE7;
        --color-text: #2B3467; */

        /* --color-primary: #;
        --color-secondary: #;
        --color-background: #;
        --color-accent: #;
        --color-sheet: #;
        --color-text: #; */
        
        --silver: #AAAAAA;
        --white: #FFFFFF;
    }

    /* Letter Styles */
    body {
        background-color: var(--color-background);
        width: 100dvw;
        height: 100dvh;
        display: flex;
        gap: 5vh;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .brand, .letter{
        transition: 1s ease-in-out;
    }
    
    .letter{
        margin-bottom: 0vh;
        width: 20vw;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        animation: letter-lift 3s ease-in-out infinite;
    }
    
    .brand{
        position: absolute;
        left: 0%;
        top: 0%;
        text-align: center;
        color: var(--color-primary);
        font-size: .4rem;
        opacity: .8;
        margin: 1rem;
        border-radius: 1em;
    }
    
    .envelope{
        position: relative;
        display: flex;
        cursor: pointer;
        justify-content: center;
        width: 80vw;
        aspect-ratio: 5/3;
        background-color: var(--color-primary);
       
    }
    
    .envelope::after{
        content: '';
        position: absolute;
        bottom: 0;
        border-left: 80vw solid var(--color-accent);
        border-top: calc(calc(80vw * 3) / 5) solid transparent;
        pointer-events: none;
        z-index: 4;
    }
    .envelope::before{
        content: '';
        pointer-events: none;
        position: absolute;
        bottom: 0;
        border-right: 80vw solid var(--color-text);
        border-top: calc(calc(80vw * 3) / 5) solid transparent;
        transform: perspective(400px);
        z-index: 3;
    }
    
    .envelopeHeader{
        bottom: 0;
        left: 0;
        padding: 5%;
        list-style: none;
        position: absolute;
        color: var(--color-text);
        z-index: 5;
    }
    
    .envelopeHeader li{
        display: flex;
        font-size: calc(1.4vw + 1vh);
        text-transform: capitalize;
        gap: .4rem;
    }
    
    .envelopeHeader li p:last-child{
        color: var(--color-secondary);
    }
    
    .letterSheet{
        display: flex;
        justify-content: center;
        flex-direction: column;
        cursor: pointer;
        transition: 1s ease-in-out;
        width: 90%;
        padding: 5%;
        gap: 5%;
        height: 100%;
        background-color: var(--color-sheet);
    }
    
    .letterSheet__title{
        width: 90%;
        color: var(--color-primary);
        font-size: calc(1.5vw + 1.5vh);
    }
    .letterSheet__text{
        color: var(--color-text);
        font-size: calc(2vw + 1vh);
    }
    
    .cover{
        position: absolute;
        width: 100%;
        height: 100%;
        fill: var(--color-secondary);
        z-index: 5;
        transform-origin: top;
    }
    
    .shadowLetter{
        display: flex;
        justify-content: center;
        position: relative;
        width: 50%;
        margin-top: 5%;
        margin-bottom: 3%;
        opacity: .3;
        height: 1%;
        background-color: var(--silver);
        animation: shadow-lift 3s ease-in-out infinite;
        border-radius: 100% 100% 100% 100%;
    }
    
    .letterSheet-up{
        transform: translateY(-10%);
        z-index: 2;
    }
    
    .open{
        fill: var(--color-primary);
        animation: open-letter 2s ease-in-out forwards;
    }
    
    .zoomIn{
        animation: zoom-sheet-up 2s ease forwards;
        text-rendering: optimizeLegibility;
    }
    
    .clickHere{
        position: absolute;
        pointer-events: none;
        top: 30%;
        left: 50%;
        width: 30vw;
        max-width: 300px;
        opacity: .3;
        aspect-ratio: 1/1;
        border-radius: 50%;
        animation: tap 4s ease infinite forwards;
        z-index: 10;
    }
    
    .clickHere path{
        stroke: var(--silver);
    }
    
    /* Animations */
    
    @keyframes zoom-sheet-up {
        0%{
            transform: translate(0%, -10%)
        } 30%{
            transform: translate(0%,-100%) ;
        } 100%{
            transform: translate(0%, -30%) ;
            z-index: 10;
        }
    }

    @keyframes tap {
        0%, 20%, 40%, 100%{
            opacity: 0;
        }10%,30%{
            opacity: .5;
        }
    }

    @keyframes open-letter{
        0%{
            transform: rotateX(0deg);
            fill: var(--color-secondary);
        }49%{
            fill: var(--color-secondary);
        }50%{
            z-index: 2;
            fill: var(--color-primary);
        }100%{
            transform: translateY(1px) rotateX(180deg);
            fill: var(--color-primary);
            z-index: 2;
        }
    }
    
    @keyframes letter-lift{
        0%,100%{
            transform: translateY(0);
        }60%{
            transform: translateY(-2%);
        }
    }
    
    @keyframes shadow-lift {
        0%,100%{
            transform: scale(1.1);
        }60%{
            transform: scale(1);
        }
    }

    @media (orientation: landscape) {

        .letter{
            width: 50vw;
        }

        .envelope{
            transform: scale(.7) translateY(20%);
        }
        .letterSheet__title{
            font-size: calc(2vw + 3vh);
        }
        .letterSheet__text{
            font-size: calc(1vw + 2vh);
        }
        .shadowLetter{
            margin-top: 0%;
            width: 40vw;
            min-height: 3%;
        }
    }

    @media screen and (max-width: 600px) {


            
    img{
        width: 60vw;
    }

    .dd{
         position: absolute;
  bottom: 0px; /* Distância do fundo */
  right: -50px;
  width: 140vw;
    }

 
          .letterSheet{
        display: flex;
        justify-content: center;
        flex-direction: column;
        cursor: pointer;
        transition: 1s ease-in-out;
        width: 90%;
        padding: 5%;
        gap: 5%;
        height: 10vh;
        background-color: var(--color-sheet);
    }

 .envelope{
    position: relative;
    display: flex;
    cursor: pointer;
    justify-content: center;
    width: 80vw;
    aspect-ratio: 5/3;
    background-color: var(--color-primary);
   
}


            

    }