/* ==========================================================
   MIM Timeline - Full Stylesheet (Base + V1.1 Effects)
   File: assets/css/mim-timeline.css
========================================================== */

.mim-tl{
  /* Core variables (overridable by Elementor controls) */
  --mim-line-color: #d6d6d6;
  --mim-line-active: #222222;
  --mim-line-size: 3px;

  --mim-marker-size: 44px;
  --mim-marker-radius: 50%;
  --mim-marker-bg: #ffffff;
  --mim-marker-color: #222222;

  --mim-item-gap: 28px;
  --mim-marker-gap: 16px;

  --mim-card-radius: 12px;
  --mim-card-bg: #ffffff;
  --mim-card-border: rgba(0,0,0,.06);
  --mim-card-shadow: 0 10px 28px rgba(0,0,0,.08);

  --mim-circle-size: 520px; /* circle mode */
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

/* Ensure everything uses border-box */
.mim-tl, .mim-tl *{ box-sizing: border-box; }

.mim-tl__items{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--mim-item-gap);
}

/* Line container + progress */
.mim-tl__line{
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.mim-tl__line-progress{
  position: absolute;
  background: var(--mim-line-active);
}

/* Items */
.mim-tl__item{
  position: relative;
  display: grid;
  gap: var(--mim-marker-gap);
  z-index: 1;
}

/* Marker */
.mim-tl__markerwrap{
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.mim-tl__marker{
  width: var(--mim-marker-size);
  height: var(--mim-marker-size);
  border-radius: var(--mim-marker-radius);
  background: var(--mim-marker-bg);
  color: var(--mim-marker-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  flex: 0 0 auto;
  overflow: hidden;
}

.mim-tl__marker i,
.mim-tl__marker svg{
  width: 18px;
  height: 18px;
  display: block;
}

.mim-tl__marker svg{ fill: currentColor; }

.mim-tl__marker-num{
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

.mim-tl__marker-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Card */
.mim-tl__cardwrap{ width: 100%; }

.mim-tl__card{
  width: 100%;
  background: var(--mim-card-bg);
  border: 1px solid var(--mim-card-border);
  border-radius: var(--mim-card-radius);
  box-shadow: var(--mim-card-shadow);
  padding: 18px;
}

.mim-tl__badge{
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  margin-bottom: 10px;
}

.mim-tl__date{
  font-size: 13px;
  opacity: .75;
  margin-bottom: 6px;
}

.mim-tl__title{
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 8px;
}

.mim-tl__content{
  font-size: 14px;
  line-height: 1.6;
  opacity: .92;
}

.mim-tl__btnwrap{ margin-top: 14px; }

.mim-tl__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  background: var(--mim-line-active);
  color: #fff;
  transition: transform 180ms ease, opacity 180ms ease;
}
.mim-tl__btn:hover{ transform: translateY(-2px); opacity: .95; }

/* States (optional) */
.mim-tl__item.is-completed .mim-tl__marker{
  background: var(--mim-line-active);
  color: #fff;
  border-color: transparent;
}

.mim-tl__item.is-active .mim-tl__marker{
  outline: 3px solid rgba(0,0,0,.08);
  outline-offset: 2px;
}

/* ==========================================================
   VERTICAL MODE
========================================================== */

.mim-tl--vertical .mim-tl__items{
  padding-left: calc(var(--mim-marker-size) + var(--mim-marker-gap));
}

.mim-tl--vertical .mim-tl__line{
  top: 0;
  bottom: 0;
  left: calc((var(--mim-marker-size) / 2));
  width: var(--mim-line-size);
  background: var(--mim-line-color);
  border-radius: 999px;
}

.mim-tl--vertical .mim-tl__line-progress{
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  border-radius: 999px;
}

.mim-tl--vertical .mim-tl__item{
  grid-template-columns: var(--mim-marker-size) 1fr;
  align-items: flex-start;
}

/* Vertical style: center (cards right, marker on line) */
.mim-tl--v-center.mim-tl--vertical .mim-tl__items{
  padding-left: calc(var(--mim-marker-size) + var(--mim-marker-gap));
}

/* Alternate: left/right cards */
.mim-tl--v-alternate.mim-tl--vertical .mim-tl__items{
  padding-left: 0;
  gap: calc(var(--mim-item-gap) + 4px);
}

.mim-tl--v-alternate.mim-tl--vertical .mim-tl__line{
  left: 50%;
  transform: translateX(-50%);
}

.mim-tl--v-alternate.mim-tl--vertical .mim-tl__item{
  grid-template-columns: 1fr var(--mim-marker-size) 1fr;
  gap: var(--mim-marker-gap);
}

.mim-tl--v-alternate .mim-tl__markerwrap{
  grid-column: 2;
  justify-content: center;
}

.mim-tl--v-alternate .mim-tl__cardwrap{
  grid-column: 3;
}

.mim-tl--v-alternate .mim-tl__item.is-left .mim-tl__cardwrap{
  grid-column: 1;
}
.mim-tl--v-alternate .mim-tl__item.is-left .mim-tl__cardwrap{
  justify-self: end;
}
.mim-tl--v-alternate .mim-tl__item.is-right .mim-tl__cardwrap{
  justify-self: start;
}

/* Simple left / right */
.mim-tl--v-left.mim-tl--vertical .mim-tl__items{
  padding-left: calc(var(--mim-marker-size) + var(--mim-marker-gap));
}
.mim-tl--v-right.mim-tl--vertical .mim-tl__items{
  padding-left: calc(var(--mim-marker-size) + var(--mim-marker-gap));
}

/* ==========================================================
   HORIZONTAL MODE
========================================================== */

.mim-tl--horizontal .mim-tl__items{
  flex-direction: row;
  gap: var(--mim-item-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding: 22px 6px 10px;
  -webkit-overflow-scrolling: touch;
}
.mim-tl--horizontal .mim-tl__item{
  scroll-snap-align: start;
  min-width: 340px;
  grid-template-rows: var(--mim-marker-size) 1fr;
  grid-template-columns: 1fr;
  gap: var(--mim-marker-gap);
}

.mim-tl--horizontal .mim-tl__markerwrap{
  justify-content: flex-start;
}

.mim-tl--horizontal .mim-tl__line{
  left: 0;
  right: 0;
  top: calc(22px + (var(--mim-marker-size) / 2));
  height: var(--mim-line-size);
  background: var(--mim-line-color);
  border-radius: 999px;
}
.mim-tl--horizontal .mim-tl__line-progress{
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  border-radius: 999px;
}

/* Optional drag UX classes from JS */
.mim-tl--horizontal .mim-tl__items.is-draggable{ cursor: grab; }
.mim-tl--horizontal .mim-tl__items.is-dragging{ cursor: grabbing; }

/* Arrow wrapper */
.mim-tl__hwrap{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}

.mim-tl__arrow{
  appearance: none;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  border-radius: 999px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
.mim-tl__arrow:hover{ transform: translateY(-1px); }

/* Mobile stacking class (from JS) */
.mim-tl.is-stack-mobile.mim-tl--horizontal .mim-tl__hwrap{
  display: block;
}
.mim-tl.is-stack-mobile.mim-tl--horizontal .mim-tl__items{
  flex-direction: column;
  overflow: visible;
  scroll-snap-type: none;
  padding: 0;
}

/* ==========================================================
   CIRCLE MODE (Radial)
========================================================== */

.mim-tl--circle{
  --mim-circle-progress: 0deg;
  position: relative;
  min-height: var(--mim-circle-size);
}

.mim-tl--circle .mim-tl__items{
  position: relative;
  width: var(--mim-circle-size);
  height: var(--mim-circle-size);
  margin: 0 auto;
  display: block;
}

.mim-tl--circle .mim-tl__line{
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--mim-circle-size);
  height: var(--mim-circle-size);
  border-radius: 50%;
  background:
    conic-gradient(var(--mim-line-active) var(--mim-circle-progress), var(--mim-line-color) 0);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - (var(--mim-line-size) / 2)), #000 calc(50% - (var(--mim-line-size) / 2) + 1px));
          mask: radial-gradient(circle, transparent calc(50% - (var(--mim-line-size) / 2)), #000 calc(50% - (var(--mim-line-size) / 2) + 1px));
}

.mim-tl--circle .mim-tl__line-progress{
  display: none; /* circle uses conic-gradient progress */
}

.mim-tl--circle .mim-tl__item{
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1px;
  height: 1px;
  transform: rotate(var(--mim-angle, 0deg)) translate(calc(var(--mim-circle-size) / 2 - 34px)) rotate(calc(var(--mim-angle, 0deg) * -1));
  transform-origin: center;
  display: grid;
  grid-template-columns: var(--mim-marker-size) 320px;
  align-items: center;
  gap: var(--mim-marker-gap);
}

.mim-tl--circle .mim-tl__card{
  max-width: 360px;
}

/* Circle mobile */
@media (max-width: 767px){
  .mim-tl--circle{
    --mim-circle-size: 360px;
  }
  .mim-tl--circle .mim-tl__item{
    grid-template-columns: var(--mim-marker-size) 240px;
    transform: rotate(var(--mim-angle, 0deg)) translate(calc(var(--mim-circle-size) / 2 - 24px)) rotate(calc(var(--mim-angle, 0deg) * -1));
  }
}

/* ==========================================================
   RESPONSIVE FIXES
========================================================== */

@media (max-width: 767px){

  /* Alternate vertical becomes single-column */
  .mim-tl--v-alternate.mim-tl--vertical .mim-tl__items{
    padding-left: calc(var(--mim-marker-size) + var(--mim-marker-gap));
  }
  .mim-tl--v-alternate.mim-tl--vertical .mim-tl__line{
    left: calc((var(--mim-marker-size) / 2));
    transform: none;
  }
  .mim-tl--v-alternate.mim-tl--vertical .mim-tl__item{
    grid-template-columns: var(--mim-marker-size) 1fr;
  }
  .mim-tl--v-alternate .mim-tl__markerwrap{ grid-column: 1; }
  .mim-tl--v-alternate .mim-tl__cardwrap{ grid-column: 2; justify-self: stretch; }
  .mim-tl--v-alternate .mim-tl__item.is-left .mim-tl__cardwrap{ grid-column: 2; justify-self: stretch; }
}

/* ==========================================================
   V1.1 Animations + Effects (your section)
========================================================== */

/* Reveal base */
.mim-tl .mim-tl__item{
  --mim-anim-duration: 650ms;
  --mim-anim-ease: cubic-bezier(.2,.8,.2,1);
  --mim-anim-delay: 0ms;
  --mim-hover-raise: 10px;
  --mim-hover-shadow: 0 18px 40px rgba(0,0,0,.14);
  --mim-glow: 0 0 0 rgba(0,0,0,0);
}

/* start hidden (only when JS enables) */
.mim-tl.is-anim .mim-tl__item{
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity var(--mim-anim-duration) var(--mim-anim-ease) var(--mim-anim-delay),
    transform var(--mim-anim-duration) var(--mim-anim-ease) var(--mim-anim-delay);
  will-change: opacity, transform;
}

.mim-tl.is-anim .mim-tl__item.is-inview{
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* Variants */
.mim-tl[data-anim="fade"] .mim-tl__item{ transform: none; }

.mim-tl[data-anim="slide-up"] .mim-tl__item{ transform: translate3d(0, 22px, 0); }
.mim-tl[data-anim="slide-left"] .mim-tl__item{ transform: translate3d(18px, 0, 0); }
.mim-tl[data-anim="slide-right"] .mim-tl__item{ transform: translate3d(-18px, 0, 0); }
.mim-tl[data-anim="zoom"] .mim-tl__item{ transform: scale(.96); }
.mim-tl[data-anim="flip"] .mim-tl__item{ transform: perspective(700px) rotateX(10deg); transform-origin: center; }

.mim-tl[data-anim="zoom"] .mim-tl__item.is-inview,
.mim-tl[data-anim="flip"] .mim-tl__item.is-inview{
  transform: none;
}

/* Hover effects (card) */
.mim-tl .mim-tl__card{
  transition: transform 220ms var(--mim-anim-ease), box-shadow 220ms var(--mim-anim-ease), filter 220ms var(--mim-anim-ease);
}

.mim-tl[data-hover="lift"] .mim-tl__item:hover .mim-tl__card{
  transform: translate3d(0, calc(var(--mim-hover-raise) * -1), 0);
  box-shadow: var(--mim-hover-shadow);
}

.mim-tl[data-hover="glow"] .mim-tl__item:hover .mim-tl__card{
  filter: drop-shadow(0 18px 42px rgba(0,0,0,.18));
}

.mim-tl[data-hover="tilt"] .mim-tl__item:hover .mim-tl__card{
  transform: perspective(800px) rotateX(2.5deg) rotateY(-2.5deg) translateY(-8px);
  box-shadow: var(--mim-hover-shadow);
}

/* Marker pulse (optional) */
.mim-tl.is-pulse .mim-tl__marker{
  position: relative;
}

.mim-tl.is-pulse .mim-tl__marker::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:inherit;
  border:2px solid var(--mim-line-active);
  opacity:.0;
  animation: mimPulse 2.0s ease-out infinite;
}

@keyframes mimPulse{
  0%{ transform: scale(.85); opacity:.0; }
  25%{ opacity:.35; }
  70%{ transform: scale(1.25); opacity:0; }
  100%{ opacity:0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .mim-tl.is-anim .mim-tl__item{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .mim-tl .mim-tl__card{ transition: none !important; }
  .mim-tl.is-pulse .mim-tl__marker::after{ animation: none !important; }
}