/* Layered architecture of a web application (includes/visuals/stack.php) */
.st { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; }
.st-stack { position: relative; min-width: 0; }
.st-layers { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: 1fr; gap: 14px; }
.st-layer { min-width: 0; }

/* slabs: light at the top (what the user sees), dark at the bottom (what carries everything) */
.st-slab { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 10px 32px; align-items: center;
  align-content: center; padding: 18px 112px 18px 28px; border-radius: 12px; background: var(--white); color: var(--forest); box-shadow: 0 6px 0 #cfc9c1; }
.st-layer--2 .st-slab { background: var(--mint); box-shadow: 0 6px 0 #b8e1cd; }
.st-layer--3 .st-slab { background: var(--sage); box-shadow: 0 6px 0 #8fc2a9; }
.st-layer--4 .st-slab { background: var(--forest-2); color: var(--white); box-shadow: 0 6px 0 var(--forest); }
.st-layer--5 .st-slab { background: var(--forest); color: var(--white); box-shadow: 0 6px 0 var(--black); }
.st-slab::after { content: ""; position: absolute; inset: -4px; border-radius: 15px; border: 2.5px solid var(--green-2); opacity: 0; pointer-events: none; }
.st-id { min-width: 0; }
.st-where { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--green-text); }
.st-layer--4 .st-where, .st-layer--5 .st-where { color: var(--green); }
.st-name { margin: 0; font-family: var(--font-serif); font-size: 24px; line-height: 1.15; font-weight: 500; }
.st-role { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.st-layer--4 .st-role, .st-layer--5 .st-role { color: rgba(255, 255, 255, .82); }
.st-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.st-tags li { padding: 5px 11px; border-radius: 999px; font-size: 13.5px; font-weight: 600; line-height: 1.3; background: rgba(255, 255, 255, .72); color: var(--forest); }
.st-layer--1 .st-tags li { background: var(--paper); }
.st-layer--4 .st-tags li, .st-layer--5 .st-tags li { background: rgba(255, 255, 255, .1); color: var(--white); }

/* the band crossing every layer */
.st-band { position: absolute; top: -16px; bottom: -10px; right: 22px; width: 66px; margin: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px;
  background: repeating-linear-gradient(135deg, rgba(150, 248, 120, .9) 0 12px, rgba(150, 248, 120, .74) 12px 24px); box-shadow: 0 0 0 1.5px rgba(12, 43, 21, .18) inset; }
.st-band span { writing-mode: vertical-rl; transform: rotate(180deg); padding: 14px 7px; border-radius: 8px; background: var(--green); color: var(--forest); font-size: 13.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }

/* request track: down on the left rail, back up on the right rail */
.st-track { position: relative; }
.st-rail { position: absolute; top: 9%; bottom: 29.5%; width: 0; border-left: 2px dashed #7d8a80; }
.st-rail--down { left: 12px; }
.st-rail--up { left: 32px; border-left-color: var(--forest); border-left-style: solid; }
.st-rail::after { content: ""; position: absolute; left: -7px; border: 6px solid transparent; }
.st-rail--down::after { bottom: -8px; border-top: 9px solid #7d8a80; border-bottom-width: 0; }
.st-rail--up::after { top: -8px; border-bottom: 9px solid var(--forest); border-top-width: 0; }
.st-run { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; opacity: 0; }
.st-dot { position: absolute; top: 9%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; }
.st-run--down .st-dot { left: 6px; background: var(--green); box-shadow: 0 0 0 2px var(--forest); }
.st-run--up .st-dot { left: 26px; background: var(--forest); box-shadow: 0 0 0 3px var(--paper); }
.section--paper .st-run--up .st-dot { box-shadow: 0 0 0 3px var(--paper); }
.st-key { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.st-key--down { background: var(--green); box-shadow: 0 0 0 2px var(--forest); }
.st-key--up { background: var(--forest); }
.st-legend { margin-top: 30px; }

/* intro: the layers slide in from the bottom up, then the band rises, then the requests start */
.js .vz-figure .st-layer { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .vz-figure .st-layer--5 { transition-delay: .15s; }
.js .vz-figure .st-layer--4 { transition-delay: .4s; }
.js .vz-figure .st-layer--3 { transition-delay: .65s; }
.js .vz-figure .st-layer--2 { transition-delay: .9s; }
.js .vz-figure .st-layer--1 { transition-delay: 1.15s; }
.js .vz-figure .st-band { transform: scaleY(0); transform-origin: 50% 100%; transition: transform .8s cubic-bezier(.2, .7, .2, 1) 1.45s; }
.js .vz-figure .st-band span { opacity: 0; transition: opacity .5s ease 2s; }
.js .vz-figure .st-rail { opacity: 0; transition: opacity .6s ease 1.8s; }
.js .vz-figure.is-visible .st-layer { opacity: 1; transform: none; }
.js .vz-figure.is-visible .st-band { transform: none; }
.js .vz-figure.is-visible .st-band span, .js .vz-figure.is-visible .st-rail { opacity: 1; }
.js .vz-figure.is-visible .st-run--down { animation: st-down 5s linear 2.3s infinite; }
.js .vz-figure.is-visible .st-run--up { animation: st-up 5s linear 2.3s infinite; }
.js .vz-figure.is-visible .st-layer--1 .st-slab::after { animation: st-p1 5s linear 2.3s infinite; }
.js .vz-figure.is-visible .st-layer--2 .st-slab::after { animation: st-p2 5s linear 2.3s infinite; }
.js .vz-figure.is-visible .st-layer--3 .st-slab::after { animation: st-p3 5s linear 2.3s infinite; }
.js .vz-figure.is-visible .st-layer--4 .st-slab::after { animation: st-p4 5s linear 2.3s infinite; }
@keyframes st-down { 0% { opacity: 0; transform: none; } 5% { opacity: 1; transform: none; } 40% { opacity: 1; transform: translateY(61%); } 46%, 100% { opacity: 0; transform: translateY(61%); } }
@keyframes st-up { 0%, 50% { opacity: 0; transform: translateY(61%); } 55% { opacity: 1; transform: translateY(61%); } 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes st-p1 { 0% { opacity: 0; } 5% { opacity: 1; } 11%, 85% { opacity: 0; } 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes st-p2 { 0%, 12% { opacity: 0; } 17% { opacity: 1; } 23%, 73% { opacity: 0; } 78% { opacity: 1; } 84%, 100% { opacity: 0; } }
@keyframes st-p3 { 0%, 24% { opacity: 0; } 28.5% { opacity: 1; } 34%, 61% { opacity: 0; } 66.5% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes st-p4 { 0%, 35% { opacity: 0; } 40%, 55% { opacity: 1; } 61%, 100% { opacity: 0; } }

@media (max-width: 1100px) {
  .st-slab { grid-template-columns: minmax(0, 1fr); padding-right: 104px; }
}
@media (max-width: 600px) {
  .st { grid-template-columns: 34px minmax(0, 1fr); gap: 8px; }
  .st-layers { gap: 12px; }
  .st-slab { padding: 14px 54px 16px 16px; gap: 10px; }
  .st-name { font-size: 20px; }
  .st-role { font-size: 14px; }
  .st-tags li { font-size: 12.5px; padding: 4px 9px; }
  .st-band { right: 8px; width: 38px; }
  .st-band span { font-size: 12px; padding: 10px 4px; letter-spacing: .05em; }
  .st-rail--down { left: 6px; }
  .st-rail--up { left: 24px; }
  .st-run--down .st-dot { left: 0; }
  .st-run--up .st-dot { left: 18px; }
}