/* ============================================
   RACK TIMELINE — the data center page's capability stack as a server rack
   running down the page; each step is a blade that slides into its slot as it
   scrolls into view. Markup: template-parts/components/rack-timeline.php ·
   motion: assets/js/rack-timeline.js.

   Default markup is every blade seated and lit (reduced motion, no GSAP);
   .rackt--live lets JS drive --out (0 seated → 1 fully out) per slot.
   Drawn in the hero's toon style: ink outlines, flat faces, 45° oblique depth
   receding up-right. A blade that is out sits --out × --pull in front of the
   rack: its face shifts down-left by that much and its top and side faces
   grow to span back to the rack plane, so they always end exactly on the slot.
   ============================================ */

.rackt {
  --rk-ink: #0A1322;
  --rk-line: 2px;
  --rk-white: #F3F0EB;
  --rk-white-top: #FFFFFF;
  --rk-white-side: #C2BAAE;
  --rk-alloy: #CDD3DB;
  --rk-alloy-top: #EEF1F4;
  --rk-alloy-side: #96A0AD;
  --rk-steel: #808B9A;
  --rk-interior: #060D18;
  --rk-green: #3DDC7A;
  --rk-amber: #FFB24A;

  --rail: 30px;          /* rail width; the ears sit on it */
  --depth: 40px;         /* cabinet depth, drawn */
  --pull: 96px;          /* how far out a blade starts */
  --gap: 14px;           /* between blades */
}

@media (max-width: 640px) {
  .rackt {
    --rk-line: 1.5px;
    --rail: 16px;
    --depth: 20px;
    --pull: 48px;
    --gap: 10px;
  }
}

.rackt .section__header {
  position: relative;
  z-index: 1;
}


/* ── Oblique box: front face is the element, top + side faces are pseudos ── */
.rackt-box {
  position: relative;
  display: block;
  box-sizing: border-box;
  background: var(--f, var(--rk-alloy));
  border: var(--rk-line) solid var(--rk-ink);
}

.rackt-box::before,
.rackt-box::after {
  content: '';
  position: absolute;
  box-sizing: border-box;
  border: var(--rk-line) solid var(--rk-ink);
  pointer-events: none;
}

.rackt-box::before {
  left: calc(-1 * var(--rk-line));
  right: calc(-1 * var(--rk-line));
  bottom: calc(100% + var(--rk-line));
  height: var(--d, var(--depth));
  background: var(--t, var(--rk-alloy-top));
  border-bottom: 0;
  transform-origin: 0 100%;
  transform: skewX(-45deg);
}

.rackt-box::after {
  top: calc(-1 * var(--rk-line));
  bottom: calc(-1 * var(--rk-line));
  left: calc(100% + var(--rk-line));
  width: var(--d, var(--depth));
  background: var(--s, var(--rk-alloy-side));
  border-left: 0;
  transform-origin: 0 0;
  transform: skewY(-45deg);
}


/* ── The rack: cap, bay, base ── */
.rackt__rack {
  position: relative;
  max-width: 980px;
  /* Room on the right for the cabinet's side, on top for the cap's top face. */
  margin: calc(var(--depth) + var(--space-4)) auto 0;
  padding-right: var(--depth);
}

.rackt__cap {
  height: 30px;
  display: grid;
  place-items: center;
}

.rackt__base {
  height: 42px;
  display: grid;
  place-items: center;
  /* The base's top face would sit behind the bay; only its side shows. */
}

.rackt__base::before {
  display: none;
}

.rackt__foot {
  position: absolute;
  top: 100%;
  width: 34px;
  height: 12px;
  box-sizing: border-box;
  border: var(--rk-line) solid var(--rk-ink);
  border-top: 0;
  border-radius: 0 0 4px 4px;
  background: #3A4250;
}

.rackt__foot--l { left: 24px; }
.rackt__foot--r { right: 24px; }

