/* styles.css */
body {
    margin: 0;
    padding: 0;
    background-color: #E1EACD;
    color: #01352C;
    font-family: 'Lalezar', sansf;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 🟢 Spread header and footer */
   /* align-items: center;*/
    overflow: hidden;
}

/* =============== TEXT AREA =============== */
header {
    position: relative;
    z-index: 2;
    /*text-align: center;*/
     padding-left: 7vw; /*  spacing from edge */
    margin-top: 30px; /* Push down a bit from the top */
}

.intro {
    font-family: 'Lalezar', cursive;
     font-size: clamp(2rem, 5vw, 4.5rem);
    text-align: left;
   z-index: 3;
    margin: 0;
    line-height: 1.3; 
}

.gee {
    font-family: 'Leckerli One', cursive;
    font-size: clamp(3rem, 10vw, 10.5rem);
    z-index: 3;
}

.subtitle {
    font-family: 'Lalezar', cursive;
    font-size: clamp(1.2rem, 3.5vw, 2.9rem);
    margin-top: 9px;
    line-height: 0.9;
    z-index: 3;
}


/* =============== FOOTER =============== */

footer {
    position: relative;
    z-index: 2;
    /*padding: 0px 0px 0px 100px;*/
    top: 135px;
    left: 16vw; /*spacing from edge */
    margin-bottom: 70px; /*Push down a bit from the bottom */
    padding: 0 9vw; /* even left/right spacing */

}

.footer-content {
  display: inline-block;
  text-align: right; /* ensures both lines align by their right edge */
}

.coming-soon {
    font-family: 'Leckerli One', cursive;
    font-size: 4rem;
    /*  margin-top: 20px;*/
    margin-bottom: 6px; /* bring .connect closer */
   
    line-height: 1;
}

.connect {
  font-family: 'Lalezar', cursive;
  font-size: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end; /* align content to right edge */
  gap: 8px;
  width: 100%;
}

.linkedin img {
  width: 26px;
  height: 26px;
  transition: transform 0.3s ease;
}

.linkedin:hover img {
  transform: scale(1.2);
}

/* =============== CIRCLE & IMAGE =============== */

/* smaller left-side circle */
.circle-small {
  position: absolute;
  top: 370px;     /* adjust vertical placement */
  left: 180px;       /* move from left edge */
  width: 280px;      /* smaller size */
  height: 280px;
  background-color: rgba(1, 53, 44, 0.1); /* slightly lighter opacity for balance */
  border-radius: 50%;
  z-index: 0;        /* behind main elements */
}

.pink-circle-small {
  position: absolute;
  top: 325px;
  /*bottom: 300px;     /* adjust vertical placement */
  left: 420px;       /* move from left edge */
  width: 140px;      /* smaller size */
  height: 140px;
  background-color: rgba(246, 176, 255, 0.19); /* slightly lighter opacity for balance */
  border-radius: 50%;
  z-index: 0;        /* behind main elements */
}

.right-side-elements {
  position: absolute;
  top: 40%;                /* move group lower (was near top before) */
  right: 0;
  transform: translateY(-40%); /* centers around 55%, effectively a bit below center */
  width: 700px;
  height: 700px;
  pointer-events: none;    /* prevents blocking clicks */
}

.small-top-circle {
  position: absolute;
  top: 80px;
  right: 325px;      /* move from right edge */
  width: 120px;      /* smaller size */
  height: 120px;
  background-color: rgba(1, 53, 44, 0.1); /* slightly lighter opacity for balance */
  border-radius: 50%;
  z-index: 0;        /* behind main elements */
}

.second-small-top-circle {
  position: absolute;
  top: 70px;
  right: 440px;      /* move from right edge */
  width: 230px;      /* smaller size */
  height: 230px;
  background-color: rgba(1, 53, 44, 0.1); /* slightly lighter opacity for balance */
  border-radius: 50%;
  z-index: 0;        /* behind main elements */
}

.main-circle {
    position: absolute;
    bottom: 28px;
    right: 80px;
    width: 450px;
    height: 450px;
    background-color: rgba(1, 53, 44, 0.5);
    /*background-color: #01352C;
    opacity: 0.5;*/
    border-radius: 50%;
    z-index: 1;
}

.placeholder {
  position: absolute;
  inset-inline-start: 180px;
  inset-block-start: 220px;
 /*  bottom: 100px;  raise it up 
  right: 110px;   /* move it left */
  width: 350px;
  height: auto;
  z-index: 2;
  opacity: 0.9;
}

/* =============== ANIMATION =============== */
header,
footer,
.circle,
.placeholder {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}

body.loaded header,
body.loaded footer,
body.loaded .circle,
body.loaded .placeholder {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {


  header {
     padding: 10 10px; /* 👈 adds safe spacing left & right */
    text-align: center;
    margin-top: 35px;
  }

  .intro,
  .subtitle {
    text-align: center;
  }

  footer {
    left: 0;
    top: 40px;
    padding: 0;
    text-align: center;
  }

  .footer-content {
    text-align: center;
  }

  .connect {
    justify-content: center;
  }

body {
  overflow: auto;
}

  .intro {
    font-size: 2.2rem;
  }

  .gee {
    font-size: 4.5rem;
    display: inline;
    line-height: 1;
  }

  .subtitle {
    font-size: 1.0rem;
    line-height: 1.2;
    padding: 0 15px; /* prevent text touching edges */
  }

  .coming-soon {
    font-size: 2rem;
    margin-top: 5px;
  }

  .connect {
    font-size: 1rem;
  }

   .second-small-top-circle {
    position: absolute;
    top: 43%;           
    right: 1%;
    transform: translate(-50%, -50%);
    width: 117px;
    height: 117px;
    z-index: 0;            /* behind text */
    opacity: 0.6;

}

   .small-top-circle {
    position: absolute;
    top: 57%;            
    left: 88%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    z-index: 0;            /* behind text */
    opacity: 0.6;

}

  .placeholder {
    position: absolute;
    left: 59%;
    transform: translateX(-50%);
    bottom: 40px;
    width: 249px;   
      z-index: 2; /* higher than circle */

  }
  
  .main-circle {
    position: absolute;
    left: 70%; 
    right: auto; /* 👈 cancel any right positioning */
    transform: translateX(-50%);
    top: 50%;
    width: 280px;
    height: 280px;
    z-index: 1;

  }

   .right-side-elements {
    height: 500px; /* 👈 reserves space for circles + image */
  }

    .circle-small {
    position: absolute;
    top: 82%;              /* 👈 sits between subtitle & footer */
    left: 40%;
    transform: translate(-50%, -50%);
    width: 160px;
    height: 160px;
    z-index: 0;            /* behind text */
    opacity: 0.6;
  }

  .pink-circle-small {
    position: absolute;
    top: 68%;              /* slightly above the green circle */
    left: 68%;             /* slight offset for overlap effect */
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    z-index: 0;
    opacity: 0.6;
  }

 

}