@import url('https://fonts.googleapis.com/css2?family=Trirong:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.main-container {
    container-type: inline-size;
    container-name: main;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    background-image: url(path/bg.jpg);
    color: #f4f4f4;
    font-family: "Trirong", serif;
    overflow-x: hidden;
}

header {
    position: fixed;
    width: 100%;
    background-color: #f4f4f4;
    padding: 4px 0;
    text-align: center;
    color: #111;
    z-index: 909;
    transition: top 0.4s ease-in-out;
}
  
header p, header a {
    font-family: "Trirong", serif;
    font-size: 1rem;
    letter-spacing: 0.08em;
    color: #111;
    text-decoration: none;
}

#main-header {
    transition: top 0.4s ease-in-out;
}

#main-header.hidden {
    top: -100px; /* Adjust based on header height */
    transition: top 0.4s ease-in-out;
}

.banner {
    background-image: url(path/Cover.jpg);
    background-position: center; 
    background-size: cover; 
    background-repeat: repeat;
    position: sticky;
    width: 100%;
    height: 700px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    z-index: -40;
}

#logo {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 120vw; 
    max-width: 400px; 
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
}


.path{
  content: '';
  position: absolute;
  width: 100%;
  height: 200px;
  top: 500px;
  background: linear-gradient(to top,#111111,transparent);
  z-index: 200;
}

#cloudleft, #cloudright {
    position: absolute;
    mix-blend-mode: screen;
    top: 20px;
    width: 150%;
    filter: brightness(30%);
    z-index: 300;
    transition: left 0.3s ease-out, right 0.3s ease-out, transform 0.3s ease-out;
}

#cloudleft {
    left: 0;
    transform: translateX(-120%);
}

#cloudright {
    right: 0;
    transform: translateX(120%);
    filter: brightness(25%);
}

#treeleft1, #treeright1 {
    position: absolute;
    margin-top: 3%;
    width: 80%;
    z-index: -10;
    transition: left 0.3s ease-out, right 0.3s ease-out, transform 0.3s ease-out;
    opacity: 1;
}

#treeleft1 {
    left: -12%;
    transform: translateX(120%);
}

.treeleft {
    position: absolute;
    left: -12%;
    width: 42%;
    rotate: 15deg;
    margin-top: 0;
    margin-bottom: 0;
    z-index: -200;
    filter: brightness(50%);
    opacity: 1;
}

.treeright {
    position: absolute;
    right: -12%;
    width: 42%;
    margin-top: 12px;
    margin-bottom: 0px;
    z-index: -200;
    filter: brightness(40%);
    opacity: 1;
}

#treeright1 {
    right: -12%;
    transform: translateX(-120%);
}

#treeleft2, #treeright2 {
    position: absolute;
    margin-top: 0%;
    width: 50%;
    z-index: 300;
    transition: left 0.3s ease-out, right 0.3s ease-out, transform 0.3s ease-out;
}

#treeleft2 {
    left: -24%;
    transform: translateX(120%);
}

#treeright2 {
    right: 24%;
    transform: translateX(-120%);
}


.container {
    margin: 600px auto;
    max-width: 600px;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
}
  
.container.visible {
    opacity: 1;
    transform: translateY(0);
}

.line {
    width: 12vw;
    height: 1px;
    background-color: #f4f4f4;
    margin: 10px auto;
}

.container h1{
    font-weight: 400;
    font-style: normal;
    font-size: 3rem;
    letter-spacing: 16px;
    margin-top: 8px;
    margin-bottom: 8px;
    transition-delay: 300ms;
}

.container h3{
    font-weight: 300;
    font-style: normal;
    font-size: 2rem;
    letter-spacing: 4px;
    margin-top: 8px;
    margin-bottom: 8px;
    transition-delay: 300ms;
}

.container h5{
    font-weight: 300;
    font-style: normal;
    font-size: 1.8rem;
    letter-spacing: 4px;
    margin-top: 8px;
    margin-bottom: 8px;
    transition-delay: 300ms;
}

.container p{
    font-weight: 200;
    font-style: normal;
    text-align: center;
    font-size: 1.6rem;
   letter-spacing: 4%;
   margin-top: 8px;
    margin-bottom: 8px;
    transition-delay: 600ms;
}

section h1{
    text-align: center;
    font-weight: 400;
    font-style: normal;
    font-size: 3rem;
    letter-spacing: 16px;
    margin-top: 8px;
    margin-bottom: 8px;
    transition-delay: 300ms;
}

.group{
    width: 80%;
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    z-index: 0;
}

#mov01, #mov02, #mov03, #mov04 {
    position: absolute;
    width: 300px;
    height: 400px;
    z-index: 200;
    box-shadow: 10px 10px 20px #000;
}

