/* ============================================================
   HERO — ROTATING SCENE STAGE
   A set of macro diagrams that interchange, explaining where
   FRAME sits. Scene 0 is the brand mark; the rest are positioning
   visuals. One active at a time; tabs below double as progress.
   ============================================================ */

.hero__visual { display:flex; flex-direction:column; gap:22px; aspect-ratio:auto; }
.hero__stage { position:relative; width:100%; aspect-ratio:1/1; }

/* each scene fills the square; cross-fades with a small lift */
.scene {
  position:absolute; inset:0; display:grid; place-items:center;
  opacity:0; visibility:hidden; transform: translateY(14px) scale(.985);
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), visibility 0s linear .6s;
  pointer-events:none;
}
.scene.is-active {
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
  transition: opacity .55s var(--ease-out) .05s, transform .65s var(--ease-out) .05s, visibility 0s;
}

/* keep the mark scene's glyph/chips behaving as before */
.scene[data-scene="0"] #heroGlyph { width:78%; height:78%; margin:0; }

/* ---------- TABS / progress ---------- */
.hero__tabs { display:grid; grid-template-columns: repeat(3, 1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); }
.hero__tab {
  position:relative; background:var(--ink-900); border:0; cursor:pointer; text-align:left;
  padding:13px 14px 15px; display:flex; flex-direction:column; gap:5px; overflow:hidden;
  transition: background var(--dur-base) var(--ease-standard);
}
.hero__tab:hover { background:var(--ink-800); }
.hero__tab-n { font-family:var(--font-condensed); font-weight:600; font-size: 15px; letter-spacing:.14em; color:var(--frame-foundry); transition:color var(--dur-base); }
.hero__tab-t { font-family:var(--font-condensed); font-weight:600; text-transform:uppercase; letter-spacing:.03em; font-size: 16px; line-height:1.15; color:var(--frame-galvanized); transition:color var(--dur-base); }
.hero__tab.is-active { background:var(--ink-800); }
.hero__tab.is-active .hero__tab-n { color:var(--frame-conduit); }
.hero__tab.is-active .hero__tab-t { color:#fff; }
.hero__tab-bar { position:absolute; left:0; bottom:0; height:2px; width:100%; transform:scaleX(0); transform-origin:0 50%; background:var(--frame-conduit); }
/* fill is driven by JS (inline transform) so it tracks the real cycle clock */

/* shared scene caption */
.scene__cap {
  position:absolute; left:0; bottom:-2px; max-width:84%;
  font-family:var(--font-condensed); font-size: 17px; letter-spacing:.02em; line-height:1.35;
  color:var(--frame-galvanized);
}
.scene__cap b { color:#fff; font-weight:600; }

/* ============================================================
   SCENE 1 — WHERE FRAME SITS (3-tier layer stack)
   ============================================================ */
.lstack { width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; gap:18px; padding:6% 4%; position:relative; }
.lstack__line { position:absolute; left:11%; top:14%; bottom:14%; width:1px; background:linear-gradient(var(--line-dark-2), var(--frame-conduit), var(--line-dark-2)); opacity:.6; }
.lstack__packet { position:absolute; left:calc(11% - 4px); width:9px; height:9px; background:var(--frame-conduit); box-shadow:0 0 12px var(--frame-conduit); top:14%; opacity:0; }
.layer {
  position:relative; border:1px solid var(--line-dark-2); background:rgba(17,22,28,.7);
  padding:16px 18px; clip-path: polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);
  display:flex; align-items:center; gap:14px; transition: border-color var(--dur-slow), background var(--dur-slow);
}
.layer__lab { font-family:var(--font-condensed); font-weight:600; text-transform:uppercase; letter-spacing:.12em; font-size: 12.5px; color:var(--frame-foundry); }
.layer__name { font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:-.01em; font-size: clamp(.95rem,2.1vw,1.2rem); color:var(--frame-coldroll); line-height:1; }
.layer__meta { font-family:var(--font-condensed); font-size: 13.5px; color:var(--frame-galvanized); margin-top:5px; }
.layer__txt { flex:1; }
.layer--frame {
  border-color: var(--frame-deepwater); background: linear-gradient(110deg, rgba(15,76,129,.30), rgba(15,76,129,.10));
}
.layer--frame .layer__name { color:#fff; font-size: clamp(1.1rem,2.6vw,1.5rem); }
.layer--frame .layer__lab { color:var(--frame-conduit); }
.layer__mark { width:30px; height:24px; color:var(--frame-conduit); flex:none; }
.layer__mark svg { width:100%; height:100%; display:block; }
.layer__tag { font-family:var(--font-condensed); font-weight:600; font-size: 12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-900); background:var(--frame-conduit); padding:4px 8px; }

.scene[data-scene="1"].is-active .lstack__packet { animation: pktDrop 3.4s var(--ease-standard) infinite; }
.scene[data-scene="1"].is-active .layer--frame { animation: frameGlow 3.4s var(--ease-standard) infinite; }
@keyframes pktDrop {
  0%   { top:14%; opacity:0; }
  12%  { opacity:1; }
  46%  { top:49%; opacity:1; }
  54%  { top:51%; opacity:1; }
  88%  { top:86%; opacity:1; }
  100% { top:86%; opacity:0; }
}
@keyframes frameGlow {
  0%,38%,66%,100% { box-shadow:0 0 0 0 rgba(99,157,205,0); }
  50% { box-shadow:0 0 30px -2px rgba(99,157,205,.45); }
}

/* ============================================================
   SCENE 2 — ONE PLATFORM, EVERY RAIL (settlement ledger)
   An institutional console: every rail, one integration, all final.
   ============================================================ */
.ledger {
  width:100%; max-width:480px; margin:0 auto;
  font-family:var(--font-mono);
  background:var(--ink-850); border:1px solid var(--line-dark-2);
  box-shadow:0 24px 60px rgba(0,0,0,.42);
}
.ledger__bar {
  display:flex; align-items:center; gap:11px;
  padding:14px 18px; border-bottom:1px solid var(--line-dark-2);
}
.ledger__mark { width:23px; height:18px; color:var(--frame-conduit); display:block; }
.ledger__mark svg { width:100%; height:100%; display:block; }
.ledger__name { font-family:var(--font-condensed); font-weight:600; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--frame-coldroll); }
.ledger__live { margin-left:auto; display:flex; align-items:center; gap:7px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--frame-galvanized); }
.ledger__live i { width:7px; height:7px; border-radius:50%; background:var(--frame-conduit); }
.scene[data-scene="2"].is-active .ledger__live i { animation: liveBlink 2.2s var(--ease-standard) infinite; }
@keyframes liveBlink { 0%,100% { opacity:1; } 50% { opacity:.25; } }

