/* ─── About page ──────────────────────────────────────────── */

html {
  scroll-behavior: smooth;
}

/* ─── Hero ───────────────────────────────────────────────── */

.about-hero {
  position: relative;
  height: calc(var(--navbar-bottom, 104px) + 700px);
  overflow: visible;
}

/* Inner div: shifted below the navbar; all absolute children measured from here */
.about-hero-inner {
  position: absolute;
  top: calc(var(--navbar-bottom, 104px) + 24px);
  left: 0;
  right: 0;
  bottom: 0;
}

/* ─── Photo card ─────────────────────────────────────────── */

.about-photo-card-outer {
  position: absolute;
  left: calc(50% - 173.5px); /* centered: half card width = 347/2 */
  top: 43px;
  width: 347px;
  height: 461px;
  animation: cardFloat 3.5s ease-in-out 0.9s infinite;
  will-change: transform;
  z-index: 2;
}

.about-photo-card {
  width: 100%;
  height: 100%;
  background: #191919;
  border: 1px solid #222;
  border-radius: 8px;
  padding: 16px;
  overflow: hidden;
  animation: cardSlideIn 0.8s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

.about-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

@keyframes cardSlideIn {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* ─── Stickers ───────────────────────────────────────────── */

/* .about-sticker handles position + scale only (NO rotation).
   Rotation lives on .about-sticker-inner so the tooltip (a sibling
   of .about-sticker-inner) is never inside the rotated element. */

.about-sticker {
  position: absolute;
  cursor: default;
  opacity: 0;
  animation: stickerExplodeXY 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: var(--sticker-delay, 0.5s);
  z-index: 3;
}

.about-sticker-inner {
  display: inline-block;
  animation: stickerRotateIn 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: var(--sticker-delay, 0.5s);
}

.about-sticker-inner img {
  display: block;
  pointer-events: none;
  user-select: none;
  transform-origin: bottom center;
}

/* Shared 8s cycle: each sticker shimmies in a 0.8s window, then all rest for 5s.
   Order: game (0s) → plane (0.8s) → chess (1.6s) → escape (2.4s) → pause (3s–8s). */
.about-sticker--game   .about-sticker-inner img { animation: aboutShimmy1 8s ease-in-out 1.5s infinite; }
.about-sticker--plane  .about-sticker-inner img { animation: aboutShimmy2 8s ease-in-out 1.5s infinite; }
.about-sticker--chess  .about-sticker-inner img { animation: aboutShimmy3 8s ease-in-out 1.5s infinite; }
.about-sticker--escape .about-sticker-inner img { animation: aboutShimmy4 8s ease-in-out 1.5s infinite; }

@keyframes aboutShimmy1 {
  0%,  7.5%, 100% { transform: rotate(0deg)    translateX(0);      }
  2%              { transform: rotate(-3deg)   translateX(-1px);   }
  4%              { transform: rotate(3deg)    translateX(1px);    }
  6%              { transform: rotate(-1.5deg) translateX(-0.5px); }
}
@keyframes aboutShimmy2 {
  0%,  10%,  17.5%, 100% { transform: rotate(0deg)    translateX(0);      }
  12%                    { transform: rotate(-3deg)   translateX(-1px);   }
  14%                    { transform: rotate(3deg)    translateX(1px);    }
  16%                    { transform: rotate(-1.5deg) translateX(-0.5px); }
}
@keyframes aboutShimmy3 {
  0%,  20%,  27.5%, 100% { transform: rotate(0deg)    translateX(0);      }
  22%                    { transform: rotate(-3deg)   translateX(-1px);   }
  24%                    { transform: rotate(3deg)    translateX(1px);    }
  26%                    { transform: rotate(-1.5deg) translateX(-0.5px); }
}
@keyframes aboutShimmy4 {
  0%,  30%,  37.5%, 100% { transform: rotate(0deg)    translateX(0);      }
  32%                    { transform: rotate(-3deg)   translateX(-1px);   }
  34%                    { transform: rotate(3deg)    translateX(1px);    }
  36%                    { transform: rotate(-1.5deg) translateX(-0.5px); }
}

/* outer: translate from card center + scale in */
@keyframes stickerExplodeXY {
  0%   { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(0); }
  65%  { opacity: 1; }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

/* inner: rotate from 0 to final angle */
@keyframes stickerRotateIn {
  from { transform: rotate(0deg); }
  to   { transform: rotate(var(--rotate)); }
}

/* Left stickers: centered at calc(50% − 300px) from viewport center */
.about-sticker--game {
  left: calc(50% - 364px); /* 50% - 300 - 64 (half of 128px) */
  top: 65px;
  --sx: 300px;
  --sy: 210px;
  --rotate: -20deg;
  --sticker-delay: 0.45s;
}

.about-sticker--chess {
  left: calc(50% - 367px); /* 50% - 295 - 72 (half of 144px) */
  top: 281px;
  --sx: 295px;
  --sy: -26px;
  --rotate: -24deg;
  --sticker-delay: 0.55s;
}

/* Right stickers: centered at calc(50% + 300px) from viewport center */
.about-sticker--plane {
  left: calc(50% + 225px); /* 50% + 300 - 75 (half of 150px) */
  top: 64px;
  --sx: -300px;
  --sy: 210px;
  --rotate: 20deg;
  --sticker-delay: 0.5s;
}

.about-sticker--escape {
  left: calc(50% + 231px); /* 50% + 295 - 64 (half of 128px) */
  top: 295px;
  --sx: -295px;
  --sy: -40px;
  --rotate: 8deg;
  --sticker-delay: 0.6s;
}

/* ─── Sticker tooltips ───────────────────────────────────── */

/* Tips sit next to .about-sticker-inner but are NOT inside it,
   so they are never affected by .about-sticker-inner's rotation. */

.about-sticker-tip {
  position: absolute;
  background: #ffffff;
  border-radius: 8px;
  padding: 8px 16px;
  width: 230px;
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #5d5c5c;
  letter-spacing: 0.4px;
  line-height: 1.5;
  top: 50%;
  transform: translateY(-50%) scale(0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10;
  box-shadow: 0 4px 16px rgba(0,0,0,0.24);
}

/* Left stickers: tip appears to the left */
.about-sticker--game .about-sticker-tip,
.about-sticker--chess .about-sticker-tip {
  right: calc(100% + 16px);
}

.about-sticker--game:hover .about-sticker-tip,
.about-sticker--chess:hover .about-sticker-tip {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* Right stickers: tip appears to the right */
.about-sticker--plane .about-sticker-tip,
.about-sticker--escape .about-sticker-tip {
  left: calc(100% + 16px);
}

.about-sticker--plane:hover .about-sticker-tip,
.about-sticker--escape:hover .about-sticker-tip {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* ─── Hero tagline ───────────────────────────────────────── */

.about-tagline {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 530px;
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 64px;
  color: #ffffff;
  white-space: nowrap;
  line-height: normal;
}

/* ─── Content layout ─────────────────────────────────────── */

.about-content-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 48px 120px;
  display: flex;
  align-items: flex-start;
  gap: 46px;
}

/* ─── Sidebar ────────────────────────────────────────────── */

.about-sidebar {
  width: 195px;
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--navbar-bottom, 104px) + 32px);
}

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

.about-toc-link {
  font-family: 'Geist Mono', monospace;
  font-size: 14px;
  font-weight: 400;
  color: #cccccc;
  text-decoration: none;
  line-height: normal;
  display: flex;
  align-items: baseline;
  transition: color 0.3s ease, font-weight 0.3s ease;
}

.about-toc-link.active {
  font-weight: 600;
  color: #ffffff;
}

.about-toc-dash {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  flex-shrink: 0;
  transition: max-width 0.3s ease, opacity 0.3s ease;
}

.about-toc-link.active .about-toc-dash {
  max-width: 2ch;
  opacity: 1;
}

/* ─── Main content column ────────────────────────────────── */

.about-main {
  flex: 1;
  min-width: 0;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* ─── Section headers ────────────────────────────────────── */

.about-section-title {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 32px;
  color: #ffffff;
  line-height: normal;
  margin: 0;
}

/* ─── Envelope ───────────────────────────────────────────── */

/* Container: overflow:hidden clips 3D rotation so the flap never
   escapes the top edge. isolation:isolate scopes child z-indices. */
.about-envelope {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  isolation: isolate;
  animation: envShimmy 2.6s ease-in-out infinite;
}

.about-envelope:not(.env-open),
.about-envelope:not(.env-open) * {
  cursor: none;
}

.about-envelope.env-open {
  animation: none;
  cursor: default;
}

@keyframes envShimmy {
  0%   { transform: rotate(0deg);  }
  6%   { transform: rotate(-2deg); }
  12%  { transform: rotate(2deg);  }
  18%  { transform: rotate(-1deg); }
  23%  { transform: rotate(0deg);  }
  100% { transform: rotate(0deg);  }
}

/* Scene: absolute overlay covering the full container.
   Houses all three physical envelope layers. pointer-events:none
   lets clicks pass through to the letter once it fades in. */
.env-scene {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* White interior "paper" — always visible, acts as the envelope body */
.env-body-bg {
  position: absolute;
  inset: 0;
  background: #ffffff;
  border-radius: 4px;
}

/* Bottom flap: plain white with a subtle fold-line shadow.
   Positioned so its top edge (the hinge) sits at 265px from container top.
   Rotates around that top edge (transform-origin: top center). */
.env-bottom-flap {
  position: absolute;
  top: 265px;
  left: 0;
  right: 0;
  height: 179px;
  background: #ffffff;
  border-radius: 0 0 4px 4px;
  box-shadow: -0.5px -2px 5px 0 rgba(0, 0, 0, 0.10);
  transform-origin: bottom center;
  backface-visibility: hidden;
  will-change: transform;
  opacity: 0;
}

/* Top flap: the triangular V-shape SVG.
   Hinge is the very top edge of the container (transform-origin: top center).
   backface-visibility:hidden makes it vanish once past 90° — clean fold. */
.env-top-flap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform-origin: top center;
  backface-visibility: hidden;
  will-change: transform;
  z-index: 1;
}

.env-top-flap img {
  width: 100%;
  display: block;
}

/* Wax seal */
.env-seal {
  position: absolute;
  top: 199px;
  left: 50%;
  transform: translateX(-50%);
  width: 131px;
  height: 131px;
  z-index: 2;
  pointer-events: none;
}

/* Letter overlay: in-flow so it determines the container's natural height.
   Sits above the scene (z-index 3 > scene's z-index 2).
   Hidden behind the scene until the animation sequence finishes. */
.env-letter-overlay {
  position: relative;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
}

.env-letter {
  background: #ffffff;
  padding: 36px 40px 44px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── 4-step animation sequence, all triggered by .env-open ────────── */

/* Step 1 (0.3s): wax seal fades out — "breaking the seal" */
.about-envelope.env-open .env-seal {
  animation: envSealFade 0.35s ease 0.3s forwards;
}

/* Step 2 (0.5s): top flap folds backward/down around its top hinge.
   perspective() on the transform gives the 3D dimensional read.
   -180deg + backface-visibility:hidden = flap rotates away and disappears. */
.about-envelope.env-open .env-top-flap {
  animation: envTopFlapOpen 0.65s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;
}

/* Step 3: bottom flap fades in at the top flap's midpoint (0.825s),
   then rotates away once the top flap is fully gone (1.15s). */
.about-envelope.env-open .env-bottom-flap {
  animation:
    envBottomFlapReveal 0.3s ease 0.825s both,
    envBottomFlapOpen   0.6s cubic-bezier(0.4, 0, 0.2, 1) 1.15s both;
}

/* Step 4 (1.5s): letter content fades in — bottom flap backface hides at ~1.45s,
   so starting here creates a seamless overlap with no visible gap. */
.about-envelope.env-open .env-letter-overlay {
  animation: envLetterFadeIn 0.5s ease 1.5s forwards;
  pointer-events: auto;
}

@keyframes envSealFade {
  to { opacity: 0; }
}

@keyframes envTopFlapOpen {
  from { transform: perspective(900px) rotateX(0deg); }
  to   { transform: perspective(900px) rotateX(-180deg); }
}

@keyframes envBottomFlapReveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes envBottomFlapOpen {
  from { transform: perspective(900px) rotateX(0deg); }
  to   { transform: perspective(900px) rotateX(180deg); }
}

@keyframes envLetterFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* Letter typography */
.env-letter-heading {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  color: #000000;
  margin: 0;
}

.env-letter-p {
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #5d5c5c;
  line-height: 28px;
  margin: 0;
}

.env-letter-p strong {
  font-weight: 600;
  color: #000000;
}

.env-letter-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 8px;
}

.env-letter-sig-label {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #5d5c5c;
  line-height: 24px;
}

.env-letter-sig-name {
  font-family: 'Caveat', cursive;
  font-size: 28px;
  color: #000000;
  line-height: normal;
}

.env-connect-btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 16px;
  border: 1px solid #000000;
  border-radius: 2px;
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #000000;
  text-decoration: none;
  line-height: 28px;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.env-connect-btn:hover {
  background: #000000;
  color: #ffffff;
}

/* ─── Envelope custom cursor ─────────────────────────────── */

#env-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 16px;
  border-radius: 100px;
  background: rgba(15, 15, 15, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
  will-change: transform;
}

#env-cursor.visible {
  opacity: 1;
}

#env-cursor-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

#env-cursor-icon svg {
  width: 16px;
  height: 16px;
}

#env-cursor-label {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  color: #ffffff;
  line-height: 30px;
}

/* ─── Generic about section ──────────────────────────────── */

.about-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ─── Experience items ────────────────────────────────────── */

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

.about-exp-item {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.about-exp-logo-wrap {
  width: 80px;
  height: 80px;
  background: #191919;
  border: 1px solid #222;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px;
}

.about-exp-logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.about-exp-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 30px;
}

.about-exp-name {
  font-family: 'Geist', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
}

.about-exp-role {
  font-family: 'Geist', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #cccccc;
}

.about-exp-date {
  font-family: 'Geist', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #cccccc;
  white-space: nowrap;
  line-height: 30px;
  flex-shrink: 0;
  align-self: center;
}

/* ─── Awards ─────────────────────────────────────────────── */

#awards {
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: flex-start;
}