/* Start all items off-screen initially */
#mov01 {
    top: 1000px;
    left: 0%;
    transform: translateX(-60%);
    rotate: -15deg;
}

#mov02 {
    top: 1100px;
    right: 0;
    transform: translateX(70%);
    rotate: 25deg;
}

#mov03 {
    top: 1760px;
    left: 0;
    transform: translateX(-50%);
    rotate: 10deg;
}

#mov04 {
    top: 1800px;
    right: 0;
    transform: translateX(60%);
    rotate: -5deg;
}

#mov05 {
    position: absolute;   /* <-- Needed to position it on the page */
    top: 3200px;
    left: 50%;
    transform: translateX(-50%); /* Center the element itself */
    rotate: 0deg;
}

#mov06 {
    position: absolute;
    top: 4240px;
    left: 35%;
    transform:scale(1);
    z-index: 10; /* optional */
    transition: transform 0.3s ease-out; /* Optional for smoother effect */
}

#mov07 {
    position: absolute;
    top: 5080px;
    left: 35%;
    transform: scale(1);
    z-index: 10; /* optional */
    transition: transform 0.3s ease-out; /* Optional for smoother effect */
}

#mov08 {
    position: absolute;
    top: 5840px;
    left: 35%;
    transform: scale(1);
    z-index: 10; /* optional */
    transition: transform 0.3s ease-out; /* Optional for smoother effect */
}

#mov09 {
    position: absolute;
    top: 6880px;
    left: 35%;
    transform: scale(1);
    z-index: 10; /* optional */
    transition: transform 0.3s ease-out; /* Optional for smoother effect */
}

#mov10 {
    position: absolute;
    top: 7720px;
    left: 35%;
    transform: scale(1);
    z-index: 10; /* optional */
    transition: transform 0.3s ease-out; /* Optional for smoother effect */
}

#mov11 {
    position: absolute;
    top: 8840px;
    left: 35%;
    transform: scale(1);
    z-index: 10; /* optional */
    transition: transform 0.3s ease-out; /* Optional for smoother effect */
}

#mov12 {
    position: absolute;
    top: 9720px;
    left: 35%;
    transform: scale(1);
    z-index: 10; /* optional */
    transition: transform 0.3s ease-out; /* Optional for smoother effect */
}

#mov13 {
    position: absolute;
    top: 11250px;
    left: 35%;
    transform: scale(1);
    z-index: 10; /* optional */
    transition: transform 0.3s ease-out; /* Optional for smoother effect */
}

#mov14 {
    position: absolute;
    top: 12540px;
    left: 35%;
    transform: scale(1);
    z-index: 10; /* optional */
    transition: transform 0.3s ease-out; /* Optional for smoother effect */
}

#leave01 {
    position: absolute;   /* <-- Needed to position it on the page */
    width: 500px;
    top: 3140px;
    left: 50%;
    transform: translateX(-50%); /* Center the element itself */
    rotate: 0deg;
    z-index: -10;
    transition: transform 0.3s ease-out;
}

#leave02 {
    position: absolute;   /* <-- Needed to position it on the page */
    width: 500px;
    top: 4180px;
    left: 50%;
    transform: translateX(-50%); /* Center the element itself */
    rotate: 0deg;
    z-index: -10;
    transition: transform 0.3s ease-out;
}

#leave03 {
    position: absolute;   /* <-- Needed to position it on the page */
    width: 500px;
    top: 5020px;
    left: 50%;
    transform: translateX(-50%); /* Center the element itself */
    rotate: 0deg;
    z-index: -10;
    transition: transform 0.3s ease-out;
}

#leave04 {
    position: absolute;   /* <-- Needed to position it on the page */
    width: 500px;
    top: 5780px;
    left: 50%;
    transform: translateX(-50%); /* Center the element itself */
    rotate: 0deg;
    z-index: -10;
    transition: transform 0.3s ease-out;
}

#leave05 {
    position: absolute;   /* <-- Needed to position it on the page */
    width: 500px;
    top: 6820px;
    left: 50%;
    transform: translateX(-50%); /* Center the element itself */
    rotate: 0deg;
    z-index: -10;
    transition: transform 0.3s ease-out;
}

#leave06 {
    position: absolute;   /* <-- Needed to position it on the page */
    width: 500px;
    top: 7660px;
    left: 50%;
    transform: translateX(-50%); /* Center the element itself */
    rotate: 0deg;
    z-index: -10;
    transition: transform 0.3s ease-out;
}

#leave07 {
    position: absolute;   /* <-- Needed to position it on the page */
    width: 500px;
    top: 8780px;
    left: 50%;
    transform: translateX(-50%); /* Center the element itself */
    rotate: 10deg;
    z-index: -10;
    transition: transform 0.3s ease-out;
}


