/**
 * Project History
 *
 * A panel spanning the two middle columns (first to third gridline), inset
 * 32px from the top and bottom of the page. Inside it, a translucent card with
 * a title row and a scrollable list of projects. Rows expand one at a time.
 * Figma: portfolio - project history (default / hover / expand).
 */

/* The name stays in the top-left but recedes to the gridline tint (Figma). The
   colour transition lives on .page-content in layout.css. */
.history-page .page-content {
  color: var(--color-name-receded);
}

/* Panel: cream, with a hairline above and below. It sits on top of the center
   gridline, which is why it needs its own ground. The hairlines and ground are
   pseudo-elements so the entrance can draw one and fade the other
   (page-transition.js); the transparent borders only hold the hairlines' space. */
.history-panel {
  position: absolute;
  top: 32px;
  bottom: 32px;
  left: calc(25% + 1px); /* just right of the first gridline */
  right: 25%;            /* just left of the third gridline */
  z-index: 2;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

/* On a direct load, hidden until the intro starts (and plays its entrance) */
.js:not(.intro-started) .history-panel {
  opacity: 0;
}

/* Hairlines: one box spanning both borders, ruled left to right from the
   first gridline on entrance */
.history-panel::before {
  content: '';
  position: absolute;
  inset: -1px 0;
  pointer-events: none;
  border-top: 1px solid var(--color-gridline);
  border-bottom: 1px solid var(--color-gridline);
  transform-origin: 0 50%;
}

/* Ground */
.history-panel::after {
  content: '';
  position: absolute;
  inset: -1px 0;
  z-index: -1;
  pointer-events: none;
  background: var(--color-bg-page);
}

/* Card: fixed to the panel's inset, so the list has a fixed height to scroll in */
.history-card {
  position: absolute;
  inset: 32px;
  display: flex;
  flex-direction: column;
}

/* The card's fill + warm shadow live on a pseudo-element so its 80% opacity
   (Figma) doesn't dim the text on top of it. */
.history-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--color-card-fill);
  opacity: 0.8;
  box-shadow:
    0 30px 65px 0 rgba(var(--color-card-shadow-rgb), 0.10),
    0 118px 118px 0 rgba(var(--color-card-shadow-rgb), 0.09),
    0 266px 159px 0 rgba(var(--color-card-shadow-rgb), 0.05),
    0 472px 189px 0 rgba(var(--color-card-shadow-rgb), 0.01),
    0 738px 207px 0 rgba(var(--color-card-shadow-rgb), 0);
}

/* Title row: "PROJECT HISTORY" left, ghost "CLOSE" right */
.history-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 32px 32px 32px;
  flex-shrink: 0;
}

.history-heading,
.history-close {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0;
}

.history-heading {
  color: var(--color-text);
}

