/* ─────────────────────────────────────────────────────────────
   about.css — About page (about.html)
   Loads AFTER home.css. Body uses class "home" so all the
   Olivetti tokens, fonts, and grid background from home.css
   apply. This file only adds About-page layout + sections,
   plus the coin-flip avatar component.
   Figma frame: 503:870.
   ───────────────────────────────────────────────────────────── */

/* ── Page wrap (1312 content / 64-px H pad / 80-px V pad / 64-px gap) ── */

.about-wrap {
  max-width: 1440px;
  margin-inline: auto;
  padding: 80px 64px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* ── Section 1 — About ──────────────────────────────────── */

.about-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.about-avatar { margin-bottom: 24px; }

/* Eyebrow — match .ho-eyebrow on the homepage (no extra tracking,
   same font / size / color / case). */
.about-eyebrow {
  font-family: var(--ho-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 20px;
  color: var(--ho-rust);
  text-transform: uppercase;
}

/* All About headlines (main + section h2s) sit at 40px, matching the
   Figma section-headline scale across the page. */
.about-headline {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ho-ink);
  margin: 0;
}

/* Body paragraphs — color aligned with the hero intro (#7B776E warm
   gray) so the two pages read as the same type family; size + 1.5
   line-height stay paragraph-friendly. */
.about-body {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.5;
  color: #7B776E;
  max-width: 100%;
  margin: 10px 0 0;
}
.about-body p          { margin: 0 0 1em; }
.about-body p:last-child { margin-bottom: 0; }

/* ── Section 2 — Hobby ──────────────────────────────────── */

.hobby-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Section headlines — same 40px scale as the main about headline. */
.hobby-headline,
.curiosity-headline,
.resume-headline {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ho-ink);
  margin: 0;
  max-width: 720px;
}

.hobby-intro {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.5;
  color: #7B776E;
  max-width: 720px;
  margin: 0;
}

.hobby-stills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-top: 16px;
}

.still {
  position: relative;
  width: 100%;
  height: 280px;
  background: rgba(58, 35, 23, 0.06);
  border: 1px dashed rgba(58, 35, 23, 0.45);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.still img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Hide the broken-image icon while no real src is set. */
.still img[src=""],
.still img:not([src]) { display: none; }

.still-label {
  font-family: var(--ho-mono-card);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.66px;          /* 6% of 11 */
  text-transform: uppercase;
  color: var(--ho-ink-2);
}
/* Hide the placeholder label once the <img> has a real (non-empty) src. */
.still:has(img[src]:not([src=""])) .still-label { display: none; }

/* ── Section 3 — Curiosity ──────────────────────────────── */

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

.fields-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.04em;          /* 4% */
  color: var(--ho-ink);
}

.fields-label,
.fields-em {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;          /* 6% */
  color: var(--ho-rust);
  text-transform: uppercase;
}

.fields-sep {
  color: var(--ho-ink-2);
  font-weight: 500;
  letter-spacing: 0;
}

/* ── Section 4 — Resume ─────────────────────────────────── */

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

