[html]<style>
.magic-calc {
  max-width: 680px;
  margin: 30px auto;
  padding: 40px 45px;
  background: #763c38;
  border: 3px solid #d4af7a;
  border-radius: 20px;
  color: #f5e9d8;
  font-family: "Georgia", "Times New Roman", serif;
  position: relative;
  overflow: visible;
}

.magic-calc::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(255,215,120,0.22) 0%, transparent 70%);
  animation: magicMist 45s linear infinite;
  pointer-events: none;
}

@keyframes magicMist {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(35px, 25px) rotate(6deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.magic-calc h2 {
  text-align: center;
  color: #f5e9d8;
  font-size: 29px;
  margin: 0 0 35px 0;
  text-shadow: 0 3px 10px rgba(0,0,0,0.7);
}

.magic-calc label {
  display: block;
  margin: 18px 0 8px;
  color: #e8c9a0;
  font-size: 16px;
  font-weight: bold;
}

.magic-calc select, .magic-calc input {
  width: 100%;
  padding: 13px 15px;
  background: rgba(30,20,18,0.9);
  border: 2px solid #d4af7a;
  color: #f5e9d8;
  border-radius: 10px;
  font-size: 17px;
}

.magic-calc button {
  margin-top: 30px;
  width: 100%;
  padding: 16px;
  font-size: 19px;
  font-weight: bold;
  background: linear-gradient(#d4af7a, #b38a5f);
  color: #3f2a26;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.3s;
}

.magic-calc button:hover {
  transform: translateY(-3px);
}

/* БЛЁСТКИ */
.sparkle {
  position: absolute;
  width: 9px;
  height: 9px;
  background: #ffea9f;
  border-radius: 50%;
  box-shadow: 0 0 14px #ffea9f,
              0 0 28px #ffcc66,
              0 0 40px #ffffff;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  animation: sparkleAnim 3.5s linear forwards;
}

@keyframes sparkleAnim {
  0%   { transform: scale(0.2) rotate(0deg); opacity: 0; }
  15%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: scale(2.6) rotate(140deg); opacity: 0; }
}

/* РЕЗУЛЬТАТ */
.result {
  margin-top: 30px;
  padding: 25px;
  background: rgba(30,20,18,0.92);
  border: 2px solid #d4af7a;
  border-radius: 14px;
  display: none;
  animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.result h3 {
  color: #f5d9a0;
  margin: 0 0 18px 0;
  text-align: center;
  font-size: 23px;
}

.result p {
  margin: 12px 0;
  font-size: 17.5px;
}
</style>

<div class="magic-calc" id="magicCalc">
  <h2>Калькулятор выпуска из школ магии</h2>

  <label>Выберите школу:</label>
  <select id="school">
    <option value="hogwarts">Хогвартс</option>
    <option value="ilvermorny">Ильверморни</option>
    <option value="durmstrang">Дурмстранг</option>
    <option value="koldovstvorets">Колдовстворец</option>
    <option value="beauxbatons">Шармбатон</option>
  </select>

  <label>Год рождения:</label>
  <input type="number" id="birthYear" value="1953" min="1900" max="2025">

  <label>Месяц рождения:</label>
  <select id="birthMonth">
    <option value="0">Январь</option>
    <option value="1">Февраль</option>
    <option value="2">Март</option>
    <option value="3">Апрель</option>
    <option value="4">Май</option>
    <option value="5">Июнь</option>
    <option value="6">Июль</option>
    <option value="7">Август</option>
    <option value="8" selected>Сентябрь</option>
    <option value="9">Октябрь</option>
    <option value="10">Ноябрь</option>
    <option value="11">Декабрь</option>
  </select>

  <button onclick="calculateGraduation()">Узнать год выпуска</button>

  <div class="result" id="result"></div>
</div>

<script>
const schools = {
  hogwarts:      { name: "Хогвартс",      startAge: 11, years: 7 },
  ilvermorny:    { name: "Ильверморни",   startAge: 11, years: 7 },
  durmstrang:    { name: "Дурмстранг",    startAge: 7,  years: 12 },
  koldovstvorets:{ name: "Колдовстворец", startAge: 7,  years: 10 },
  beauxbatons:   { name: "Шармбатон",     startAge: 10, years: 9 }
};

function createSparkle() {
  const container = document.getElementById('magicCalc');
  if (!container) return;
 
  const sparkle = document.createElement('div');
  sparkle.className = 'sparkle';
 
  const size = Math.random() * 10 + 6;
  sparkle.style.width = `${size}px`;
  sparkle.style.height = `${size}px`;
  sparkle.style.left = `${Math.random() * 100}%`;
  sparkle.style.top = `${Math.random() * 100}%`;
  sparkle.style.animationDuration = `${Math.random() * 3 + 3}s`;
 
  container.appendChild(sparkle);
  setTimeout(() => sparkle.remove(), 9000);
}

function startSparkles() {
  // Начальный залп блёсток
  for (let i = 0; i < 15; i++) {
    setTimeout(createSparkle, i * 100);
  }
 
  // Постоянные блёстки
  setInterval(() => {
    if (Math.random() > 0.25) createSparkle();
  }, 100);
}

function calculateGraduation() {
  const schoolKey = document.getElementById('school').value;
  const birthYear = parseInt(document.getElementById('birthYear').value);
  const birthMonth = parseInt(document.getElementById('birthMonth').value);
 
  const school = schools[schoolKey];
  let entryYear = birthYear + school.startAge;
  if (birthMonth >= 8) entryYear++;

  const graduationYear = entryYear + school.years - 1;
  const ageAtGrad = graduationYear - birthYear;

  let html = `
    <h3>${school.name}</h3>
    <p><strong>Год поступления:</strong> ${entryYear} год</p>
    <p><strong>Год выпуска:</strong> ${graduationYear} год</p>
    <p><strong>Возраст при выпуске:</strong> ${ageAtGrad} лет</p>
  `;

  const resultDiv = document.getElementById('result');
  resultDiv.innerHTML = html;
  resultDiv.style.display = 'block';
}

// Запуск при загрузке
document.querySelectorAll('#school, #birthYear, #birthMonth').forEach(el => {
  el.addEventListener('change', calculateGraduation);
});

window.addEventListener('load', function() {
  calculateGraduation();
  startSparkles();
});
</script>[/html]