/* =========================================================
   olehabib — About Me
   Shares tokens, nav, footer and breakpoints with styles.css.
   ========================================================= */

/* ---------- Experience + sticky portrait ---------- */
.about-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  padding-top: 82px;
  padding-bottom: 130px;
}

/* The grid cell spans the whole experience section, so the sticky photo
   stops when the section ends. */
.about-portrait { position: relative; }
.about-portrait__desktop {
  position: sticky;
  top: 90px;
  width: 437px; max-width: 100%;
  aspect-ratio: 437 / 493;
  object-fit: cover;
  margin-top: 20px;
}
.about-portrait__tablet,
.about-portrait__layers { display: none; }

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

.exp-block__eyebrow { font-size: 20px; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; color: var(--accent); }
.exp-block__lead { margin-top: 24px; font-size: 32px; line-height: 1; letter-spacing: -0.02em; }

.exp-list { list-style: none; margin: 56px 0 0; padding: 0; }
.exp {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 24px;
  padding: 43px 0 40px;
  border-bottom: 1px solid #444;
}
.exp:first-child { padding-top: 0; }
.exp__org { font-size: 20px; line-height: 1; letter-spacing: -0.02em; }
.exp__org strong { font-weight: 700; }
.exp__org span { font-size: 14px; font-weight: 300; letter-spacing: -0.02em; margin-left: 4px; }
.exp__date { font-size: 16px; line-height: 1; font-weight: 300; letter-spacing: -0.02em; text-transform: uppercase; color: #c5c5c5; text-align: right; white-space: nowrap; }
.exp__role { grid-column: 1 / -1; margin-top: 12px; font-size: 18px; line-height: 1; font-weight: 300; letter-spacing: -0.02em; color: #c5c5c5; }

/* ---------- Values ---------- */
.values { padding-left: 120px; padding-right: 120px; padding-bottom: 52px; }
.values__eyebrow { font-size: 18px; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; }
.values__list { list-style: none; margin: 24px 0 0; padding: 0; }
.values__list li {
  font-size: 64px; line-height: 1; letter-spacing: -0.02em;
  color: var(--accent);
  will-change: opacity, transform;
}
.values__note { margin-top: 24px; max-width: 180px; font-size: 14px; line-height: 1; letter-spacing: -0.02em; }

/* ---------- Exhibition ---------- */
/* Photo zooms in from 1x to 1.2x while the section crosses the screen;
   the caption drifts up a little faster than the page. */
.exhibit { max-width: var(--max); margin-inline: auto; }
.exhibit__frame {
  position: relative;
  margin: 0;
  aspect-ratio: 2000 / 1172;
  max-width: 100%;
  overflow: hidden;
}
.exhibit__frame img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(var(--exhibit-zoom, 1));
  transform-origin: center center;
  will-change: transform;
}
.exhibit__caption {
  position: absolute; left: 32px; top: 63.5%;
  display: flex; flex-direction: column; gap: 40px;
  color: #000; width: 320px;
  transform: translateY(var(--caption-y, 0px));
  will-change: transform;
}
.exhibit__kicker { font-size: 32px; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; }
.exhibit__name { font-size: 56px; line-height: 1; letter-spacing: -0.02em; font-weight: 700; }

/* ---------- Hobbies ---------- */
.hobbies { padding-top: 170px; padding-bottom: 120px; }
.hobbies__head { max-width: 680px; }
.hobbies__eyebrow { font-size: 24px; line-height: 1; letter-spacing: -0.02em; color: var(--accent); }
.hobbies__lead { margin-top: 24px; font-size: 40px; line-height: 1; letter-spacing: -0.02em; }

.hobbies__grid { margin-top: 120px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.hobby { outline: none; }
.hobby__title { display: flex; align-items: baseline; gap: 4px; font-size: 32px; line-height: 1; letter-spacing: -0.02em; transition: color .3s ease; }
.hobby__title span { font-size: 16px; }
.hobby__card { position: relative; margin-top: 24px; aspect-ratio: 340 / 454; max-width: 100%; overflow: hidden; }
/* The photos carry a thin light edge; a slight scale inside the clipped frame crops it */
.hobby__media { position: absolute; inset: 0; overflow: hidden; }
.hobby__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: opacity .4s ease; }
.hobby__media picture { display: contents; }
.hobby__desc {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 6px 0 5px;
  font-size: 20px; line-height: 1; letter-spacing: -0.02em;
  opacity: 0; transform: translateY(12px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Hover (or keyboard focus): photo gives way to the story */
@media (hover: hover) {
  .hobby:hover .hobby__title { color: var(--accent); }
  .hobby:hover .hobby__media img { opacity: 0; }
  .hobby:hover .hobby__desc { opacity: 1; transform: none; }
}
.hobby:focus-visible .hobby__title { color: var(--accent); }
.hobby:focus-visible .hobby__media img { opacity: 0; }
.hobby:focus-visible .hobby__desc { opacity: 1; transform: none; }
.hobby.is-open .hobby__title { color: var(--accent); }
.hobby.is-open .hobby__media img { opacity: 0; }
.hobby.is-open .hobby__desc { opacity: 1; transform: none; }


/* =========================================================
   TABLET  810px – 1199.98px
   ========================================================= */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .about-intro { grid-template-columns: 1fr; padding-top: 112px; }
  .about-portrait__desktop { display: none; }
  .about-portrait__tablet { display: block; width: 306px; aspect-ratio: 306 / 289; object-fit: cover; }
  .about-intro__content { margin-top: 60px; }

  .values { padding-left: var(--gutter); padding-right: var(--gutter); }

  .hobbies__grid { grid-template-columns: repeat(2, 1fr); column-gap: 8px; row-gap: 72px; }
  .hobby__card { aspect-ratio: 364 / 454; }
}

/* =========================================================
   MOBILE  ≤ 809.98px
   ========================================================= */
@media (max-width: 809.98px) {
  .about-intro { grid-template-columns: 1fr; padding-top: 20px; padding-bottom: 96px; }
  .about-portrait__desktop { display: none; }

  /* Two-layer portrait.
     On load (once both images are decoded) the frame fades in, rises and grows,
     while the background zooms out from 1.2x and the person from 1.3x, all together.
     While scrolling, the background drifts down and the person drifts up (--bg-y / --person-y). */
  .about-portrait__layers {
    display: block;
    position: relative;
    aspect-ratio: 350 / 392;
    max-width: 100%;
    overflow: hidden;
    transform-origin: 50% 100%;
  }
  .js-reveal .about-portrait__layers { opacity: 0; }
  .layer { position: absolute; will-change: transform; }
  .layer--bg {
    left: 0; top: -28.5%; width: 100%; height: 159%; object-fit: cover;
    transform-origin: 50% 50%;
    transform: translateY(var(--bg-y, 0px));
  }
  .layer--person {
    left: -3%; top: 13.3%; width: 106%; height: auto; max-width: none;
    transform-origin: 50% 0;
    transform: translateY(var(--person-y, 0px));
  }
  .about-portrait__layers.is-ready { animation: portrait-frame 1.5s cubic-bezier(.3, .1, .3, 1) both; }
  .about-portrait__layers.is-ready .layer--bg { animation: portrait-bg 1.5s cubic-bezier(.3, .1, .3, 1) both; }
  .about-portrait__layers.is-ready .layer--person { animation: portrait-person 1.5s cubic-bezier(.3, .1, .3, 1) both; }
  @keyframes portrait-frame {
    from { opacity: 0; scale: .82; translate: 0 36px; }
    to   { opacity: 1; scale: 1; translate: 0 0; }
  }
  @keyframes portrait-bg { from { scale: 1.2; } to { scale: 1; } }
  @keyframes portrait-person { from { scale: 1.3; } to { scale: 1; } }
  @media (prefers-reduced-motion: reduce) {
    .about-portrait__layers { opacity: 1; }
    .about-portrait__layers.is-ready,
    .about-portrait__layers.is-ready .layer { animation: none; }
  }

  .about-intro__content { margin-top: 80px; gap: 96px; }
  .exp-block__eyebrow { font-size: 16px; }
  .exp-block__lead { margin-top: 16px; font-size: 26px; }
  .exp-list { margin-top: 48px; }
  .exp { padding: 30px 0 30px; column-gap: 12px; }
  .exp:first-child { padding-top: 0; }
  .exp__org { font-size: 18px; }
  .exp__org span { display: block; margin: 4px 0 0; font-size: 12px; }
  .exp__date { font-size: 12px; }
  .exp__role { margin-top: 12px; font-size: 16px; }

  .values { padding-left: var(--gutter); padding-right: var(--gutter); padding-bottom: 52px; }
  .values__list { margin-top: 24px; }
  .values__list li { font-size: 48px; }

  .exhibit__frame { aspect-ratio: 390 / 466; }
  .exhibit__caption { left: 29px; top: 50%; width: auto; }
  .exhibit__kicker { font-size: 24px; }

  .hobbies { padding-top: 50px; }
  .hobbies__eyebrow { font-size: 18px; }
  .hobbies__lead { margin-top: 16px; font-size: 26px; }
  .hobbies__grid { margin-top: 64px; grid-template-columns: 1fr; gap: 80px; }

  /* No hover on phones: show the story above each photo */
  .hobby__title { font-size: 32px; }
  .hobby__card { display: flex; flex-direction: column-reverse; gap: 24px; aspect-ratio: auto; overflow: visible; }
  .hobby__media { position: relative; inset: auto; aspect-ratio: 350 / 356; max-width: 100%; }
  .hobby__desc { position: static; padding: 0; font-size: 16px; line-height: 1.1; opacity: 1; transform: none; }
  .hobby.is-open .hobby__media img,
  .hobby:focus-visible .hobby__media img { opacity: 1; }
}