/* ==========================================================================
    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;
  width: 100vw;
}

#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;
}