/* Shared rail + square-node timeline component.
   Vertical variant: /resources/circular-watch. Horizontal variant: /company. */

.tl-rail-list { position: relative; padding-left: 28px; }
.tl-rail-list::before {
  content: '';
  position: absolute;
  left: 5px; top: 4px; bottom: 4px;
  width: 1px;
  background: var(--border-s);
}
/* Moving line - a bright segment travels top to bottom through the rail,
   looping. top:0/bottom:0 on the track gives it a determinate height even
   though .tl-rail-list itself is auto-height (percentage positioning on an
   absolute child of an auto-height parent otherwise fails to resolve). */
.tl-line-mover { position: absolute; left: 5px; top: 0; bottom: 0; width: 1px; }
.tl-line-mover::after {
  content: '';
  position: absolute;
  left: 0; top: 0%;
  width: 1px;
  height: 26px;
  background: var(--orange);
  box-shadow: 0 0 6px var(--o-glow);
  animation: tlLineMove 6s ease-in-out infinite;
}
@keyframes tlLineMove {
  0%, 8%   { top: 0%; }
  33%, 41% { top: 42%; }
  66%, 74% { top: 84%; }
  100%     { top: 0%; }
}
@media (prefers-reduced-motion: reduce) { .tl-line-mover::after { animation: none; } }

/* "From upload to fix list" - 3 callout cards, each with its own icon
   above the title. Curved corners here are a deliberate, explicit
   exception to the site's zero-radius rule (user-requested for this
   component only) - the glow still comes from box-shadow, not a gradient
   fill, keeping the no-gradients rule intact. */
.process-callouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.process-callout { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; }
.process-callout .process-step-icon-box { margin-bottom: 18px; }
.process-callout .h3 { margin-bottom: 8px; }
.process-callout p { font-size: var(--t-body-sm); color: var(--muted); line-height: 1.6; }

.process-step-icon-box {
  width: 56px; height: 56px;
  border: 1px solid var(--border-s);
  border-radius: 10px;
  background: var(--card);
  display: flex; align-items: center; justify-content: center;
}
.process-step-icon-box.glow-green { border-color: rgba(61,204,71,0.5); box-shadow: 0 0 14px rgba(61,204,71,0.25); }
.process-step-icon-box.glow-orange { border-color: var(--orange); box-shadow: 0 0 14px var(--o-glow); }

@media (max-width: 720px) {
  .process-callouts { grid-template-columns: 1fr; }
}
.tl-node { position: relative; padding-bottom: 28px; }
.tl-node:last-child { padding-bottom: 0; }
.tl-node::before {
  content: '';
  position: absolute;
  left: -28px; top: 3px;
  width: 9px; height: 9px;
  background: var(--dim);
  border: 1px solid var(--border-s);
}
.tl-node.green::before { background: var(--green); box-shadow: 0 0 6px var(--green); border-color: var(--green); }
.tl-node.amber::before { background: var(--amber); border-color: var(--amber); }
.tl-node.dim::before { background: var(--dim); border-color: var(--border-s); }
.tl-node.current::before { background: var(--orange); box-shadow: 0 0 6px var(--o-glow); border-color: var(--orange); }
.tl-node-date { font-family: var(--f-mono); font-size: var(--t-label); color: var(--muted-legal); margin-bottom: 4px; }
.tl-node-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tl-node-title { font-family: var(--f-dot); font-size: var(--t-body-sm); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; }
.tl-node-icon { flex-shrink: 0; }

/* Mini checklist strip - one line summarizing the 3-step process. A sliding
   underline (the "moving line") travels item 1 -> 2 -> 3 -> loop; each
   item's checkmark and text brighten as the line arrives under it, on the
   same synchronized 6s timeline (not independent staggered loops - that
   made it read as random blinking rather than "moving"). */
