/* About subpage (kid → the net). Same paper as the homepage; lines in the
   Work dieline language (#d4d4d4, 1px; cut solid, fold dashed). */

/* Fade the collage layers, not the stage (see work.css for why). */
body.is-about .stage {
  pointer-events: none;
}
body.is-about .stage .bg,
body.is-about .stage .layer,
body.is-about .stage .camera-clean {
  opacity: 0;
}
body.is-about .beam-canvas {
  visibility: hidden;
}

/* Ghost "About" title: bottom-left, a link home (hover reads "Home"). */
body.is-about .beam-label {
  left: 3vw;
  top: 88vh;
  transform: translate(0, -50%);
  font-size: clamp(3rem, 8vw, 7rem);
  z-index: 7;
  pointer-events: auto;
  cursor: pointer;
  transition: none; /* the move to the corner is a FLIP on transform (script.js) */
}

.about {
  position: fixed;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.5s ease 0.1s;
}
.about[hidden] {
  display: none;
}
.about.is-on {
  opacity: 1;
}
/* Back to the homepage: one crossfade with the collage (same 0.5s). */
.about:not(.is-on) {
  transition: opacity 0.5s ease;
}

/* Left column: the statement as large body text, top-aligned with the net
   (about.js sets its top). The bold name swaps while the pun is hovered. */
.about-statement {
  position: absolute;
  left: 3vw;
  width: min(20.16vw, 389px); /* 72% of the earlier min(28vw, 540px) */
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(15px, 1.3vw, 24px);
  font-weight: 300; /* Light: body + pun line */
  line-height: 1.24;
  letter-spacing: -0.015em;
  color: #8c8c8c;
}
.about-statement p {
  margin: 0;
}
/* Hover area = the text plus a 16px margin (padding pulled back with a
   negative margin, so the text itself doesn't move). Crossing from the net
   is covered by the 300ms grace period in about.js. */
.about-statement {
  padding: 16px;
  margin: -16px;
}
/* A section (Contact, Experience, …) may run wider than the statement. */
.about-statement.is-section {
  width: min(34vw, 620px);
}
/* Entry blocks (Experience): name on top, role · years softer below, with
   clear space between entries. The section name sits a bit apart. */
.about-statement.is-section .about-bio {
  margin-bottom: 0.55em;
}
.about-entry + .about-entry {
  margin-top: 0.8em;
}
.about-sub {
  opacity: 0.62;
}
/* The calligraphy in the pun rotation: sits in the name's place, a little
   taller than the text, without changing the line height. */
.about-lead-img {
  display: inline-block;
  height: 1.45em;
  width: auto;
  margin: -0.35em 0.05em -0.1em;
  vertical-align: baseline;
}
.about.is-active .about-lead-img {
  filter: invert(1); /* white on the red, like the text */
}

.about-lead {
  font-weight: 600;
  color: #111111;
}
.about-pun {
  margin-top: 1.2em !important;
  cursor: default;
}
.about-end {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
}

.about-net {
  position: absolute;
  transform: translate(-50%, -50%);
  touch-action: none; /* drag to turn, also on touch */
  user-select: none;
  -webkit-user-select: none;
}
/* The drawn net can be grabbed and turned. */
.about-net .hit * {
  cursor: grab;
}
.about-net.is-grabbing,
.about-net.is-grabbing .hit * {
  cursor: grabbing;
}
.about-net svg {
  position: absolute;
  inset: 0;
  overflow: visible;
}

/* ---- Default: the photo as is; lines white on the red, outer cut gray. ---- */
/* Transition times: the base rules set the way back to default (0.35s),
   the .is-active rules the way in (0.3s). */
.about-net .photo,
.about-net .paper,
.about-net .photo-pale,
.about-net .face-fill,
.about-net .face-label {
  transition: opacity 0.35s ease;
}
.about.is-active .about-net .photo,
.about.is-active .about-net .paper,
.about.is-active .about-net .photo-pale,
.about.is-active .about-net .face-label {
  transition-duration: 0.3s;
}
.about.is-active .about-net .face-fill {
  transition-duration: 0.2s; /* moving between faces stays quick */
}
.about-net .paper {
  fill: #ffffff;
  opacity: 0;
}
.about-net .photo-pale {
  opacity: 0;
}
.about-net .face-fill {
  fill: #ffffff;
  opacity: 0;
}
.about-net .lines *,
.about-net .cut * {
  transition: stroke 0.35s ease, fill 0.35s ease;
}
.about.is-active .about-net .lines *,
.about.is-active .about-net .cut * {
  transition-duration: 0.3s;
}
.about-net .lines * {
  fill: none;
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 1;
}
.about-net .lines .fold {
  stroke-dasharray: 4 4;
}
.about-net .lines .dots {
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-dasharray: 0.01 4.5;
}
.about-net .lines .dashes {
  stroke-dasharray: 6 3 1 3;
}
.about-net .lines .pin {
  fill: rgba(255, 255, 255, 0.6);
  stroke: none;
}
.about-net .cut * {
  fill: none;
  stroke: #d4d4d4;
  stroke-width: 2; /* half is masked away → a 1px outline of the whole net */
}
.about-net .face-label {
  opacity: 0;
  pointer-events: none;
  fill: var(--about-red);
  font-family: "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.14em;
  text-anchor: middle;
  dominant-baseline: middle;
}
.about-net .hit * {
  fill: transparent;
  stroke: none;
}

