/* Guided and endless sessions (demo.html, trance.html): the stage, the floating thoughts,
   the physical button and its housing, the ghost cursor and the sound toggle. */

@property --cap { syntax: "<color>"; inherits: true; initial-value: #f4f4f2; }
@property --cap-ink { syntax: "<color>"; inherits: true; initial-value: #202326; }

/* ---------- stage ---------- */
.stage { position: relative; width: 100%; max-width: 640px; aspect-ratio: 1; justify-self: center; }
#spiral { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
#fx { position: absolute; inset: -6%; width: 112%; height: 112%; pointer-events: none; }

/* ---------- housing: a moulded ring with a recessed well ---------- */
.bezel { position: absolute; left: 50%; top: 50%; z-index: 4; width: 34.5%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  --rim: color-mix(in oklab, var(--surface) 86%, var(--ink));
  background: linear-gradient(172deg, color-mix(in oklab, var(--rim), #fff 38%) 8%, var(--rim) 48%, color-mix(in oklab, var(--rim), #000 24%) 94%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .55), inset 0 -2px 3px rgba(0, 0, 0, .18), 0 0 0 1px color-mix(in oklab, var(--ink) 12%, transparent), 0 20px 42px -16px rgba(0, 0, 0, .55); }
/* the well the cap sinks into */
.bezel::after { content: ""; position: absolute; inset: 7.5%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--rim), #000 36%) 70%, color-mix(in oklab, var(--rim), #000 22%));
  box-shadow: inset 0 5px 9px rgba(0, 0, 0, .45), inset 0 -1px 1px rgba(255, 255, 255, .22), 0 1px 0 rgba(255, 255, 255, .35); }
/* a slow halo that breathes with the page */
.bezel::before { content: ""; position: absolute; inset: -14%; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--surface) 60%, transparent); animation: halo 8s ease-in-out infinite; }
@keyframes halo { 0%, 100% { transform: scale(.9); opacity: .3; } 50% { transform: scale(1.07); opacity: .9; } }

/* ---------- the cap: domed, glossy, with a skirt that squashes when pressed ---------- */
.press { position: absolute; left: 50%; top: 50%; z-index: 5; width: 27%; aspect-ratio: 1; border: 0; border-radius: 50%; cursor: pointer; padding: 8px;
  --cap: color-mix(in oklab, var(--surface), var(--ink) 7%); --cap-ink: var(--ink);
  --depth: clamp(5px, .72vw, 9px);
  --skirt: color-mix(in oklab, var(--cap) 66%, #000);
  --shade: color-mix(in oklab, var(--cap) 72%, #000);
  display: grid; place-content: center; gap: 3px; text-align: center; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  color: var(--cap-ink); font: 700 clamp(14px, 1.7vw, 19px)/1.1 var(--body); letter-spacing: .01em;
  background:
    radial-gradient(70% 55% at 50% 24%, color-mix(in oklab, var(--cap), #fff 45%), transparent 70%),
    radial-gradient(120% 100% at 50% 30%, var(--cap) 45%, color-mix(in oklab, var(--cap), #000 17%) 100%);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, .5),
    inset 0 -7px 12px -5px var(--shade),
    0 var(--depth) 0 0 var(--skirt),
    0 calc(var(--depth) + 5px) 14px -3px rgba(0, 0, 0, .5);
  transform: translate(-50%, calc(-50% - var(--depth) * .5));
  transition: transform .44s cubic-bezier(.3, 1.75, .45, 1), box-shadow .44s cubic-bezier(.3, 1.75, .45, 1), --cap .6s, --cap-ink .6s; }
/* the gloss on top of the dome */
.press::after { content: ""; position: absolute; left: 19%; right: 19%; top: 7%; height: 34%; border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .08) 80%, rgba(255, 255, 255, 0)); opacity: .9; }
.press small { display: block; font: 400 9.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .66; }
.press:hover { transform: translate(-50%, calc(-50% - var(--depth) * .5 - 1px)); }
.press:active, .press.down {
  transform: translate(-50%, calc(-50% + var(--depth) * .5 - 1.5px)) scale(1.03, .965);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, .4),
    inset 0 -4px 10px -5px var(--shade),
    0 1.5px 0 0 var(--skirt),
    0 3px 5px -1px rgba(0, 0, 0, .45);
  transition-duration: .07s, .07s, .6s, .6s; transition-timing-function: cubic-bezier(.2, .7, .3, 1); }
.press.auto, .press.done { --cap: var(--aligned); --cap-ink: var(--on-aligned); }
.press.done { cursor: default; }
.press:focus-visible { outline: 3px solid var(--brand); outline-offset: calc(var(--depth) + 5px); border-radius: 50%; }

/* ---------- thoughts ---------- */
.thought { position: absolute; left: 0; top: 0; z-index: 3; max-width: 40%; width: max-content; padding: 9px 13px; border-radius: 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 14px 30px -18px rgba(0,0,0,.45); font-size: clamp(11.5px, 1.2vw, 14px); line-height: 1.3; will-change: transform; transform-origin: center; }
.thought .old { display: block; }
.thought .new { display: block; color: var(--aligned); font-weight: 600; max-height: 0; overflow: hidden; transition: max-height .45s; }
.thought.revising .old { text-decoration: line-through; text-decoration-color: var(--friction); opacity: .5; }
.thought.revising .new { max-height: 4em; }

/* ---------- the ghost cursor ---------- */
.phantom { position: absolute; left: 0; top: 0; width: 26px; height: 26px; z-index: 6; pointer-events: none; transition: transform .9s cubic-bezier(.45,0,.2,1); }
.phantom svg { width: 100%; height: 100%; transition: transform .15s; transform-origin: 20% 10%; filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
.phantom.click svg { transform: scale(.78); }

/* ---------- sound toggle ---------- */
.sound { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 8px 13px 8px 10px; border: 0; border-radius: 999px; cursor: pointer;
  font: 400 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; font-variation-settings: "wdth" 90;
  color: var(--muted); background: color-mix(in oklab, var(--bg) 80%, transparent); box-shadow: inset 0 0 0 1px var(--line); transition: color .2s, box-shadow .2s; }
.sound:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.sound:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 999px; }
.sound svg { width: 16px; height: 16px; flex: none; overflow: visible; }
.sound .w, .sound .x { transition: opacity .3s; }
.sound .w { opacity: 0; }
/* styled from data-state: a waiting "ready" on the endless session is announced as not pressed */
.sound:is([data-state="on"], [data-state="ready"]) { color: var(--ink); }
.sound:is([data-state="on"], [data-state="ready"]) .w { opacity: 1; }
.sound:is([data-state="on"], [data-state="ready"]) .x { opacity: 0; }
.sound[data-state="ready"] .w { opacity: .4; }
.sound[data-state="on"] .w2 { animation: swell 8s ease-in-out infinite; }
@keyframes swell { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.sound .hint { color: var(--muted); }
.sound .hint::before { content: "·"; margin-right: 8px; }

@media (max-width: 520px) { .thought { max-width: 39%; padding: 6px 8px; border-radius: 10px; font-size: 10.5px; } }