.resume-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ho-rust);
  text-decoration: none;
  transition: color 150ms ease;
  align-self: flex-start;
}
.resume-link:hover { color: #5b1f14; }

/* ── Dashed divider ─────────────────────────────────────── */

.about-divider {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px dashed var(--ho-line);
}

/* ── CTA ────────────────────────────────────────────────── */

.cta-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.cta-tagline {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  color: #7B776E;
  max-width: 720px;
  margin: 0;
}

.cta-email {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 400;
  line-height: 1.125;
  letter-spacing: -0.01em;
  color: var(--ho-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.cta-email:hover { text-decoration: underline; }

/* ── Colophon ───────────────────────────────────────────── */

.colophon {
  font-family: var(--ho-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.4px;           /* 4% of 10 */
  text-transform: uppercase;
  color: var(--ho-rust);
  margin: 0;
}

/* ── Coin-flip avatar (verbatim per spec) ──────────────────
   Sits at the top of section 1, left-aligned. The .scene block
   is dropped directly into the .about-section as the first child
   so it inherits left alignment from the section's flex flow. */

.scene {
  width: 200px;
  height: 200px;
  perspective: 800px;
  cursor: pointer;
  position: relative;
  margin-bottom: 24px;
}
.scene::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5),
    0 0 0 2px rgba(0, 0, 0, 0.04),
    0 0 20px 4px rgba(0, 0, 0, 0.04);
  pointer-events: none;
  z-index: 10;
}
.card {
  position: absolute;
  inset: 5px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  will-change: transform;
  border-radius: 50%;
  z-index: 2;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.08));
}
.card.flipped {
  animation:
    coin-flip   0.55s cubic-bezier(0.25, 0.1, 0.25, 1) forwards,
    coin-shadow 0.55s cubic-bezier(0.25, 0.1, 0.25, 1) forwards,
    coin-glint  0.55s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
@keyframes coin-flip {
  0%   { transform: rotateY(0deg)    rotateX(0deg)     rotateZ(0deg)     scale(1);    }
  8%   { transform: rotateY(-15deg)  rotateX(1.5deg)   rotateZ(-0.5deg)  scale(0.96); }
  20%  { transform: rotateY(55deg)   rotateX(-2deg)    rotateZ(0.25deg)  scale(1.05); }
  28%  { transform: rotateY(82deg)   rotateX(-1.8deg)  rotateZ(0.1deg)   scale(1.07); }
  34%  { transform: rotateY(98deg)   rotateX(-1.8deg)  rotateZ(-0.15deg) scale(1.08); }
  48%  { transform: rotateY(130deg)  rotateX(-1.2deg)  rotateZ(-0.2deg)  scale(1.06); }
  65%  { transform: rotateY(165deg)  rotateX(1deg)     rotateZ(0.15deg)  scale(1.03); }
  85%  { transform: rotateY(186deg)  rotateX(-0.5deg)  rotateZ(-0.1deg)  scale(0.99); }
  94%  { transform: rotateY(178deg)  rotateX(0.25deg)  rotateZ(0deg)     scale(1.005);}
  100% { transform: rotateY(180deg)  rotateX(0deg)     rotateZ(0deg)     scale(1);    }
}
@keyframes coin-shadow {
  0%   { filter: drop-shadow(0 3px  6px  rgba(0, 0, 0, 0.08)); }
  15%  { filter: drop-shadow(0 6px  10px rgba(0, 0, 0, 0.12)); }
  42%  { filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.22)); }
  70%  { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.14)); }
  100% { filter: drop-shadow(0 4px  8px  rgba(0, 0, 0, 0.09)); }
}
@keyframes coin-glint {
  0%   { outline: 2px solid transparent;             outline-offset: -2px; }
  38%  { outline: 2px solid rgba(255, 255, 255, 0); outline-offset: -2px; }
  44%  { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: -2px; }
  50%  { outline: 2px solid rgba(255, 255, 255, 0); outline-offset: -2px; }
  100% { outline: 2px solid transparent;             outline-offset: -2px; }
}
.card-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background-color: transparent;
  transition: opacity 0.06s linear;
}
.card-front {
  background: #f5f3ef;
  opacity: 1;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.35),
    inset 0 -1px 3px rgba(0, 0, 0, 0.08);
}
.card-back {
  background: #111;
  opacity: 0;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.35),
    inset 0 -1px 3px rgba(0, 0, 0, 0.08);
}
.card-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* ── Tablet ─────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .about-wrap { padding: 64px 32px; gap: 56px; }
  .hobby-stills { gap: 20px; }
}

/* ── Mobile ─────────────────────────────────────────────── */

@media (max-width: 768px) {
  .about-wrap { padding: 48px 24px; gap: 48px; }

  .scene {
    width: 160px;
    height: 160px;
    margin: 0 auto 20px;          /* center horizontally on mobile */
    align-self: center;
  }

  /* Scale all four headlines together on small viewports — keep them
     in the same family but allow shrinkage on phones. */
  .about-headline,
  .hobby-headline,
  .curiosity-headline,
  .resume-headline   { font-size: clamp(28px, 8vw, 40px); line-height: 1.1; }

  .about-body, .hobby-intro { font-size: 17px; }

  .hobby-stills {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-top: 8px;
  }
  .still { height: 220px; }

  /* Scale the email so the full address (33 chars + arrow) fits on
     one row from ~320px viewport up. Linear shrink via vw between the
     bounds. white-space: nowrap is the safety net against the rare
     edge case where the calculated size still leaves it 1-2px over. */
  .cta-email {
    font-size: clamp(14px, 4.4vw, 22px);
    white-space: nowrap;
  }
  .cta-tagline { font-size: 15px; }

  /* Fields row on mobile: "FIELDS I FOLLOW" on its own line, then the
     four fields share the next line. Break by giving the label 100%
     width and hiding the bullet that follows it (which would otherwise
     dangle at the start of the second line). Tighter gap + slightly
     smaller field text so all four fit on a single 360-430px row. */
  .fields-row { gap: 10px; font-size: 12px; }
  .fields-row .fields-label { flex-basis: 100%; }
  .fields-row .fields-label + .fields-sep { display: none; }

  /* Hide the Resume / Download CV section on mobile — the same PDF is
     already reachable from the nav-drawer "Resume" link and the footer
     "CV.PDF" link, so this dedicated section is redundant on a small
     screen. Desktop keeps it as a named call-to-action. */
  .resume-section { display: none; }
}