/* Add your custom styles here */
:root {
   --bg: #0b0303; /* even darker warm background */
   --card: #1b0c0c; /* dark card */
   --muted: #d7bfb7; /* warm muted text (keep for footer) */
   --accent: #d34f43; /* muted warm red CTA (sleeker) */
   --white: #fff8f6;
}

.container {
   width: 86vw; /* slightly wider */
   max-width: 1200px;
   margin: 0 auto;
   height: calc(100vh - 40px); /* fixed viewport-height container so footer fits */
   display: flex;
   flex-direction: column;
   overflow-x: scroll; /* or overflow: auto; or overflow-x: scroll; */
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.container::-webkit-scrollbar {
   display: none; /* Chrome, Safari, Edge */
}

* {
   box-sizing: border-box;
}
html,
body,
#root {
   height: 100%;
}

body {
   font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
   line-height: 1.45;
   color: var(--white);
   background: linear-gradient(180deg, #0b0303 0%, #180606 100%);
   padding: 20px; /* slightly reduced padding */
   box-sizing: border-box;
   animation: living_background_start ease-in-out 0.8s, living_background 12s ease 0.8s alternate infinite;
   animation-play-state: paused;
}

@keyframes living_background_start {
   from {
      backdrop-filter: brightness(100%);
   }
   to {
      backdrop-filter: brightness(145%);
   }
}
@keyframes living_background {
   0% {
      backdrop-filter: brightness(145%);
   }
   25% {
      backdrop-filter: brightness(165%) hue-rotate(-25deg);
   }
   50% {
      backdrop-filter: brightness(145%);
   }
   75% {
      backdrop-filter: brightness(165%) hue-rotate(30deg);
   }
   100% {
      backdrop-filter: brightness(145%);
   }
}
.signup {
   padding: 20px 24px; /* more internal padding for breathing room */
   border-radius: 12px;
   background: rgb(255 255 255 / 10%);
   align-self: center; /* center the signup box vertically within the grid cell */
   max-height: none;
   position: relative;
   overflow: hidden;
   /* slower, smoother entrance */
   animation: clinkInFromLeft 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
   animation-play-state: paused;
}
.content {
   display: grid;
   grid-template-columns: 45% 55%; /* left column a touch wider */
   gap: 48px; /* increased spacing between columns */
   align-items: center; /* vertically center both columns */
   min-height: 0; /* allow container to size naturally */
   margin: auto 0; /* center vertically within the container */
}
.title {
   font-size: 50px;
   margin: 0 0 10px;
   font-family: "DM Serif Text", serif;
   line-height: 1;
   opacity:0;
   animation: slideInLeft 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards;
   animation-play-state: paused;
}
.subtext {
   color: var(--muted);
   font-size: 20px;
   line-height: 1.2;
   margin: 24px 0;
   opacity:0;
   animation: slideInLeft 1.6s cubic-bezier(0.22, 1, 0.36, 1) 1.24s forwards;
   animation-play-state: paused;
}
label.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}
input[type="email"] {
   width: 100%;
   padding: 14px;
   margin-top: 20px;
   border-radius: 6px;
   border: 1px solid rgba(255, 255, 255, 0.06);
   background: rgba(255, 255, 255, 0.02);
   color: var(--white);
   outline: none;
   opacity:0;
   animation: fadeIn 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
   animation-play-state: paused;
   transition: border 240ms linear, padding 240ms linear, border-radius 240ms ease, background 500ms ease;
   box-sizing: border-box;
}
input[type="email"]:focus {
   border: 3px solid rgba(255, 255, 255, 0.06);
   background: rgba(255, 255, 255, 0.06);
   border-radius: 12px;
}
form#waitlist-form {
   display: flex;
   flex-direction: column;
   align-items: stretch; /* make inputs align to container padding */
}

form#waitlist-form button {
   margin-top: 18px;
   width: 100%;
   opacity:0;   
   animation: fadeIn 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
   animation-play-state: paused;
}

/* make sure non-title text uses Figtree */
body,
.subtext,
.message,
label,
input,
button,
.foot.small {
   font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
button {
   margin-top: 30px;
   padding: 14px 18px;
   font-size: 17px; /* slightly larger CTA text */
   border-radius: 10px;
   border: none;
   background: var(--accent);
   color: #fff;
   font-weight: 700;
   cursor: pointer;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.62);
   transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1), filter 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

button:hover {
   transform: translateY(-3px) scale(1.02);
   filter: brightness(0.98);
}

button:active {
   transform: translateY(0);
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.62);
}
.message {
   margin-top: 12px;
   color: var(--muted);
   font-size: 14px;
}
.screenshot {
   /* background: #cf2b2b00; */ /* no box around screenshot */
   padding: 0;
   border-radius: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity:0;
   min-height: 76vh; /* make the right column taller/visually larger */
   overflow: visible; /* ensure the image is never cropped */
   /* slightly slower, smoother entrance from the right */
   animation: clinkInFromRight 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
   animation-play-state: paused;   
}

.screenshot img {
   width: 100%;
   max-height: calc(100vh - 100px); /* scale to fit viewport but don't crop */
   height: auto;
   border-radius: 8px;
   /* box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55); */
   object-fit: contain; /* always show the full image */
}
.foot.small {
   margin-top: 12px;
   padding-bottom: 15px;
   color: var(--muted);
   font-size: 13px;
   text-align: center;
   align-self: center;
   opacity:0;
   animation: peekInFromBottom 0.5s 3.5s forwards;
   animation-play-state: paused;
}
@media (max-width: 820px) {
   .content {
      grid-template-columns: 1fr;
      grid-auto-rows: auto;
      gap: 18px;
      min-height: auto; /* don't force huge height on small screens */
   }
   /* On mobile show text first for accessibility (text then image) */
   .signup {
      order: -1;
   }
   /* tighten type when stacked vertically */
   .title {
      font-size: 34px;
      line-height: 1.05;
   }
   .subtext {
      font-size: 16px;
      margin: 14px 0;
   }

   /* make the screenshot taller and crop only the sides (limit crop to ~15%) */
   .signup {
      /* don't hide vertically on small screens; allow content to expand */
      max-height: none;
      overflow: hidden;
      padding: 18px 20px;
   }

   .screenshot {
      min-height: 56vh;
      overflow: visible; /* never crop image on mobile either */
      padding: 12px;
      border-radius: 8px;
   }
   .screenshot img {
      /* scale the image to fit within the container without cropping */
      width: 100%;
      height: auto;
      max-width: 100%;
      max-height: calc(100vh - 140px);
      object-fit: contain;
      filter: none;
      border-radius: 8px;
      display: block;
      margin: 0 auto;
   }
}

/* Keyframe animations for onload fade/clink in */
@keyframes clinkInFromLeft {
   from {
      opacity: 0;
      filter: brightness(35%);
      transform: translateX(-18vw);
   }
   to {
      opacity: 1;
      transform: translateX(0);
   }
}

@keyframes clinkInFromRight {
   from {
      opacity: 0;
      transform: translateX(18vw);
   }
   to {
      opacity: 1;
      transform: translateX(0);
   }
}

@keyframes peekInFromBottom {
   from {
      opacity: 0;
      transform: translateY(24px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes slideInLeft {
   from {
      opacity: 0;
      transform: translateX(-18px);
   }
   to {
      opacity: 1;
      transform: translateX(0);
   }
}

@keyframes fadeIn {
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}