/* ============================================================
   History — vertical timeline (photo left + date/title/desc right)
   ============================================================ */


/* ============================================================
   Timeline wrapper
   ============================================================ */

.history {
  background: var(--white);
  padding: 72px 0 32px;
}

.history__inner {
  max-width: 1080px;
  margin: 0 auto;
  position: relative;

  /* Progress line height — set dynamically by JS */
  --progress-h: 0px;
}

/* Progress line — grows from top as user scrolls (ink + red tip) */
.history__inner::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(36% - 1px);
  width: 2px;
  height: var(--progress-h);
  max-height: 100%;
  background: linear-gradient(
    to bottom,
    var(--ink) 0%,
    var(--ink) calc(100% - 60px),
    var(--red) 100%
  );
  border-radius: var(--r-pill);
  z-index: 1;
  transition: height 80ms linear;
  pointer-events: none;
}

/* Tip indicator — small red dot at the leading edge of the progress */
.history__inner-tip {
  position: absolute;
  top: var(--progress-h);
  left: calc(36% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(225, 25, 50, 0.16);
  transform: translateY(-50%);
  z-index: 2;
  opacity: 0;
  transition: opacity 200ms var(--ease),
              top 80ms linear;
  pointer-events: none;
}

.history__inner.is-active .history__inner-tip { opacity: 1; }

@media (max-width: 767.98px) {
  .history { padding: 48px 0 80px; }
  .history__inner::after { left: 17px; }
  .history__inner-tip { left: 14px; }
}


/* ============================================================
   Single event row
   ============================================================ */

.history-event {
  position: relative;
  display: grid;
  grid-template-columns: 36% minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  padding: 40px 0;
}

/* ---------- Staggered cascade animation ----------
   ყოველი ნაწილი ცალკე ჩნდება, ნელი ცვალებადობით.
   Total cascade ~ 900ms from event entry to last description.
*/

.history-event__media,
.history-event__year,
.history-event__date,
.history-event__title,
.history-event__desc {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 620ms;
  transition-timing-function: var(--ease);
}

/* Photo — slides in from left */
.history-event__media {
  transform: translateX(-28px) translateY(8px);
  aspect-ratio: 5 / 4;
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--border);
  transition-delay: 0ms;
}

.history-event__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

.history-event:hover .history-event__media img { transform: scale(1.04); }

/* Dot — controlled by progress line (NOT by event cascade).
   Appears only when scroll progress reaches its Y position. */
.history-event__dot {
  position: absolute;
  top: 50%;
  left: 36%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 1px var(--border);
  z-index: 2;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition: opacity 280ms var(--ease),
              transform 420ms cubic-bezier(.34, 1.56, .64, 1);
}

.history-event__dot.is-reached {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.history-event__dot--milestone {
  background: var(--red);
  width: 18px;
  height: 18px;
  box-shadow: 0 0 0 1px var(--border), 0 0 0 6px rgba(225, 25, 50, 0.1);
}

/* Year — slides up */
.history-event__year { transform: translateY(20px); transition-delay: 320ms; }

/* Date */
.history-event__date,
.history-event__title,
.history-event__desc {
  /* shared upward slide */
}
.history-event__date { transform: translateY(16px); transition-delay: 440ms; }
.history-event__title { transform: translateY(16px); transition-delay: 540ms; }
.history-event__desc { transform: translateY(16px); transition-delay: 680ms; }

/* ---------- Visible state: snap all to final position ---------- */

.history-event.is-visible .history-event__media,
.history-event.is-visible .history-event__year,
.history-event.is-visible .history-event__date,
.history-event.is-visible .history-event__title,
.history-event.is-visible .history-event__desc {
  opacity: 1;
  transform: translateY(0);
}

.history-event.is-visible .history-event__media {
  transform: translateX(0) translateY(0);
}

/* Year underline — width animates from 0 to 40px after year fades in */
.history-event__year::after {
  width: 0;
  transition: width 500ms var(--ease) 600ms;
}

.history-event.is-visible .history-event__year::after {
  width: 40px;
}

/* Content column */
.history-event__content {
  padding-left: 28px;
  position: relative;
}

/* Year display — large, institutional */
.history-event__year {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.history-event__year::after {
  content: "";
  height: 1.5px;
  background: var(--red);
  display: inline-block;
  /* width animated via .is-visible (see cascade rules above) */
}

.history-event__date {
  display: block;
  font-size: var(--fs-13);
  color: var(--text-muted);
  margin-bottom: 12px;
  font-weight: 500;
}

.history-event__title {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-bottom: 14px;
  text-wrap: balance;
}

.history-event__desc {
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 52ch;
}

.history-event__desc strong { color: var(--ink); font-weight: 600; }

/* Milestone variation — larger year, slight emphasis */
.history-event--milestone .history-event__year {
  color: var(--red);
}

.history-event--milestone .history-event__year::after {
  background: var(--ink);
}


/* ============================================================
   Responsive — stack vertically on mobile
   ============================================================ */

@media (max-width: 767.98px) {
  .history-event {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 0 28px 48px;
  }

  .history-event__dot {
    left: 18px;
    top: 24px;
    transform: translate(-50%, 0);
  }

  .history-event__content { padding-left: 0; }

  .history-event__media { aspect-ratio: 16 / 10; max-width: 480px; }

  .history-event.is-visible .history-event__year::after { width: 32px; }
}


/* ============================================================
   Closing stat strip — light editorial (matches timeline year style)
   ============================================================ */

.history-stat {
  margin: 56px 0 0;
  max-width: 1080px;
  margin-inline: auto;
  padding: 40px 0 0;
  border-top: 1px solid var(--border);
  background: transparent;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
}

.history-stat__item {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.history-stat__num {
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 14px;
}

.history-stat__num::after {
  content: "";
  width: 28px;
  height: 1.5px;
  background: var(--red);
  display: inline-block;
  flex-shrink: 0;
}

.history-stat__label {
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  line-height: 1.4;
  max-width: 18ch;
}

/* Tighten gap to CTA below */
.history + .container .cta-block {
  margin-top: 32px;
}

@media (max-width: 767.98px) {
  .history { padding-bottom: 16px; }
  .history-stat {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 20px;
    padding-top: 32px;
    margin-top: 40px;
  }
  .history-stat__num { font-size: 32px; gap: 10px; }
  .history-stat__num::after { width: 20px; }
  .history + .container .cta-block { margin-top: 24px; }
}


/* ============================================================
   Reduced motion fallback
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .history-event__media,
  .history-event__year,
  .history-event__date,
  .history-event__title,
  .history-event__desc {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .history-event__dot {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
    transition: none !important;
  }
  .history-event__year::after { width: 40px !important; transition: none !important; }
  .history-event__media img { transition: none; }
}