html, body {
  height: 100%;
  overflow-y: hidden;
}
:root{
    --scroll-track-height: 160vh; /* total scroll length of gated section */
    --reveal-stagger: 120ms;
  }

#hero {
    position: fixed;
    display: flex;
    justify-content: center ;
    align-items: center;
    font-family: "Spectral", serif;
    margin: 0;
    padding: 0;
    height: 100vh !important;
    width: 100vw !important;
}

@media (min-width:576px){
    #hero{
        padding-bottom: 10vh !important;
    }
}

#get-things-done{
    font-family: "Edu AU VIC WA NT Pre", cursive;
    line-height: 2.25;
    word-spacing: 0.4em;
    color: var(--my-black);
}

.gtd-svg {
    width: auto!important;   /* make it fill the container */
    height: 20vh !important;
}

#gtd-container{
    display: flex;
    flex-direction: row;
    max-width: 100vw;
    align-items: center;
    justify-content: center;
    /* display: flex; */
}

.gtd-container{
    display: flex;
    justify-content: center;
    /* width:80vw; */
    align-items: center;

}

@media (max-width: 767px) {
    .gtd-svg {
        height: 17vh !important;
    }
    #gtd-container{
        flex-direction: column;
    }
}

.gtd-path{
    /* .08255 */
    stroke-width: 0.25px !important;
    stroke: var(--my-black) !important;
    fill: var(--my-black) !important;
    fill-opacity: 0; 
    transition: fill 2s ease, stroke-dashoffset 2s ease;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.draw{
  animation: drawAndFill 3.8s linear forwards;
}
.undraw{
  animation: unDrawAndUnFill 3.8s linear forwards;
}

@keyframes drawAndFill {
  0%   { stroke-dashoffset: 1; fill-opacity: 0; }
  70%  { stroke-dashoffset: 0.78; fill-opacity: 0; }
  95%  { stroke-dashoffset: 0.72; fill-opacity: 1; }
  100% { stroke-dashoffset: 0; fill-opacity: 1; }
}

@keyframes unDrawAndUnFill {
  100%   { stroke-dashoffset: 1; fill-opacity: 0; }
  30%  { stroke-dashoffset: 0.78; fill-opacity: 0; }
  5%  { stroke-dashoffset: 0.72; fill-opacity: 1; }
  0% { stroke-dashoffset: 0; fill-opacity: 1; }
}


/* --- Scroll Lock State --- */
body.locked {
  /* overflow: hidden; */
  touch-action: none;
}

/* --- About Section Reveal --- */
#about {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

#about.visible {
  opacity: 1;
  transform: translateY(0);
}

#about-header.right{
  border-right: 2px solid var(--my-black);
  text-align: right;

}

#about-header.left{
  border-left: 2px solid var(--my-black);
  text-align: left;

}

/* --- Typing Effects --- */
#about-header,
.about-line {
  font-family: "Spectral", serif;
}

#about-header {
  width: 100%;
  padding-inline: 2vw;
  font-size: max(clamp(2rem, 7vw, 5.5rem),clamp(2rem, 8vh, 5.5rem));
  margin-block: 5vh;
}

#about-line-1{
font-size: max(clamp(1.2rem, 2vw, 2.5rem),clamp(1.2rem, 3vh, 2.5rem)) !important;
}

.about-line {
  width: 90vw;
  display: flex;
  padding-block: max(0.5vw,1.5vh);
  font-size: clamp(0.9rem, 1.2vw, 1.8rem);
  border: none;
  opacity: 0;
  margin-block: 0;
  transform: translateY(5px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.about-line.typed {
  opacity: 1;
  transform: translateY(0);
}

.about-line.right{

    text-align: right;
    justify-content: end;
    align-items: center;
}

.about-line.left{

    text-align: left;
    justify-content: start;
    align-items: center;
}

.blink-cursor{
  animation: blinkCursor 0.8s step-end infinite alternate;
}

@keyframes blinkCursor {
  50% { border-color: transparent; }
}