/* ===========================
   D4D TIMELINE (clean aligned)
   =========================== */

.d4d-timeline{
  /* customize */
  --line-base: #000;
  --line-progress-color: #000;
  --line-width: 1px;
  --line-progress-width: 3px;

  --row-gap: 90px;
  --container-gap: 32px;

  /* driven by JS */
  --line-progress: 0;

  position: relative;
  display: flex;
  flex-direction: column;
  row-gap: var(--row-gap);
  padding: 30px 0;
}

/* Base line */
.d4d-timeline:before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width: var(--line-width);
  background: var(--line-base);
  pointer-events: none;
}

/* Progress overlay line */
.d4d-timeline:after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width: var(--line-progress-width);
  transform: translateX(-1px) scaleY(var(--line-progress));
  transform-origin: top;
  background: var(--line-progress-color);
  will-change: transform;
  pointer-events: none;
}

/* ===========================
   ITEM LAYOUT (16-col grid)
   =========================== */

.d4d-timeline__item{
  /* driven by JS (0..1) */
  --reveal: 0;
  --cut: calc((1 - var(--reveal)) * 100%); /* 100% hidden -> 0% visible */
  --radius: 10px;

  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--center-gap, 64px) minmax(0, 1fr);
  -moz-column-gap: var(--container-gap);
       column-gap: var(--container-gap);
  row-gap: var(--container-gap);
  align-items: center;
}

/* columns */
.d4d-timeline__col{ min-width:0; }

/* media wrapper */
.d4d-timeline__col--a{
  grid-row: 1;
  z-index: 2;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

/* content wrapper (like .story-main-item-content) */
.d4d-timeline__col--b{
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-self: center;
}

/* LEFT item: media left, content right */
.d4d-timeline__item--left .d4d-timeline__col--a{ grid-column: 1; }
.d4d-timeline__item--left .d4d-timeline__col--b{ grid-column: 3; }

/* RIGHT item: media right, content left */
.d4d-timeline__item--right .d4d-timeline__col--a{ grid-column: 3; }
.d4d-timeline__item--right .d4d-timeline__col--b{ grid-column: 1; }
/* ===========================
   IMAGE (reveal on wrapper, drift on img)
   =========================== */

/* Wrapper becomes the clipping mask (like your reference .story-main-item-img) */
.d4d-timeline__media{
  /* uses --reveal coming from .d4d-timeline__item */
  --radius: 10px;
  --cut: calc((1 - var(--reveal)) * 100%);

  width: 100%;
  transition: -webkit-clip-path .65s cubic-bezier(.22,.61,.36,1);
  transition: clip-path .65s cubic-bezier(.22,.61,.36,1);
  transition: clip-path .65s cubic-bezier(.22,.61,.36,1), -webkit-clip-path .65s cubic-bezier(.22,.61,.36,1);
  will-change: clip-path;
  border-radius: var(--radius);

  position: relative;
  overflow: hidden;            /* stabilizes clipping */
  will-change: clip-path;

  /* default fully visible (overridden per side below) */
  -webkit-clip-path: inset(0 0 0 0 round var(--radius));
  clip-path: inset(0 0 0 0 round var(--radius));
}

/* Image only moves/scales (like .story-main-item-img-inner) */
.d4d-timeline__img{
  width: 100%;
  height: auto;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;

  /* drift + zoom (driven by --reveal) */
  --tx: 0%;
  --ty: 0%;
  --sc: 1;
  transform: translate(var(--tx), var(--ty)) translate3d(0,0,0) scale(var(--sc));
  will-change: transform;
    transition: transform .65s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

/* LEFT reveal: top-right toward bottom-left */
.d4d-timeline__item--left .d4d-timeline__media{
  -webkit-clip-path: inset(0% 0% var(--cut) var(--cut) round var(--radius));
  clip-path: inset(0% 0% var(--cut) var(--cut) round var(--radius));
}
.d4d-timeline__item--left .d4d-timeline__img{
  --tx: calc((1 - var(--reveal)) * -2.0548%);
  --ty: calc((1 - var(--reveal)) * -2.0548%);
  --sc: calc(1 + (1 - var(--reveal)) * 0.0164);
}

/* RIGHT reveal: top-left toward bottom-right */
.d4d-timeline__item--right .d4d-timeline__media{
  -webkit-clip-path: inset(0% var(--cut) var(--cut) 0% round var(--radius));
  clip-path: inset(0% var(--cut) var(--cut) 0% round var(--radius));
}
.d4d-timeline__item--right .d4d-timeline__img{
  --tx: calc((1 - var(--reveal)) * 2.0548%);
  --ty: calc((1 - var(--reveal)) * -2.0548%);
  --sc: calc(1 + (1 - var(--reveal)) * 0.0164);
}
/* ===========================
   TEXT
   =========================== */

.d4d-timeline__text{
  text-align: left;
  max-width: none;
  margin: 0;
  display: block;
  position: relative;
    transition: transform .5s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
  transition: opacity .35s ease;
}

.d4d-timeline__title{
  margin:0 0 12px 0;
  font-size:34px;
  line-height:1.15;
}

.d4d-timeline__year{
  margin:0 0 16px 0;
  font-weight:700;
  font-size:28px;
  line-height:1.1;
}

.d4d-timeline__summary{
  margin:0;
  font-size:16px;
  line-height:1.7;
  opacity:.95;
}

/* ===========================
   MOBILE
   =========================== */
@media (max-width: 767px){
  .d4d-timeline{ --row-gap: 40px; }

  .d4d-timeline:before,
  .d4d-timeline:after{ display:none; }

  .d4d-timeline__item{
    grid-template-columns: 1fr;
    row-gap: 18px;
  }

  .d4d-timeline__col--a,
  .d4d-timeline__col--b{
    grid-column: 1 !important;
  }

  .d4d-timeline__title{ font-size:26px; }
  .d4d-timeline__year{ font-size:22px; }
}

/* ===========================
   REDUCED MOTION
   =========================== */
@media (prefers-reduced-motion: reduce){
  .d4d-timeline:after{
    transform: translateX(-50%) scaleY(1);
  }
  .d4d-timeline__img{
    transform: none;
  }
  .d4d-timeline__media{
    -webkit-clip-path: inset(0 0 0 0 round var(--radius));
    clip-path: inset(0 0 0 0 round var(--radius));
  }
}