.rackt__plate {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.35em 0.8em 0.3em;
  border: 1.5px solid var(--rk-ink);
  border-radius: 3px;
  background: var(--color-navy);
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.rackt__plate b {
  color: var(--rk-amber);
  font-weight: 700;
}

.rackt__online {
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: var(--rk-amber);
  box-shadow: 0 0 8px 1px rgba(255, 178, 74, 0.5);
}

.rackt__rack.is-full .rackt__online,
.rackt:not(.rackt--live) .rackt__online {
  background: var(--rk-green);
  box-shadow: 0 0 8px 1px rgba(61, 220, 122, 0.6);
}

/* Floor shadow under the cabinet. */
.rackt__rack::after {
  content: '';
  position: absolute;
  left: 2%;
  right: 0;
  bottom: -28px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  filter: blur(8px);
  z-index: -1;
}


/* ── Bay: interior, rails, cabinet side ── */
.rackt__bay {
  position: relative;
  padding: var(--gap) 0;
  background:
    linear-gradient(90deg, transparent var(--rail), rgba(255, 255, 255, 0.025) var(--rail) calc(var(--rail) + 1px), transparent calc(var(--rail) + 1px)),
    var(--rk-interior);
  border-inline: var(--rk-line) solid var(--rk-ink);
}

/* The cabinet's side panel, receding up-right along the bay's right edge. */
.rackt__side {
  position: absolute;
  top: calc(-1 * var(--rk-line));
  bottom: calc(-1 * var(--rk-line));
  left: 100%;
  width: var(--depth);
  box-sizing: border-box;
  background:
    repeating-linear-gradient(to bottom, transparent 0 18px, rgba(12, 24, 41, 0.12) 18px 20px),
    var(--rk-alloy-side);
  border: var(--rk-line) solid var(--rk-ink);
  border-left: 0;
  transform-origin: 0 0;
  transform: skewY(-45deg);
}

.rackt__rail {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--rail);
  box-sizing: border-box;
  background: var(--rk-steel);
  border-inline: var(--rk-line) solid var(--rk-ink);
}

.rackt__rail--l { left: 0; border-left: 0; }
.rackt__rail--r { right: 0; border-right: 0; }

/* Square mounting holes down the rail. */
.rackt__rail::before {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 50%;
  width: 7px;
  margin-left: -3.5px;
  background: repeating-linear-gradient(to bottom,
    #1A2230 0 7px, transparent 7px 11px, #1A2230 11px 18px, transparent 18px 22px,
    #1A2230 22px 29px, transparent 29px 44px);
}


/* ── Units ── */
.rackt__units {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rackt__slot {
  position: relative;
  --o: var(--out, 0);
}

/* The empty slot behind the blade: shows while the blade is out. */
.rackt__slot::before {
  content: '';
  position: absolute;
  inset: 0 var(--rail);
  background: #03070D;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 10px 18px rgba(0, 0, 0, 0.6);
}

.rackt__blade {
  position: relative;
  display: flex;
  transform: translate3d(calc(var(--o) * var(--pull) * -1), calc(var(--o) * var(--pull)), 0);
  opacity: clamp(0, calc(4 - var(--o) * 4), 1);
  will-change: transform;
}

/* Front face: the faceplate between the ears. Its top and side faces span
   from the front back to the rack plane, so they only exist while it's out. */
.rackt__face {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 22px;
  align-items: start;
  padding: 22px 22px 22px 24px;
  box-sizing: border-box;
  background: var(--rk-white);
  border: var(--rk-line) solid var(--rk-ink);
  border-radius: 3px;
}

.rackt__face::before,
.rackt__face::after {
  content: '';
  position: absolute;
  box-sizing: border-box;
  border: var(--rk-line) solid var(--rk-ink);
  pointer-events: none;
  opacity: min(1, calc(var(--o) * 40));
}

.rackt__face::before {
  left: calc(-1 * var(--rk-line));
  right: calc(-1 * var(--rk-line));
  bottom: calc(100% + var(--rk-line));
  height: calc(var(--o) * var(--pull));
  /* The chassis behind the faceplate is bare steel: its top has lid seams. */
  background:
    repeating-linear-gradient(90deg, transparent 0 23%, rgba(12, 24, 41, 0.14) 23% calc(23% + 2px)),
    #D5DAE1;
  border-bottom: 0;
  transform-origin: 0 100%;
  transform: skewX(-45deg);
}

.rackt__face::after {
  top: calc(-1 * var(--rk-line));
  bottom: calc(-1 * var(--rk-line));
  left: calc(100% + var(--rk-line) + var(--rail));
  width: calc(var(--o) * var(--pull));
  background: #9AA3AF;
  border-left: 0;
  transform-origin: 0 0;
  transform: skewY(-45deg);
}

/* Ears on the rails: two screws and a latch lever that closes when seated. */
.rackt__ear {
  position: relative;
  flex: none;
  width: var(--rail);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  box-sizing: border-box;
  background: var(--rk-alloy);
  border: var(--rk-line) solid var(--rk-ink);
  border-radius: 3px;
}

.rackt__ear--l { margin-right: calc(-1 * var(--rk-line)); }
.rackt__ear--r { margin-left: calc(-1 * var(--rk-line)); }

.rackt__screw {
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--rk-ink);
  border-radius: 50%;
  background: radial-gradient(circle, var(--rk-ink) 0 1px, transparent 1.5px), var(--rk-alloy-top);
}

.rackt__lever {
  width: 8px;
  height: 42%;
  min-height: 28px;
  border: 1.5px solid var(--rk-ink);
  border-radius: 99px;
  background: var(--color-saffron);
  transform-origin: 50% 12%;
  transform: rotate(0deg);
  transition: transform 0.28s var(--ease-spring);
}

.rackt--live .rackt__slot:not(.is-seated) .rackt__ear--l .rackt__lever { transform: rotate(38deg); }
.rackt--live .rackt__slot:not(.is-seated) .rackt__ear--r .rackt__lever { transform: rotate(-38deg); }


/* ── Faceplate content ── */
.rackt__badge {
  display: grid;
  place-items: center;
  width: 58px;
  aspect-ratio: 1;
  border-radius: 22%;
  background: var(--color-navy);
  color: var(--rk-amber);
}

.rackt__icon {
  width: 55%;
  height: auto;
  stroke-width: 1.6;
}

.rackt__num {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(12, 24, 41, 0.72);
}

.rackt__num b {
  display: inline-block;
  padding: 0.3em 0.45em 0.25em;
  margin-inline: 0.15em 0.1em;
  border-radius: 3px;
  background: var(--color-navy);
  color: var(--rk-amber);
  font-weight: 700;
}

.rackt .rackt__title {
  margin: 0 0 6px;
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-navy);
  text-shadow: none;
  text-wrap: balance;
}

