/* ==========================================================================
    Imports / Variables
    ========================================================================== */
@import url('variables.css');


/* ==========================================================================
    Base / Typography
    ========================================================================== */
body{
  font-family: var(--ff);
  font-size: 1rem;
  overflow-x: hidden;
}

h2 {
  font-size: 2rem;
}

/* ==========================================================================
    Title / Headline Area
    #tt1, #tt2, #tt3 appear to be related headline parts — grouped together
    ========================================================================== */
#tt1{
  position: relative;
  left: 36%;
  color: var(--Blue);
  margin-top: 2.5%;
}

#tt2{
  font-size: 6.5rem;
  position: relative;
  left: 28%;
}

#tt3{
  position: relative;
  left: 30%;
  margin-top: -1%;
  color: var(--lighter-Text);
}

/* Greeting / Gradient title */
#greeting{
  background: var(--gradientMid);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
  font-size: var(--xxl);
  width: 45%;
  line-height: 0.9;
  padding-bottom: 0.12em;
  overflow: visible;
  position: absolute;
  top: 15%;
  left: 5%;
}


/* ==========================================================================
    Hero / Showcase Area
    #showoff, #blank and character + blob graphics live in this region
    ========================================================================== */

#showoff{
  width: 70%;
  height: 60vh;
  position: relative;
  background-color: #D9D9D9;
  border-radius: 50px;
  margin-top: 5%;
  z-index: 5;
  left: 15%;
}

#blank{
  background-color: grey;
  height: 50%;
  width: 75%;
  position: relative;
  top: 10%;
}

/* Character / illustration (merged duplicates and consolidated transforms) */
#character{
  position: absolute;
  top: 50%;
  left: 77%;
  transform-origin: center bottom;
  transform: scale(0.7);
  z-index: 1;
}

/* Decorative blob SVGs */
#blob1{
  fill: var(--colorLight);
  position: absolute;
  left: 65%;
  top: 18%;
  z-index: 3;
}
#blob2{
  fill: var(--colorMedium);
  position: absolute;
  left: 60%;
  top: 35%;
  z-index: 2;
}
#blob3{
  fill: var(--colorDark);
  position: absolute;
  left: 65%;
  top: 25%;
}


/* ==========================================================================
    Buttons / Call-to-action area
    #Button + buttonWrapper and their link children
    ========================================================================== */

#buttonWrapper{
  display: flex;
  flex-direction: column;
  width: 25%;
  height: 20%;
  justify-content: space-evenly;
  position: absolute;
  top: 40%;
  left: 5%;
}

#buttonWrapper > a{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40%;
  width: 90%;
  padding: 1px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 17px;
  font-weight: bold;
}

/* primary / first child */
#buttonWrapper > a:first-child{
  background: var(--gradientMid);
  color: var(--fwhite);
}

/* secondary / last child */
#buttonWrapper > a:last-child{
  background: linear-gradient(var(--light), var(--light)) padding-box,
                  linear-gradient(90deg, var(--colorLight), var(--colorDark)) border-box;
  -webkit-background-clip: padding-box, border-box;
  background-clip: padding-box, border-box;
  color: var(--fdark);
  border: 2px solid transparent;
  border-radius: 17px;
}

/* Individual standalone button style — combined duplicate rules */
#Button{
  position: relative;
  top: 10%;
  left: 37%;
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  background:
     linear-gradient(white, white, white, white, white) padding-box,
     linear-gradient(90deg, var(--Green), var(--Blue), var(--Purple), var(--Red), var(--Yellow)) border-box;
  border: 2px solid transparent;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  padding: 5px;
  height: 5vh;
  text-decoration: none;
  color: var(--Text);
  margin-top: 1.5%;
  font-weight: bold;
  background-size: 300% 100%, 300% 100%;
  background-position: 0% 50%, 0% 50%;
  will-change: background-position, transform;
  transition: transform .18s ease;
}

#Button:hover{
  animation: gradientMove 6s linear infinite;
  cursor: pointer;
}

/* Gradient animation used by hr and buttons */
@keyframes gradientMove{
  0%   { background-position: 0% 0%; }
  25%  { background-position: 100% 0%; }
  50%  { background-position: 100% 100%; }
  75%  { background-position: 0% 100%; }
  100% { background-position: 0% 0%; }
}


/* ==========================================================================
    Footer / Glass bar
    hr and glass overlay fixed at bottom
    ========================================================================== */

hr{
  border: none;
  height: 10px;
  background: linear-gradient(90deg,
     rgba(176, 199, 0, 1) 0%,
     rgba(86, 186, 225, 1) 25%,
     rgba(201, 79, 138, 1) 50%,
     rgba(224, 0, 26, 1) 75%,
     rgba(235, 160, 0, 1) 100%);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background-size: 300% 100%;
  background-position: 0% 50%;
  animation: gradientMove 6s linear infinite;
  will-change: background-position;
}

