/* SolAnchor — Guide 3D scroll scene (driven by guide-3d.js) */
.gx { position: relative; height: 520vh; margin: 0 -14px; }
.gx-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; --u: 1; --navh: 80px; }

/* glowing perspective floor that scrolls under the scene */
.gx-floor { position: absolute; left: -50%; right: -50%; bottom: -10%; height: 70%; pointer-events: none;
  background:
    linear-gradient(transparent 0 calc(100% - 1px), color-mix(in srgb, var(--b) 45%, transparent) 0) 0 var(--floor, 0) / 70px 70px,
    linear-gradient(90deg, transparent 0 calc(100% - 1px), color-mix(in srgb, var(--a) 40%, transparent) 0) 0 0 / 70px 70px;
  transform: perspective(600px) rotateX(72deg); transform-origin: 50% 100%;
  -webkit-mask-image: radial-gradient(ellipse 60% 90% at 50% 100%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 90% at 50% 100%, #000 20%, transparent 75%); opacity: .55; }
.gx-stage::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 62% 55%, color-mix(in srgb, var(--a) 22%, transparent), transparent 45%),
              radial-gradient(circle at 70% 65%, color-mix(in srgb, var(--c) 10%, transparent), transparent 40%); }

/* 3D viewport: right 62% on desktop, upper part on phones */
.gx-view { position: absolute; top: var(--navh); bottom: 0; left: 38%; right: 0; perspective: 1000px; perspective-origin: 50% 40%; }
.gx-world { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; scale: var(--u); will-change: transform; }
.gx-world > * { position: absolute; left: 0; top: 0; transform-style: preserve-3d; will-change: transform, opacity; }