.rackt__desc {
  margin: 0;
  max-width: 62ch;
  font-size: var(--text-base);
  line-height: 1.6;
  color: rgba(12, 24, 41, 0.8);
  text-wrap: pretty;
}

/* Status display over a perforated vent. */
.rackt__status {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 150px;
  align-self: stretch;
}

.rackt__screen {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1.5px solid var(--rk-ink);
  border-radius: 4px;
  background: var(--color-navy);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}

.rackt__screen b {
  color: #6FE3A8;
  transition: opacity 0.2s;
}

.rackt__led {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rk-green);
  box-shadow: 0 0 8px 2px rgba(61, 220, 122, 0.55);
  transition: background-color 0.2s, box-shadow 0.2s;
}

.rackt--live .rackt__slot:not(.is-seated) .rackt__led {
  background: #2A3140;
  box-shadow: none;
}

.rackt--live .rackt__slot:not(.is-seated) .rackt__screen b {
  opacity: 0.18;
}

.rackt__vent {
  flex: 1 1 auto;
  min-height: 40px;
  border-radius: 3px;
  background: radial-gradient(circle, rgba(12, 24, 41, 0.28) 0 2px, transparent 2.5px) 0 0 / 9px 9px;
}


/* ── Phones: badge + step on one row, status top-right ── */
@media (max-width: 640px) {
  .rackt__face {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 16px 14px 16px 16px;
  }

  .rackt__badge {
    position: absolute;
    top: 14px;
    left: 16px;
    width: 34px;
  }

  .rackt__num {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding-left: 44px;
    margin-bottom: 4px;
  }

  .rackt__status {
    position: absolute;
    top: 16px;
    right: 14px;
    width: auto;
  }

  .rackt__vent { display: none; }

  .rackt__screen {
    padding: 6px 8px;
    font-size: 10px;
  }

  .rackt__ear { padding: 8px 0; }
  .rackt__screw { width: 7px; height: 7px; }
  .rackt__lever { width: 6px; min-height: 22px; }
  .rackt__rail::before { width: 4px; margin-left: -2px; }

  .rackt__plate { font-size: 10px; }
}


/* ============================================
   ESS VARIANT — the cabinet as one giant battery (energy storage page)
   Terminals sit in a column at the face's right edge. Each module's busbar
   hangs from its bottom terminal down across the gap to the next module's top
   terminal; it lives in the UPPER module because upper slots stack above lower
   ones (descending z-index), so it draws over the module it bolts to. It stays
   swung out until both modules are seated (.is-linked, set by JS).
   ============================================ */

.rackt--ess {
  --ts: 16px;            /* terminal post size */
  --tp: 12px;            /* terminal inset from the face's top/bottom */
  --tr: 14px;            /* terminal inset from the face's right edge */
  --bw: 12px;            /* busbar width */
  --tc: calc(var(--tp) + var(--ts) / 2);   /* terminal centre from its edge */
}

@media (max-width: 640px) {
  .rackt--ess {
    --ts: 12px;
    --tp: 10px;
    --tr: 8px;
    --bw: 8px;
  }
}

.rackt--ess .rackt__rack {
  /* The cap's posts rise above its top face. */
  margin-top: calc(var(--depth) + 56px);
}

.rackt--ess .rackt__face {
  padding-right: calc(var(--tr) + var(--ts) + 18px);
}

