/* PONZI PAD opening lore film (public/lore.js) */
.pf { position: relative; height: 760vh; margin: -24px calc(50% - 50vw) 40px; }
.pf-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: radial-gradient(ellipse at 50% 42%, #1f1907 0%, #0b0b0d 62%); }
.pf-stage { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 40px; }
.pf-svg { width: min(74vh, 92vw); height: auto; overflow: visible; }
.pf-svg * { transform-box: fill-box; }
.pf-capg, .pf-tier, .pf-eye { transform-origin: 50% 50%; will-change: transform, opacity; }
.pf-capg { transition: filter .3s; }
.pf-tier { opacity: 0; }
.pf-rays { transform-box: view-box; transform-origin: 0 0; }
.pf-lbl { font: 700 7px "Space Grotesk", system-ui, sans-serif; fill: #1a1405; letter-spacing: .2px; }
.pf-lbl.ghost { fill: #a78bfa; }
.pf-lbl.sm { font-size: 6px; font-weight: 600; }
.pf-orb { filter: drop-shadow(0 0 6px #ffd860); }
.pf-dust i { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: #ffd860; opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .pf-dust i { animation: pfdust 9s linear infinite; } }
@keyframes pfdust { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .7; } 85% { opacity: .4; } 100% { opacity: 0; transform: translateY(-100vh); } }

.pf-cap { position: absolute; left: max(24px, calc(50vw - 520px)); bottom: 9vh; max-width: 380px; background: rgba(20,20,24,.82); backdrop-filter: blur(6px); border: 1px solid #2a2a33; border-radius: 14px; padding: 16px 18px; }
.pf-cap.in { animation: pfcap .45s ease-out; }
.pf-cap.warn { border-color: #5a2323; }
.pf-cap.warn .pf-n { color: #ff5d5d; }
@keyframes pfcap { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pf-n { font-family: "JetBrains Mono", monospace; font-size: 12px; color: #f5c542; letter-spacing: 2px; }
.pf-t { font-size: 22px; font-weight: 700; line-height: 1.2; margin: 4px 0 6px; color: #f2efe6; }
.pf-d { color: #9a978f; font-size: 15px; }
.pf-cta { margin-top: 10px; } .pf-cta:empty { display: none; }
.pf-note { font-size: 12px; color: #6f6c66; margin-left: 8px; }

.pf-hud { position: absolute; right: max(24px, calc(50vw - 520px)); top: 90px; display: grid; gap: 6px; background: rgba(20,20,24,.75); border: 1px solid #2a2a33; border-radius: 12px; padding: 10px 14px; font-size: 12px; min-width: 190px; }
.pf-hud div { display: flex; justify-content: space-between; gap: 14px; }
.pf-hud span { color: #9a978f; } .pf-hud b { font-family: "JetBrains Mono", monospace; color: #f5c542; font-weight: 500; }
.pf-dots { position: absolute; right: max(24px, calc(50vw - 520px)); top: 50%; transform: translateY(-50%); display: grid; gap: 10px; }
.pf-dots i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #5a4a17; transition: background .3s; }
.pf-dots i.on { background: #f5c542; }
.pf-skip { position: absolute; right: max(24px, calc(50vw - 520px)); bottom: 9vh; background: none; border: 1px solid #2a2a33; color: #9a978f; border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.pf-skip:hover { color: #f2efe6; border-color: #5a4a17; }
.pf-hint { position: absolute; left: 50%; bottom: 3vh; transform: translateX(-50%); font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #6f6c66; transition: opacity .4s; }
@media (prefers-reduced-motion: no-preference) { .pf-hint { animation: pfhint 1.6s ease-in-out infinite; } }
@keyframes pfhint { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }

@media (max-width: 760px) {
  .pf-svg { width: 96vw; }
  .pf-stage { padding-top: 0; align-items: start; padding-top: 120px; }
  .pf-cap { left: 12px; right: 12px; bottom: 12px; max-width: none; padding: 12px 14px; }
  .pf-t { font-size: 18px; } .pf-d { font-size: 14px; }
  .pf-hud { top: 70px; right: 12px; left: 12px; grid-template-columns: repeat(3, 1fr); min-width: 0; }
  .pf-hud div { flex-direction: column; gap: 0; }
  .pf-dots { display: none; }
  .pf-skip { top: 70px; bottom: auto; display: none; }
}

/* desktop: pyramid on the right, the story on the left, nothing overlaps */
@media (min-width: 761px) {
  .pf-stage { place-items: center end; padding: 70px max(40px, calc(50vw - 600px)) 0 0; }
  .pf-svg { width: min(68vh, 50vw); }
  .pf-cap { top: 38vh; bottom: auto; left: max(32px, calc(50vw - 600px)); max-width: min(400px, 40vw); }
  .pf-dots { right: auto; left: max(12px, calc(50vw - 630px)); }
  .pf-hud { top: 84px; }
}
@media (max-width: 760px) { .pf-hint { display: none; } }

/* ---------- the hook: first screen ---------- */
.hook { position: relative; min-height: calc(100vh - 60px); margin: -24px calc(50% - 50vw) 0; padding: 40px max(20px, calc(50vw - 560px)) 70px;
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 24px; overflow: hidden;
  background: radial-gradient(ellipse at 72% 40%, #2a2108 0%, #0b0b0d 58%); }
.hk-text { position: relative; z-index: 2; }
.hk-big { font-size: clamp(40px, 6.4vw, 78px); line-height: 1.02; margin: 12px 0 16px; letter-spacing: -1px; }
.hk-big span { background: linear-gradient(90deg, #fff0b8, #f5c542 45%, #d9a62a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hk-sub { color: #c9c6bd; font-size: clamp(16px, 1.6vw, 20px); max-width: 520px; margin: 0 0 22px; }
.hk-eq { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: "JetBrains Mono", monospace; font-size: 15px; }
.hk-buy { padding: 8px 12px; border-radius: 10px; background: #f5c542; color: #141006; font-weight: 700; }
.hk-eqs { color: #6f6c66; font-size: 20px; }
.hk-chip { padding: 8px 11px; border-radius: 10px; border: 1px solid #1f5a37; background: #0f1f16; color: #3ddc84; }
.hk-chip b { display: inline-block; }
.hk-count { margin-top: 12px; color: #9a978f; font-size: 15px; } .hk-count b { color: #f2efe6; }
.hk-cta { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.hk-go { padding: 13px 22px; font-size: 16px; }
.hk-fine { margin-top: 14px; color: #6f6c66; font-size: 12px; }
.hk-art { position: relative; z-index: 1; max-width: 460px; width: 100%; justify-self: center; padding-top: 40px; }
.hk-scroll { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #6f6c66; }
.hk-scroll i { font-style: normal; display: inline-block; margin-left: 6px; color: #f5c542; }
@media (prefers-reduced-motion: no-preference) {
  .hk-chip { animation: hkpump 2.6s ease-in-out infinite; animation-delay: var(--d); }
  .hk-chip b { animation: hkarrow 2.6s ease-in-out infinite; animation-delay: var(--d); }
  .hk-buy { animation: hkbuy 2.6s ease-in-out infinite; }
  .hk-scroll i { animation: hkdown 1.4s ease-in-out infinite; }
  .hk-big span { background-size: 200% 100%; animation: hkshine 5s linear infinite; background-image: linear-gradient(90deg, #d9a62a, #fff0b8 25%, #f5c542 50%, #d9a62a 75%, #fff0b8); }
}
@keyframes hkbuy { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245,197,66,0); } 8% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(245,197,66,.18); } 20% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245,197,66,0); } }
@keyframes hkpump { 0%, 12%, 100% { transform: translateY(0); background: #0f1f16; border-color: #1f5a37; } 22% { transform: translateY(-7px); background: #134d2c; border-color: #3ddc84; box-shadow: 0 6px 18px rgba(61,220,132,.25); } 40% { transform: translateY(0); box-shadow: none; } }
@keyframes hkarrow { 0%, 12%, 100% { transform: translateY(0); } 22% { transform: translateY(-3px); } }
@keyframes hkdown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes hkshine { to { background-position: -200% 0; } }
@media (max-width: 860px) {
  .hook { grid-template-columns: 1fr; padding-top: 10px; text-align: left; gap: 0; }
  .hk-art { order: -1; max-width: 300px; padding-top: 30px; }
  .hk-scroll { display: none; }
}

/* ---------- lore film: alive even when you stop scrolling ---------- */
.pf-bob, .pf-blink, .pf-spin { transform-box: fill-box; transform-origin: 50% 50%; }
.pf-spin { transform-box: view-box; transform-origin: 0 0; }
.pf-shine { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .pf-bob { animation: pfbob 2.4s ease-in-out infinite; }
  .pf-blink { animation: pfblink 4.2s infinite; }
  .pf-spin { animation: pfspin 50s linear infinite; }
  .pf-shine { animation: pfshine 3.6s ease-in-out infinite; }
  .pf-capglow2 { animation: pfglow 2.4s ease-in-out infinite; }
  .pf-link { animation: pfmarch .9s linear infinite; }
}
@keyframes pfmarch { to { stroke-dashoffset: -11; } }
@keyframes pfbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes pfblink { 0%, 45%, 49%, 100% { transform: scaleY(1); } 47% { transform: scaleY(.08); } }
@keyframes pfspin { to { transform: rotate(360deg); } }
@keyframes pfshine { 0%, 55% { opacity: 0; transform: translateX(-60px) skewX(-20deg); } 62% { opacity: .55; } 90%, 100% { opacity: 0; transform: translateX(300px) skewX(-20deg); } }
@keyframes pfglow { 0%, 100% { opacity: .25; } 50% { opacity: .6; } }

/* full-bleed sections use 100vw, which includes the scrollbar: clip the extra without breaking position: sticky */
html, body { overflow-x: clip; }