/* ============================================================
   SiloV · Timeline for the #meeting section (the four strategy meeting metrics)
   Ported from Aceternity UI "Timeline" (see assets/MEETING-TIMELINE-SOURCE.md).
   Loaded after site.css / theme-light.css / hero-layers.css, before a11y.css.
   Scoped under #meeting.mt-sec so nothing outside this section is touched.

   Atmosphere follows the hero: a far halo plane (rate 1.2 backwards), one masked
   photo plane (rate 0.6 backwards), a floor fade, then the content plane. The
   planes are moved by assets/hero-layers.js: the section carries .layer-act and
   the planes carry data-parallax. Nothing here writes a second parallax engine.

   Mirrored for RTL with logical properties: the vertical line and the dots sit on
   the start side (right), the sticky number and title on the start column, the
   paragraph on the end column. Without JS, and under reduced motion, html never
   carries .mt-js and the sheet shows the final state: full line, every dot lit.
   ============================================================ */

/* ---- ground and stacking ---- */
#meeting.mt-sec{ background:#F7F4FF; isolation:isolate }

/* no JS: site.js never adds .in to the page's .reveal elements, so inside this section
   they are only allowed to start hidden once the script has marked html.mt-js */
html:not(.mt-js) #meeting .reveal{ opacity:1; --rv:0px; transform:none }

/* ---- atmosphere: spans the full section width, clipped by .sec overflow:clip ---- */
#meeting .mt-atmo{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:#F7F4FF;     /* the ground lives here too, so the photo plane can multiply against it */
}
#meeting .mt-plane{ position:absolute; pointer-events:none; will-change:transform }

/* far plane: a soft lavender halo behind the head column (start side), blurred as distance */
#meeting .mt-plane-far{
  inset:-22% -12%;
  background:radial-gradient(36% 34% at 80% 76%, rgba(167,139,250,.26), rgba(167,139,250,.1) 42%, transparent 72%);
  filter:blur(44px);
}
/* mid plane: the owner's lavender gradient photo, cropped to its top half, as a masked plane
   multiplied into the ground so it only deepens the lavender and never greys it */
#meeting .mt-plane-photo{
  inset-inline-start:-6%; top:auto; bottom:-8%; width:52%; height:70%;
  background:url("photos/meeting-gradient-lavender.webp") center top / cover no-repeat;
  -webkit-mask-image:radial-gradient(50% 46% at 50% 56%, #000 0%, rgba(0,0,0,.5) 42%, transparent 72%);
  mask-image:radial-gradient(50% 46% at 50% 56%, #000 0%, rgba(0,0,0,.5) 42%, transparent 72%);
  mix-blend-mode:multiply; opacity:.3;
}
/* floor: the planes settle into the section ground over the last 220px, above every plane */
#meeting .mt-floor{
  position:absolute; inset-inline:0; bottom:0; height:220px;
  background:linear-gradient(to bottom, rgba(247,244,255,0), #F7F4FF);
  pointer-events:none;
}

/* ---- two columns: the head stays sticky in its column, the timeline scrolls in the other ---- */
#meeting .mt-two{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(40px,6vw,80px); align-items:start;
}
#meeting .mt-head{ position:sticky; top:112px; align-self:start }   /* 72px header plus 40px */

/* ---- timeline body (the source's relative wrapper with pb 20 = 80px) ---- */
#meeting .mt-timeline{ position:relative; padding-bottom:80px }

