/* Лоадер «растущее дерево». Один цикл — 6 с: семечко → ствол → ветви → листья → опадает лист. */
.tree-loader {
  --tl-cycle: 6s;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 16px;
  color: #495057;
  text-align: center;
}

.tree-loader--fill {
  width: 100%;
  height: 100%;
  min-height: 60vh;
}

.tree-loader__svg {
  width: 132px;
  height: 132px;
  overflow: visible;
}

.tree-loader--compact {
  flex-direction: row;
  gap: 10px;
  padding: 6px 0;
}

.tree-loader--compact .tree-loader__svg {
  width: 40px;
  height: 40px;
}

.tree-loader__label {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.tree-loader--compact .tree-loader__label {
  font-size: 14px;
  color: #6c757d;
}

.tree-loader__hint {
  margin-top: 4px;
  font-size: 13px;
  color: #8a949c;
}

.tree-loader__phrases {
  position: relative;
  height: 18px;
  margin-top: 4px;
  font-size: 13px;
  font-style: italic;
  color: #5f8f6a;
}

.tree-loader__phrase {
  position: absolute;
  left: 50%;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 4px);
  animation: tl-phrase var(--tl-cycle) ease-in-out infinite;
}

.tree-loader__phrase--2 { animation-name: tl-phrase-2; }
.tree-loader__phrase--3 { animation-name: tl-phrase-3; }
.tree-loader__phrase--4 { animation-name: tl-phrase-4; }

/* ---- Сцена ---- */
.tree-loader__sun {
  transform-box: fill-box;
  transform-origin: center;
  animation: tl-sun var(--tl-cycle) ease-in-out infinite;
}

.tree-loader__shadow {
  fill: rgba(60, 50, 30, 0.12);
  transform-box: fill-box;
  transform-origin: center;
  animation: tl-shadow var(--tl-cycle) ease-in-out infinite;
}

.tree-loader__ground,
.tree-loader__grass {
  fill: none;
  stroke: #b9a27f;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.tree-loader__grass {
  stroke: #8fbf7a;
  stroke-width: 1.4;
}

.tree-loader__plant {
  animation: tl-plant var(--tl-cycle) ease-in-out infinite;
}

.tree-loader__seed {
  fill: #8a6a4a;
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: tl-seed var(--tl-cycle) ease-in-out infinite;
}

.tree-loader__sway {
  transform-origin: 60px 104px;
  animation: tl-sway 2.5s ease-in-out infinite alternate;
}

.tree-loader__trunk,
.tree-loader__branch {
  fill: none;
  stroke-linecap: round;
  /* Промежуток длиннее линии, сдвиг чуть больше 1: у ещё не выросшей ветки
     скруглённый конец не рисует точку. */
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1.05;
}

.tree-loader__trunk {
  stroke-width: 5.2;
  animation: tl-trunk var(--tl-cycle) cubic-bezier(0.45, 0.05, 0.35, 1) infinite;
}

.tree-loader__trunk--top {
  stroke: #8d6a4b;
  stroke-width: 3.4;
  animation-name: tl-trunk-top;
  animation-timing-function: ease-out;
}

.tree-loader__crown {
  opacity: 0.9;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  animation: tl-crown var(--tl-cycle) cubic-bezier(0.34, 1.4, 0.64, 1) infinite;
}

.tree-loader__spark {
  fill: #f3cf63;
  opacity: 0;
  animation: tl-spark 3.5s ease-in-out infinite;
}

.tree-loader__branch {
  stroke: #7d5b41;
  stroke-width: 2.4;
  animation: tl-branch-1 var(--tl-cycle) ease-out infinite;
}

.tree-loader__branch--2 { animation-name: tl-branch-2; }
.tree-loader__branch--3 { animation-name: tl-branch-3; stroke-width: 2; }
.tree-loader__branch--4 { animation-name: tl-branch-4; stroke-width: 2; }

.tree-loader__leaf,
.tree-loader__falling {
  transform: scale(0);
  transform-origin: 0 0;
}