/* the document */
.gx-doc { width: 230px; height: 300px; padding: 14px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(160deg, #f6f4ff, #d9d4f5); color: #1b1535;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .6) inset, 0 0 60px color-mix(in srgb, var(--a) 45%, transparent); }
.gx-doc-bar { display: flex; align-items: center; gap: 5px; font: 600 11px var(--font); color: #5b5578; }
.gx-doc-bar i { width: 8px; height: 8px; border-radius: 50%; background: #ff5f57; }
.gx-doc-bar i:nth-child(2) { background: #febc2e; } .gx-doc-bar i:nth-child(3) { background: #28c840; }
.gx-doc-bar span { margin-left: 6px; }
.gx-doc-img { position: relative; height: 110px; margin: 12px 0; border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, #6a3df0, #ff6fb5 70%, #ffb36b); }
.gx-doc-img .sun { position: absolute; width: 46px; height: 46px; border-radius: 50%; left: 60%; top: 22px; background: #fff3c4; box-shadow: 0 0 30px #ffe38a; }
.gx-doc-img .hill { position: absolute; bottom: -30px; width: 170px; height: 90px; border-radius: 50%; background: #2a1a5e; }
.gx-doc-img .hill.a { left: -40px; } .gx-doc-img .hill.b { right: -60px; bottom: -40px; background: #1a1040; }
.gx-doc-lines i { display: block; height: 8px; margin: 9px 0; border-radius: 4px; background: #b9b2dc; }
.gx-beam { position: absolute; left: -10%; right: -10%; height: 3px; top: 0; opacity: 0; transition: opacity .2s;
  background: var(--c); box-shadow: 0 0 18px 6px color-mix(in srgb, var(--c) 70%, transparent), 0 -40px 60px color-mix(in srgb, var(--c) 25%, transparent); }

/* fingerprint characters */
.gx-hex { width: 0; height: 0; }
.gx-hex span { position: absolute; left: -8px; top: -14px; width: 16px; text-align: center; opacity: 0;
  font: 700 22px/28px var(--mono); color: var(--c); text-shadow: 0 0 12px color-mix(in srgb, var(--c) 80%, transparent); }
.gx-hexlabel { transform: translate3d(-50%, 78px, 0); white-space: nowrap; opacity: 0; font: 600 12px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* blocks */
.gx-cube { --s: 110px; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); opacity: 0; }
.gx-cube .f { position: absolute; inset: 0; border-radius: 10px; backface-visibility: visible;
  border: 1px solid color-mix(in srgb, var(--b) 70%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--a) 38%, rgba(10, 8, 24, .85)), color-mix(in srgb, var(--b) 22%, rgba(10, 8, 24, .9)));
  box-shadow: inset 0 0 26px color-mix(in srgb, var(--b) 35%, transparent); }
.gx-cube .front { transform: translateZ(calc(var(--s) / 2)); display: grid; place-content: center; text-align: center; gap: 4px; }
.gx-cube .back { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.gx-cube .right { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.gx-cube .left { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.gx-cube .top { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.gx-cube .bottom { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.gx-cube small { font: 700 9px var(--mono); letter-spacing: .16em; color: var(--muted); }
.gx-cube b { font: 700 11px var(--mono); color: var(--text); }
.gx-cube.slot .f { background: transparent; border-style: dashed; box-shadow: none; }
.gx-cube.slot .front small { opacity: 0; }
.gx-cube.new .f { border-color: var(--c); background: linear-gradient(145deg, color-mix(in srgb, var(--c) 40%, rgba(8, 20, 18, .85)), color-mix(in srgb, var(--b) 30%, rgba(8, 10, 24, .9)));
  box-shadow: inset 0 0 30px color-mix(in srgb, var(--c) 55%, transparent), 0 0 40px color-mix(in srgb, var(--c) 35%, transparent); }
.gx-cube.new b { color: var(--c); }
.gx.docked .gx-cube.new .f { box-shadow: inset 0 0 40px color-mix(in srgb, var(--c) 75%, transparent), 0 0 80px color-mix(in srgb, var(--c) 55%, transparent); }
.gx-links { width: 0; height: 0; opacity: 0; }
.gx-links i { position: absolute; top: -2px; height: 4px; width: 60px; border-radius: 2px; background: var(--grad); box-shadow: 0 0 14px color-mix(in srgb, var(--b) 80%, transparent); }
.gx-links i:nth-child(1) { left: -285px; } .gx-links i:nth-child(2) { left: -115px; }
.gx-links i:nth-child(3) { left: 55px; } .gx-links i:nth-child(4) { left: 225px; }

/* seal + timestamp */
.gx-seal { width: 200px; height: 200px; margin: -100px 0 0 -100px; opacity: 0; }
.gx-seal svg { width: 100%; height: 100%; fill: none; stroke: var(--c); stroke-width: 2; filter: drop-shadow(0 0 10px var(--c)); animation: gx-spin 14s linear infinite; }
.gx-seal .ticks { stroke-dasharray: 2 10; stroke-width: 6; opacity: .7; }
@keyframes gx-spin { to { transform: rotate(360deg); } }
.gx-stamp { margin-left: -120px; width: 240px; margin-top: -150px; text-align: center; opacity: 0; display: grid; gap: 3px; }
.gx-stamp span { font: 700 13px var(--display); color: var(--c); letter-spacing: .08em; text-transform: uppercase; }
.gx-stamp b { font: 600 14px var(--mono); color: var(--text); }
.gx-stamp small { font: 12px var(--mono); color: var(--muted); } .gx-stamp em { font-style: normal; color: var(--text); }

/* captions */
.gx-caps { position: absolute; left: 4%; width: 34%; top: var(--navh); bottom: 0; display: grid; align-items: center; pointer-events: none; }
.gx-cap { grid-area: 1 / 1; opacity: 0; transform: translateY(26px); filter: blur(8px); transition: opacity .55s, transform .7s cubic-bezier(.2, .8, .2, 1), filter .55s; }
.gx-cap.on { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.gx-eyebrow { display: inline-block; margin-bottom: 14px; font: 700 12px var(--mono); letter-spacing: .22em; text-transform: uppercase;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gx-cap h2 { margin: 0 0 14px; font: 700 clamp(30px, 4.4vw, 58px)/1.02 var(--display); letter-spacing: -.03em;
  background: linear-gradient(180deg, #fff, #b9b4d6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gx-cap p { margin: 0; max-width: 420px; color: var(--muted); font-size: clamp(15px, 1.3vw, 17px); line-height: 1.6; }
.gx-hint { display: inline-flex; gap: 8px; margin-top: 26px; font: 600 12px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-style: normal; }
.gx-hint b { display: inline-block; animation: gx-bob 1.6s ease-in-out infinite; color: var(--c); }
@keyframes gx-bob { 50% { transform: translateY(6px); } }
.gx-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

/* progress rail */
.gx-rail { position: absolute; right: 22px; top: calc(var(--navh) + 50%); translate: 0 calc(var(--navh) / -2 - 50%); display: grid; gap: 34px; padding-left: 16px; }
.gx-rail::before, .gx-rail b { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--line); }
.gx-rail b { background: var(--grad); transform-origin: top; transform: scaleY(0); box-shadow: 0 0 10px var(--b); }
.gx-rail i { font: 600 11px var(--mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); opacity: .5; transition: opacity .3s, color .3s; writing-mode: vertical-rl; }
.gx-rail i.on { opacity: 1; color: var(--text); }

.gx-details { margin: 10px 0 0; text-align: center; font: 700 clamp(24px, 3vw, 34px) var(--display); letter-spacing: -.02em; }

/* reveal the detail cards with a 3D tilt-up */
#view-guide .card.reveal { transform: perspective(1000px) rotateX(16deg) translateY(50px) scale(.96); transform-origin: 50% 100%; }
#view-guide .card.reveal.seen { transform: none; transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform 1s cubic-bezier(.2, .7, .2, 1); }

/* phones: scene on top, caption at the bottom */
@media (max-width: 759px), (orientation: portrait) and (max-width: 1100px) {
  .gx { height: 460vh; margin: 0 -10px; }
  .gx-view { left: 0; bottom: 36%; }
  .gx-caps { left: 18px; right: 18px; width: auto; top: auto; bottom: 0; height: 36%; align-items: start; }
  .gx-cap h2 { font-size: clamp(26px, 7.4vw, 36px); margin-bottom: 8px; }
  .gx-cap p { font-size: 14.5px; }
  .gx-eyebrow { margin-bottom: 8px; }
  .gx-hint { margin-top: 12px; }
  .gx-rail { display: none; }
  .gx-cta .btn { flex: 1; justify-content: center; }
}

/* reduced motion: one still frame, captions listed */
.gx.still { height: auto; }
.gx.still .gx-stage { position: relative; height: 640px; }
.gx.still .gx-cap { transition: none; }
.gx-chain { width: 0; height: 0; }
.gx-chain .gx-cube { position: absolute; left: 0; top: 0; transform-style: preserve-3d; will-change: transform, opacity; }
/* solid, readable blocks with lit top faces */
.gx-cube .f { border-width: 1.5px; background: linear-gradient(145deg, #2a1d5c, #151236); }
.gx-cube .top { background: linear-gradient(145deg, #4b3a9a, #2a2170); }
.gx-cube .right, .gx-cube .left { background: linear-gradient(145deg, #1d1648, #0f0c28); }
.gx-cube .front small { color: #b7b1dc; }
.gx-cube.new .f { background: linear-gradient(145deg, #0f5a4a, #0d2a3a); }
.gx-cube.new .top { background: linear-gradient(145deg, #1fae86, #127060); }
.gx-cube.slot .f { background: transparent; }
.gx.docked .gx-cube.slot { visibility: hidden; }
/* calm the site background behind the scene */
.gx-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse 80% 70% at 60% 55%, rgba(3, 2, 8, .15), rgba(3, 2, 8, .7)); }
.gx-stage { isolation: isolate; }
/* opacity on a preserve-3d element flattens it, so fade the faces instead */
.gx-cube { opacity: 1 !important; }
.gx-cube .f { opacity: var(--o, 0); }
/* full-bleed scene */
.gx { width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0; }
@media (max-width: 759px), (orientation: portrait) and (max-width: 1100px) { .gx { margin-left: calc(50% - 50vw); } }
/* will-change: opacity also flattens 3D; keep it off the containers of the blocks */
.gx-world > *, .gx-chain .gx-cube { will-change: auto; }

/* ---- screen fit ---- */
/* the scene is the Guide's hero, so drop the small site hero + stats above it */
body[data-view="guide"] .hero { display: none; }
/* no hard edges: the backdrop fades out at the top and bottom of the stage */
.gx-stage::after { display: none; }
.gx-stage::before { background:
    radial-gradient(circle at 62% 55%, color-mix(in srgb, var(--a) 22%, transparent), transparent 45%),
    radial-gradient(circle at 70% 65%, color-mix(in srgb, var(--c) 10%, transparent), transparent 40%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); }
.gx-floor { bottom: 0; }
.gx-details { margin-top: 0; padding-top: 8px; }

@media (max-width: 759px), (orientation: portrait) and (max-width: 1100px) {
  .gx-caps { top: auto; bottom: max(28px, env(safe-area-inset-bottom)); height: var(--caph, 36%); align-items: end; }
  .gx-cap { align-self: end; }
  .gx-view { bottom: calc(var(--caph, 36%) + 40px); }
  .gx-hint { margin-top: 10px; }
}
/* short desktop windows: keep caption text from crowding */
@media (min-width: 760px) and (max-height: 700px) {
  .gx-cap h2 { font-size: clamp(28px, 3.6vw, 44px); }
}

@media (orientation: portrait) and (min-width: 760px) and (max-width: 1100px) {
  .gx { height: 480vh; }
  .gx-caps { left: 7%; right: 7%; }
  .gx-cap h2 { font-size: clamp(36px, 6vw, 56px); }
  .gx-cap p { font-size: 17px; max-width: 560px; }
  .gx-cta .btn { flex: none; }
}
@media (max-width: 380px) {
  .gx-cta .btn { white-space: nowrap; padding-left: 12px; padding-right: 12px; font-size: 14px; }
}