@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
   --border-strong: rgba(214, 245, 170, 0.5);
   --border-green: rgba(127, 160, 90, 0.28);
   --border-faded: rgba(127, 160, 90, 0.08);
   --border-end: rgba(127, 160, 90, 0.18);
}

body {
  font-family: 'Inter', sans-serif;
}

h1, h2, h3 {
  font-family: 'Cormorant Garamond', serif;
}

* {
  box-sizing: border-box;
}

body {
   min-height: 100dvh;
   display: grid;
   grid-template-columns: 4rem 1fr;
   grid-template-rows: 4rem 1fr;
   grid-template-areas:
      "topnav topnav"
      "sidenav main";
   overflow-x: hidden;
   background:
      radial-gradient(circle at 50% 42%, rgba(127, 160, 90, 0.055) 0 10%, rgba(127, 160, 90, 0.04) 18%, transparent 40%),
      radial-gradient(circle at 50% 42%, rgba(95, 122, 67, 0.045) 0 18%, transparent 48%),
      radial-gradient(circle at 50% 42%, rgba(31, 58, 46, 0.06) 0 30%, transparent 60%),
      radial-gradient(circle at 20% 18%, rgba(47, 91, 59, 0.09) 0 8%, transparent 28%),
      radial-gradient(circle at 80% 22%, rgba(47, 91, 59, 0.08) 0 8%, transparent 30%),
      radial-gradient(circle at 18% 82%, rgba(47, 91, 59, 0.07) 0 10%, transparent 32%),
      radial-gradient(circle at 82% 78%, rgba(95, 122, 67, 0.07) 0 10%, transparent 32%),
      linear-gradient(145deg, #000000 0%, #030403 16%, #070d0a 34%, #14251d 50%, #0d1a14 66%, #050806 82%, #000000 100%);
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
}

.topnav {
   grid-area: topnav;
   position: sticky;
   top: 0;
   z-index: 10;
   display: flex;

   background: linear-gradient(90deg,
      rgba(8, 10, 9, 0.48) 0%,
      rgba(12, 16, 13, 0.40) 58%,
      rgba(19, 24, 20, 0.62) 100%
   );

   backdrop-filter: blur(10px) saturate(120%);
   list-style-type: none;
   height: 4rem;

   border-bottom: 1px solid transparent;
   border-image: linear-gradient(
      90deg,
      rgba(127, 160, 90, 0.60) 0%, 
      rgba(127, 160, 90, 0.55) 22%,
      rgba(127, 160, 90, 0.4) 55%,
      rgba(127, 160, 90, 0.8) 100%
   ) 1;
}

.topnav ul {
   display: flex;
   width: 100%;
   justify-content: end;
   flex-direction: row-reverse;
   margin: 0.3rem;
   gap: 0.5rem;
}

.topnav li {
   width: 5rem;
}

.topnav a {
   display: block;
   background-color: rgb(7, 97, 22);
   color: white;
   border-radius: 0.2rem;
   text-align: center;
   text-decoration: none;
   padding: 0.8rem 0;
}

.topnav a:hover {
   background-color: white;
   color: black;
}

.logo {
   width: 4rem;
   height: 4rem;
   flex: 0 0 4rem;
   display: flex;
   align-items: center;
   justify-content: center;

   border-right: 1px solid transparent;
   border-color: rgba(127, 160, 90, 0.60)
}

.logo img {
   width: 4rem;
   padding: 0.6rem;
}


.sidenav {
   grid-area: sidenav;
   position: sticky;
   top: 4rem;

   background: linear-gradient(180deg,
      rgba(8, 10, 9, 0.54) 0%,
      rgba(12, 16, 13, 0.40) 52%,
      rgba(19, 24, 20, 0.68) 100%
   );

   backdrop-filter: blur(10px) saturate(120%);
   list-style-type: none;
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 4rem;
   height: calc(100dvh - 4rem);
   padding: 0.3rem;

   border-right: 1px solid transparent;
   border-image: linear-gradient(
      180deg,
      rgba(127, 160, 90, 0.60) 0%, 
      rgba(127, 160, 90, 0.55) 22%,
      rgba(127, 160, 90, 0.4) 55%,
      rgba(127, 160, 90, 0.3) 100%,
      transparent 100%
   ) 1;
}

.sidenav ul {
   display: flex;
   width: 100%;
   height: 100%;
   flex-direction: column;
   justify-content: start;
   gap: 1rem;
   align-items: center;
}

.sidenav li {
   width: 100%;
   aspect-ratio: 1 / 1;
}

.sidenav a {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   background-color: rgb(7, 97, 22);
   color: white;
   border-radius: 0.2rem;
   text-align: center;
   text-decoration: none;
}

.sidenav a:hover {
   background-color: white;
   color: black;
}

main {
   grid-area: main;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 1.5rem;
   min-height: calc(100dvh - 4rem);
   text-align: center;
}

.coming-soon {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1.15rem;
   opacity: 1;
   animation: comingSoonIntro 1.1s ease-out both;
}

.coming-soon-logo {
   position: relative;
   width: min(78vw, 34rem);
   isolation: isolate;
   animation: logoFloat 6s ease-in-out infinite;
}

.coming-soon-logo::before {
   content: "";
   position: absolute;
   inset: -24%;
   z-index: -1;
   pointer-events: none;

   background:
      radial-gradient(circle at 50% 48%,
         rgba(214, 245, 170, 0.22) 0%,
         rgba(127, 160, 90, 0.14) 24%,
         rgba(47, 91, 59, 0.08) 45%,
         transparent 68%
      );

   filter: blur(1.6rem);
   opacity: 0.75;
   animation: auraBreath 5.5s ease-in-out infinite;
}

.coming-soon-logo img {
   width: 100%;
   height: auto;
   display: block;
   opacity: 0.88;

   filter:
      brightness(0.95)
      contrast(1.1)
      saturate(0.95)
      drop-shadow(0 0 0.45rem rgba(214, 245, 170, 0.28))
      drop-shadow(0 0 1.4rem rgba(127, 160, 90, 0.22));
}

.coming-soon-kicker {
   position: relative;
   color: #eef5e8;
   font-size: 0.9rem;
   font-weight: 600;
   letter-spacing: 0.18em;
   text-transform: uppercase;

   text-shadow:
      0 0 0.45rem rgba(214, 245, 170, 0.28),
      0 0 1.2rem rgba(127, 160, 90, 0.22);

   animation: textBreath 4.5s ease-in-out infinite;
}

.coming-soon-kicker::after {
   content: "";
   position: absolute;
   left: 50%;
   bottom: -0.55rem;
   width: 3.2rem;
   height: 1px;
   transform: translateX(-50%);

   background: linear-gradient(
      90deg,
      transparent,
      rgba(214, 245, 170, 0.85),
      transparent
   );

   box-shadow: 0 0 0.8rem rgba(214, 245, 170, 0.55);
   animation: underlinePulse 3.8s ease-in-out infinite;
}

@keyframes comingSoonIntro {
   from {
      opacity: 0;
      transform: translateY(0.8rem) scale(0.98);
      filter: blur(0.4rem);
   }

   to {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
   }
}

@keyframes logoFloat {
   0%, 100% {
      transform: translateY(0) scale(1);
   }

   50% {
      transform: translateY(-0.35rem) scale(1.012);
   }
}

@keyframes auraBreath {
   0%, 100% {
      opacity: 0.55;
      transform: scale(0.96);
   }

   50% {
      opacity: 0.95;
      transform: scale(1.08);
   }
}

@keyframes slowRotate {
   from {
      transform: rotate(0deg);
   }

   to {
      transform: rotate(360deg);
   }
}

@keyframes textBreath {
   0%, 100% {
      opacity: 0.78;
   }

   50% {
      opacity: 1;
   }
}

@keyframes underlinePulse {
   0%, 100% {
      opacity: 0.35;
      width: 2.4rem;
   }

   50% {
      opacity: 1;
      width: 5rem;
   }
}

@media (max-width: 768px) {
   html,
   body {
      margin: 0;
      width: 100%;
      max-width: 100%;
      overflow: hidden;
   }

   body {
      height: 100dvh;
      min-height: 100dvh;

      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: 4rem minmax(0, 1fr);
      grid-template-areas:
         "topnav"
         "main";

      background-attachment: scroll;
   }

   .topnav {
      grid-area: topnav;
      height: 4rem;
      width: 100%;
      max-width: 100%;
      overflow: hidden;
      position: sticky;
      top: 0;
      z-index: 20;
   }

   .logo {
      width: 4rem;
      height: 4rem;
      flex: 0 0 4rem;
      border-right: 1px solid rgba(127, 160, 90, 0.6);
   }

   .logo img {
      width: 4rem;
      padding: 0.7rem;
   }

   .topnav ul {
      flex: 1 1 auto;
      min-width: 0;
      width: auto;
      margin: 0;
      padding: 0.3rem;
      overflow: hidden;
   }

   .sidenav {
      display: none;
   }

   main {
      grid-area: main;

      /* important: do NOT use calc height here */
      min-height: 0;
      min-width: 0;
      height: auto;

      padding: 1rem;
      overflow: hidden;

      display: flex;
      align-items: center;
      justify-content: center;
   }

   .coming-soon {
      max-width: 100%;
      gap: 0.85rem;
      transform: translateY(-0.5rem);
   }

   .coming-soon-logo {
      width: min(86vw, 26rem);
      max-width: 100%;
   }

   .coming-soon-logo::before {
      inset: -14%;
      filter: blur(1.15rem);
   }

   .coming-soon-kicker {
      font-size: 0.72rem;
      letter-spacing: 0.16em;
   }
}