.about-awards-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
  min-width: 0;
}

.about-awards-list {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

.about-award-divider {
  height: 1px;
  background: #2a2a2a;
  width: 100%;
}

.about-award-content {
  display: flex;
  gap: 29px;
  align-items: flex-start;
}

.about-award-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 30px;
}

.about-award-name {
  font-family: 'Geist', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
}

.about-award-org {
  font-family: 'Geist', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #a8a8a8;
}

.about-award-year {
  font-family: 'Geist', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #a8a8a8;
  white-space: nowrap;
  line-height: 30px;
  flex-shrink: 0;
}

/* Awards stacked photo column */
.about-awards-photos {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  width: 211px;
  flex-shrink: 0;
}

/* Polaroid frames */
.about-polaroid {
  background: #ffffff;
  border: 1px solid #f3f3f3;
  padding: 4px;
  border-radius: 4px;
  display: block;
  width: 100%;
}

.about-polaroid img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
  object-fit: cover;
}

/* Photo 1: full-width landscape (4:3) */
.about-polaroid--aw1 img {
  aspect-ratio: 4 / 3;
}

/* Photos 2 & 3: fixed 182px-wide image, natural height */
.about-polaroid--aw2,
.about-polaroid--aw3 {
  width: 190px;
}

.about-polaroid--aw2 img {
  height: 121px;
  object-fit: cover;
}

