// Симуляция логики CSS анимаций — чистый JS, без DOM
// Демонстрируем как браузер вычисляет промежуточные кадры

// Функции плавности (имитация CSS timing functions)
const easingFns = {
  linear:    t => t,
  easeOut:   t => 1 - Math.pow(1 - t, 3),
  easeIn:    t => Math.pow(t, 3),
  easeInOut: t => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2,
}

// Интерполяция числа
function interpolateNumber(from, to, t) {
  return from + (to - from) * t
}

// Интерполяция HEX цвета
function hexToRgb(hex) {
  const n = parseInt(hex.replace('#', ''), 16)
  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 }
}

function rgbToHex(r, g, b) {
  return '#' + [r, g, b].map(v => Math.round(v).toString(16).padStart(2, '0')).join('')
}

function interpolateColor(fromHex, toHex, t) {
  const f = hexToRgb(fromHex), to = hexToRgb(toHex)
  return rgbToHex(
    interpolateNumber(f.r, to.r, t),
    interpolateNumber(f.g, to.g, t),
    interpolateNumber(f.b, to.b, t)
  )
}

// Симулятор анимации: вычисляет ключевые кадры
function simulateAnimation(keyframes, durationMs, easingName = 'easeOut', numPoints = 6) {
  const fn = easingFns[easingName]
  const results = []

  for (let i = 0; i <= numPoints; i++) {
    const rawT = i / numPoints
    const t    = fn(rawT)
    const frame = {
      time:   Math.round(rawT * durationMs),
      t:      rawT,
      easedT: Math.round(t * 1000) / 1000,
    }

    for (const [key, [from, to]] of Object.entries(keyframes)) {
      if (key === 'color' || key === 'background') {
        frame[key] = interpolateColor(from, to, t)
      } else {
        frame[key] = Math.round(interpolateNumber(from, to, t) * 100) / 100
      }
    }
    results.push(frame)
  }
  return results
}

// === fade-in анимация ===
console.log('=== fade-in: opacity 0→1, translateY -20→0px (easeOut) ===')
const fadeFrames = simulateAnimation(
  { opacity: [0, 1], translateY: [-20, 0] },
  400, 'easeOut', 5
)
console.log('time(ms)  t      easedT  opacity  translateY')
console.log('-'.repeat(52))
for (const f of fadeFrames) {
  console.log(
    String(f.time).padEnd(10) +
    String(f.t.toFixed(2)).padEnd(7) +
    String(f.easedT).padEnd(8) +
    String(f.opacity).padEnd(9) +
    f.translateY + 'px'
  )
}

// === hover: цвет кнопки ===
console.log('\n=== Hover: цвет кнопки #3498db → #2980b9 (easeOut, 200ms) ===')
const colorFrames = simulateAnimation(
  { background: ['#3498db', '#2980b9'] },
  200, 'easeOut', 4
)
for (const f of colorFrames) {
  console.log(`t=${f.t.toFixed(2)} (${f.time}ms) → ${f.background}`)
}

// === fill-mode: forwards ===
console.log('\n=== animation-fill-mode ===')
console.log('forwards:  элемент остаётся в состоянии последнего кадра (100%)')
console.log('backwards: состояние первого кадра применяется ВО ВРЕМЯ delay')
console.log('both:      forwards + backwards')
console.log()
console.log('Без forwards: fade-in 0→1, потом opacity вернётся к 0')
console.log('С forwards:   fade-in 0→1, opacity остаётся 1')

// === Сравнение easing при t=0.25 ===
console.log('\n=== Сравнение easing: прогресс при t=0.25 (четверть пути) ===')
for (const [name, fn] of Object.entries(easingFns)) {
  const pos = Math.round(fn(0.25) * 100)
  const bar = '▓'.repeat(Math.round(pos / 4))
  console.log(`${name.padEnd(12)}: ${String(pos).padStart(3)}%  ${bar}`)
}

// === GPU vs CPU свойства ===
console.log('\n=== GPU vs CPU свойства для анимации ===')
const gpuProps  = ['transform', 'opacity']
const cpuProps  = ['width', 'height', 'top', 'left', 'margin', 'padding']
console.log('GPU (animate freely):', gpuProps.join(', '))
console.log('CPU/reflow (избегать):', cpuProps.join(', '))