.mini-checklist { position: relative; display: flex; margin-bottom: 36px; border-bottom: 1px solid var(--border); }
.mini-checklist-item { flex: 1; display: flex; align-items: center; gap: 8px; padding-bottom: 14px; font-family: var(--f-mono); font-size: var(--t-body-sm); color: var(--muted); transition: color var(--fast); }
.mini-checklist-box { width: 16px; height: 16px; border: 1px solid var(--border-s); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mini-checklist-check { opacity: 0.35; transition: opacity var(--fast); }
.mini-checklist-slider {
  position: absolute;
  bottom: -1px; left: 0;
  width: 33.333%;
  height: 2px;
  background: var(--orange);
  animation: mcSlide 6s ease-in-out infinite;
}
@keyframes mcSlide {
  0%, 25%  { transform: translateX(0%); }
  33%, 58% { transform: translateX(100%); }
  66%, 91% { transform: translateX(200%); }
  100%     { transform: translateX(0%); }
}
.mini-checklist-item:nth-child(1) { animation: mcActive1 6s ease-in-out infinite; }
.mini-checklist-item:nth-child(2) { animation: mcActive2 6s ease-in-out infinite; }
.mini-checklist-item:nth-child(3) { animation: mcActive3 6s ease-in-out infinite; }
.mini-checklist-item:nth-child(1) .mini-checklist-check { animation: mcCheck1 6s ease-in-out infinite; }
.mini-checklist-item:nth-child(2) .mini-checklist-check { animation: mcCheck2 6s ease-in-out infinite; }
.mini-checklist-item:nth-child(3) .mini-checklist-check { animation: mcCheck3 6s ease-in-out infinite; }
@keyframes mcActive1 { 0%, 25% { color: var(--text); } 33%, 100% { color: var(--muted); } }
@keyframes mcActive2 { 0%, 32% { color: var(--muted); } 33%, 58% { color: var(--text); } 66%, 100% { color: var(--muted); } }
@keyframes mcActive3 { 0%, 65% { color: var(--muted); } 66%, 91% { color: var(--text); } 100% { color: var(--muted); } }
@keyframes mcCheck1 { 0%, 25% { opacity: 1; } 33%, 100% { opacity: 0.35; } }
@keyframes mcCheck2 { 0%, 32% { opacity: 0.35; } 33%, 58% { opacity: 1; } 66%, 100% { opacity: 0.35; } }
@keyframes mcCheck3 { 0%, 65% { opacity: 0.35; } 66%, 91% { opacity: 1; } 100% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .mini-checklist-slider, .mini-checklist-item, .mini-checklist-check { animation: none; }
  .mini-checklist-check { opacity: 1; }
}
.tl-node-body { font-size: var(--t-body-sm); color: var(--muted); line-height: 1.6; }

/* Horizontal variant */
.tl-rail-horizontal { position: relative; display: flex; align-items: flex-start; gap: 0; margin: 32px 0; }
/* Continuously traveling loader - sweeps the connecting line back and forth
   so the rail reads as "live" rather than a static diagram. */
.tl-rail-h-scan {
  position: absolute;
  top: 0; left: 12.5%;
  width: 9px; height: 9px;
  transform: translateX(-50%);
  background: var(--orange);
  box-shadow: 0 0 8px var(--o-glow);
  z-index: 2;
  animation: tlRailHScan 4s steps(1, jump-end) infinite;
}
/* Steps to each of the 4 node centers (12.5/37.5/62.5/87.5% - even quarters
   of the 4-node rail) and holds there for ~1s before snapping to the next. */
@keyframes tlRailHScan {
  0%,  24%  { left: 12.5%; }
  25%, 49%  { left: 37.5%; }
  50%, 74%  { left: 62.5%; }
  75%, 99%  { left: 87.5%; }
  100%      { left: 12.5%; }
}
@media (prefers-reduced-motion: reduce) { .tl-rail-h-scan { animation: none; } }
.tl-node-h { flex: 1; position: relative; text-align: center; padding-top: 24px; }
.tl-node-h::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 9px; height: 9px;
  background: var(--dim);
  border: 1px solid var(--border-s);
  z-index: 1;
}
.tl-node-h::after {
  content: '';
  position: absolute;
  top: 4px; left: 50%;
  width: 100%; height: 1px;
  background: var(--border-s);
}
.tl-node-h:last-child::after { display: none; }
.tl-node-h.current::before { background: var(--orange); box-shadow: 0 0 6px var(--o-glow); border-color: var(--orange); }
.tl-node-h-label { display: block; font-family: var(--f-dot); font-size: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 12px; }
.tl-node-h-sub { display: block; font-size: var(--t-body-sm); color: var(--muted); margin-top: 6px; padding: 0 8px; }