/* Ghost button: text only, link colour */
.history-close {
  color: var(--color-link);
  text-decoration: none;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

/* List: fills the rest of the card and scrolls (custom scrollbar from base.css) */
.history-list {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* history.js drives the scroll in step with the rows; the browser's own
     scroll anchoring would fight it while rows change height */
  overflow-anchor: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Applying a state instantly (initial open, measuring where a scroll should
   land): every transition in the list is off for that one style update */
.history-list.is-instant,
.history-list.is-instant * {
  transition: none !important;
}

/* Row timing, inherited by the body track and the icon:
   --track-*  opening is quick to respond (ease-out); closing eases both ends
   --hover-dur  hover comes in fast and leaves slowly */
.history-item {
  --track-dur: 300ms;
  --track-ease: var(--ease-in-out);
  --hover-dur: var(--dur-3);
  border-bottom: 1px solid var(--color-gridline);
  transition: background-color var(--hover-dur) var(--ease-out);
}

.history-item.is-open {
  --track-dur: var(--dur-4);
  --track-ease: var(--ease-out);
}

/* Row: the whole row is the expand/collapse control */
.history-item-toggle {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 24px 32px;
  margin: 0;
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.history-item-toggle:focus-visible {
  outline: 1px solid var(--color-link);
  outline-offset: -1px;
}

.history-years {
  flex-shrink: 0;
  width: 140px;
  font-family: var(--font-article-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: var(--color-text-muted);
  transition: color var(--hover-dur) var(--ease-out);
}

.history-meta {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
}

.history-brand {
  color: var(--color-text-muted);
  transition: color var(--hover-dur) var(--ease-out);
}

.history-title {
  color: var(--color-text);
  transition: color var(--hover-dur) var(--ease-out);
}

/* Plus icon; rotates into a close "x" when the row is open */
.history-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  /* The rotation shares the body track's clock */
  transition: color var(--hover-dur) var(--ease-out), transform var(--track-dur) var(--track-ease);
}

/* Hover (Figma: row goes cream, years/brand darken, title + plus go green).
   Pointer devices only, so a tap doesn't leave a row stuck in hover. */
@media (hover: hover) {
  .history-item:has(.history-item-toggle:hover) {
    --hover-dur: var(--dur-1);
    background: var(--color-bg-page);
  }

  .history-item-toggle:hover .history-years,
  .history-item-toggle:hover .history-brand {
    color: var(--color-text-muted-strong);
  }

  .history-item-toggle:hover .history-title,
  .history-item-toggle:hover .history-icon {
    color: var(--color-link);
  }
}

/* Expanded (Figma: cream row, years at full ink, plus becomes an "x") */
.history-item.is-open {
  background: var(--color-bg-page);
}

.history-item.is-open .history-years {
  color: var(--color-text);
}

.history-item.is-open .history-icon {
  color: var(--color-text-muted-strong);
  transform: rotate(45deg);
}

@media (hover: hover) {
  .history-item.is-open .history-item-toggle:hover .history-icon {
    color: var(--color-link);
  }
}

/* Body: height animates via a 0fr -> 1fr grid track; the inner element clips */
.history-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--track-dur) var(--track-ease);
}

.history-item.is-open .history-body {
  grid-template-rows: 1fr;
}

.history-body-inner {
  min-height: 0;
  overflow: hidden;
}

/* 24px between the title row (its own bottom padding), the image and the text */
.history-body-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 32px 24px;
}

/* The content never gets sliced by the moving edge. Opening, it waits for
   the track to get ahead, then fades in and rises; closing, it fades out
   fast, before the edge reaches it (and resets its rise once invisible). */
.history-body-content {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 120ms var(--ease-in), transform 0s linear 120ms;
}

.history-item.is-open .history-body-content {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-3) var(--ease-out) 100ms,
              transform var(--dur-6) var(--ease-out-expo) 100ms;
}

/* Gallery image (Figma: 695 x 391) */
.history-gallery {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 695 / 391;
  overflow: hidden;
  /* Opening: unmasks top to bottom while the image settles into it */
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0s linear 120ms;
}

.history-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 0s linear 120ms;
}

.history-item.is-open .history-gallery {
  clip-path: inset(0);
  transition: clip-path var(--dur-6) var(--ease-out-expo) 100ms;
}

.history-item.is-open .history-gallery img {
  transform: none;
  transition: transform var(--dur-7) var(--ease-out-expo) 100ms;
}

/* Description (Figma: 12px between paragraphs) */
.history-text {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: var(--color-text);
}

.history-text p {
  margin: 0;
}

.history-text p + p {
  margin-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .history-body,
  .history-icon,
  .history-item,
  .history-gallery,
  .history-gallery img,
  .history-item.is-open .history-gallery,
  .history-item.is-open .history-gallery img {
    transition: none;
  }

  /* Content crossfades in place */
  .history-body-content,
  .history-item.is-open .history-body-content {
    transform: none;
    transition: opacity 160ms linear;
  }

  .history-gallery,
  .history-gallery img {
    clip-path: none;
    transform: none;
  }
}

/* Narrower desktops: the panel is half the viewport, so let titles wrap */
@media (max-width: 1200px) {
  .history-years {
    width: 112px;
  }

  .history-meta {
    flex-wrap: wrap;
    white-space: normal;
  }
}

/* Mobile: the illustration and peek are hidden (layout.css); the panel takes
   the whole frame and the years move onto their own line. */
@media (max-width: 768px) {
  .history-panel {
    inset: 0;
    border: 0;
  }

  .history-panel::before {
    display: none;
  }

  .history-panel::after {
    inset: 0;
  }

  .history-card {
    inset: 16px;
  }

  .history-header {
    padding: 24px 16px;
  }

  .history-item-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    gap: 8px 16px;
    padding: 16px;
  }

  .history-years {
    width: auto;
  }

  .history-icon {
    grid-column: 2;
    grid-row: 1;
  }

  .history-meta {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    white-space: normal;
  }

  .history-body-content {
    padding: 0 16px 16px;
    gap: 16px;
  }
}