/* Cap posts: − and + on the cabinet's top face, mid-depth. */
.rackt__post {
  position: absolute;
  bottom: calc(100% + var(--depth) / 2);
  width: 62px;
  height: 40px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: var(--rk-line) solid var(--rk-ink);
  border-radius: 50% 50% 5px 5px / 38% 38% 5px 5px;
  font-style: normal;
  transform: translateX(calc(var(--depth) / 2));
}

.rackt__post b {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

.rackt__post--neg { left: 18%; background: #3A4250; color: var(--rk-white); }
.rackt__post--pos { right: 18%; background: var(--color-saffron); color: var(--color-navy); }

/* Terminals */
.rackt__term {
  position: absolute;
  right: var(--tr);
  width: var(--ts);
  height: var(--ts);
  box-sizing: border-box;
  border: var(--rk-line) solid var(--rk-ink);
  border-radius: 50%;
}

.rackt__term--top {
  top: var(--tp);
  background: radial-gradient(circle, var(--rk-ink) 0 18%, var(--color-saffron) 22%);
}

.rackt__term--bot {
  bottom: var(--tp);
  background: radial-gradient(circle, var(--rk-ink) 0 18%, #5B6575 22%);
}

/* Busbar: from this module's bottom terminal to the next one's top terminal. */
.rackt__busbar {
  position: absolute;
  z-index: 2;
  right: calc(var(--tr) + var(--ts) / 2 - var(--bw) / 2);
  top: calc(100% - var(--tc) - var(--bw) / 2);
  width: var(--bw);
  height: calc(var(--gap) + 2 * var(--tc) + 2 * var(--rk-line) + var(--bw));
  box-sizing: border-box;
  border: var(--rk-line) solid var(--rk-ink);
  border-radius: 99px;
  background:
    radial-gradient(circle at 50% calc(var(--bw) / 2), var(--rk-ink) 0 1.5px, transparent 2px),
    radial-gradient(circle at 50% calc(100% - var(--bw) / 2), var(--rk-ink) 0 1.5px, transparent 2px),
    linear-gradient(90deg, #E7A55E, #C9782E);
  transform-origin: 50% calc(var(--bw) / 2);
  transform: rotate(0deg);
  transition: transform 0.36s var(--ease-spring);
}

.rackt--live .rackt__slot:not(.is-linked) .rackt__busbar {
  transform: rotate(-68deg);
}

/* Charge cells: a small battery that fills when the module seats. */
.rackt__cells {
  position: relative;
  display: flex;
  gap: 3px;
  height: 30px;
  margin-right: 7px;
  padding: 3px;
  box-sizing: border-box;
  border: 1.5px solid var(--rk-ink);
  border-radius: 4px;
  background: var(--color-navy);
}

.rackt__cells::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  width: 5px;
  height: 12px;
  margin-top: -6px;
  box-sizing: border-box;
  border: 1.5px solid var(--rk-ink);
  border-left: 0;
  border-radius: 0 2px 2px 0;
  background: var(--color-navy);
}

.rackt__cells i {
  flex: 1 1 0;
  border-radius: 2px;
  background: var(--rk-green);
  box-shadow: 0 0 6px rgba(61, 220, 122, 0.45);
  transition: background-color 0.2s, box-shadow 0.2s;
}

.rackt__cells i:nth-child(2) { transition-delay: 0.07s; }
.rackt__cells i:nth-child(3) { transition-delay: 0.14s; }
.rackt__cells i:nth-child(4) { transition-delay: 0.21s; }
.rackt__cells i:nth-child(5) { transition-delay: 0.28s; }

.rackt--live .rackt__slot:not(.is-seated) .rackt__cells i {
  background: #1A2230;
  box-shadow: none;
  transition-delay: 0s;
}

/* Base gauge: one segment per module, filling as they seat. */
.rackt__gauge {
  position: relative;
  display: inline-flex;
  gap: 2px;
  height: 14px;
  padding: 2px;
  margin-right: 5px;
  box-sizing: border-box;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 3px;
}

.rackt__gauge::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  width: 3px;
  height: 6px;
  margin-top: -3px;
  border-radius: 0 1px 1px 0;
  background: rgba(255, 255, 255, 0.55);
}

.rackt__gauge i {
  width: 5px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.12);
  transition: background-color 0.25s;
}

.rackt__gauge i.on,
.rackt:not(.rackt--live) .rackt__gauge i {
  background: var(--rk-amber);
}

.rackt__rack.is-full .rackt__gauge i,
.rackt:not(.rackt--live) .rackt__gauge i {
  background: var(--rk-green);
}

@media (max-width: 640px) {
  .rackt--ess .rackt__status {
    right: calc(var(--tr) + var(--ts) + 10px);
  }
  .rackt--ess .rackt__cells {
    display: none;
  }
  .rackt__post {
    width: 34px;
    height: 24px;
  }
  .rackt__post b { font-size: 16px; }
}