/* Society Cinema layer — peckhamcrystals.net (4 Nov 2026)
   Adds: crystal-ball 3D scene, scroll reveals, card depth, opt-in spatial sound + deep narrator with captions.
   Everything here is additive: remove the two <link>/<script> tags and the page is exactly as before. */

/* ---------- top bar sound toggle ---------- */
.cin-tr{display:flex;align-items:center;gap:8px}
.cin-snd{font:inherit;font-size:13px;background:transparent;color:var(--gold2,#f3dc93);border:1px solid var(--line,#2f2716);border-radius:999px;padding:7px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cin-snd[aria-pressed="true"]{border-color:var(--gold,#c9a646);box-shadow:0 0 18px rgba(201,166,70,.25)}
.cin-snd:focus-visible,.cb button:focus-visible,.cb a:focus-visible{outline:2px solid var(--gold2,#f3dc93);outline-offset:3px}
.cin-snd .spk .w{display:none}.cin-snd[aria-pressed="true"] .spk .w{display:inline}.cin-snd[aria-pressed="true"] .spk .x{display:none}
.cin-snd .bars{display:none}.cin-snd[aria-pressed="true"] .bars{display:inline-flex}
.cin-snd .bars{gap:2px;align-items:flex-end;height:12px}
.cin-snd .bars i{width:2px;background:currentColor;height:4px;border-radius:1px;opacity:.7}
.cin-snd[aria-pressed="true"] .bars i{animation:cinEq 1s ease-in-out infinite}
.cin-snd .bars i:nth-child(2){animation-delay:.2s}.cin-snd .bars i:nth-child(3){animation-delay:.45s}
@keyframes cinEq{0%,100%{height:3px}50%{height:12px}}
@media (max-width:420px){.cin-snd .lbl{display:none}}

/* ---------- crystal ball scene ---------- */
.cb{position:relative;max-width:1080px;margin:34px auto 8px;padding:0 16px;display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center}
.cb-stage{position:relative;aspect-ratio:1/1;max-height:560px;width:100%;border-radius:18px;overflow:hidden;
  background:radial-gradient(60% 55% at 50% 58%,rgba(201,166,70,.10),transparent 70%),radial-gradient(120% 90% at 50% 100%,#120d07 0%,#070605 70%)}
.cb-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.cb-stage canvas:active{cursor:grabbing}
.cb-fallback{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1/1;transform:translate(-50%,-56%);border-radius:50%;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.55) 0 4%,rgba(255,255,255,.08) 12%,transparent 30%),
             radial-gradient(circle at 55% 62%,rgba(243,220,147,.45),rgba(201,166,70,.12) 38%,rgba(10,8,5,.6) 70%),#0b0906;
  box-shadow:0 0 80px rgba(201,166,70,.25),inset 0 -20px 50px rgba(0,0,0,.6)}
.cb-fallback::after{content:"";position:absolute;left:18%;right:18%;bottom:-22%;height:16%;border-radius:40% 40% 12% 12%;background:linear-gradient(#3a2c14,#120d07)}
.cb.has-gl .cb-fallback{display:none}
.cb-copy .cb-k{letter-spacing:4px;text-transform:uppercase;font-size:11px;color:var(--gold,#c9a646);margin:0 0 10px}
.cb-copy h2{font-size:clamp(30px,4.4vw,52px);line-height:1.04;margin:0 0 14px;font-weight:400;color:var(--gold2,#f3dc93)}
.cb-copy p{color:var(--muted,#a99f86);font-size:17px;line-height:1.55;margin:0 0 20px;max-width:46ch}
.cb-act{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cb-ask{font:inherit;font-size:16px;cursor:pointer;border:0;border-radius:999px;padding:13px 22px;color:#140f06;
  background:linear-gradient(180deg,#f3dc93,#c9a646);box-shadow:0 8px 30px rgba(201,166,70,.28),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .25s,box-shadow .25s}
.cb-ask:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(201,166,70,.38)}
.cb-ask[disabled]{opacity:.7;cursor:progress;transform:none}
.cb-skip{font-size:15px;color:var(--gold2,#f3dc93);border-bottom:1px solid rgba(201,166,70,.45);padding:2px 0}
.cb-hint{font-size:13px!important;margin:12px 0 0!important;color:var(--muted,#a99f86)}
.cb-hint button{font:inherit;background:none;border:0;color:var(--gold2,#f3dc93);text-decoration:underline;cursor:pointer;padding:0}
.cb-cap{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:min(92%,560px);margin:0;text-align:center;
  font-size:17px;line-height:1.4;color:#fff6dc;text-shadow:0 2px 12px #000,0 0 2px #000;min-height:1.4em;pointer-events:none;
  opacity:0;transition:opacity .35s}
.cb-cap.on{opacity:1}
@media (max-width:820px){
  .cb{grid-template-columns:1fr;gap:14px;margin-top:22px}
  .cb-stage{max-height:none;aspect-ratio:4/3.4}
  .cb-copy{text-align:left}
  .cb-copy h2{font-size:34px}
}

/* ---------- finder result caption (narrator) ---------- */
.cin-fcap{margin:0 0 6px;font-style:italic;color:var(--gold2,#f3dc93)!important;font-size:15px;color:#fff6dc;min-height:1.3em;opacity:0;transition:opacity .35s}
.cin-fcap.on{opacity:1}

/* ---------- scroll reveals (only when JS runs and motion is allowed) ---------- */
html.cin-motion .cin-r{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
html.cin-motion .cin-r.in{opacity:1;transform:none}
html.cin-motion .cin-r.in .cin-kids>*{animation:cinUp .8s cubic-bezier(.2,.7,.2,1) both}
html.cin-motion .cin-r.in .cin-kids>*:nth-child(2){animation-delay:.07s}
html.cin-motion .cin-r.in .cin-kids>*:nth-child(3){animation-delay:.14s}
html.cin-motion .cin-r.in .cin-kids>*:nth-child(4){animation-delay:.21s}
html.cin-motion .cin-r.in .cin-kids>*:nth-child(n+5){animation-delay:.28s}
@keyframes cinUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
html.cin-motion .cf3-res .cf3-prod{animation:cinRise .9s cubic-bezier(.2,.7,.2,1) both}
html.cin-motion .cf3-res .cf3-prod:nth-child(2){animation-delay:.12s}
html.cin-motion .cf3-res .cf3-prod:nth-child(3){animation-delay:.24s}
@keyframes cinRise{from{opacity:0;transform:perspective(900px) translateY(30px) rotateX(10deg)}to{opacity:1;transform:none}}

/* gold light passing over a heading once, when it arrives */
html.cin-motion .cin-sheen.in{background:linear-gradient(100deg,currentColor 40%,#fff3c4 50%,currentColor 60%) 100% 0/250% 100% repeat;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:cinSheen 2.2s .3s ease-out both}
@keyframes cinSheen{from{background-position:100% 0}to{background-position:0% 0}}

/* ---------- card depth (fine pointers only) ---------- */
.cin-tilt{transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.7,.2,1);will-change:transform;position:relative}
.cin-tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,236,170,.18),transparent 55%)}
.cin-tilt.hot::after{opacity:1}

/* ---------- reduced motion: nothing moves ---------- */
@media (prefers-reduced-motion:reduce){
  .cin-r,.cin-r.in{opacity:1!important;transform:none!important}
  .cin-tilt{transform:none!important}
  .cin-snd .bars i{animation:none!important}
}

/* phones: the top bar is already two lines of brand; the sound button floats bottom-right instead of growing the bar */
@media (max-width:520px){
  .cin-snd.cin-float{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:30;min-width:46px;min-height:46px;justify-content:center;padding:10px 12px;
    background:rgba(7,6,5,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-color:var(--gold,#c9a646);box-shadow:0 6px 24px rgba(0,0,0,.5)}
}