.tree-loader__leaf { animation: tl-leaf-1 var(--tl-cycle) cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
.tree-loader__leaf--w2 { animation-name: tl-leaf-2; }
.tree-loader__leaf--w3 { animation-name: tl-leaf-3; }

.tree-loader__leaf--t1 { fill: #2f7d4a; }
.tree-loader__leaf--t2 { fill: #3f9a5a; }
.tree-loader__leaf--t3 { fill: #67b86a; }
.tree-loader__leaf--t4 { fill: #9fd27a; }

.tree-loader__falling {
  animation: tl-fall var(--tl-cycle) ease-in infinite;
}

/* ---- Ключевые кадры ---- */
@keyframes tl-plant {
  0%, 86% { opacity: 1; }
  96%, 100% { opacity: 0; }
}

@keyframes tl-seed {
  0% { transform: scale(0); }
  6% { transform: scale(1.15); }
  10%, 14% { transform: scale(1); }
  20%, 100% { transform: scale(0.6); }
}

@keyframes tl-trunk {
  0%, 10% { stroke-dashoffset: 1.05; }
  30%, 100% { stroke-dashoffset: 0; }
}

@keyframes tl-trunk-top {
  0%, 29% { stroke-dashoffset: 1.05; }
  40%, 100% { stroke-dashoffset: 0; }
}

@keyframes tl-crown {
  0%, 46% { transform: scale(0); }
  64%, 100% { transform: scale(1); }
}

@keyframes tl-spark {
  0% { opacity: 0; transform: translate(0, 0); }
  35% { opacity: 0.95; }
  100% { opacity: 0; transform: translate(4px, -18px); }
}

@keyframes tl-branch-1 { 0%, 26% { stroke-dashoffset: 1.05; } 40%, 100% { stroke-dashoffset: 0; } }
@keyframes tl-branch-2 { 0%, 30% { stroke-dashoffset: 1.05; } 44%, 100% { stroke-dashoffset: 0; } }
@keyframes tl-branch-3 { 0%, 35% { stroke-dashoffset: 1.05; } 48%, 100% { stroke-dashoffset: 0; } }
@keyframes tl-branch-4 { 0%, 37% { stroke-dashoffset: 1.05; } 50%, 100% { stroke-dashoffset: 0; } }

@keyframes tl-leaf-1 { 0%, 42% { transform: scale(0); } 52%, 100% { transform: scale(1); } }
@keyframes tl-leaf-2 { 0%, 48% { transform: scale(0); } 58%, 100% { transform: scale(1); } }
@keyframes tl-leaf-3 { 0%, 54% { transform: scale(0); } 64%, 100% { transform: scale(1); } }

@keyframes tl-fall {
  0%, 56% { transform: translate(0, 0) rotate(0) scale(0); opacity: 1; }
  64% { transform: translate(0, 0) rotate(0) scale(0.8); opacity: 1; }
  70% { transform: translate(0, 0) rotate(-10deg) scale(0.8); opacity: 1; }
  77% { transform: translate(7px, 14px) rotate(40deg) scale(0.8); }
  84% { transform: translate(-2px, 30px) rotate(-20deg) scale(0.8); }
  90% { transform: translate(6px, 44px) rotate(70deg) scale(0.8); opacity: 1; }
  96%, 100% { transform: translate(6px, 44px) rotate(80deg) scale(0.8); opacity: 0; }
}

@keyframes tl-sway {
  from { transform: rotate(-1.6deg); }
  to { transform: rotate(1.6deg); }
}

@keyframes tl-sun {
  0%, 100% { transform: scale(0.85); opacity: 0.6; }
  60% { transform: scale(1.1); opacity: 1; }
}

@keyframes tl-shadow {
  0%, 20% { transform: scaleX(0.35); }
  60%, 88% { transform: scaleX(1); }
  100% { transform: scaleX(0.35); }
}

@keyframes tl-phrase {
  0% { opacity: 0; transform: translate(-50%, 4px); }
  2%, 12% { opacity: 1; transform: translate(-50%, 0); }
  15%, 100% { opacity: 0; transform: translate(-50%, -4px); }
}
@keyframes tl-phrase-2 {
  0%, 14% { opacity: 0; transform: translate(-50%, 4px); }
  17%, 34% { opacity: 1; transform: translate(-50%, 0); }
  37%, 100% { opacity: 0; transform: translate(-50%, -4px); }
}
@keyframes tl-phrase-3 {
  0%, 36% { opacity: 0; transform: translate(-50%, 4px); }
  39%, 50% { opacity: 1; transform: translate(-50%, 0); }
  53%, 100% { opacity: 0; transform: translate(-50%, -4px); }
}
@keyframes tl-phrase-4 {
  0%, 52% { opacity: 0; transform: translate(-50%, 4px); }
  55%, 92% { opacity: 1; transform: translate(-50%, 0); }
  96%, 100% { opacity: 0; transform: translate(-50%, -4px); }
}

/* Кто отключил анимацию в системе — видит готовое дерево без движения. */
@media (prefers-reduced-motion: reduce) {
  .tree-loader *,
  .tree-loader *::before {
    animation: none !important;
  }
  .tree-loader__trunk,
  .tree-loader__branch { stroke-dashoffset: 0; }
  .tree-loader__leaf,
  .tree-loader__crown { transform: scale(1); }
  .tree-loader__seed,
  .tree-loader__falling { transform: scale(0); }
  .tree-loader__phrase--1 { opacity: 1; transform: translate(-50%, 0); }
}