#leave08 {
    position: absolute;   /* <-- Needed to position it on the page */
    width: 500px;
    top: 9760px;
    left: 50%;
    transform: translateX(-50%); /* Center the element itself */
    rotate: 20deg;
    z-index: -10;
    transition: transform 0.3s ease-out;
}


#leave09 {
    position: absolute;   /* <-- Needed to position it on the page */
    width: 500px;
    top: 11290px;
    left: 50%;
    transform: translateX(-50%); /* Center the element itself */
    rotate: 30deg;
    z-index: -10;
    transition: transform 0.3s ease-out;
}


.video-container {
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video covers the screen */
}

@media(prefers-reduced-motion) {
    .hidden{
        transition: none;}
}
#cast{
    margin-top: 80px;
    padding: 80px;
}
.grid{
    width: 88%;
    margin-inline: 8vw;
    text-align: center;
    position: relative;
    display: inline-grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    row-gap: 24px;
    justify-content: space-between;
    z-index: 900;
}

.card{
    padding: 16px;
    border: 5px solid #867250;
    width: 80%;
    text-align: center;
}

.card h1{
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: 4%;
    text-align: center;
}

.card h3{
    margin-top: 4px;
    font-size: 1.6rem;
    font-weight: 300;
    letter-spacing: 4%;
    text-align: center;
}

.card p{
    font-size: 1rem;
    font-weight: 200;
    letter-spacing: 4%;
    text-align: center;
    gap: 24px;
}
.card .box img{
    margin-inline: auto;
    width: 80%;
    height: 360px;
    padding-bottom: 16px;
    display: block;
}

.card button{
    font-family: "Trirong", serif;
    font-size: 1.2rem;
    width: 80%;
    padding-top: 4%;
    padding-bottom: 4%;
    text-decoration: none;
    background-color: transparent;
    color: #f4f4f4;
    border: 1px solid #f4f4f4;
    height: auto;
}

.card button a{
    text-decoration: none;
    list-style: none;
    color: #f4f4f4;
}

.card button:hover{
    background-color: #867250;
    color: #111111;
    border: 1px solid #f4f4f4;
    height: auto;
}

footer{
    bottom: 0;
    margin-top: 30px;
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: #f4f4f4;
    color: #111111;
    text-align: center;
}

.hidden {
    opacity: 0;
    transition: all 1.2s;
}

.show {
    filter: blur(0);
    opacity: 1;
}

/* Container context must be enabled via: container-type: inline-size; */
.main-container {
  container-type: inline-size;
}

@container (max-width: 768px) {
  header p {
    font-size: 0.9rem;
    letter-spacing: 2px;
  }

  .banner {
    height: 700px;
  }

  #logo {
    width: 80vw;
    max-width: 280px;
    margin-top: 60px;
  }

  #cloudleft, #cloudright {
    top: 120px;
    width: 250%;
    }

    .treeleft,.treeright{
        opacity: 0;
    }

  .container {
    margin-top: 300px;
    padding: 0 16px;
  }

  .container h1 {
    font-size: 2rem;
    letter-spacing: 8px;
  }

  .container h3 {
    font-size: 1.6rem;
  }

  .container h5 {
    font-size: 1.4rem;
  }

  .container p {
    font-size: 1.2rem;
  }

  #treeleft1, #treeright1 {
    margin-top: 0%;
    width: 120%;
    }  

  #mov01, #mov02, #mov03, #mov04 {
    width: 135px;
    height: 180px;
    transform: translateX(0);
  }
  #mov01 {
    top: 690px;
    left: 20%;
    transform: translateX(-180%) rotate(-3deg);
  }

  #mov02 {
    top: 750px;
    right: 20%;
    transform: translateX(180%) rotate(3deg);
  }

  #mov03 {
    top: 1860px;
    left: -20%;
    transform: translateX(-180%) rotate(3deg);
  }

  #mov04 {
    top: 1900px;
    right: -20%;
    transform: translateX(180%) rotate(-3deg);
  }

  #mov05 {
    top: 3120px;
    left: 0;
    transform: scale(0.6);
  }

  #mov06 {
    top: 3920px;
    left: -5%;
    transform: scale(0.6);
  }

  #mov07 {
    top: 5040px;
    left: -5%;
    transform: scale(0.6);
  }

  #mov08 {
    top: 5750px;
    left: -5%;
    transform: scale(0.6);
  }

  #mov09 {
    top: 6935px;
    left: -5%;
    transform: scale(0.6);
  }

  #mov10 {
    top: 7700px;
    left: -5%;
    transform: scale(0.6);
  }

  #mov11 {
    top: 8460px;
    left: -5%;
    transform: scale(0.6);
  }

  #mov12 {
    top: 9420px;
    left: -5%;
    transform: scale(0.6);
  }

  #mov13 {
    top: 10700px;
    left: -5%;
    transform: scale(0.6);
  }

    #leave01 {
        width: 300px;
        top: 2770px;
    }

    #leave02 {
        width: 300px;
        top: 3720px;
    }

    #leave03 {
        width: 300px;
        top: 4470px;
    }

    #leave04 {
        width: 300px;
        top: 5230px;
    }

    #leave05 {
        width: 300px;
        top: 6220px;
    }

    #leave06 {
        width: 300px;
        top: 7020px;
    }

    #leave07 {
        width: 300px;
        top: 8090px;
    }

    #leave08 {
        width: 300px;
        top: 9000px;
    }

    #leave09 {
        width: 300px;
        top: 10375px;
    }

  .grid {
    grid-template-columns: 1fr;
    margin-inline: auto;
    width: 90%;
  }

  .card {
    width: 100%;
    padding: 12px;
  }

  .card h1 {
    font-size: 1.5rem;
  }

  .card h3 {
    font-size: 1.2rem;
  }

  .card p {
    font-size: 0.9rem;
  }

  .card .box img,
  .card img {
    width: 100%;
    height: auto;
  }

  .card button {
    font-size: 1rem;
    width: 100%;
  }

  .video-container {
    height: 60vh;
  }

  footer {
    padding: 40px 16px;
  }
}

