html, body {
  height: 100%;
  overflow-y: hidden;
}
:root{
    --scroll-track-height: 160vh; /* total scroll length of gated section */
    --reveal-stagger: 120ms;
    /* Hero/about reveal durations — tunable from one place. Bespoke (slower than
       the global --motion-* scale) because the hero is a deliberate slow reveal. */
    --reveal-fast: 0.4s;
    --reveal-base: 0.6s;
    --reveal-slow: 0.8s;
  }

#hero {
    position: fixed;
    display: flex;
    justify-content: space-between ;
    flex-direction: column;
    align-items: center;
    font-family: var(--my-font-title);
    margin: 0;
    padding: 0;
    padding-top: 20vh !important;
    height: 100vh !important;
    width: 100vw !important;
}

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

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

#gtd-stage{
    display: flex;
    flex-direction: row;
    max-width: 100vw;
    align-items: center;
    justify-content: center;
    /* Nudge the calligraphy down during the intro so it's less stranded at the
       top — trims the empty space beneath it (hero is space-between with the
       now-snippet pinned at the bottom). Only affects the intro: the stage is
       d-none'd before the bio appears. */
    margin-top: 6vh;
}

.gtd-container{
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 768px) {
    .gtd-svg {
        height: 17vh !important;
    }
    #gtd-stage{
        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 var(--motion-hero-fill) ease, stroke-dashoffset var(--motion-hero-fill) ease;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.draw{
  animation: drawAndFill var(--motion-hero-draw) linear forwards;
}
.undraw{
  animation: unDrawAndUnFill var(--motion-hero-draw) 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; }
}

/* Reduced motion: land directly at the filled state — no draw/fill phases.
   The global reduce-motion rule in style.css clamps animation duration to
   0.01ms, but the keyframes' final values include a partial dashoffset; this
   override ensures the resting state is the *fully drawn + filled* glyph. */
@media (prefers-reduced-motion: reduce) {
  .gtd-path {
    stroke-dashoffset: 0 !important;
    fill-opacity: 1 !important;
    transition: none !important;
  }
  .draw, .undraw { animation: none !important; }
  /* In homeScript.js the unwriteGTD step still adds .d-none to #gtd-stage
     after a short delay, so the hero remains transient under reduced motion. */
}


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

/* --- About Section Reveal --- */
#about {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--reveal-slow) ease, transform var(--reveal-slow) 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: var(--my-font-title);
}

#about-header {
  width: 100%;
  padding-inline: 2vw;
  font-size: max(clamp(2rem, 7vw, 5.5rem),clamp(2rem, 8vh, 5.5rem));
  margin-block: 5vh;
  /* The header is now an <h1> for semantics; pin weight/line-height so
     Bootstrap's heading reboot doesn't alter the typed-hero rendering. */
  font-weight: 400;
  line-height: 1.5;
}

#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;
  justify-content: start;
  align-items: center;
  text-align: left;
  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 var(--reveal-fast) ease, transform var(--reveal-fast) 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;
}

/* ── "Now" snippet — voice surface beneath the typed bio lines ───────────
   Sits as the last child of #about so it stays in normal flow with the
   bio. Always centered (no corner-flip variants); breathing room above
   provided by viewport/rem-based margin-top so the gap doesn't collapse
   under the small font-size. */
.about-now {
  width: 90vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  text-align: center;
  gap: 0;
  margin-top: max(3vh, 1.2rem);
  padding-block: max(0.5vw, 1.5vh);
  font-family: var(--my-font-ui);
  font-size: clamp(0.75rem, 0.5em, 1.15rem);
  color: var(--my-gray-2);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity var(--reveal-base) ease, transform var(--reveal-base) ease;
  /* link reset */
  text-decoration: none;
  user-select: none;
  cursor: pointer;
}

@media (max-width: 576px) {
  /* Stack the now-items so a wrapped second line can't fall past the fixed
     hero's clipped bottom edge; the 0.7rem floor keeps the line legible. */
  .about-now {
    flex-direction: column;
    align-items: center;
    gap: 0.25em;
    margin-bottom: 6vh;
    font-size: clamp(0.7rem, 2.5vw, 1rem);
  }
  .now-sep { display: none; }
}

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

.now-snippet__item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  padding-inline: 0.35em;
  transition: color var(--motion-base) ease;
}
.now-snippet__item em {
  font-style: italic;
  color: var(--my-gray-1);
  font-weight: 400;
}
.now-snippet__item cite {
  font-style: italic;
}
.now-snippet__item:hover { color: var(--my-black); }
.now-snippet__item:hover em { color: var(--my-black); }

.now-sep {
  color: var(--my-gray-1);
  user-select: none;
  opacity: 0.6;
  padding-inline: 0.25em;
}

.blink-cursor{
  animation: blinkCursor var(--motion-cursor-blink) step-end infinite alternate;
}

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