/**
 * Koç bölümü (#koc) motion — bölüm görünür olunca sırayla:
 * program uyumu sayacı (66 -> 78), koç notları, öneri çipleri; fotoğraf koç
 * adımları 9 sn'lik döngüde sırayla vurgulanır.
 * Gizli başlangıç durumları yalnızca JS .cm-armed eklerse uygulanır;
 * JS yoksa ya da prefers-reduced-motion varsa içerik olduğu gibi görünür.
 */

@property --cm-pct { syntax: "<integer>"; inherits: true; initial-value: 78; }

.cm-meter {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  column-gap: 10px;
  margin-bottom: 16px;
}
.cm-meter__label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-2-300); }
.cm-meter__num {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 30px;
  line-height: 1;
  color: var(--color-neutral-100);
  counter-reset: cmp var(--cm-pct);
}
.cm-meter__num::before { content: "%"; font-size: 18px; margin-right: 1px; }
.cm-meter__num::after { content: counter(cmp); }
.cm-meter__delta { font-size: 12px; font-weight: 700; color: var(--color-accent-2-300); }
.cm-meter__bar {
  grid-column: 1 / -1;
  height: 6px;
  margin-top: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-neutral-100) 14%, transparent);
  overflow: hidden;
}
.cm-meter__bar i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--color-accent-2-400);
  transform-origin: left center;
  transform: scaleX(.78);
}

/* ── hazırlık: görünür olana dek gizli ─────────────────────────────────── */

.cm-armed .cm-meter__bar i { transform: scaleX(.66); }
.cm-armed .cm-meter__num { --cm-pct: 66; }
.cm-armed .cm-meter__delta,
.cm-armed .od-note,
.cm-armed .od-chip,
.cm-armed .od-coach-card__apply { opacity: 0; translate: 0 12px; }
.cm-armed .od-chip { scale: .92; }

.cm-armed.is-live .cm-meter__num { animation: cm-count 1.4s cubic-bezier(.3, .7, .2, 1) .3s forwards; }
.cm-armed.is-live .cm-meter__bar i { animation: cm-bar 1.4s cubic-bezier(.3, .7, .2, 1) .3s forwards; }
.cm-armed.is-live .cm-meter__delta { animation: cm-in .5s ease 1.5s forwards; }
.cm-armed.is-live .od-note { animation: cm-in .6s cubic-bezier(.2, .9, .3, 1) forwards; }
.cm-armed.is-live .od-note { animation-delay: 1.0s; }
.cm-armed.is-live .od-note ~ .od-note { animation-delay: 1.9s; }
.cm-armed.is-live .od-chip { animation: cm-pop .45s cubic-bezier(.2, .9, .3, 1.3) forwards; animation-delay: calc(2.9s + var(--k, 0) * .25s); }
.cm-armed.is-live .od-coach-card__apply { animation: cm-in .5s ease 3.5s forwards; }

@keyframes cm-count { from { --cm-pct: 66; } to { --cm-pct: 78; } }
@keyframes cm-bar { from { transform: scaleX(.66); } to { transform: scaleX(.78); } }
@keyframes cm-in { to { opacity: 1; translate: 0 0; } }
@keyframes cm-pop { to { opacity: 1; translate: 0 0; scale: 1; } }

/* fotoğraf koç: adımlar sırayla vurgulanır (görünürken) */
.cm-armed .od-steps li { opacity: .45; transition: opacity .3s; }
.cm-armed.is-live .od-steps li { animation: cm-step 9s ease-in-out infinite; animation-delay: calc(var(--k, 0) * 3s); }
.cm-armed.is-live .od-steps li .od-steps__n { animation: cm-stepn 9s ease-in-out infinite; animation-delay: calc(var(--k, 0) * 3s); }
@keyframes cm-step  { 0%, 30% { opacity: 1; } 36%, 100% { opacity: .45; } }
@keyframes cm-stepn { 0%, 30% { background: var(--color-accent-400); color: var(--color-accent-900); transform: scale(1.12); } 36%, 100% { background: var(--color-accent-2-600); color: inherit; transform: scale(1); } }

/* ekran dışında durdur */
.cm-armed:not(.is-live) .od-steps li,
.cm-armed:not(.is-live) .od-steps__n { animation-play-state: paused; }