/* DREMAZE Timeline – Frontend */
.dtl-wrap{
  width:100%;
  background: var(--dtl-bg);
  color: var(--dtl-text);

  /* axis position (desktop overwritten by 50%) */
  --dtl-axis: 50%;
}

.dtl-timeline{
  position:relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 14px;
}

.dtl-timeline:before{
  content:"";
  position:absolute;
  left: var(--dtl-axis);
  top:0;
  bottom:0;
  width:2px;
  background: var(--dtl-line);
  transform: translateX(-50%);
}

.dtl-item{
  position:relative;
  display:flex;
  width:100%;
  margin: 0 0 var(--dtl-gap) 0;
}

.dtl-item:last-child{ margin-bottom: 0; }

.dtl-item.dtl-left{ justify-content:flex-start; }
.dtl-item.dtl-right{ justify-content:flex-end; }

/* marker aligned to the axis */
.dtl-marker{
  position:absolute;
  left: var(--dtl-axis);
  top: 22px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--dtl-accent);
  transform: translateX(-50%);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--dtl-accent) 18%, transparent);
}

/* subtle idle pulse (micro interaction) */
.dtl-marker::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:999px;
  background: color-mix(in srgb, var(--dtl-accent) 18%, transparent);
  opacity:0;
  transform: scale(.85);
  transition: opacity .35s ease, transform .35s ease;
}

.dtl-card{
  width: min(520px, 100%);
  background: var(--dtl-card);
  border: 1px solid color-mix(in srgb, var(--dtl-line) 70%, transparent);
  border-radius: var(--dtl-radius);
  padding: 18px 18px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);

  /* reveal animation base state */
  opacity: 0;
  transform: translateY(10px);
  transition: transform .55s ease, opacity .55s ease, box-shadow .25s ease;
  will-change: transform, opacity;
}

/* Desktop offset from axis */
.dtl-left .dtl-card{ margin-right: calc(50% + 22px); }
.dtl-right .dtl-card{ margin-left: calc(50% + 22px); }

/* reveal in-view */
.dtl-item.is-inview .dtl-card{
  opacity: 1;
  transform: translateY(0);
}
.dtl-item.is-inview .dtl-marker::after{
  opacity: 1;
  transform: scale(1);
}

/* hover micro interaction */
@media (hover:hover){
  .dtl-item:hover .dtl-card{
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0,0,0,.10);
  }
}

/* respects reduced motion */
@media (prefers-reduced-motion: reduce){
  .dtl-card{ transition:none; opacity:1; transform:none; }
  .dtl-marker::after{ display:none; }
}

.dtl-year{
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--dtl-primary);
  font-size: 22px;
  line-height: 1.1;
  margin-bottom: 10px;
}

.dtl-title{
  margin: 0 0 10px 0;
  font-size: 18px;
  line-height: 1.25;
  color: var(--dtl-primary);
}

.dtl-text{
  color: var(--dtl-text);
  font-size: 15px;
  line-height: 1.6;
}

.dtl-text p{ margin: 0 0 10px 0; }
.dtl-text p:last-child{ margin-bottom: 0; }

.dtl-image{
  margin-top: 14px;
}

.dtl-image img.dtl-img{
  width: 100%;
  height: auto;
  border-radius: calc(var(--dtl-radius) - 6px);
  display:block;
}

/* Mobile */
@media (max-width: 860px){
  .dtl-wrap{ --dtl-axis: 22px; } /* single source of truth */
  .dtl-timeline:before{ transform: none; } /* no -50% shift needed on fixed px axis */
  .dtl-item{ justify-content:flex-start; padding-left: 0; }
  .dtl-marker{ transform: none; left: var(--dtl-axis); }
  .dtl-timeline:before{ left: var(--dtl-axis); }

  .dtl-left .dtl-card,
  .dtl-right .dtl-card{
    margin: 0 0 0 48px; /* consistent spacing from axis */
    width: 100%;
    max-width: 720px;
  }
}