/* ============================================================
   about.css — "About this project"
   Figma: E7k37Ouwd4M57ChmTXZdOu
     desktop 280:8732 (frame 1440)
     mobile  280:8218 (frame 390)
   Unlike the homepage this page scrolls, so it is laid out in
   real CSS rather than the fixed 1440×847 scaled stage.
   ============================================================ */

:root {
  --bg: #191818;
  --font-ui: "VT323", monospace;
  --accent: #79dc63;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

body {
  background: var(--bg);
  color: #fff;
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

/* For screen readers only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.about-page {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  overflow: clip;
}

/* ===================== LAYOUT ===================== */
/* 120 | 407 (title) | 793 (content) | 120  = 1440 */
.about {
  display: grid;
  grid-template-columns: 407fr 793fr;
  align-items: start;
  padding: 152px 120px 0;
}

.about-title {
  width: 387px;
  max-width: 100%;
  font-size: 58px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.232px;
  text-transform: uppercase;
  color: #fff;
}

.about-col {
  display: flex;
  flex-direction: column;
  gap: 56px;
  min-width: 0;
}

/* ---- Photo ----
   Not object-fit: cover — the design deliberately over-scales and
   offsets the crop, so the frame percentages are reproduced exactly. */
.about-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 793 / 1000;
  border-radius: 32px;
  overflow: hidden;

  /* LQIP — a 24x30 thumbnail of exactly the region the crop above shows,
     inlined so it paints with the stylesheet instead of costing a request.
     Without it the frame is an empty dark rectangle until the 176 KB AVIF
     lands, which reads as a broken image. The real <img> is opaque and
     covers the whole frame, so it simply hides this once decoded. */
  background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAHgAAAAD/7QA4UGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAAA4QklNBCUAAAAAABDUHYzZjwCyBOmACZjs+EJ+/8AAEQgAHgAYAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMAAgICAgICBAICBAUEBAQFBwUFBQUHCQcHBwcHCQsJCQkJCQkLCwsLCwsLCw0NDQ0NDQ8PDw8PEREREREREREREf/bAEMBAwMDBAQEBwQEBxIMCgwSEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEv/dAAQAAv/aAAwDAQACEQMRAD8A/Qj4wfGzTPhbappsIEupXYWSFW+4kWSN7n0J6DnODwcV8wWf7S/jCS686zuS7g8RvNti/HCnH5V4F+1rP451H44vbLGdM0eDT4JV1FFEksyp8r7AwxlGJGcn16EV55oOnfDy50S41rS/EviKRLGVIZSbWN8PJu2jaYV3fdPIOPescdiaqrP3jqy3Jo1MPGUUftp8MviNB8QfC0evPELWaMmK5gyG8uRT2YZypGCPY+uQO/8A7Usv74r89fgGfH2i+E9Y0/5/JluIXsL3CW8kqlCWDIS+0pkD5RyTgGvVPtXxL/5+5v8AwJ/+1V6WGxDlTTnqzw8XQjCtKENEj//Q6Pxw3xRstO0v4k+OrCXS4beeaxY3Tf6yK4KmP5CSwUFcZIGSwrkfDvx4kTW7q0svDrNpUsSTC9WIps8tWG8R7QGXOOQRwSe3P23+1PoyeIvhLrUEuwrD5M5SRdyt5citgjI9K/Mn4caVJrfiy10+IxgywiwDyrvISQ7OTxngnn73vXn4zC+yqKLk231Ppckr16eG5U72P0jtPCfjjxh4NtfEfgq6ilW6V5ktDK0MpUHaNrE7GzjIyRwRXNf8K0/aB/6Blx/4GRf/AB6vqXT7u28L2Vvo9nF+7tbFki6YCxEADGAP4R9Kp/8ACwbn/nin5CvapYaCglc+cxNV1KspySu2f//Z");
  background-size: cover;
  background-position: center;
}

.about-photo img {
  position: absolute;
  left: -2.45%;
  top: -20.13%;
  width: 131.01%;
  height: 138.31%;
  max-width: none;
  object-fit: cover;
}

/* ---- Body copy ---- */
.about-text {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.about-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-text p {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.096px;
  color: #fff;
}

.about-text p.is-indented {
  text-indent: 56px;
}

/* ---- Separator ----
   A 1344×126 field of 45° hatching, clipped to a 2px band so only
   the crossing points show — reads as a green dashed rule. */
.about-sep {
  border: 0;
  height: 2px;
  border-radius: 32px;
  background-image: url("assets/about/separator.svg");
  background-repeat: no-repeat;
  background-size: 1344px 126px;
  background-position: center calc(50% + 2px);
}

.about-sep--thick {
  height: 4px;
  background-position: center calc(50% + 1px);
}

/* ---- Signature ---- */
.about-sign {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Specific enough to beat the `.about-text p` line-height. */
.about-text .sign-row {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.6;
}

.sign-slash {
  color: rgba(121, 220, 99, 0.4);
}

.sign-name {
  color: var(--accent);
}

/* ---- Studio credit ---- */
.credit-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.credit-link:hover {
  color: #fff;
}

/* ===================== ACKNOWLEDGMENTS LIST =====================
   Same 793px column as the About text; each entry mirrors the About
   signature block: white quote → green attribution → hatched rule. */
.ack-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
}

.ack-quote {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ack-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ack-text p {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.096px;
  color: #fff;
}

.ack-attr {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  line-height: 1.6;
  letter-spacing: -0.096px;
}

.ack-attr cite {
  font-style: normal; /* VT323 has no italic; don't let the browser fake one */
  color: var(--accent);
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

/* ---- Мікроінтеракції ---- */

/* 1. Hover: фосфорне світіння тексту, атрибуція яскравішає,
      штрихи роздільника повільно повзуть убік (період патерну 6px,
      тому цикл безшовний). */
.ack-body {
  cursor: pointer;
}

.ack-text p {
  transition: text-shadow 0.25s ease;
}

.ack-quote:hover .ack-text p {
  text-shadow: 0 0 14px rgba(121, 220, 99, 0.28);
}

.ack-quote:hover .ack-attr cite {
  color: #a5f293;
  text-shadow: 0 0 10px rgba(121, 220, 99, 0.45);
}

@keyframes sep-march {
  from {
    background-position-x: calc(50% + 0px);
  }
  to {
    background-position-x: calc(50% - 6px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .ack-quote:hover > .about-sep {
    animation: sep-march 0.6s linear infinite;
  }
}

/* 4. Копіювання кліком: короткий спалах "copied" біля атрибуції. */
.ack-attr::after {
  content: "— copied";
  font-size: 16px;
  color: rgba(121, 220, 99, 0.65);
  opacity: 0;
  transition: opacity 0.25s ease;
  white-space: nowrap;
}

.ack-quote.is-copied .ack-attr::after {
  opacity: 1;
}

/* 3. Лічильник прогресу читання — мова кодів цитат головної. */
.ack-progress {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 5;
  font-size: 14px;
  letter-spacing: -0.056px;
  color: rgba(121, 220, 99, 0.55);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.ack-progress.is-on {
  opacity: 1;
}

/* ===================== FOOTER ===================== */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 96px;
  padding: 32px 120px;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: -0.056px;
  color: #fff;
  white-space: nowrap;
}

/* ===================== REVEAL ===================== */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none;
  }
}

/* ===================== MOBILE / TABLET =====================
   The two-column grid needs the full 1440 frame; below that the
   design collapses to the 390 mobile layout. The nav also stops
   fitting well before 1024, so both switch at the same point. */
@media (max-width: 1023px) {
  .about-page {
    overflow-x: hidden;
  }

  .about {
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding: 111px 16px 0;
  }

  .about-title {
    width: 100%;
    font-size: 46px;
    letter-spacing: -0.184px;
  }

  .about-col {
    width: 100%;
    gap: 56px;
  }

  .about-photo {
    border-radius: 16px;
  }

  .footer {
    flex-direction: column;
    gap: 8px;
    align-items: center;
    margin-top: 96px;
    padding: 32px 16px;
    text-align: center;
    white-space: normal;
  }
}