@container (max-width: 480px) {
  .banner {
    margin-top: 60px;
    height: 700px;
  }

  .video-container {
    padding-top: -20%;
  }

  #cloudleft, #cloudright {
    top: 400px;
    width: 250%;
    }
    .treeleft,.treeright{
        opacity: 0;
    }

  .container h1 {
    font-size: 1.6rem;
  }

  .container h3,
  .container h5 {
    font-size: 1.2rem;
  }

  .container p {
    font-size: 1rem;
  }

  #treeleft1, #treeright1 {
    margin-top: 0%;
    width: 150%;
    opacity: 0;
    }  
    
    #treeleft1 {
        left: -50%;
        transform: translateX(180%);
    }
    
    #treeright1 {
        right: -50%;
        transform: translateX(-180%);
    }

  #mov01, #mov02, #mov03, #mov04 {
    width: 135px;
    height: 180px;
    transform: translateX(0);
  }
  #mov01 {
    top: 780px;
    left: 0%;
    transform: translateX(-180%) rotate(-3deg);
  }

  #mov02 {
    top: 840px;
    right: 0%;
    transform: translateX(180%) rotate(3deg);
  }

  #mov03 {
    top: 1560px;
    left: -20%;
    transform: translateX(-180%) rotate(3deg);
  }

  #mov04 {
    top: 1600px;
    right: -20%;
    transform: translateX(180%) rotate(-3deg);
  }

  #mov05 {
    top: 2360px;
    left: 0;
    transform: scale(0.6);
  }

  #mov06 {
    top: 3200px;
    left: -5%;
    transform: scale(0.6);
  }

  #mov07 {
    top: 3910px;
    left: -5%;
    transform: scale(0.6);
  }

  #mov08 {
    top: 4660px;
    left: -5%;
    transform: scale(0.6);
  }

  #mov09 {
    top: 5590px;
    left: -5%;
    transform: scale(0.6);
  }

  #mov10 {
    top: 6340px;
    left: -5%;
    transform: scale(0.6);
  }

  #mov11 {
    top: 7360px;
    left: -5%;
    transform: scale(0.6);
  }

  #mov12 {
    top: 8180px;
    left: -5%;
    transform: scale(0.6);
  }

  #mov13 {
    top: 9380px;
    left: -5%;
    transform: scale(0.6);
  }

    #leave01 {
        width: 300px;
        top: 2400px;
    }

    #leave02 {
        width: 300px;
        top: 3240px;
    }

    #leave03 {
        width: 300px;
        top: 3920px;
    }

    #leave04 {
        width: 300px;
        top: 4680px;
    }

    #leave05 {
        width: 300px;
        top: 5620px;
    }

    #leave06 {
        width: 300px;
        top: 6380px;
    }

    #leave07 {
        width: 300px;
        top: 7400px;
    }

    #leave08 {
        width: 300px;
        top: 8240px;
    }

    #leave09 {
        width: 300px;
        top: 9460px;
    }
    
    #cast h1{
        font-size: 1.6rem;
        letter-spacing: 2px;
    }
  .card {
    padding: 8px;
    width: 96%;
  }

  .card h1,
  .card h3,
  .card p {
    text-align: center;
  }

  .card button {
    font-size: 0.9rem;
  }

  #logo {
    top: 40px;
  }
}