/* =========================================================
   GD Project Solutions — Hero stage rail (industrial control surface)
   Mirrors the StageRail primitive. A copper rail assembles through the
   service stages on enter: trace draws, nodes light in sequence, a
   scanner pass sweeps, pointer drives sheen + depth. Reduced-motion safe.
   ========================================================= */

.gd-rail {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(900px 520px at 72% -16%, rgba(255,255,255,.035), transparent 52%),
    radial-gradient(520px 340px at 14% 36%, rgba(199,100,50,.045), transparent 64%),
    linear-gradient(180deg, var(--steel-900), var(--steel-950));
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-3);
  padding: 22px 24px 24px; color: #fff;
}
/* Self-animating copper glow: ambient background only, not the rail nodes. */
.gd-rail__glow {
  position: absolute; z-index: 0; pointer-events: none;
  inset: -32% -44% -38% -38%;
  background-image:
    radial-gradient(ellipse 48% 34% at 22% 46%, rgba(242,189,156,.24) 0%, rgba(230,146,102,.17) 24%, rgba(199,100,50,.075) 48%, transparent 72%),
    radial-gradient(ellipse 38% 56% at 32% 52%, rgba(131,54,20,.18) 0%, rgba(131,54,20,.075) 42%, transparent 74%),
    linear-gradient(104deg, transparent 0 22%, rgba(230,146,102,.055) 34%, rgba(199,100,50,.13) 46%, rgba(230,146,102,.055) 58%, transparent 76% 100%);
  background-size: 178% 138%, 152% 184%, 228% 100%;
  background-position: 4% 46%, 0% 52%, 0% 50%;
  opacity: .78;
  mix-blend-mode: screen;
  filter: saturate(1.08);
  transform: translateZ(0);
  will-change: background-position, opacity;
}
.gd-rail__glow::before {
  content: "";
  position: absolute;
  inset: 18% 18% 16% 10%;
  background:
    linear-gradient(105deg, transparent 0 28%, rgba(240,190,164,.16) 40%, rgba(199,100,50,.12) 52%, transparent 70% 100%);
  opacity: .54;
  transform: translate3d(-12%, 0, 0) skewX(-8deg);
  mask-image: linear-gradient(90deg, transparent, #000 26%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 26%, #000 70%, transparent);
  will-change: transform, opacity;
}
.gd-rail__glow::after {
  content: "";
  position: absolute;
  inset: 8% 12% 10% 8%;
  background:
    radial-gradient(ellipse 28% 18% at 34% 46%, rgba(255,255,255,.05), transparent 68%),
    linear-gradient(90deg, transparent, rgba(255,255,255,.025), transparent);
  opacity: .5;
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 62%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 62%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .gd-rail__glow { animation: gd-sheen 12s cubic-bezier(.38,0,.18,1) infinite alternate; }
  .gd-rail__glow::before { animation: gd-tail-sweep 6.8s cubic-bezier(.38,0,.18,1) infinite alternate; }
}
@keyframes gd-sheen {
  0% {
    background-position: 4% 46%, 0% 52%, 0% 50%;
    opacity: .62;
  }
  48% {
    background-position: 42% 44%, 54% 50%, 48% 50%;
    opacity: .88;
  }
  100% {
    background-position: 76% 47%, 91% 54%, 100% 50%;
    opacity: .74;
  }
}
@keyframes gd-tail-sweep {
  0% { transform: translate3d(-16%, 0, 0) skewX(-8deg); opacity: .24; }
  45% { opacity: .62; }
  100% { transform: translate3d(18%, 0, 0) skewX(-8deg); opacity: .38; }
}
.gd-rail::before {
  content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 2px; z-index: 4;
  background: linear-gradient(90deg, transparent, var(--copper-500) 18%, var(--copper-400) 82%, transparent);
}

.gd-rail__head { position: relative; z-index: 2; display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
.gd-rail__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--copper-300); font-weight: 500; }
.gd-rail__rev { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--steel-400); }

.gd-rail__track { position: relative; z-index: 2; padding: 8px 0 2px; }
.gd-rail__line {
  position: absolute; left: 13px; top: 20px; bottom: 20px; width: 2px;
  background: linear-gradient(180deg, var(--copper-500), var(--copper-700));
  transform-origin: top; transform: scaleY(1); transition: transform 1100ms var(--mo-dry);
}
.js .gd-rail:not(.is-in) .gd-rail__line { transform: scaleY(0); }
.gd-rail.is-in .gd-rail__line { transform: scaleY(1); }