/* the quiet track: 2px, transparent at both ends, masked 10% in from top and bottom, as the source */
#meeting .mt-track{
  position:absolute; top:0; bottom:0; inset-inline-start:31px; width:2px; z-index:0;
  overflow:hidden; pointer-events:none;
  background:linear-gradient(to bottom, transparent 0%, #DDD2FB 50%, transparent 99%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
/* the fill: full height, scaled from the top by scroll progress (assets/meeting-timeline.js).
   Gradient reads from the tip upward: brand at the tip, lavender a tenth in, fading to nothing,
   the source's "to top, purple 0%, blue 10%, transparent" in brand colours. No transition here. */
#meeting .mt-fill{
  position:absolute; inset-inline:0; top:0; width:2px; height:100%; border-radius:999px;
  background:linear-gradient(to top, #7C4DEE 0%, #A78BFA 10%, rgba(167,139,250,0) 100%);
  transform-origin:top; transform:scaleY(1); opacity:1; will-change:transform;
}
html.mt-js #meeting .mt-fill{ transform:scaleY(0); opacity:0 }

/* ---- one entry: sticky start column (dot, number, title) and end column (paragraph) ---- */
#meeting .mt-item{
  position:relative; display:grid; grid-template-columns:minmax(0,236px) minmax(0,1fr);
  column-gap:24px; align-items:start; padding-top:120px;
}
#meeting .mt-item:first-child{ padding-top:0 }
#meeting .mt-item-head{
  position:sticky; top:112px; align-self:start; z-index:2;
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  min-height:40px; padding-inline-start:80px;
}
/* the dot: a 40px ring in the ground colour that interrupts the line, with a 16px inner dot */
#meeting .mt-dot{
  position:absolute; inset-inline-start:12px; top:50%; margin-top:-20px;
  width:40px; height:40px; border-radius:50%; background:#F7F4FF;
  display:flex; align-items:center; justify-content:center;
}
#meeting .mt-dot i{
  display:block; width:16px; height:16px; border-radius:50%; box-sizing:border-box;
  background:#EFE9FE; border:1px solid #DDD2FB;
  transition:background-color .28s ease-out, border-color .28s ease-out, box-shadow .28s ease-out;
}
#meeting .mt-item.is-active .mt-dot i,
html:not(.mt-js) #meeting .mt-dot i{
  background:#7C4DEE; border-color:#7C4DEE; box-shadow:0 0 0 4px rgba(124,77,238,.14);
}
#meeting .mt-num{ font-size:.75rem; font-weight:600; letter-spacing:.16em; color:#6D3FE0; line-height:1.2 }
#meeting .mt-item-head h3{
  margin:0; font-size:clamp(1.25rem,1.6vw,1.5rem); line-height:1.25; font-weight:700; color:#1E1A33;
  transition:color .28s ease-out;
}
/* titles rest in the dim ink until the line reaches them, echoing the source's grey titles */
html.mt-js #meeting .mt-item:not(.is-active) .mt-item-head h3{ color:#4A4566 }
#meeting .mt-item-body{ padding-inline-start:16px; padding-top:22px }
#meeting .mt-item-body p{ margin:0; color:#4A4566; font-size:1.0625rem; line-height:1.7 }

/* ---- mobile: one column, line on the start edge, nothing sticky ---- */
@media (max-width:900px){
  #meeting .mt-two{ grid-template-columns:1fr; gap:44px }
  #meeting .mt-head{ position:relative; top:auto }
  #meeting .mt-timeline{ padding-bottom:40px }
  #meeting .mt-track{ inset-inline-start:19px }
  #meeting .mt-item{ grid-template-columns:1fr; row-gap:10px; padding-top:40px }
  #meeting .mt-item:first-child{ padding-top:6px }
  #meeting .mt-item-head{ position:relative; top:auto; padding-inline-start:56px }
  #meeting .mt-dot{ inset-inline-start:0 }
  #meeting .mt-item-body{ padding-inline-start:56px; padding-top:0 }
  #meeting .mt-item-body p{ font-size:1rem }
  #meeting .mt-plane-far{
    inset:-30% -20%;
    background:radial-gradient(70% 30% at 50% 96%, rgba(167,139,250,.26), rgba(167,139,250,.1) 50%, transparent 74%);
  }
  #meeting .mt-plane-photo{ inset-inline-start:-20%; top:auto; bottom:-10%; width:140%; height:46%; opacity:.28 }
  #meeting .mt-floor{ height:160px }
}

/* ---- reduced motion and the site's own motion toggle: static final state ---- */
@media (prefers-reduced-motion:reduce){
  #meeting .mt-plane{ transform:none !important }
  #meeting .mt-fill{ transform:none !important; opacity:1 !important }
  #meeting .mt-dot i{ transition:none; background:#7C4DEE; border-color:#7C4DEE; box-shadow:0 0 0 4px rgba(124,77,238,.14) }
  #meeting .mt-item-head h3{ transition:none; color:#1E1A33 !important }
}
html.a11y-nomotion #meeting .mt-plane{ transform:none !important }
html.a11y-nomotion #meeting .mt-fill{ transform:none !important; opacity:1 !important }
html.a11y-nomotion #meeting .mt-dot i{ transition:none; background:#7C4DEE; border-color:#7C4DEE; box-shadow:0 0 0 4px rgba(124,77,238,.14) }
html.a11y-nomotion #meeting .mt-item-head h3{ transition:none; color:#1E1A33 !important }