/* ---- Active (pointer on the net or the text): red page, pale net. ---- */
.about {
  --about-red: #bf030e; /* sampled from images/about-bg.JPG */
}
.about-bg {
  position: fixed;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.about.is-active .about-bg {
  opacity: 1;
  transition-duration: 0.3s;
}
.about.is-active .about-net .photo {
  opacity: 0;
}
.about.is-active .about-net .paper {
  opacity: 0.45; /* translucent paper: the red shows through */
}
.about.is-active .about-net .photo-pale {
  opacity: 0.6;
}
.about.is-active .about-net .face-fill.is-on {
  opacity: 0.3; /* the face shown in the column: a little more opaque */
}
.about.is-active .about-net .lines * {
  stroke: var(--about-red);
}
.about.is-active .about-net .lines .pin {
  fill: var(--about-red);
  stroke: none;
}
.about.is-active .about-net .cut * {
  stroke: var(--about-red);
}
.about.is-active .about-net .face-label {
  opacity: 1;
}

/* Left column: a soft fade out, swap, then a slower fade in (no sliding);
   white on the red. Fading out uses the .is-swapping timing, fading in
   the base timing. .is-slow = going back to default. */
.about-statement {
  transition: opacity 0.3s cubic-bezier(0.2, 0, 0.2, 1), color 0.35s ease;
}
.about-statement.is-swapping {
  opacity: 0;
  transition: opacity 0.16s cubic-bezier(0.4, 0, 1, 1), color 0.35s ease;
}
.about-statement.is-slow {
  transition: opacity 0.3s cubic-bezier(0.2, 0, 0.2, 1), color 0.35s ease;
}
.about-statement.is-slow.is-swapping {
  transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1), color 0.35s ease;
}
.about-lead {
  transition: color 0.35s ease;
}
.about.is-active .about-lead {
  transition-duration: 0.3s;
}
/* "Contact Yóu" → the bull. Both sit in one grid cell and crossfade.
   Sizes are in em of the statement text, so it all scales together. The
   bull is 6.7em wide (aspect 1.323); labels are placed on it in em. */
.about-contact {
  display: grid;
  margin-top: 1.7em;
  justify-items: start;
  align-items: start; /* both pinned to the top: the bull starts where the text was */
}
.about-contact > * {
  grid-area: 1 / 1;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.about-contact-toggle {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.85em;
  font-weight: 400;
  color: #111111;
  cursor: pointer;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s, color 0.35s ease;
}
.about-bull {
  position: relative;
  width: 6.7em;
  height: 5.06em;
  margin-left: 0.25em;
  opacity: 0;
  visibility: hidden;
}
.about-contact.is-open .about-bull,
.about-contact:not(.is-open) .about-contact-toggle {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.about-contact.is-open .about-contact-toggle {
  opacity: 0;
  visibility: hidden;
}
.about-bull img {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  user-select: none;
}
.about-statement .about-bull-link {
  position: absolute;
  font-size: 0.6em;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  color: #333333;
  text-decoration: none;
  transform: translateY(-50%);
  transition: color 0.35s ease, opacity 0.15s ease;
}
.about-statement .about-bull-link:hover {
  opacity: 0.6;
}
/* Email on the body (white on black), Instagram by the tail, LinkedIn
   under the hind legs — positions in bull widths / heights. */
.about-statement .about-bull-link.is-email {
  left: 48%;
  top: 32%;
  color: #ffffff;
  transform: translate(-50%, -50%);
}
.about-statement .about-bull-link.is-instagram {
  left: 104%;
  top: 54%;
  color: rgba(0, 0, 0, 0.6);
}
.about-statement .about-bull-link.is-linkedin {
  left: 76%;
  top: 110%;
  color: rgba(0, 0, 0, 0.6);
}
.about.is-active .about-contact-toggle,
.about.is-active .about-statement .about-bull-link:not(.is-email) {
  color: #ffffff;
}
.about-statement a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.about.is-active .about-statement,
.about.is-active .about-lead {
  color: #ffffff;
}
body.is-about .beam-label {
  transition: color 0.35s ease; /* the move itself: FLIP on transform (script.js) */
}
body.is-about-active .beam-label {
  transition: color 0.3s ease; /* the move itself: FLIP on transform (script.js) */
}
body.is-about-active .beam-label,
body.is-about-active .beam-label::after {
  color: #ffffff;
}
body.is-about-active .beam-label.show-home {
  color: transparent; /* "Home" crossfade still hides the word */
}

/* Phones: statement on top at full width, the net below; the page scrolls.
   The ghost title sits behind the content. */
.about.is-mobile {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.about.is-mobile .about-statement {
  top: 6vh;
  left: 16px;
  right: 16px;
  width: auto;
  font-size: 17px;
}

/* Visually hidden, still read by screen readers and search engines. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .about-contact > *,
  .about-contact-toggle,
  body.is-about .stage .bg,
  body.is-about .stage .layer,
  body.is-about .stage .camera-clean,
  body.is-about .beam-label,
  .about,
  .about-bg,
  .about-statement,
  .about-lead,
  .about-net * {
    transition: none !important;
  }
}