/* ============================================================
   L05-motion.css — composed entrance choreography
   Additive to polish.css. CSS-only — reuses the existing
   [data-reveal] + .is-in IntersectionObserver plumbing.
   Restraint over spectacle.
   ============================================================ */

/* ---------- 1. Header stagger -------------------------------
   Rubric first, meta second, name third, name-sub fourth.
   80ms increments. The rubric/meta lack [data-reveal], so we
   animate them directly off page-header load. The name and
   name-sub already reveal via the observer — we only adjust
   their transition-delay.                                    */

.page-header .rubric-mark,
.page-header .header-meta {
  opacity: 0;
  transform: translateY(10px);
  animation: l05-header-settle var(--dur-reveal, 600ms) var(--ease-out, cubic-bezier(.2,.7,.2,1)) both;
}
.page-header .rubric-mark { animation-delay: 0ms;   }
.page-header .header-meta { animation-delay: 80ms;  }

.page-header .name[data-reveal]     { transition-delay: 160ms; }
.page-header .name-sub[data-reveal] { transition-delay: 240ms; }

@keyframes l05-header-settle {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 2. Hero .lede — clip-path letter reveal ---------
   A left-to-right wipe using inset clip-path. Elegant, no JS,
   no per-letter spans. Two lines (bg + en) stagger.          */

.hero .lede[data-reveal] {
  clip-path: inset(0 100% 0 0);
  transition:
    opacity var(--dur-reveal, 600ms) var(--ease-out, cubic-bezier(.2,.7,.2,1)),
    transform var(--dur-reveal, 600ms) var(--ease-out, cubic-bezier(.2,.7,.2,1)),
    clip-path 1100ms cubic-bezier(.22,.61,.36,1);
}
.hero .lede[data-reveal].is-in {
  clip-path: inset(0 0 0 0);
}
.hero .lede[lang="bg"][data-reveal].is-in { transition-delay: 0ms, 0ms, 120ms; }
.hero .lede[lang="en"][data-reveal].is-in { transition-delay: 160ms, 160ms, 360ms; }

/* ---------- 3. Gold rule draw -------------------------------
   .rule draws from center outward on reveal.                 */

.rule {
  transform-origin: 50% 50%;
  transform: scaleX(0);
  opacity: 0;
  transition:
    transform 900ms cubic-bezier(.22,.61,.36,1),
    opacity 500ms var(--ease-out, cubic-bezier(.2,.7,.2,1));
}
.rule.is-in,
.is-in .rule,
[data-reveal].is-in .rule {
  transform: scaleX(1);
  opacity: 1;
}
/* Fallback: if .rule is a sibling of a revealed element, draw
   it once any ancestor section becomes visible.              */
html.no-js .rule { transform: scaleX(1); opacity: 1; }

/* ---------- 4. Services-list — dot + numeral warmth --------- */

.services-list > li {
  position: relative;
  transition:
    color 240ms var(--ease-out, ease-out),
    padding-left 280ms cubic-bezier(.22,.61,.36,1);
}
.services-list > li::before {
  /* gold dot slid in from the left */
  content: "";
  position: absolute;
  left: -1.1em;
  top: 0.72em;
  width: 0.38em;
  height: 0.38em;
  border-radius: 50%;
  background: var(--accent, #B8894A);
  opacity: 0;
  transform: translateX(-0.6em) scale(0.6);
  transition:
    opacity 260ms var(--ease-out, ease-out),
    transform 320ms cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.services-list > li:hover,
.services-list > li:focus-within {
  padding-left: 0.35em;
}
.services-list > li:hover::before,
.services-list > li:focus-within::before {
  opacity: 1;
  transform: translateX(0) scale(1);
}
/* Numeral warmth — if the numeral is a ::marker or an inline
   leading span, shift its color. Cover common cases.         */
.services-list > li:hover::marker,
.services-list > li:focus-within::marker {
  color: var(--accent-deep, #8f6a36);
}
.services-list > li .num,
.services-list > li .numeral,
.services-list > li .roman {
  transition: color 280ms var(--ease-out, ease-out), letter-spacing 280ms ease;
}
.services-list > li:hover .num,
.services-list > li:hover .numeral,
.services-list > li:hover .roman,
.services-list > li:focus-within .num,
.services-list > li:focus-within .numeral,
.services-list > li:focus-within .roman {
  color: var(--accent, #B8894A);
  letter-spacing: 0.04em;
}

/* ---------- 5. Timeline — year scale + prose lift ----------- */

.timeline li[data-reveal] time {
  display: inline-block;
  transform-origin: left center;
  transform: scale(0.94);
  opacity: 0;
  transition:
    transform 700ms cubic-bezier(.22,.61,.36,1),
    opacity 500ms var(--ease-out, ease-out);
}
.timeline li[data-reveal].is-in time {
  transform: scale(1);
  opacity: 1;
}
.timeline li[data-reveal] > :not(time) {
  opacity: 0;
  transition: opacity 600ms var(--ease-out, ease-out) 180ms;
}
.timeline li[data-reveal].is-in > :not(time) {
  opacity: 1;
}
/* gentle stagger between successive timeline rows */
.timeline li[data-reveal]:nth-child(1).is-in time { transition-delay: 0ms;   }
.timeline li[data-reveal]:nth-child(2).is-in time { transition-delay: 70ms;  }
.timeline li[data-reveal]:nth-child(3).is-in time { transition-delay: 140ms; }
.timeline li[data-reveal]:nth-child(4).is-in time { transition-delay: 210ms; }
.timeline li[data-reveal]:nth-child(5).is-in time { transition-delay: 280ms; }

/* ---------- 6. Reduced motion — collapse to opacity-only --- */

@media (prefers-reduced-motion: reduce) {
  .page-header .rubric-mark,
  .page-header .header-meta {
    animation: l05-rm-fade 150ms linear both;
    transform: none !important;
  }
  .page-header .name[data-reveal],
  .page-header .name-sub[data-reveal],
  .hero .lede[data-reveal],
  .rule,
  .services-list > li,
  .services-list > li::before,
  .timeline li[data-reveal] time,
  .timeline li[data-reveal] > :not(time) {
    transition-duration: 150ms !important;
    transition-delay: 0ms !important;
    transition-property: opacity !important;
    transform: none !important;
    clip-path: none !important;
    animation-duration: 150ms !important;
  }
  .hero .lede[data-reveal].is-in { clip-path: none !important; }
  .rule.is-in,
  [data-reveal].is-in .rule { transform: none !important; }
  .timeline li[data-reveal].is-in time { transform: none !important; }
}
@keyframes l05-rm-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}