/* Styles for the Example Day timeline (scoped to #generic-text-3-uUlbAKjLcu and .timeline01) */
.timeline01{
  padding: 2.5rem 0;
  background: linear-gradient(180deg,#ffffff 0%, #f6fbf3 100%);
}
.timeline01 .section-head{ margin-bottom:1rem; }
.timeline{ position:relative; padding-left:1rem; }

/* Initial state and animation for timeline items */
.timeline-item {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  position:relative; 
  padding:1rem 1rem 1rem 3.5rem; 
  margin-bottom:1rem;
}

/* Visible state when item scrolls into view */
.timeline-item.timeline-visible {
  opacity: 1;
  transform: translateX(0);
}

.timeline:before{ content:''; position:absolute; left:18px; top:0; bottom:0; width:3px; background: rgba(58,122,42,0.08); border-radius:2px; }
.timeline-time{ position:absolute; left: -24px; top: 30px; width: 56px; height:56px; border-radius:50%; background:linear-gradient(135deg,#3a7a2a,#6fbf3a); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; box-shadow: 0 8px 20px rgba(58,122,42,0.12); transition:transform .22s ease, box-shadow .22s ease; }


/* subtle hover pop for pointer devices */
.timeline-item:hover .timeline-time{ transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 28px rgba(58,122,42,0.14); }

.timeline-content{ background:#fff; border-radius:10px; padding:0.9rem 1rem; box-shadow: 0 8px 20px rgba(10,30,10,0.04); }
.timeline-title{ font-weight:700; color:#18421a; margin:0 0 0.25rem; }
.timeline-desc{ margin:0; color:#425057; font-size:0.95rem; line-height:1.4; }
.timeline-note{ margin-top:.5rem; font-size:0.9rem; color:#5b6b79; }

/* Stagger the reveal animations slightly */
.timeline-item:nth-child(2) { transition-delay: 0.1s; }
.timeline-item:nth-child(3) { transition-delay: 0.2s; }
.timeline-item:nth-child(4) { transition-delay: 0.3s; }
.timeline-item:nth-child(5) { transition-delay: 0.4s; }
.timeline-item:nth-child(n+6) { transition-delay: 0.5s; }

@media (max-width:767px){
  .timeline{ padding-left:0; }
  .timeline:before{ left:8px; }
  .timeline-item{ padding-left:3.5rem; }
  .timeline-time{ left: -18px; width:48px; height:48px; font-size:0.95rem; }
  .timeline-time::after{ right:4px; top:4px; width:12px; height:12px; }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .timeline-item{ 
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .timeline-time, .timeline-item:hover .timeline-time{ transform:none !important; }
}