/* Section: GT — namespaced */
.s-gt {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  background: #222;
  color: #ddd;
  font-size: 13px;
  line-height: 18px;
  font-family: 'Space Grotesk', sans-serif;
  position: relative;
  overflow: hidden;
  height: 100vh;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.s-gt a {
  color: currentColor;
  text-decoration: none;
  border-bottom: 1px solid #fff;
  padding-bottom: 0;
  /* Music-reactive: opacity follows the ambient breath (set by section-gt.js). */
  opacity: var(--gt-link-op, 1);
}
/* Top title — alternates with nav */
.s-gt .gt-bio-txt {
  position: absolute;
  top: 0; left: 0; width: 100%;
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.5px; line-height: 1;
  padding: 14px 24px; color: #fff;
  z-index: 15; pointer-events: none;
  opacity: 1;
  transition: opacity 1.94s cubic-bezier(0.4, 0, 0.2, 1);
}
.s-gt .gt-bio-txt.hidden { opacity: 0; transition: opacity 1.08s ease; }

.s-gt .gt-video-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.s-gt .gt-video-bg iframe {
  width: 100vw;
  height: 56.25vw;
  min-height: 100%;
  min-width: 177.77vh;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.s-gt .gt-grid-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 2;
  background-image: url("../assets/shared/grid.png");
  pointer-events: none;
}
/* Dark radial gradient at top — behind text, above video */
.s-gt::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100vh;
  z-index: 2;
  background: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(51,51,51,1) 0%, rgba(34,34,34,0.9) 30%, rgba(17,17,17,0.6) 60%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  transform-origin: 50% 0%;
  will-change: transform, opacity;
  animation: gtRadialDrift 48s ease-in-out infinite alternate;
}
/* WebGL flowing gradient layer (replaces the prior linear gradient) */
.s-gt .gt-flow {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100vh;
  z-index: 2;
  pointer-events: none;
  display: block;
}
@keyframes gtRadialDrift {
  0%   { transform: translate(-3%, -2%) scale(1.05); opacity: 0.92; }
  50%  { transform: translate(2%,  1%)  scale(1.15); opacity: 1;    }
  100% { transform: translate(4%,  -1%) scale(1.08); opacity: 0.95; }
}
/* Particle emitter layer for the floating letters */
.s-gt .gt-particles {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}
.s-gt .gt-particle {
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  background: #78df71;
  border-radius: 50%;
  will-change: transform;
  transform-origin: center center;
}

/* Physics layer: draggable G + T letters (Matter.js) */
.s-gt .gt-physics {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 4;
  pointer-events: none;
}
.s-gt .gt-letter {
  position: absolute;
  top: 0; left: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 33vw;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px #ffffff;
  text-stroke: 1px #ffffff;
  user-select: none;
  cursor: grab;
  pointer-events: auto;
  will-change: transform;
  transform-origin: center center;
  white-space: nowrap;
}
.s-gt .gt-letter.blink {
  animation: gtBlinkFill 0.16s steps(1, end);
}
@keyframes gtBlinkFill {
  0%, 100%  { color: transparent; }
  18%, 60%  { color: rgba(255, 255, 255, 0.5); }
  35%, 80%  { color: transparent; }
}
.s-gt .gt-letter:active { cursor: grabbing; }

.s-gt .gt-info {
  position: relative;
  z-index: 3;
  margin: 0;
  padding: 80px 30px 30px 30px;
  text-align: left;
  width: 100%;
  font-size: 12px;
  line-height: 17px;
  box-sizing: border-box;
  height: 100vh;
  column-width: 338px;
  column-gap: 40px;
  column-fill: auto;
  column-rule: none;
}
.s-gt .gt-info .wt {
  display: block;
  break-inside: avoid;
}
.s-gt .gt-info .blk {
  display: block;
}
/* Pull the first .blk (description span) up so its first line aligns with "Lupton, Ellen" in column 2. */
.s-gt .gt-info span.blk { display: inline-block; margin-top: -12px; }

/* Disable text selection for marked elements */
.s-gt .gt-no-select,
.s-gt .gt-no-select * {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* Individual bibliographic list item — inter-punct prefix + bottom padding */
.s-gt .gt-item {
  display: block;
  padding-left: 14px;
  padding-bottom: 8px;
  text-indent: -14px;
  break-inside: avoid;
}
.s-gt .gt-item::before {
  content: "· ";
  color: #fff;
  font-weight: 500;
  margin-right: 4px;
}

/* Section headings for bibliography */
.s-gt .gt-section-head {
  display: block;
  padding-top: 16px;
  padding-bottom: 6px;
  break-after: avoid;
}
/* PC view: force these 3 headings to start a new column */
@media (min-width: 900px) {
  .s-gt .gt-col-start {
    break-before: column;
    -webkit-column-break-before: always;
    page-break-before: column;
    padding-top: 0;
  }
}

@media (max-width: 640px) {
  /* Push body text below the fixed nav + the "G T: Generative…" bio line.
     Match Q-section caption (.column3) sizing on mobile. */
  .s-gt .gt-info {
    padding: 80px 20px 20px 20px;
    column-width: auto; column-count: 1; height: auto;
    font-size: 12px; line-height: 17px;
  }
}
.s-gt .blk { }
@media (max-width: 640px) { .s-gt .blk { display: none; } }
.s-gt .accent, .s-gt .accent:visited, .s-gt .accent:link { color: #fff; }
.s-gt .accent:hover { border: none; padding-bottom: 1px; }
.s-gt .wt { color: #78df71; font-size: 13px; font-weight: 500; letter-spacing: 0.3px; }
.s-gt .wt a, .s-gt .wt a:link, .s-gt .wt a:visited { color: #78df71; border-bottom-color: #78df71; }
.s-gt .gt-section-head .wh { color: #78df71; font-size: 13px; font-weight: 500; letter-spacing: 0.3px; }
.s-gt .gt-item::before { color: #78df71; }
.s-gt .wh { margin-left: 0; display: block; color: #fff; }