.elementor-2204 .elementor-element.elementor-element-63a47c85{--display:flex;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-2204 .elementor-element.elementor-element-3390aca{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(min-width:768px){.elementor-2204 .elementor-element.elementor-element-3390aca{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-213634d *//* Общие стили */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
}

/* Подвал с домом */
.house-footer {
  background: #ffffff;
  padding: 40px 0;
  text-align: center;
}

/* Контейнер дома */
.house {
  display: inline-block;
  position: relative;
  width: 300px;
  height: 480px; /* 60 (крыша) + 4×85 (этажи) + отступы */
  margin: 0 auto;
}

/* Крыша */
.roof {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-bottom: 60px solid #a0522d;
  z-index: 2;
}

/* Этажи */
.floor {
  position: absolute;
  width: 200px;
  height: 85px;
  background: #f5deb3;
  border: 2px solid #8b4513;
  box-sizing: border-box;
}

/* Позиционирование этажей */
.floor-4 { top: 60px; left: 50px; }
.floor-3 { top: 165px; left: 50px; } /* 60 + 85 + 20 = 165 */
.floor-2 { top: 270px; left: 50px; } /* 165 + 85 + 20 = 270 */
.floor-1 { top: 375px; left: 50px; } /* 270 + 85 + 20 = 375 */

/* Окна */
.window {
  position: absolute;
  width: 40px;
  height: 50px;
  background: #add8e6;
  border: 1px solid #4682b4;
  border-radius: 3px;
  overflow: hidden;
}

.window-left {
  left: 30px;
  top: 18px; /* Отступ от верха этажа */
}

.window-right {
  right: 30px;
  top: 18px;
}

/* Текст между этажами — исправлено перекрытие окон */
.house-text {
  position: absolute;
  width: 180px; /* Уже, чем дом — не затрагивает окна */
  left: 60px; /* Смещение, чтобы избежать перекрытия окон */
  text-align: center;
  color: #2c3e50;
  font-family: Arial, sans-serif;
  line-height: 1.4;
  z-index: 100;
  background: rgba(255, 255, 255, 0.98);
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  border: 1px solid #e0e0e0;
  font-size: 11px;
  pointer-events: none;
}

/* Конкретные позиции для текстов — скорректированы, чтобы не перекрывать окна */
.text-4-3 {
  top: 135px; /* Между 4‑м и 3‑м этажами */
}

.text-3-2 {
  top: 240px; /* Между 3‑м и 2‑м этажами */
}

.text-2-1 {
  top: 345px; /* Между 2‑м и 1‑м этажами */
}

.house-text h3 {
  margin: 0 0 3px 0;
  font-size: 12px;
  font-weight: bold;
  color: #1a237e;
}

.house-text p {
  margin: 0;
  font-size: 10px;
  color: #546e7a;
}

/* Стили анимации */
.animation-content {
  width: 100%;
  height: 100%;
  position: relative;
}

.animation-content > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.visible {
  opacity: 1 !important;
}

.light.visible {
  box-shadow: 0 0 15px rgba(255, 255, 0, 0.6);
}

/* Стили элементов анимации */
.blackboard {
  background: #222;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  padding: 5px;
  box-sizing: border-box;
  font-family: monospace, Consolas, 'Courier New', monospace;
  text-align: center;
  line-height: 1;
}

.teacher {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: white;
  font-weight: bold;
}

.light {
  background: radial-gradient(circle, yellow 0%, transparent 70%);
  opacity: 0.3;
}

.student {
  background: linear-gradient(135deg, #6b6bff 0%, #8e8eff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: white;
  font-weight: bold;
}
/* Эффекты для элементов в окнах (без текста) */

/* Эффект для активного окна — подсветка */
.active-window {
  box-shadow: 0 0 20px rgba(255, 255, 0, 0.6);
  border: 2px solid yellow;
  border-radius: 4px;
}

/* Учитель — плавающее свечение */
.teacher {
  width: 30px;
  height: 30px;
  background: radial-gradient(circle at 30% 30%, #ff6b6b, #ff8e8e);
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(255, 107, 107, 0.4);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.teacher.visible {
  opacity: 1;
  animation: teacherGlow 2s ease-in-out infinite alternate;
}

@keyframes teacherGlow {
  0% { box-shadow: 0 0 10px rgba(255, 107, 107, 0.4); }
  100% { box-shadow: 0 0 25px rgba(255, 107, 107, 0.8); }
}

/* Ученик — пульсирующая точка */
.student {
  width: 25px;
  height: 25px;
  background: radial-gradient(circle at 50% 50%, #6b6bff, #8e8eff);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(107, 107, 255, 0.5);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.student.visible {
  opacity: 1;
  animation: studentPulse 1.5s ease-in-out infinite;
}

@keyframes studentPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
}

/* Доска — мигающий прямоугольник с градиентом */
.blackboard {
  width: 40px;
  height: 20px;
  background: linear-gradient(45deg, #222, #333, #222);
  border: 1px solid #444;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.blackboard.visible {
  opacity: 1;
  animation: blackboardFlicker 0.8s infinite alternate;
}

@keyframes blackboardFlicker {
  0% { opacity: 0.6; box-shadow: 0 0 8px rgba(34, 34, 34, 0.3); }
  100% { opacity: 1; box-shadow: 0 0 15px rgba(34, 34, 34, 0.6); }
}

/* Свет — мерцающая лампочка */
.light {
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, yellow 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  box-shadow: 0 0 15px yellow;
}

.light.visible {
  opacity: 1;
  animation: lightFlicker 1s infinite alternate;
}

@keyframes lightFlicker {
  0% { opacity: 0.3; transform: scale(0.9); }
  50% { opacity: 0.8; transform: scale(1.1); }
  100% { opacity: 0.5; transform: scale(1); }
}

/* Предметы — цветные точки с подпрыгиванием */
.subject {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.subject.visible {
  opacity: 1;
  animation: subjectBounce 2s infinite;
}

.biology {
  background: #4CAF50;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.6);
}

.history {
  background: #9C27B0;
  box-shadow: 0 0 10px rgba(156, 39, 176, 0.6);
}

.physics {
  background: #2196F3;
  box-shadow: 0 0 10px rgba(33, 150, 243, 0.6);
}

.chemistry {
  background: #FF9800;
  box-shadow: 0 0 10px rgba(255, 152, 0, 0.6);
}

.geography {
  background: #FF5722;
  box-shadow: 0 0 10px rgba(255, 87, 34, 0.6);
}

@keyframes subjectBounce {
  0%, 20%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-5px); }
  60% { transform: translateY(3px); }
}/* End custom CSS */