@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: black;
}

@font-face {
    font-family: 'samsungfont';
    src: url(./iCiel-Samsung-Sharp-Sans-Bold/iCiel-SamsungSharpSans-Bold_SMCPS.ttf) format('truetype');
    font-weight: bold;
    font-style: normal;
}

h1, h2, h3, h4{
    font-family: "samsungfont", sans-serif;
    color: #fff;
}

h1{
    font-size: 9.5vw;
    font-weight: 700;
    line-height: 8vw;
    text-align: justify;
}

h2{
    font-size: 5.5vw;
    font-weight: 600;
    line-height: 6.5vw;
}

h3 {
    font-size: 3.2vw;
    font-weight: 700;
    line-height: 4vw;
}

h4 {
    font-size: 3.45vw;
    font-weight: 400;
    line-height: 4vw;
}

p{
    font-family: "Noto Serif", serif;
    color: #fff;
    font-size: 1.2vw;
    text-align: justify;
}

/* main */
.sc-1{
    width: 100%;
    margin-top: 8%;
    position: relative;
}

.sc-1 .main-img{
    width: 100%;
    height: auto;
}

.sc-1 h1{
    position: absolute;
    top: 5%;
    left: 50%;
    text-align: center;
    transform: translateX(-50%);
    width: auto;
}

.sc-1 h3 {
    position: absolute;
    top: 38%;
    left: 50%;
    text-align: center;
    transform: translateX(-50%);
    width: auto;
}

.sc-1 .watch-img-1{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 3px;
    filter: 
    drop-shadow(-5px -5px 5px rgba(255, 255, 255, 0.7)) 
    drop-shadow(5px -5px 5px rgba(255, 255, 255, 0.7));
    animation: glow 3.5s ease-in-out infinite;
}

@keyframes glow {
    0% {
      filter: 
        drop-shadow(-5px -5px 25px rgba(255, 255, 255, 0.7)) 
        drop-shadow(5px -5px 25px rgba(255, 255, 255, 0.7));
    }
    50% {
      filter: 
        drop-shadow(-5px -5px 40px rgba(255, 255, 255, 1)) 
        drop-shadow(5px -5px 40px rgba(255, 255, 255, 1));
    }
    100% {
      filter: 
        drop-shadow(-5px -5px 25px rgba(255, 255, 255, 0.7)) 
        drop-shadow(5px -5px 25px rgba(255, 255, 255, 0.7));
    }
}

.sc-2{
    width: 100%;
    height: auto;
}

.sc-2-1{
    width: 100%;
    text-align: center;
}

.sc-2 .sc-2-1 h4{
    width: 80%;
    margin: 5% auto 0;
    text-align: center;
}

.sc-2 .sc-2-1 p{
    width: 50%;
    margin: 3% auto 0;
}

.quote-1{
    width: 50%;
    margin-top: 6%;
}

.sc-2 .sc-2-2{
    text-align: center;
}

.sc-2 .sc-2-2 h2 {
    width: 66%;
    margin: 5% auto 0;
    text-align: center;
}

.quote-2{
    width: 50%;
    margin-top: 6%;
}

.sc-2 .sc-2-2 p {
    width: 50%;
    margin: 3% auto 0;
}

.sc-2 .sc-2-2 p:nth-of-type(1) {
    padding-top: 2%;
}

.quote-3{
    width: 50%;
    margin-top: 4%;
}

.sc-2-3{
    width: 100%;
    margin-top: 6%;
}

.bg-1{
    width: 100%;
}

.quote-4{
    width: 50%;
    margin-top: 4%;
}

.sc-2-5{
    width: 100%;
    margin-top: 4%;
    position: relative;
}

.sc-2-5 img{
    width: 100%;
}

/* animate */
.watch-img-1, h2, h4, p, .quote-1, .quote-2, .quote-3, .quote-4, .bg-1{
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); 
    will-change: opacity, transform; 
}

.watch-img-1.visible,
.quote-1.visible,
.quote-2.visible,
.quote-3.visible,
.quote-4.visible,
.bg-1.visible,
h2.visible,
h4.visible,
p.visible {
    opacity: 1;
    transform: translateX(0px);
}

h1,
h3{
    opacity: 0;
    /* Ẩn ban đầu */
    margin-top: -50px;
    /* Vị trí ban đầu (dưới) */
    transition: opacity 0.5s ease, margin-top 0.5s ease;
}

h1.visible,
h3.visible{
    opacity: 1;
    /* Hiển thị */
    margin-top: 0;
    /* Trượt lên vị trí gốc */
}

h1.visible, h2.visible, h4.visible{
    display: inline-block;
    padding: 3% 0px 0;
    -webkit-text-stroke: 0.08vw white;
    text-stroke: 1px white;
    color: transparent;
    background: linear-gradient(to right, white 50%, transparent 50%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: transparent 3s linear forwards;
}

@keyframes transparent {
    0% {
        background-position: right;
    }

    100% {
        background-position: left;
    } 
}


/* responsive */
@media screen and (max-width: 990px) {
    .sc-2 .sc-2-1 h4 {
        width: 70%;
    }

    .sc-2 .sc-2-1 p,
    .sc-2 .sc-2-2 p {
        width: 60%;
        margin: 3% auto 0;
    }

    p {
        font-size: 2vw;
    }

}

@media screen and (max-width: 720px) {
    .sc-2 .sc-2-1 h4 {
        width: 90%;
        margin: 10% auto 0;
        font-size: 3.5vw;
        line-height: 4vw;
    }
    
    .sc-2 .sc-2-1 p, .sc-2 .sc-2-2 p {
        width: 75%;
        margin: 3% auto 0;
    }
    
    p {
        font-size: 2.5vw;
    }
    
    .sc-2-3 {
        width: 100%;
        margin: 5% auto 0;
    }    

    .quote-1, .quote-2, .quote-3, .quote-4{
        width: 75%;
    }
}

@media screen and (max-width: 450px) {
    .sc-1 h1 {
        top: 2%;
        font-size: 11vw;
        line-height: 11.5vw;
    }

    .sc-1 h3 {
        top: 35%;
        width: 80%;
        font-size: 5.2vw;
        line-height: 6vw;
    }

    .sc-2 .sc-2-1 h4 {
        width: 95%;
        margin: 5% auto 0;
        font-size: 4.5vw;
        line-height: 5.3vw;
    }

    h4 {
        font-size: 3.8vw;
        line-height: 4.3vw;
    }

    .sc-2 .sc-2-1 p, .sc-2 .sc-2-2 p {
        width: 85%;
        margin: 3% auto 0;
    }

    p {
        font-size: 3.6vw;
    }

    .sc-2 .sc-2-2 h2 {
        width: 95%;
        margin: 5% auto 0;
    }

    h2 {
        font-size: 7vw;
        line-height: 8vw;
    }

    .quote-1, .quote-2, .quote-3, .quote-4{
        width: 100%;
    }
}