/* ===========================================================
   Evy Diepenbroek — About page
   Everything shared with Home/Contact (fonts, colours, spacing
   tokens, .eod-page, .eod-btn, [data-eod-reveal], Awards, CTA,
   Footer) lives in shared.css, loaded before this file — this one
   only holds what's unique to the About page: the scroll-driven
   hero, the design-journey timeline, and the logo tile grid.
   =========================================================== */

/* ---- Hero ----
   Matches gionatannese.com/about's own hero mechanic — confirmed by
   pulling their actual JS bundle: it's a genuine Three.js/WebGL scene,
   every piece of text rasterised onto a canvas texture and mapped onto
   a 3D plane alongside their pinned object, which is how the text can
   pass behind/through it with real depth. Reproduced the same way here
   (about.js, initHeroScene()) — the canvas below is the whole visual
   layer; the sr-only heading/paragraphs right before it (about.html)
   carry the real content for accessibility/SEO, same pattern the
   reference's own about page uses. The canvas is position: sticky
   inside a tall wrapper, same proven pin/release pattern used
   elsewhere on this site (e.g. the timeline pin) — about.js positions
   everything INSIDE the canvas each frame based on scroll, mapping
   scroll progress straight to animation progress across the WHOLE
   220svh range (no dead zone anywhere in it — see the REST_START/
   REST_END comment previously here, since removed: it made the scroll
   read as "stand still, then catch up" instead of one continuous
   scrub, which is exactly what the card being sticky the whole time
   is supposed to avoid). Release is automatic once the wrapper's own
   height runs out — nothing further to pin against. */
.eod-about-hero {
  position: relative;
  background: var(--eod-white);
  padding-bottom: 20svh;
}
.eod-about-hero__canvas-wrap {
  position: relative;
  /* Overridden inline by about.js once it's measured how much scroll
     distance the actual text content needs — this is just a sane
     fallback before that JS runs. */
  height: 260svh;
}
.eod-about-hero__canvas {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: 100svh;
}
.eod-about-hero__cta {
  width: 100%;
  max-width: 62em;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
}

/* ---- "My Design Journey" timeline ----
   Desktop/tablet (min-width: 1025px): a horizontal, scroll-scrubbed
   filmstrip — about.js pins the section and translates .eod-timeline__list
   sideways as you scroll vertically, while .eod-timeline__line-progress
   fills in lockstep (both driven by the same scrub, so they can't
   drift apart). Below that width, this same DOM instead lays out as
   a plain vertical stack (see the media query at the bottom) — no JS
   pin/scrub there, since a horizontal drag-scrub reads poorly on a
   touch device and the reference site itself switches to a vertical
   list at this width too. */
.eod-timeline {
  background: var(--eod-black);
  color: var(--eod-white);
  padding-top: 6em;
  padding-bottom: 6em;
  overflow: hidden;
  height: 100svh;
  align-items: center;
}
.eod-timeline__row {
  display: flex;
  align-items: center;
  gap: clamp(2em, 5vw, 4em);
}
.eod-timeline__heading {
  flex: 0 0 auto;
  width: clamp(13em, 22vw, 19em);
  margin: 0;
  font-size: clamp(2em, 3.2vw, 3.25em);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.eod-timeline__track {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.eod-timeline__line {
  position: relative;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  margin-bottom: 3.5em;
}
.eod-timeline__line-progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: var(--eod-accent);
}
.eod-timeline__list {
  display: flex;
  gap: 4em;
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;
}
.eod-timeline__item {
  flex: 0 0 auto;
  width: 18em;
}
.eod-timeline__marker {
  position: relative;
  top: -3.7em;
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-bottom: -1.2em;
  white-space: nowrap;
}
.eod-timeline__dot {
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: var(--eod-white);
  flex: none;
}
.eod-timeline__year {
  font-size: 0.9em;
  color: rgba(255, 255, 255, 0.7);
}
.eod-timeline__card {
  margin: 0;
}
.eod-timeline__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--eod-radius);
}
.eod-timeline__caption {
  margin: 0.9em 0 0;
  font-size: 1.05em;
  font-weight: 400;
}

@media (max-width: 1024px) {
  .eod-timeline__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5em;
  }
  .eod-timeline__heading {
    width: auto;
  }
  .eod-timeline__track {
    width: 100%;
  }
  .eod-timeline__line,
  .eod-timeline__marker {
    display: none;
  }
  .eod-timeline__list {
    display: flex;
    flex-direction: column;
    gap: 2.75em;
    width: auto;
  }
  .eod-timeline__item {
    position: relative;
    width: auto;
    display: flex;
    align-items: center;
    gap: 1.5em;
    padding-left: 1.75em;
    border-left: 2px solid rgba(255, 255, 255, 0.2);
  }
  .eod-timeline__item::before {
    content: "";
    position: absolute;
    left: -0.45em;
    top: 0.3em;
    width: 0.85em;
    height: 0.85em;
    border-radius: 50%;
    background: var(--eod-accent);
  }
  .eod-timeline__item-text {
    flex: 1 1 auto;
    min-width: 0;
  }
  .eod-timeline__year {
    display: block;
    margin-bottom: 0.3em;
  }
  .eod-timeline__caption {
    margin: 0;
    font-size: 1.15em;
  }
  .eod-timeline__card {
    flex: none;
    width: 7em;
  }
  .eod-timeline__image {
    aspect-ratio: 1 / 1;
  }
}
@media (max-width: 767px) {
  .eod-timeline {
    padding-top: 4em;
    padding-bottom: 4em;
  }
  .eod-timeline__card {
    width: 5.5em;
  }
}

/* ---- Logo tile grid ----
   Static for now (per the brief, the hover/interaction pass on this
   grid is deferred to later) — a plain responsive grid of square
   tiles, each holding one currentColor-independent brand mark
   (simple-icons SVGs render at their own fixed black by default,
   which reads fine as a quiet monochrome "worked with" strip against
   the light background here — matching the rest of the site's own
   black-on-white treatment elsewhere, e.g. Awards/nav). */
.eod-logos {
  background: var(--eod-white);
  padding-top: 6em;
  padding-bottom: 6em;
}
.eod-logos__grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--eod-content-max);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--eod-border);
  border: 1px solid var(--eod-border);
}
.eod-logos__tile {
  aspect-ratio: 3 / 2;
  background: var(--eod-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5em;
}
.eod-logos__tile img {
  width: 100%;
  height: 100%;
  max-width: 3.5em;
  max-height: 3.5em;
  object-fit: contain;
}
@media (max-width: 767px) {
  .eod-logos {
    padding-top: 4em;
    padding-bottom: 4em;
  }
  .eod-logos__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .eod-logos__tile {
    padding: 1.25em;
  }
  .eod-logos__tile img {
    max-width: 2.75em;
    max-height: 2.75em;
  }
}