/* ============================================================
   STACK — mobile-native animated narrative (<=880px)
   Vertical layered stack: Applications -> FRAME -> Networks/Rails.
   Assembles on scroll-into-view (IntersectionObserver + CSS),
   no scroll-pinning, no GSAP. Content is fully visible if JS or
   IO is unavailable (progressive enhancement).
   ============================================================ */

.stack__mobile { display: none; }

@media (max-width: 880px) {
  /* the desktop isometric scene is hidden; this carries the story */
  .stack__static { display: none; }
  .stack__mobile {
    display: grid;
    gap: clamp(18px, 5vw, 28px);
    padding: clamp(76px, 17vw, 120px) var(--gutter) clamp(8px, 4vw, 28px);
  }
}

.smk { position: relative; display: grid; gap: 12px; margin-top: 4px; }

/* ---- layer cards ---- */
.smk__layer {
  position: relative; border-radius: 16px; padding: 20px;
  border: 1px solid rgba(99,157,205,.18); overflow: hidden;
  background: linear-gradient(160deg, rgba(28,62,93,.42), rgba(11,17,24,.88));
}
.smk__layer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120,176,220,.55), transparent);
}
.smk__layer--apps  { background: linear-gradient(160deg, rgba(58,134,196,.30), rgba(11,28,46,.9)); }
.smk__layer--money { background: linear-gradient(160deg, rgba(28,62,93,.52), rgba(6,18,29,.94)); }
.smk__layer--frame {
  display: grid; place-items: center; gap: 10px; padding: 26px 20px;
  background: linear-gradient(160deg, rgba(38,112,172,.5), rgba(10,51,88,.96));
  border-color: rgba(120,176,220,.5);
  box-shadow: 0 0 0 1px rgba(99,157,205,.22), 0 18px 50px rgba(15,76,129,.38);
}

.smk__tag {
  font-family: var(--font-condensed); font-weight: 600; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--frame-conduit);
}
.smk__name {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: -.01em; color: #fff; line-height: 1; margin-top: 7px;
  font-size: clamp(1.2rem, 5.4vw, 1.55rem); transition: opacity .25s ease;
}
.smk__meta {
  font-family: var(--font-body); font-size: .92rem; line-height: 1.4;
  color: var(--frame-galvanized); margin-top: 9px;
}

/* frame layer — the mark */
.smk__mark { width: clamp(118px, 34vw, 150px); display: block; }
.smk__mark svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 18px rgba(99,157,205,.7)); }
.smk__mark svg path { fill: #fff; }
.smk__sub {
  font-family: var(--font-condensed); font-weight: 600; font-size: 12.5px;
  letter-spacing: .28em; text-transform: uppercase; color: var(--frame-conduit); text-align: center;
}

/* rails chips */
.smk__rails { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.smk__chip {
  font-family: var(--font-condensed); font-weight: 600; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--frame-clearspan);
  padding: 7px 12px;
  background: linear-gradient(155deg, rgba(28,62,93,.6), rgba(13,17,22,.9));
  box-shadow: inset 0 0 0 1px rgba(99,157,205,.3);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}

/* connector beams */
.smk__beam { height: 24px; display: grid; place-items: center; }
.smk__beam i {
  display: block; width: 2px; height: 100%; transform-origin: top;
  background: linear-gradient(180deg, rgba(99,157,205,.08), rgba(99,157,205,.85), rgba(99,157,205,.08));
}

/* travelling settlement packet (heartbeat) */
.smk__packet {
  position: absolute; left: 50%; top: 12%; width: 10px; height: 10px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #d7e8f7, var(--frame-conduit) 58%, transparent 72%);
  box-shadow: 0 0 16px rgba(99,157,205,.9); opacity: 0; pointer-events: none; z-index: 5;
}

.smk__cap {
  font-family: var(--font-body); font-size: 1rem; line-height: 1.5; color: var(--frame-galvanized);
}
.smk__cap b { color: #fff; font-weight: 600; }

/* ============================================================
   entrance — armed (JS sets initial), in (JS plays on scroll)
   ============================================================ */
.smk--armed .smk__layer { opacity: 0; transform: translateY(26px);
  transition: opacity .7s var(--ease-standard), transform .7s var(--ease-standard); }
.smk--armed .smk__beam i { transform: scaleY(0); transition: transform .6s var(--ease-standard); }
.smk--armed .smk__mark path { opacity: 0; transform: translateY(-7px);
  transition: opacity .5s var(--ease-standard), transform .5s var(--ease-standard); }
.smk--armed .smk__chip { opacity: 0; transform: translateY(10px) scale(.92);
  transition: opacity .5s var(--ease-standard), transform .5s var(--ease-standard); }

.smk--in .smk__layer { opacity: 1; transform: none; }
.smk--in .smk__layer--apps  { transition-delay: .05s; }
.smk--in .smk__layer--money { transition-delay: .22s; }
.smk--in .smk__layer--frame { transition-delay: .40s; }
.smk--in .smk__beam i { transform: scaleY(1); }
.smk--in .smk__beam[data-smk-beam="0"] i { transition-delay: .52s; }
.smk--in .smk__beam[data-smk-beam="1"] i { transition-delay: .62s; }
.smk--in .smk__mark path { opacity: 1; transform: none; }
.smk--in .smk__mark .l3 { transition-delay: .50s; }
.smk--in .smk__mark .l2 { transition-delay: .58s; }
.smk--in .smk__mark .l1 { transition-delay: .66s; }
.smk--in .smk__mark .l0 { transition-delay: .74s; }
.smk--in .smk__chip { opacity: 1; transform: none; }
.smk--in .smk__chip:nth-child(1) { transition-delay: .66s; }
.smk--in .smk__chip:nth-child(2) { transition-delay: .72s; }
.smk--in .smk__chip:nth-child(3) { transition-delay: .78s; }
.smk--in .smk__chip:nth-child(4) { transition-delay: .84s; }
.smk--in .smk__chip:nth-child(5) { transition-delay: .90s; }
.smk--in .smk__chip:nth-child(6) { transition-delay: .96s; }
.smk--in .smk__chip:nth-child(7) { transition-delay: 1.02s; }

/* heartbeat + frame breathing (only after assembled) */
.smk--in .smk__packet { animation: smkFlow 3.4s ease-in-out 1.2s infinite; }
.smk--in .smk__layer--frame { animation: smkBreathe 4.2s ease-in-out 1.4s infinite; }

@keyframes smkFlow {
  0%   { top: 13%; opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { top: 87%; opacity: 0; }
}
@keyframes smkBreathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(99,157,205,.22), 0 18px 50px rgba(15,76,129,.38); }
  50%      { box-shadow: 0 0 0 1px rgba(99,157,205,.45), 0 22px 64px rgba(15,76,129,.6); }
}

@media (prefers-reduced-motion: reduce) {
  .smk--armed .smk__layer,
  .smk--armed .smk__beam i,
  .smk--armed .smk__mark path,
  .smk--armed .smk__chip { opacity: 1 !important; transform: none !important; transition: none !important; }
  .smk--in .smk__packet,
  .smk--in .smk__layer--frame { animation: none !important; }
}