/* ── Decision Tree loading animation ── */
/* Layout (left to right):
   Root (left) → 2 mid nodes (center) → 4 leaf nodes (right)
   Scene: 260px wide x 200px tall
   Node positions:
     Root:   (20, 90)
     Mid-0:  (115, 40)   Mid-1:  (115, 140)
     Leaf-0: (210, 15)   Leaf-1: (210, 65)
     Leaf-2: (210, 115)  Leaf-3: (210, 165)
*/

.decision-tree-cell {
    min-height: 100%;
    background: transparent;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dt-scene {
    position: relative;
    width: 260px;
    height: 200px;
    animation: dt-scene-fade 0.5s ease-out forwards;
}

/* ── Nodes ── */
.dt-node {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1a0808;
    border: 2px solid #af0000;
    box-shadow: 0 0 10px rgba(175, 0, 0, 0.5);
    opacity: 0;
    transform: scale(0.4);
}

/* Node positions (centered on coordinate, so offset by half size) */
.dt-root   { left: 8px;   top: 78px; }
.dt-mid-0  { left: 103px; top: 28px; }
.dt-mid-1  { left: 103px; top: 128px; }
.dt-leaf-0 { left: 198px; top: 3px; }
.dt-leaf-1 { left: 198px; top: 53px; }
.dt-leaf-2 { left: 198px; top: 103px; }
.dt-leaf-3 { left: 198px; top: 153px; }

/* ── Connecting lines ── */
.dt-line {
    position: absolute;
    height: 2px;
    background: #e24646;
    box-shadow: 0 0 6px rgba(226, 70, 70, 0.4);
    transform-origin: left center;
    opacity: 0;
    /* width and rotation calculated per line */
}

/* Root (20,90) → Mid-0 (115,40): dx=95, dy=-50, len≈107, angle≈-27.8° */
.dt-line-0 {
    left: 32px;
    top: 90px;
    width: 107px;
    transform: rotate(-27.8deg) scaleX(0);
}

/* Root (20,90) → Mid-1 (115,140): dx=95, dy=50, len≈107, angle≈27.8° */
.dt-line-1 {
    left: 32px;
    top: 90px;
    width: 107px;
    transform: rotate(27.8deg) scaleX(0);
}

/* Mid-0 (115,40) → Leaf-0 (210,15): dx=95, dy=-25, len≈98, angle≈-14.7° */
.dt-line-2 {
    left: 127px;
    top: 40px;
    width: 98px;
    transform: rotate(-14.7deg) scaleX(0);
}

/* Mid-0 (115,40) → Leaf-1 (210,65): dx=95, dy=25, len≈98, angle≈14.7° */
.dt-line-3 {
    left: 127px;
    top: 40px;
    width: 98px;
    transform: rotate(14.7deg) scaleX(0);
}

/* Mid-1 (115,140) → Leaf-2 (210,115): dx=95, dy=-25, len≈98, angle≈-14.7° */
.dt-line-4 {
    left: 127px;
    top: 140px;
    width: 98px;
    transform: rotate(-14.7deg) scaleX(0);
}

/* Mid-1 (115,140) → Leaf-3 (210,165): dx=95, dy=25, len≈98, angle≈14.7° */
.dt-line-5 {
    left: 127px;
    top: 140px;
    width: 98px;
    transform: rotate(14.7deg) scaleX(0);
}

/* ── Scene animation: fade in once and stay visible ── */
@keyframes dt-scene-fade {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* ── Node appear: plays once per loop via animation-delay, stays visible ── */
/* duration=0.4s, fill-mode forwards keeps them visible after appearing */
.dt-root   { animation: dt-node-pop 0.4s ease-out 0s    both; }
.dt-line-0 { animation: dt-line-draw-neg27 0.3s ease-out 0.3s both; }
.dt-line-1 { animation: dt-line-draw-pos27 0.3s ease-out 0.3s both; }
.dt-mid-0  { animation: dt-node-pop 0.4s ease-out 0.6s  both; }
.dt-mid-1  { animation: dt-node-pop 0.4s ease-out 0.6s  both; }
.dt-line-2 { animation: dt-line-draw-neg14 0.3s ease-out 0.9s both; }
.dt-line-3 { animation: dt-line-draw-pos14 0.3s ease-out 0.9s both; }
.dt-line-4 { animation: dt-line-draw-neg14 0.3s ease-out 0.9s both; }
.dt-line-5 { animation: dt-line-draw-pos14 0.3s ease-out 0.9s both; }
.dt-leaf-0 { animation: dt-node-pop 0.4s ease-out 1.2s  both; }
.dt-leaf-1 { animation: dt-node-pop 0.4s ease-out 1.2s  both; }
.dt-leaf-2 { animation: dt-node-pop 0.4s ease-out 1.2s  both; }
.dt-leaf-3 { animation: dt-node-pop 0.4s ease-out 1.2s  both; }

/* ── Node pop ── */
@keyframes dt-node-pop {
    0%   { opacity: 0; transform: scale(0.4); }
    60%  { opacity: 1; transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1); }
}

/* ── Line draw keyframes ── */
@keyframes dt-line-draw-neg27 {
    0%   { opacity: 0; transform: rotate(-27.8deg) scaleX(0); }
    10%  { opacity: 1; transform: rotate(-27.8deg) scaleX(0); }
    100% { opacity: 1; transform: rotate(-27.8deg) scaleX(1); }
}

@keyframes dt-line-draw-pos27 {
    0%   { opacity: 0; transform: rotate(27.8deg) scaleX(0); }
    10%  { opacity: 1; transform: rotate(27.8deg) scaleX(0); }
    100% { opacity: 1; transform: rotate(27.8deg) scaleX(1); }
}

@keyframes dt-line-draw-neg14 {
    0%   { opacity: 0; transform: rotate(-14.7deg) scaleX(0); }
    10%  { opacity: 1; transform: rotate(-14.7deg) scaleX(0); }
    100% { opacity: 1; transform: rotate(-14.7deg) scaleX(1); }
}

@keyframes dt-line-draw-pos14 {
    0%   { opacity: 0; transform: rotate(14.7deg) scaleX(0); }
    10%  { opacity: 1; transform: rotate(14.7deg) scaleX(0); }
    100% { opacity: 1; transform: rotate(14.7deg) scaleX(1); }
}

/* ── Looping variant: tree grows in, holds, fades, repeats ──
   All elements share a 2.4s cycle. Appearance timing is encoded
   inside each keyframe (as percentages) so every element starts
   and restarts in lockstep — no per-element animation-delay. */
.dt-scene--loop {
    animation: none;
}

.dt-scene--loop .dt-root,
.dt-scene--loop .dt-mid-0,
.dt-scene--loop .dt-mid-1,
.dt-scene--loop .dt-leaf-0,
.dt-scene--loop .dt-leaf-1,
.dt-scene--loop .dt-leaf-2,
.dt-scene--loop .dt-leaf-3,
.dt-scene--loop .dt-line-0,
.dt-scene--loop .dt-line-1,
.dt-scene--loop .dt-line-2,
.dt-scene--loop .dt-line-3,
.dt-scene--loop .dt-line-4,
.dt-scene--loop .dt-line-5 {
    animation-duration: 2.4s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    animation-delay: 0s;
    animation-fill-mode: none;
}

.dt-scene--loop .dt-root   { animation-name: dt-loop-root; }
.dt-scene--loop .dt-line-0 { animation-name: dt-loop-line-neg27; }
.dt-scene--loop .dt-line-1 { animation-name: dt-loop-line-pos27; }
.dt-scene--loop .dt-mid-0,
.dt-scene--loop .dt-mid-1  { animation-name: dt-loop-mid; }
.dt-scene--loop .dt-line-2,
.dt-scene--loop .dt-line-4 { animation-name: dt-loop-leafline-neg14; }
.dt-scene--loop .dt-line-3,
.dt-scene--loop .dt-line-5 { animation-name: dt-loop-leafline-pos14; }
.dt-scene--loop .dt-leaf-0,
.dt-scene--loop .dt-leaf-1,
.dt-scene--loop .dt-leaf-2,
.dt-scene--loop .dt-leaf-3 { animation-name: dt-loop-leaf; }

@keyframes dt-loop-root {
    0%   { opacity: 0; transform: scale(0.4); }
    8%   { opacity: 1; transform: scale(1.15); }
    17%  { opacity: 1; transform: scale(1); }
    88%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}

@keyframes dt-loop-mid {
    0%, 25% { opacity: 0; transform: scale(0.4); }
    33%     { opacity: 1; transform: scale(1.15); }
    42%     { opacity: 1; transform: scale(1); }
    88%     { opacity: 1; transform: scale(1); }
    100%    { opacity: 0; transform: scale(1); }
}

@keyframes dt-loop-leaf {
    0%, 50% { opacity: 0; transform: scale(0.4); }
    58%     { opacity: 1; transform: scale(1.15); }
    67%     { opacity: 1; transform: scale(1); }
    88%     { opacity: 1; transform: scale(1); }
    100%    { opacity: 0; transform: scale(1); }
}

@keyframes dt-loop-line-neg27 {
    0%, 13% { opacity: 0; transform: rotate(-27.8deg) scaleX(0); }
    14%     { opacity: 1; transform: rotate(-27.8deg) scaleX(0); }
    25%     { opacity: 1; transform: rotate(-27.8deg) scaleX(1); }
    88%     { opacity: 1; transform: rotate(-27.8deg) scaleX(1); }
    100%    { opacity: 0; transform: rotate(-27.8deg) scaleX(1); }
}

@keyframes dt-loop-line-pos27 {
    0%, 13% { opacity: 0; transform: rotate(27.8deg) scaleX(0); }
    14%     { opacity: 1; transform: rotate(27.8deg) scaleX(0); }
    25%     { opacity: 1; transform: rotate(27.8deg) scaleX(1); }
    88%     { opacity: 1; transform: rotate(27.8deg) scaleX(1); }
    100%    { opacity: 0; transform: rotate(27.8deg) scaleX(1); }
}

@keyframes dt-loop-leafline-neg14 {
    0%, 38% { opacity: 0; transform: rotate(-14.7deg) scaleX(0); }
    39%     { opacity: 1; transform: rotate(-14.7deg) scaleX(0); }
    50%     { opacity: 1; transform: rotate(-14.7deg) scaleX(1); }
    88%     { opacity: 1; transform: rotate(-14.7deg) scaleX(1); }
    100%    { opacity: 0; transform: rotate(-14.7deg) scaleX(1); }
}

@keyframes dt-loop-leafline-pos14 {
    0%, 38% { opacity: 0; transform: rotate(14.7deg) scaleX(0); }
    39%     { opacity: 1; transform: rotate(14.7deg) scaleX(0); }
    50%     { opacity: 1; transform: rotate(14.7deg) scaleX(1); }
    88%     { opacity: 1; transform: rotate(14.7deg) scaleX(1); }
    100%    { opacity: 0; transform: rotate(14.7deg) scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .dt-scene--loop .dt-node {
        animation: none;
        opacity: 1;
        transform: scale(1);
    }
    .dt-scene--loop .dt-line-0 { animation: none; opacity: 1; transform: rotate(-27.8deg) scaleX(1); }
    .dt-scene--loop .dt-line-1 { animation: none; opacity: 1; transform: rotate(27.8deg) scaleX(1); }
    .dt-scene--loop .dt-line-2 { animation: none; opacity: 1; transform: rotate(-14.7deg) scaleX(1); }
    .dt-scene--loop .dt-line-3 { animation: none; opacity: 1; transform: rotate(14.7deg) scaleX(1); }
    .dt-scene--loop .dt-line-4 { animation: none; opacity: 1; transform: rotate(-14.7deg) scaleX(1); }
    .dt-scene--loop .dt-line-5 { animation: none; opacity: 1; transform: rotate(14.7deg) scaleX(1); }
}