:root{
  --line-thickness: 4px;
  --line-color: #ffffff;
  --lime: #B4F701;
  --tail: clamp(220px, 2vh, 420px);
  --dot-size: 25px;
  --dot-fill: #D9D9D9;
  --dot-stroke: #BFBFBF;
  --dot-fill-active: #B4F701;
  --dot-stroke-active: #4E7B41;

  --near-line-gap: 50px;
  --mobile-left: 24px;
  --mobile-rail-space: 56px;
}

/* === Timeline (context unchanged) === */
.timeline{ position:relative; }
.timeline .timeline-item{ position:relative; padding:1rem 0; margin-bottom:4rem; }
.timeline .timeline-item:last-child{ margin-bottom:0; }
.timeline .timeline-item .row{ align-items:center; }

.timeline-line{
  position:absolute; left:50%; transform:translateX(-50%);
  top:0; bottom:0; width:var(--line-thickness);
  background:var(--line-color); border-radius:9999px; z-index:0; pointer-events:none;
}

.timeline-progress{
  position:absolute; left:50%; transform:translateX(-50%);
  top:0; height:0; width:var(--line-thickness);
  border-radius:var(--line-thickness); z-index:1; pointer-events:none;
}

/* === Dots — clearer color fade (no shadow/opacity/scale) === */
.timeline-dot{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:var(--dot-size); height:var(--dot-size); border-radius:50%;

  /* colors explicitly set so they animate */
  background-color: var(--dot-fill);
  border: 4px solid var(--dot-stroke);

  /* make the fade more obvious */
  transition:
    background-color .6s cubic-bezier(.22,.61,.36,1),
    border-color .6s cubic-bezier(.22,.61,.36,1);
  will-change: background-color, border-color;

  z-index:2;
}

/* Active = just color swap, animated by the transition above */
.timeline-item.is-active .timeline-dot{
  background-color: var(--dot-fill-active);
  border-color: var(--dot-stroke-active);
}

/* if i use .is-visited, keep base colors so it can fade back when deactivated.
   maybe ima remove this if i dont use .is-visited. */
.timeline-item.is-visited .timeline-dot{
  background-color: var(--dot-fill);
  border-color: var(--dot-stroke);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .timeline-dot{ transition: none; }
}


/* Keep content away from center rail on desktop */
@media (min-width: 992px){
  .timeline .row > .order-md-1{ padding-right: var(--near-line-gap); }
  .timeline .row > .order-md-2{ padding-left:  var(--near-line-gap); }
}

/* Phones/tablets: dock the rail to the left */
@media (max-width: 991.98px){
  .timeline-line{ left: var(--mobile-left); transform:none; }
  .timeline-progress{ left: var(--mobile-left); transform:none; }
  .timeline-dot{
    left: var(--mobile-left);
    transform: translate(calc((var(--line-thickness) - var(--dot-size))/2), -50%);
  }
  .timeline .row > [class*="col-"]{ padding-left: var(--mobile-rail-space); }
}

.timeline.is-complete .timeline-progress{
  background: linear-gradient(to bottom, var(--lime) 0%, var(--lime) 100%);
}
/* Timeline typographic bits live here to keep the module self-contained */
.tl-title{
  font-size:20px; color:#CEE6E9;
  font-family: 'Josefin Sans', sans-serif; font-weight:600;
  line-height:1.2; margin:0 0 .5rem 0;
}
.our_story_text{
  font-size:20px; font-weight:300; 
  color:#CEE6E9;
   white-space: pre-line;
}
.tl-img{
  display:block; width:80%; height:80%;
}
/* Center all timeline images */
.timeline .tl-img{
  display:block; margin-left:auto; margin-right:auto;
  max-width:100%; height:auto; object-fit:contain;
}

/* ========== Light mode tweaks (timeline only) ========== */
html[data-theme="light"] .timeline-line{ background:#D9D9D9 !important; }
html[data-theme="light"] .timeline-item.is-visited .timeline-dot,
html[data-theme="light"] .timeline-item.is-active  .timeline-dot{
  background:#244A50 !important; border-color:#30636A !important;
}
/* Timeline text in light mode */
html[data-theme="light"] .tl-title{ color:#244A50 !important; }
html[data-theme="light"] .our_story_text{ color:#30636A !important; }

/* ===== Reveal primitives ===== */
.reveal-hidden { opacity: 0; transform: translateY(16px); }
.reveal-show   { opacity: 1; transform: none; }

/* Variants (you can mix & match) */
.reveal-up   { transform: translateY(16px); }
.reveal-pop  { transform: scale(.96); }
.reveal-fade { transform: none; }

/* Smooth transitions */
.reveal-hidden,
.reveal-show {
  transition:
    opacity .35s ease,
    transform .35s ease;
  will-change: opacity, transform;
}

/* Dots feel nice with a tiny pop */
.timeline-dot.reveal-hidden { transform: scale(.85); }
.timeline-dot.reveal-show   { transform: scale(1);   }

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  .reveal-hidden,
  .reveal-show {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* Progress color reacts instantly to theme via CSS vars */
.timeline-progress{
  background: linear-gradient(
    to bottom,
    var(--lime) 0,
    var(--lime) calc(100% - var(--tail)),
    rgba(180,247,1,0) 100%
  );
}

/* Dots use CSS-only colors (no JS) */
.timeline-dot{
  background: var(--dot-fill, #D9D9D9);
  border: 4px solid var(--dot-stroke, #BFBFBF);
}
.timeline-item.is-visited .timeline-dot,
.timeline-item.is-active  .timeline-dot{
  background: var(--dot-fill-active, #6CA138);
  border-color: var(--dot-stroke-active, #4E7B41);
}

/* Light mode overrides */
html[data-theme="light"]{
  --lime: #457278; /* your light-mode lime */
}
html[data-theme="light"] .timeline-item.is-visited .timeline-dot,
html[data-theme="light"] .timeline-item.is-active  .timeline-dot{
  background:#244A50;
  border-color:#30636A;
}

/* Fade-in animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hidden by default */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* When visible on scroll */
.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}

.js .fade-in {
  opacity: 0;
  transform: translateY(30px);
}

/* You can keep your offset */
#wheelWrap{
  margin-top:-100px;
  position: relative;   /* create a stack context */
  z-index: 1;           /* put wheel beneath controls */
}

/* Ensure the filter bar & its menu sit above the wheel */
.filter-bar{
  position: relative;
  z-index: 3000;
}
.filter-bar .dropdown-menu{
  position: absolute;   /* Bootstrap default */
  z-index: 4000;
      /* higher than any wheel layers */
}

/* If you have any full-size transparent layers over the wheel (hitboxes/decoration), 
   make sure they don't block the button area */
#wheelOverlay, #wheelHitbox, #wheelMask { pointer-events: none; } /* optional: only if such elements exist */