.gd-rail__node { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: center; padding: 11px 0; opacity: 1; transform: none; transition: opacity 520ms var(--mo-ease), transform 520ms var(--mo-ease); }
.js .gd-rail:not(.is-in) .gd-rail__node { opacity: 0; transform: translateX(8px); }
.gd-rail.is-in .gd-rail__node { opacity: 1; transform: none; }
.gd-rail__dot { position: relative; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--steel-900); border: 1px solid rgba(255,255,255,.14); }
.gd-rail__dot::before { content: ""; width: 8px; height: 8px; background: var(--copper-500); border-radius: 50%; box-shadow: 0 0 0 0 rgba(196,93,44,.5); transition: box-shadow 600ms var(--mo-ease); }
.gd-rail__node.is-lit .gd-rail__dot { border-color: var(--copper-400); }
.gd-rail__node.is-lit .gd-rail__dot::before { box-shadow: 0 0 14px 2px rgba(196,93,44,.55); }
.gd-rail__code { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--copper-300); display: block; }
.gd-rail__label { font-size: 14px; font-weight: 500; color: #fff; line-height: 1.3; letter-spacing: -.005em; }

.gd-rail__foot { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.gd-rail__foot-text { font-size: 12px; color: var(--steel-300); line-height: 1.5; max-width: 26ch; margin: 0; }
.gd-rail__foot-cta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--copper-300); text-decoration: none; transition: padding-left .28s ease; }
.gd-rail__foot-cta:hover { color: var(--copper-200); }

/* scanner */
.gd-rail__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--scan-y, -64px);
  height: 52px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, -50%, 0);
  background:
    radial-gradient(ellipse 76% 64% at 32% 50%, rgba(230,146,102,.18), rgba(199,100,50,.075) 46%, transparent 72%),
    linear-gradient(180deg, transparent 0%, rgba(230,146,102,.055) 39%, rgba(230,146,102,.16) 50%, rgba(230,146,102,.055) 61%, transparent 100%);
  filter: saturate(1.06);
  transition:
    top 170ms cubic-bezier(.32, .72, .18, 1),
    opacity 120ms ease;
  will-change: top, opacity;
}
.gd-rail__scan::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242,189,156,.18) 10%, rgba(230,146,102,.82) 46%, rgba(242,189,156,.30) 76%, transparent);
  box-shadow: 0 0 16px rgba(230,146,102,.32);
  transform: translateY(-50%);
}
.gd-rail__scan::after {
  content: "";
  position: absolute;
  left: 38px;
  top: 50%;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(circle, rgba(242,189,156,.34) 0 10%, rgba(230,146,102,.16) 11% 32%, transparent 64%);
  box-shadow: 0 0 24px rgba(230,146,102,.30);
  transform: translate3d(-50%, -50%, 0) scale(.72);
}
.gd-rail.is-scanning .gd-rail__scan { opacity: 1; }
.gd-rail.is-hitting .gd-rail__scan::after { animation: gd-scan-hit 180ms cubic-bezier(.22, .8, .22, 1) 1; }
.gd-rail.is-scan-finished .gd-rail__scan { opacity: 0; }
@keyframes gd-scan-hit {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.66); }
  36% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.18); }
}

/* particles */
.gd-rail__particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.gd-rail__particles i { position: absolute; bottom: -6px; width: 2px; height: 2px; border-radius: 50%; background: var(--copper-300); opacity: 0; }
.gd-rail.is-in .gd-rail__particles i { animation: gd-rise var(--dur, 9s) linear var(--del, 0s) infinite; }
@keyframes gd-rise { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .5; } 80% { opacity: .3; } 100% { transform: translateY(-340px); opacity: 0; } }

@media (max-width: 1000px) {
  /* compact image-forward strip on tablet/mobile: keep rail but tighter */
  .gd-rail { padding: 18px 18px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .gd-rail__line { transform: scaleY(1); transition: none; }
  .gd-rail__node { opacity: 1; transform: none; transition: none; }
  .gd-rail__node .gd-rail__dot::before { box-shadow: 0 0 10px 1px rgba(196,93,44,.4); }
  .gd-rail__scan, .gd-rail__particles { display: none; }
}