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

html,
body {
     width: 100%;
     height: 100%;
     overflow: hidden;
     font-family: "Noto Serif", serif;
     background: #000;
}


.bg-container {
     position: fixed;
     inset: 0;
     overflow: hidden;
}

.bg-image {
     position: absolute;
     inset: 0;

     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;

     opacity: 0;
     transition: opacity 3s ease;

     will-change: transform, opacity;
     transform: scale(1);
     animation: zoom 20s linear forwards;
}

@keyframes zoom {
     from {
          transform: scale(1);
     }

     to {
          transform: scale(1.08);
     }
}

.bg-image.active {
     opacity: 1;
}

@media (max-aspect-ratio:16/9) {
     .bg-image {
          background-size: auto 100%;
     }
}

@media (min-aspect-ratio:16/9) {
     .bg-image {
          background-size: 100% auto;
     }
}

.bg-video {
     position: fixed;
     width: 100%;
     height: 100%;
     object-fit: cover;
}

.overlay {
     position: fixed;
     inset: 0;
     background:
          linear-gradient(rgba(0, 0, 0, .55),
               rgba(45, 30, 5, .45));
}

:root {
     --left-space: 40px;
}

.logo {
     position: absolute;
     left: var(--left-space);
     top: 35px;
     width: 300px;
     z-index: 10;
     opacity: .7;
     animation: leftFade 2s forwards;
}

.center-box {
     position: absolute;
     left: var(--left-space);
     top: 200px;
     width: 400px;
     text-align: left;
     transition: 1s;
}

.main-text {
     color: #C8A96B;
     font-size: 20px;
     line-height: 2;
     font-family: "Noto Serif", serif;
     letter-spacing: 1px;
     position: relative;
     display: inline-block;
     padding-bottom: 18px;
}

.main-text::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     height: 2px;
     background: #c8a96b;
     animation: lineGrow 2s ease forwards 1.2s;
}

@keyframes lineGrow {
     to {
          width: 80px;
     }
}

.bottom-quote {

     position: absolute;

     left: 50%;
     top: 80%;

     transform: translate(-50%, -50%);

     width: min(900px, 80vw);

     text-align: center;

     font-family: "Cormorant Garamond", serif;

     font-size: clamp(24px, 3vw, 36px);

     line-height: 1.6;

     color: rgba(255, 255, 255, .95);

     text-shadow: 0 2px 12px rgba(0, 0, 0, .45);

     font-style: italic;

     letter-spacing: .02em;

     z-index: 10;

     pointer-events: none;

     transition:opacity .8s ease;
}

.fade {
     opacity: 0;
     animation: fade 2.5s forwards .5s;
}

@keyframes fade {

     to {
          opacity: 1;
     }

}

@keyframes leftFade {

     from {
          opacity: 0;
          transform: translateX(-30px);
     }

     to {
          opacity: 1;
          transform: none;

     }

}

@keyframes zoom {

     from {

          transform: scale(1);

     }

     to {

          transform: scale(1.08);

     }

}

@media(max-width:768px) {

     :root {
          --left-space: 20px;
     }

     .logo {
          width: 200px;
          top: 20px;

     }

     .center-box {
          top: 130px;
          width: 260px;

     }

     .main-text {
          font-size: 14px;
     }

     .bottom-quote {

          top: 60%;

          width: 90vw;

          font-size: clamp(22px, 5vw, 30px);

          line-height: 1.5;
     }

      .features {

          /* left:20px; */

          right: 0px;

          top: 250px;

          width: 260px;

          display: flex;

          flex-direction: column;

          gap: 28px;

          gap: 18px;

     }

     .feature h3 {

          font-size: 14px;

     }

     .feature p {

          font-size: 13px;

     }

     .social-links{

        position:absolute;

        right:20px;
        bottom:20px;

        display:flex;

        gap:14px;

        z-index:20;
    }

    .social{

        font-size:12px;

        letter-spacing:1px;
    }

}

.features {
     position: absolute;
     top: 200px;
     right: 50px;

     width: 340px;

     display: flex;
     flex-direction: column;
}

.feature {

     position: relative;

     display: flex;
     align-items: flex-start;
     gap: 16px;

     padding: 0 0 24px;
     margin-bottom: 24px;

     text-decoration: none;
     color: inherit;

     opacity: 0;
     transform: translateX(30px);

     animation: featureFade .8s forwards;

     transition: .3s;
}

.feature-icon {

     flex: 0 0 56px;

     width: 56px;
     height: 56px;

     border-radius: 50%;
     overflow: hidden;

     border: 2px solid rgba(255, 179, 39, 0.5);
}

.feature-icon img {

     width: 100%;
     height: 100%;

     object-fit: cover;
}

.feature-content {
     flex: 1;
}

.feature h3 {
     margin: 0 0 6px;
     color: #af7b14;
     font-size: 15px;
     font-weight: bold;
}

.feature p {
     margin: 0;
     color: rgba(255, 255, 255, .82);
     font-size: 13px;
     line-height: 1.6;
}

.feature:not(:last-child)::after {

     content: "";

     position: absolute;

     left: 72px;
     right: 0;
     bottom: 0;

     height: 1px;

     background: linear-gradient(90deg,
               rgba(200, 169, 107, .55),
               transparent);
}

.feature:hover {
     transform: translateX(-5px);
}

.feature:hover .feature-icon {
     border-color: #967638;
}

@keyframes featureFade {
     to {
          opacity: 1;
          transform: translateX(0);
     }
}

.social-links{

    position:absolute;

    right:50px;
    bottom:20px;

    display:flex;
    gap:20px;

    z-index:20;
}

.social{

    color:rgba(255,255,255,.75);

    text-decoration:none;

    font-family:"Courier New", monospace;

    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

    transition:.35s;
}

.social:hover{

    color:#C8A96B;

    text-shadow:0 0 10px rgba(200,169,107,.35);
}