/* EyeneticsOrbit - site intro (from eyenetics-logo_8.html, Cassie's splash).
   Every piece sits at its exact PSD offset inside a 422x475 stage that scales to the window. */
@font-face { font-family: "Silkscreen"; src: url(../fonts/Silkscreen.woff) format("woff"); font-weight: 400; font-display: swap; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #000 url(/assets/intro/stars_tile.gif) repeat 0 0;   /* tileable starfield */
  animation: introStars 180s linear infinite;                     /* slow drift, like the forum sky */
  color: #d9d4f2; font-family: "Silkscreen", "Courier New", monospace;
}
@keyframes introStars { to { background-position: -608px 234px; } }
/* soft vignette so the starfield falls off at the edges, CRT-ish */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
}

/* sized so the whole piece, Enter button included (it hangs 17px below the 475px art), fits the window */
.stage { position: relative; width: min(760px, 88vw, calc(86vh * 422 / 492)); aspect-ratio: 422 / 475; margin-bottom: calc(min(760px, 88vw, calc(86vh * 422 / 492)) * 17 / 422); }
.scaler { position: absolute; left: 0; top: 0; width: 422px; height: 475px; transform-origin: 0 0; }

.pc { position: absolute; opacity: 0; }
.pc img { width: 100%; height: 100%; display: block; }

/* glow: animated static with true alpha, shaped by a per-orb falloff ring */
.glowwrap { position: absolute; opacity: 0; pointer-events: none; }
.glowwrap .noise {
  position: absolute; inset: 0;
  background-image: url(/assets/intro/static.png);
  background-repeat: repeat; background-size: 11px 11px;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  opacity: .85;
  animation: crackle .28s steps(4, end) infinite;
}
@keyframes crackle {
  0%   { background-position: 0 0; }
  25%  { background-position: -5px 3px; }
  50%  { background-position: 4px -6px; }
  75%  { background-position: -3px -2px; }
  100% { background-position: 0 0; }
}

/* idle drift once the juggle lands - stepped, for the Flash cadence */
.settled .orb, .settled .glowwrap { animation: bob 7s steps(28, end) infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* Enter button: a real link, so it works with the keyboard too */
#enter { cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; }
#enter img { max-width: 100%; max-height: 100%; display: block; transition: transform .08s steps(2, end); }
#enter:active img { transform: scale(.94); }
#enter:focus-visible { outline: 1px dotted #fff; outline-offset: 2px; border-radius: 50%; }

/* ---------------------------------------------------------------- start gate
   Browsers only allow sound after a click, so the intro waits for one, Flash-loader style. */
.gate {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: transparent; border: 0; padding: 0; margin: 0; width: 100%;
  font: inherit; color: inherit; cursor: pointer;
}
.gate-bar { width: 180px; height: 9px; border: 1px solid #8f86c4; padding: 1px; background: rgba(10,8,24,.8); }
.gate-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #c9c2f2 0 6px, #7b6fd0 6px 8px); }
.gate-txt { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; text-shadow: 1px 1px 0 #000; }
.gate.is-ready .gate-txt { animation: blink 1.1s steps(1, end) infinite; }
.gate-sub { font-size: 8px; letter-spacing: .15em; color: #8f86c4; }
@keyframes blink { 50% { opacity: .25; } }
.gate:focus-visible { outline: none; }
.gate:focus-visible .gate-txt { outline: 1px dotted #fff; outline-offset: 4px; }
.gate.is-gone { display: none; }

/* sound on/off, bottom-right */
.mute {
  position: fixed; right: 14px; bottom: 12px; z-index: 55;
  font: 9px/1 "Silkscreen", monospace; letter-spacing: .12em; color: #a79fd8;
  background: rgba(10,8,24,.55); border: 1px solid #4b437a; padding: 5px 7px; cursor: pointer;
}
.mute:hover { color: #fff; border-color: #8f86c4; }
.mute[hidden] { display: none; }

/* leaving: fade to black before the home page loads */
.fadeout { position: fixed; inset: 0; z-index: 70; background: #000; opacity: 0; pointer-events: none; transition: opacity .45s linear; }
.fadeout.on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .settled .orb, .settled .glowwrap { animation: none; }
  .glowwrap .noise { animation: none; }
  .gate.is-ready .gate-txt { animation: none; }
}
.nojs { position: fixed; bottom: 20px; left: 0; right: 0; text-align: center; z-index: 80; } .nojs a { color: #c9c2f2; }