.ledger__hrow, .lrow {
  display:grid; grid-template-columns: 1.1fr 1fr .92fr; align-items:center;
  gap:12px; padding:11px 18px;
}
.ledger__hrow { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--frame-foundry); padding-top:14px; padding-bottom:9px; }
.ledger__hrow span:last-child, .lstat { text-align:right; justify-content:flex-end; }
.lrow { border-top:1px solid var(--line-dark); font-size:14px; }
.lrail { font-weight:600; color:var(--frame-coldroll); letter-spacing:.02em; }
.lnet { color:var(--frame-galvanized); font-size:12.5px; }
.lstat { display:flex; align-items:center; gap:9px; color:var(--frame-conduit); font-size:12.5px; letter-spacing:.04em; }
.lstat__dot { width:8px; height:8px; background:var(--frame-conduit); flex:none; }

.ledger__foot {
  display:flex; justify-content:space-between;
  padding:13px 18px; border-top:1px solid var(--line-dark-2);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--frame-foundry);
}

/* settle sequence — rows populate, each finalises with a tick */
.scene[data-scene="2"].is-active .lrow { animation: rowIn .5s var(--ease-out) both; }
.scene[data-scene="2"].is-active .lrow:nth-child(2) { animation-delay:.06s; }
.scene[data-scene="2"].is-active .lrow:nth-child(3) { animation-delay:.14s; }
.scene[data-scene="2"].is-active .lrow:nth-child(4) { animation-delay:.22s; }
.scene[data-scene="2"].is-active .lrow:nth-child(5) { animation-delay:.30s; }
.scene[data-scene="2"].is-active .lrow:nth-child(6) { animation-delay:.38s; }
@keyframes rowIn { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
.scene[data-scene="2"].is-active .lstat__dot { animation: settleTick .5s var(--ease-out) both; }
.scene[data-scene="2"].is-active .lrow:nth-child(2) .lstat__dot { animation-delay:.28s; }
.scene[data-scene="2"].is-active .lrow:nth-child(3) .lstat__dot { animation-delay:.36s; }
.scene[data-scene="2"].is-active .lrow:nth-child(4) .lstat__dot { animation-delay:.44s; }
.scene[data-scene="2"].is-active .lrow:nth-child(5) .lstat__dot { animation-delay:.52s; }
.scene[data-scene="2"].is-active .lrow:nth-child(6) .lstat__dot { animation-delay:.60s; }
@keyframes settleTick { 0% { transform:scale(0); } 60% { transform:scale(1.4); } 100% { transform:scale(1); } }

/* ============================================================
   SCENE 3 — MARGIN AT EVERY LAYER (value chain)
   ============================================================ */
.vchain { width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; gap:26px; padding:8% 2%; }
.vchain__row { display:flex; align-items:stretch; gap:0; }
.vstep {
  flex:1; position:relative; background:var(--ink-800); border:1px solid var(--line-dark-2);
  padding:16px 12px 18px; display:flex; flex-direction:column; gap:10px;
  clip-path: polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);
  transition: border-color var(--dur-base), background var(--dur-base);
}
.vstep + .vstep { border-left:0; }
.vstep__ico { width:32px; height:32px; display:grid; place-items:center; color:var(--frame-galvanized); transition: color var(--dur-base); overflow:hidden; }
.vstep__ico .material-symbols-sharp { font-size:24px; }
.vstep__n { font-family:var(--font-condensed); font-weight:600; font-size: 12px; letter-spacing:.14em; color:var(--frame-foundry); }
.vstep__t { font-family:var(--font-display); font-weight:600; text-transform:uppercase; font-size: clamp(.85rem,1.9vw,1.05rem); color:var(--frame-coldroll); line-height:1; letter-spacing:-.01em; }
.scene[data-scene="3"].is-active .vstep { animation: stepWake .5s var(--ease-out) both; }
.scene[data-scene="3"].is-active .vstep.lit { border-color:var(--frame-deepwater); background:linear-gradient(170deg, rgba(15,76,129,.22), var(--ink-800)); }
.scene[data-scene="3"].is-active .vstep.lit .vstep__ico { color:var(--frame-conduit); }
@keyframes stepWake { from{ opacity:0; transform: translateX(-10px);} to{ opacity:1;} }