#glaspart{
  width: 100%;
  height: 30px;
  fill: rgba(255, 255, 255, 1);
  backdrop-filter: blur(200px);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
}

/* ==========================================================================
   Responsive Design - Tablet Landscape / Small Desktop (max 1200px)
   ========================================================================== */
@media (max-width: 1200px) {
  #tt2 {
    font-size: 5.5rem;
  }

  #greeting {
    font-size: 5rem;
    width: 50%;
  }

  #showoff {
    width: 75%;
    height: 55vh;
    left: 12%;
  }

  #character {
    transform: scale(0.6);
    left: 75%;
  }
}

/* ==========================================================================
   Responsive Design - Tablet Portrait (max 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  body {
    font-size: 0.95rem;
  }

  h2 {
    font-size: 1.7rem;
  }

  #tt1 {
    left: 30%;
    margin-top: 3%;
  }

  #tt2 {
    font-size: 4.5rem;
    left: 22%;
  }

  #tt3 {
    left: 25%;
  }

  #greeting {
    font-size: 4rem;
    width: 60%;
    top: 12%;
    left: 5%;
  }

  #showoff {
    width: 85%;
    height: 50vh;
    left: 7.5%;
    margin-top: 6%;
  }

  #character {
    transform: scale(0.55);
    left: 72%;
  }

  #blob1 {
    left: 60%;
  }

  #blob2 {
    left: 55%;
  }

  #blob3 {
    left: 60%;
  }

  #buttonWrapper {
    width: 35%;
    top: 35%;
    left: 5%;
  }

  #Button {
    width: 25%;
    left: 35%;
  }
}

/* ==========================================================================
   Responsive Design - Tablet Portrait / Large Mobile (max 768px)
   ========================================================================== */
@media (max-width: 768px) {
  body {
    font-size: 0.9rem;
  }

  h2 {
    font-size: 1.4rem;
  }

  #tt1 {
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 90%;
    margin-top: 1.5%;
  }

  #tt2 {
    font-size: 3rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 90%;
  }

  #tt3 {
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 90%;
  }

  #greeting {
    font-size: 2.8rem;
    width: 90%;
    position: relative;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    margin-top: 3vh;
  }

  #showoff {
    width: 92%;
    height: 45vh;
    left: 4%;
    margin-top: 1vh;
    border-radius: 30px;
  }

  #character {
    transform: scale(0.45);
    left: 68%;
    top: 55%;
  }

  #blob1 {
    left: 55%;
    top: 20%;
  }

  #blob2 {
    left: 50%;
    top: 35%;
  }

  #blob3 {
    left: 55%;
    top: 25%;
  }

  #buttonWrapper {
    width: 50%;
    height: 22%;
    top: 30%;
    left: 5%;
  }

  #buttonWrapper > a {
    font-size: 0.85rem;
    width: 95%;
  }

  #Button {
    width: 40%;
    left: 30%;
    height: 4.5vh;
    font-size: 0.9rem;
  }

  hr {
    height: 8px;
  }

  #glaspart {
    height: 25px;
  }

  #character { display: none !important; }
}

/* ==========================================================================
   Responsive Design - Mobile (max 480px)
   ========================================================================== */
@media (max-width: 480px) {
  body {
    font-size: 0.85rem;
  }

  h2 {
    font-size: 1.2rem;
  }

  #tt1 {
    margin-top: 1%;
    font-size: 0.9rem;
  }

  #tt2 {
    font-size: 2.2rem;
  }

  #tt3 {
    font-size: 0.9rem;
  }

  #greeting {
    font-size: 2rem;
    margin-top: 2vh;
  }

  #showoff {
    width: 94%;
    height: 40vh;
    left: 3%;
    margin-top: 0.5vh;
    border-radius: 24px;
  }

  #character {
    transform: scale(0.35);
    left: 62%;
    top: 60%;
  }

  #blob1 {
    left: 50%;
    top: 22%;
    transform: scale(0.7);
  }

  #blob2 {
    left: 45%;
    top: 38%;
    transform: scale(0.7);
  }

  #blob3 {
    left: 50%;
    top: 28%;
    transform: scale(0.7);
  }

  #buttonWrapper {
    width: 80%;
    height: 24%;
    top: 28%;
    left: 10%;
    align-items: center;
  }

  #buttonWrapper > a {
    font-size: 0.8rem;
    width: 100%;
    border-radius: 14px;
  }

  #Button {
    width: 60%;
    left: 20%;
    height: 4vh;
    font-size: 0.85rem;
    border-radius: 999px;
  }

  hr {
    height: 6px;
  }

  #glaspart {
    height: 20px;
  }
}