/* Sine / Square: the switch between CSMAKAR (business mode, /csmakar) and Cyrusrex (/), on both pages; sine-square.js
   draws it. The switch's glyph, the stage the beam is drawn on, the full stop held over it, the page folding into its full
   stop, and the night a page arriving by the switch opens under. */

/* the switch's glyph: CSMAKAR's circle (a sine) and Cyrusrex's square (a square wave), the side you are on filled; its
   ring is each page's own button (CSMAKAR's .ib, Cyrusrex's theme button) */
.ss-g { display: flex; align-items: center; gap: 3px }
.ss-g i { display: block; width: 7px; height: 7px; border: 1.25px solid currentColor }
.ss-g .c { border-radius: 50% }
.ss-g .on { background: currentColor }
.ss-sw:hover .ss-g .c { animation: ss-sine-bob 1.1s cubic-bezier(.37, 0, .63, 1) infinite alternate }
.ss-sw:hover .ss-g .s { animation: ss-square-bob .55s steps(1, end) infinite }
@keyframes ss-sine-bob { from { transform: translateY(1.5px) } to { transform: translateY(-1.5px) } }
@keyframes ss-square-bob { 0% { transform: translateY(1.5px) } 50% { transform: translateY(-1.5px) } }
.ss-sw[hidden] { display: none !important }

/* the stage: night, the beam, the scope's graticule and its readout; a little larger than the screen, so the landing's
   shake never shows an edge */
.ss-stage { position: fixed; inset: -16px; z-index: 2147483000; background: #050506; overflow: hidden; contain: strict }
.ss-stage[hidden] { display: none }
.ss-stage canvas { position: absolute; left: 16px; top: 16px; width: calc(100% - 32px); height: calc(100% - 32px) }
.ss-grat { position: absolute; left: 50%; top: 50%; width: var(--gw, 600px); height: var(--gh, 600px); transform: translate(-50%, -50%); opacity: var(--go, 0); background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: calc(100% / 8) calc(100% / 8); background-position: -.5px -.5px; border: 1px solid rgba(255, 255, 255, .1) }
.ss-grat::before, .ss-grat::after { content: ""; position: absolute; background: rgba(255, 255, 255, .13) }
.ss-grat::before { left: 0; right: 0; top: 50%; height: 1px }
.ss-grat::after { top: 0; bottom: 0; left: 50%; width: 1px }
.ss-readout { position: absolute; left: 50%; bottom: calc(42px + env(safe-area-inset-bottom, 0px)); width: var(--gw, 600px); max-width: calc(100% - 64px); transform: translateX(-50%); display: flex; justify-content: space-between; gap: 16px; color: rgba(255, 255, 255, .62); opacity: var(--go, 0); font: 400 12px/1.4 "JetBrains Mono", ui-monospace, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap }
.ss-readout b { font-weight: 400; color: var(--rc, #A9B2FF) }
/* CSMAKAR opening from its full stop: a lens */
.ss-stage.is-hole { -webkit-mask-image: radial-gradient(circle at calc(var(--hx, 50%) + 16px) calc(var(--hy, 50%) + 16px), transparent calc(var(--hole, 0px) - 1px), #000 var(--hole, 0px)); mask-image: radial-gradient(circle at calc(var(--hx, 50%) + 16px) calc(var(--hy, 50%) + 16px), transparent calc(var(--hole, 0px) - 1px), #000 var(--hole, 0px)) }
/* the full stop a page folds into, held while it folds, until the beam takes it; and the one the beam lands on */
.ss-mark { position: fixed; z-index: 2147483001; left: 0; top: 0; pointer-events: none }
.ss-mark[hidden] { display: none }
.ss-mark.is-dot { border-radius: 50% }
/* the vector marks over the stage, in the side's colour (drawn by sine-square.js): the full stop thrown, its shockwaves,
   the opening's edge */
.ss-fx { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 2147483001; pointer-events: none; overflow: visible }
.ss-fx[hidden] { display: none }
/* the other side shown inside this page, in full screen: under this page's stage until it has drawn its own, then over
   it; dark until its page draws, never white */
.ss-frame { position: fixed; left: 0; top: 0; width: 100%; height: 100%; border: 0; margin: 0; z-index: 2147482990; color-scheme: dark; background: transparent }
.ss-frame.is-up { z-index: 2147483500 }
.ss-fs[hidden] { display: none !important }
html.ss-busy, html.ss-busy body { cursor: progress }
/* the first screen's height as a page lays it out, and the screen's height in vh (sine-square.js reads them) */
.ss-svh, .ss-vh { position: fixed; left: 0; top: 0; width: 0; height: 100vh; visibility: hidden; pointer-events: none }
.ss-svh { height: 100svh }

/* the page folding into its full stop: a picture of it, in a view transition, powering down into the point */
@keyframes ss-crt-off { 0% { transform: scale(1, 1); filter: brightness(1) } 9% { transform: scale(1.012, 1.012); filter: brightness(1.12) } 62% { transform: scale(1, .004); filter: brightness(2.6) } 100% { transform: scale(0, .004); filter: brightness(7) } }
html.ss-off::view-transition-old(root) { animation: ss-crt-off 420ms cubic-bezier(.62, 0, .86, .45) both; z-index: 2; transform-origin: var(--ss-ox, 50%) var(--ss-oy, 50%) }
html.ss-off::view-transition-group(ss-dot), html.ss-off::view-transition-old(ss-dot), html.ss-off::view-transition-new(ss-dot) { animation: none }
html.ss-off::view-transition-new(root) { animation: none }

/* a page arriving by the switch: night, and the full stop where the beam landed it, from the first frame (the script at
   the top of the head set the place from the address); sine-square.js takes over from them, and opens the page. Should
   the script never run, they go after a few seconds */
html.ss-in, html.ss-in body { overflow: hidden }
html.ss-in::before { content: ""; position: fixed; inset: 0; z-index: 2147483600; background: #050506; animation: ss-cover-go 0s 7s forwards }
html.ss-in::after { content: ""; position: fixed; z-index: 2147483601; left: calc(var(--ss-x, -99px) - var(--ss-s, 0px) / 2); top: calc(var(--ss-y, -99px) - var(--ss-s, 0px) / 2); width: var(--ss-s, 0px); height: var(--ss-s, 0px); animation: ss-cover-go 0s 7s forwards }
html[data-side="csmakar"].ss-in::after { border-radius: 50%; background: var(--sine, #2A3CFF) }
html[data-side="cyrusrex"].ss-in::after { background: var(--accent, #fd501b) }
@keyframes ss-cover-go { to { visibility: hidden } }

/* with reduced motion, the switch is the browser's crossfade between the two pages, without sound */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: auto }
  .ss-sw:hover .ss-g i { animation: none }
}