.vtake {
  align-self:flex-start; display:flex; align-items:baseline; gap:12px;
  border-top:1px solid var(--line-dark); padding-top:20px; width:100%;
}
.vtake__big { font-family:var(--font-display); font-weight:600; font-size: clamp(1.8rem,4vw,2.6rem); color:#fff; letter-spacing:-.02em; line-height:1; }
.vtake__big .bps { font-size:.42em; color:var(--frame-conduit); margin-left:6px; letter-spacing:.05em; }
.vtake__lab { font-family:var(--font-condensed); text-transform:uppercase; letter-spacing:.1em; font-size: 13px; color:var(--frame-galvanized); }

@media (max-width: 920px){ .hero__visual { display:none; } }

@media (prefers-reduced-motion: reduce){
  .scene { transition:none; }
  .hero__tab.is-active .hero__tab-bar { transform:scaleX(1) !important; }
  .scene[data-scene="1"].is-active .lstack__packet,
  .scene[data-scene="1"].is-active .layer--frame,
  .scene[data-scene="2"].is-active .lrow,
  .scene[data-scene="2"].is-active .lstat__dot,
  .scene[data-scene="2"].is-active .ledger__live i { animation:none; }
  .scene[data-scene="1"].is-active .lstack__packet { opacity:0; }
}

/* watchdog: if the animation clock is frozen, the cross-fade transition can't
   advance — switch scenes instantly so the active one is always visible */
.no-motion .scene { transition:none !important; }
.no-motion .scene:not(.is-active) { opacity:0; visibility:hidden; transform:none; }
.no-motion .scene.is-active { opacity:1 !important; visibility:visible; transform:none; }
.no-motion .scene .lstack__packet,
.no-motion .scene .lrow,
.no-motion .scene .lstat__dot,
.no-motion .scene .ledger__live i { animation:none !important; }
.no-motion .scene .lstack__packet { opacity:0; }