.about-polaroid--aw3 img {
  height: 170px;
  object-fit: cover;
}

.about-polaroid--tilt-l { transform: rotate(-4deg); }
.about-polaroid--tilt-r { transform: rotate(4deg); }

/* ─── Communities ────────────────────────────────────────── */

.about-community-item {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.about-community-item + .about-community-item {
  margin-top: 32px;
}

.about-community-header {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.about-community-name {
  font-family: 'Geist', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  line-height: 30px;
  width: 150px;
  flex-shrink: 0;
}

.about-community-desc {
  font-family: 'Geist', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #cccccc;
  line-height: 30px;
  flex: 1;
  min-width: 0;
  margin: 0;
}

.about-community-photos {
  display: flex;
  gap: 24px;
  align-items: center;
  width: 100%;
}

.about-community-photo-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
}

.about-photo-frame {
  background: #ffffff;
  border: 1px solid #f3f3f3;
  padding: 4px;
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
}

.about-photo-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

.about-photo-frame--tilt-l { transform: rotate(-4deg); }
.about-photo-frame--tilt-r { transform: rotate(4deg); }

.about-community-photos--sx {
  justify-content: center;
}

.about-community-photos--sx .about-community-photo-wrap {
  flex: 0 0 auto;
  width: calc((100% - 48px) / 3);
}