/* Hero: Prime breaks open. Scroll (or a click on him) splits the bust into pieces that drift apart;
   every piece carries a way into SINON, and the light that was inside the stone becomes "Enter the app".
   --p (0 whole → 1 broken) is set on <html> by pecah3d.js every frame. */
html { scrollbar-width: none; overflow-y: auto; }
html::-webkit-scrollbar { display: none; }
.shatter-page { overflow: visible; min-height: 0; }
.snap { height: 100svh; }

/* the hero copy steps back as Prime breaks */
.shatter-page .h-main { position: fixed; inset: 0; min-height: 0; }
.shatter-page .h-main, .shatter-page .h-foot {
  opacity: max(0, calc(1 - var(--p, 0) * 2.6)); transform: translateY(calc(var(--p, 0) * -24px)); }
.is-away .h-main a, .is-away .h-foot a { pointer-events: none; }

/* the dark edges lift so the pieces at the rim stay visible */
.shatter-page .vignette { opacity: calc(1 - var(--p, 0) * .55); transition: none; }

/* drag sideways to turn Prime; a vertical swipe still scrolls */
.shatter-page #prime { touch-action: pan-y; cursor: grab; }
.is-dragging, .is-dragging #prime { cursor: grabbing !important; user-select: none; }
.is-dragging .shard, .is-dragging .core { pointer-events: none; }

/* the lightning between the light and the pieces (drawn by pecah3d.js) */
#energy { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

/* labels pinned to the pieces */
.shards { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.shard { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  height: 38px; padding: 0 16px 0 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: #fff;
  background: rgba(10, 9, 15, .84); border: 1px solid rgba(242, 179, 90, .32);   /* no backdrop blur: it costs ~4× frame time on moving labels */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 10px 30px -10px rgba(0, 0, 0, .8), 0 0 24px -6px rgba(242, 179, 90, .35);
  opacity: 0; visibility: hidden; will-change: transform, opacity; transform-origin: 50% 0; transition: border-color .2s, box-shadow .2s, background .2s; }
.shard span { font: 600 10.5px/1 "Montserrat", sans-serif; letter-spacing: .12em; color: var(--amber); }
.shard.on, .shard:focus-visible { border-color: rgba(242, 179, 90, .9); background: rgba(20, 15, 26, .78);
  box-shadow: 0 0 0 1px rgba(242, 179, 90, .25), 0 10px 30px -10px rgba(0, 0, 0, .8), 0 0 34px -2px rgba(242, 179, 90, .65); outline: none; }
.is-open .shard { pointer-events: auto; }

/* the light that was inside the stone */
.core { position: fixed; left: 50%; top: 50%; z-index: 6; display: grid; justify-items: center; gap: 10px; text-align: center;
  transform: translate(-50%, -50%) scale(calc(.92 + var(--c, 0) * .08)); opacity: var(--c, 0); visibility: hidden; pointer-events: none; }
.core::before { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 46vh; transform: translate(-50%, -50%);
  background: linear-gradient(180deg, transparent, rgba(212, 200, 255, .55) 30%, rgba(255, 213, 154, .9) 50%, rgba(212, 200, 255, .55) 70%, transparent);
  filter: blur(.5px); box-shadow: 0 0 22px 4px rgba(187, 168, 255, .35); z-index: -1; opacity: .7; }
.core .micro { color: var(--amber); text-shadow: 0 2px 14px #000; }
.core b { font: 400 clamp(34px, 4.2vw, 56px)/1 "Marcellus", serif; color: #fff; letter-spacing: .01em;
  text-shadow: 0 0 30px rgba(187, 168, 255, .75), 0 0 80px rgba(242, 179, 90, .35), 0 3px 18px #000; }
.core i { width: 50px; height: 50px; border-radius: 999px; display: grid; place-items: center; color: #0a0a0f; background: #f4f3f8;
  box-shadow: 0 0 0 6px rgba(244, 243, 248, .08), 0 0 40px rgba(187, 168, 255, .8); transition: transform .25s var(--ease), box-shadow .25s; }
.core i .icon { width: 18px; height: 18px; }
.core:hover i, .core:focus-visible i { transform: translateX(4px); box-shadow: 0 0 0 8px rgba(244, 243, 248, .12), 0 0 60px rgba(242, 179, 90, .8); }
.is-open .core { pointer-events: auto; }

.hint { position: fixed; left: 50%; bottom: 82px; z-index: 5; transform: translateX(-50%); margin: 0; pointer-events: none;
  font: 600 10.5px/1 "Montserrat", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.hint span { display: block; transition: opacity .4s; }
.hint .h-in { opacity: max(0, calc(1 - var(--p, 0) * 6)); animation: hintbob 2.4s ease-in-out infinite; }
.hint .h-out { position: absolute; left: 50%; top: 0; transform: translateX(-50%); opacity: max(0, calc(var(--p, 0) * 6 - 5)); }
.is-open .hint { bottom: 26px; }
@keyframes hintbob { 50% { transform: translateY(4px); } }

/* no WebGL: the pieces become a plain list under the copy */
.no-gl .shards { position: fixed; inset: auto var(--gutter) 70px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; pointer-events: auto; }
.no-gl .shard { position: static; opacity: 1; visibility: visible; transform: none !important; }
.no-gl .hint, .no-gl .core { display: none; }

@media (max-width: 900px) {
  .shard { height: 32px; padding: 0 12px 0 10px; font-size: 12px; gap: 7px; }
  .shard span { font-size: 9.5px; }
  .core { gap: 8px; }
  .core .micro { display: none; }
  .shatter-page .vignette { opacity: calc(1 - var(--p, 0) * .8); }
  .core b { font-size: 26px; }
  /* under the orbit, not inside it; its line of light reaches up into the ring */
  .core { top: auto; bottom: calc(54px + env(safe-area-inset-bottom)); transform: translate(-50%, 0) scale(calc(.92 + var(--c, 0) * .08)); }
  .core::before { top: auto; bottom: 70%; height: 30vh; transform: translateX(-50%);
    background: linear-gradient(0deg, rgba(255, 213, 154, .9), rgba(212, 200, 255, .5) 45%, transparent); }
  .hint { font-size: 9px; letter-spacing: .1em; }
  .core i { width: 42px; height: 42px; }
  .hint, .is-open .hint { bottom: calc(18px + env(safe-area-inset-bottom)); }
  .hint .h-in { display: none; }                      /* phones scroll by habit; the copy needs the room */
}
@media (prefers-reduced-motion: reduce) { .hint .h-in { animation: none; } }