/* ==========================================================
   RAWPEAK SPINE SYSTEM V9
   CLEAN LIGHT + STABLE + CENTER GAP
========================================================== */

/* =========================
   SPINE WRAPPER
========================= */

.spine{
  position:relative;
  padding:80px 8% 120px;
}

/* =========================
   SPINE LINE
========================= */

.spine-line{
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:2px;
  transform:translateX(-50%);
  background:rgba(214,160,74,.14);
  z-index:1;
}

/* =========================
   SPINE PROGRESS
========================= */

.spine-progress{
  position:absolute;
  left:50%;
  top:0;
  width:2px;
  height:0%;
  transform:translateX(-50%);
  background:linear-gradient(
    to bottom,
    var(--accent),
    rgba(214,160,74,.25)
  );

  box-shadow:
    0 0 10px rgba(214,160,74,.35),
    0 0 25px rgba(214,160,74,.20);

  transition:height .18s cubic-bezier(.22,.61,.36,1);

  z-index:2;
}

/* =========================
   NODE BASE
========================= */

.node{
  position:relative;
  display:flex;
  width:100%;
  margin:120px 0;

  opacity:1;
  transform:translateY(0);
  transition:.6s ease;

  overflow:visible;
}

/* alignment */

.node.left{
  justify-content:flex-start;
}

.node.right{
  justify-content:flex-end;
}

/* =========================
   VISIBILITY
========================= */

.node.is-visible{
  opacity:1;
  transform:translateY(0);
}

.node.is-hot{
  opacity:1;
}

/* =========================
   CARD
========================= */

.node-inner{

  position:relative;
  z-index:3;

  width:42%;
  padding:22px;

  border-radius:14px;

  background:rgba(255,255,255,.04);

  border:1px solid rgba(255,255,255,.10);

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  box-shadow:
    0 18px 55px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.04);

  transition:.35s ease;
}

.node:hover .node-inner{

  transform:translateY(-5px);

  border-color:rgba(214,160,74,.35);

  box-shadow:
    0 25px 70px rgba(0,0,0,.45),
    0 0 20px rgba(214,160,74,.08);
}

/* =========================
   TEXT
========================= */

.node h2{
  font-size:21px;
  color:#F3EFE6;
  margin-bottom:6px;
}

.node p{
  font-size:13px;
  line-height:1.6;
  color:rgba(243,239,230,.78);
}

.node .difficulty{
  font-size:11px;
  letter-spacing:1px;
  color:rgba(214,160,74,.9);
  margin-bottom:6px;
}

.node .meta{
  font-size:11px;
  color:rgba(243,239,230,.55);
  margin-bottom:10px;
}

/* =========================
   DOT CORE
========================= */

.node .dot{
  position:absolute;
  left:50%;
  top:-60px;

  width:12px;
  height:12px;

  transform:translateX(-50%);
  border-radius:50%;

  background:var(--accent);

  z-index:5;

  /* CORE GLOW (small but intense) */
  box-shadow:
    0 0 8px rgba(214,160,74,.9),
    0 0 18px rgba(214,160,74,.55),
    0 0 35px rgba(214,160,74,.25);

  animation:dotPulse 2.2s ease-in-out infinite;
}
.node .dot::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;

  width:28px;
  height:28px;

  transform:translate(-50%,-50%);
  border-radius:50%;

  background:radial-gradient(
    circle,
    rgba(214,160,74,.35),
    rgba(214,160,74,.10),
    transparent 70%
  );

  filter:blur(1px);
  opacity:.9;
}

@keyframes dotPulse{
  0%,100%{
    transform:translateX(-50%) scale(1);
    box-shadow:
      0 0 8px rgba(214,160,74,.7),
      0 0 18px rgba(214,160,74,.4),
      0 0 35px rgba(214,160,74,.2);
  }

  50%{
    transform:translateX(-50%) scale(1.15);
    box-shadow:
      0 0 12px rgba(214,160,74,1),
      0 0 28px rgba(214,160,74,.6),
      0 0 55px rgba(214,160,74,.35);
  }
}

@keyframes auraPulse{
  0%,100%{
    opacity:.25;
    transform:translate(-50%,-50%) scale(0.9);
  }
  50%{
    opacity:.6;
    transform:translate(-50%,-50%) scale(1.3);
  }
}

/* Ring */

.node .dot::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;

  width:24px;
  height:24px;

  transform:translate(-50%,-50%);
  border-radius:50%;

  border:1px solid rgba(214,160,74,.20);
}

/* Aura */

.node .dot::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;

  width:52px;
  height:52px;

  transform:translate(-50%,-50%);
  border-radius:50%;

  background:radial-gradient(
    circle,
    rgba(214,160,74,.10),
    transparent 70%
  );
}



/* =========================
   MOBILE
========================= */

@media(max-width:768px){

  .node{
    justify-content:center!important;
    margin:90px 0;
  }

  .node-inner{
    width:100%;
  }

  .node .dot{
    top:-45px;
  }

}

/* =========================
   HOT NODE GLOW
========================= */

.node.is-hot .node-inner{

  border-color:rgba(214,160,74,.45);

  box-shadow:
    0 22px 60px rgba(0,0,0,.45),
    0 0 28px rgba(214,160,74,.18),
    inset 0 1px 0 rgba(255,255,255,.06);

  transform:translateY(-4px);
}

.node .dot{
  box-shadow:
    0 0 20px #D6A04A,
    0 0 50px #D6A04A;
}