/*
  The entrance: a prayer and a black sun in the dark, then the lighting. It sits over the whole
  page while it plays and goes away when it is done. The page under it is complete from the first frame (nothing here is
  needed to read or use the site), so a script that fails costs the visitor a moment, not a page.
*/

@font-face {
  font-family: "Px437 IBM VGA 8x16";
  src: url("../ui/fonts/Px437_IBM_VGA_8x16.ttf") format("truetype");
  font-display: swap;
}

.gate { display: none; position: fixed; inset: 0; z-index: 200; overflow: hidden; background: #000; color: #aaa; }
html.has-gate .gate { display: block; }
html.has-gate body { overflow: hidden; }
.gate-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* The prompt: a prayer that breathes over a sun that is not yet lit, and the way in. It is plain
   text in the page, so a screen reader and a keyboard meet it as it is. The sun is drawn by the
   picture, below. */
.gate:not(.is-lit) { cursor: pointer; }
.gate-prompt {
  position: absolute;
  left: 0;
  right: 0;
  top: 28%;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 1.8rem;
  padding: 0 1.4rem;
  text-align: center;
  pointer-events: none;
  transition: opacity 700ms ease-out;
}
.gate-prayer {
  margin: 0;
  font: 400 16px/1.6 "Px437 IBM VGA 8x16", ui-monospace, Consolas, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #d5b174;
  text-shadow: 0 0 18px #ff741a55;
  animation: gate-breathe 5.2s ease-in-out infinite;
}
.gate-hint {
  margin: 0;
  font: 400 16px/1.5 "Px437 IBM VGA 8x16", ui-monospace, Consolas, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8f7e5c;
  animation: gate-breathe 5.2s ease-in-out -1.7s infinite;
}
@media (min-width: 560px) { .gate-prayer { font-size: 32px; } }
@media (min-width: 1400px) { .gate-prayer { font-size: 48px; } }
@keyframes gate-breathe { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.gate.is-lit .gate-prompt { opacity: 0; }
html.gate-seek:not(.gate-seek-prompt) .gate-prompt { display: none; }

/* Skip is first in the tab order and always on screen. */
.gate-keys { position: absolute; right: 1.1rem; bottom: 1.1rem; z-index: 4; display: flex; gap: .6rem; }
.gate-keys button {
  min-height: 2.4rem;
  padding: .4rem .95rem;
  font: 700 .72rem/1 var(--ui, Verdana, sans-serif);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #e6c37c;
  cursor: pointer;
  background: #0b0d0e;
  border: 1px solid #6e5528;
  border-radius: 0;
}
.gate-keys button:hover { color: #fff2c8; border-color: #e6c37c; }
.gate-keys button:focus-visible { outline: 3px solid #7fe3d6; outline-offset: 2px; }
.gate-keys .gate-sound[aria-pressed="true"] { color: #1c1204; background: #e6c37c; }

/* Letting go. When the entrance has played to its end the page is alive under it and it thins away over
   the page, slowly (gate.js sets how long, from the same table as everything else). It is shown after
   has-gate is gone because it is still there to be seen. A visitor who skips has it fade quickly. */
.gate.is-fading { display: block; opacity: 0; transition: opacity 3.6s cubic-bezier(.45, .05, .35, 1); pointer-events: none; }
.gate.is-leaving { display: block; opacity: 0; transition: opacity 520ms ease-out; pointer-events: none; }

/* The page waits behind the gate and arrives when it goes. */
html.has-gate .arrive { animation-play-state: paused; }

/* Arrival: the plates drop on their chains, one after another, and settle. */
@keyframes gate-drop {
  0% { transform: translateY(-140%); }
  62% { transform: translateY(5%); }
  80% { transform: translateY(-2%); }
  100% { transform: none; }
}
html:not([data-fx="calm"]) .landing .slabs li, html:not([data-fx="calm"]) .landing .acct-slab {
  animation: gate-drop 760ms cubic-bezier(.3, .7, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms + 120ms);
}
html.has-gate .landing .slabs li, html.has-gate .landing .acct-slab { animation-play-state: paused; }
.landing .slabs li:nth-child(1) { --i: 0; }
.landing .slabs li:nth-child(2) { --i: 1; }
.landing .slabs li:nth-child(3) { --i: 2; }
.landing .slabs li:nth-child(4) { --i: 3; }
.landing .slabs li:nth-child(5) { --i: 4; }
.landing .slabs li:nth-child(6) { --i: 5; }
.landing .slabs li:nth-child(7) { --i: 6; }
.landing .acct-slab { --i: 7; }

@keyframes gate-forge {
  0% { clip-path: inset(0 100% 0 0); filter: brightness(2.2) drop-shadow(0 0 22px #ffb35c); }
  70% { filter: brightness(1.5) drop-shadow(0 0 16px #ff8a2e); }
  100% { clip-path: inset(0 0 0 0); filter: none; }
}
@keyframes gate-kindle {
  0% { opacity: 0; filter: drop-shadow(0 0 0 #ff8a2e) brightness(2.4); }
  40% { opacity: 1; filter: drop-shadow(0 0 60px #ffb35c) brightness(2.2); }
  100% { opacity: 1; }
}
html:not([data-fx="calm"]) .landing .lit-seal { animation: gate-kindle 1500ms ease-out 60ms backwards, seal-breathe 5.4s ease-in-out 1.6s infinite; }
html:not([data-fx="calm"]) .landing .logo-art { animation: gate-forge 1100ms cubic-bezier(.4, 0, .2, 1) 560ms backwards, letters-burn 2.2s steps(1) 1.7s infinite; }
html.has-gate .landing .lit-seal, html.has-gate .landing .logo-art { animation-play-state: paused; }

/* The entrance has already shown the seal and the name, so the page does not bring them up again
   under it: they are there when the picture thins, and the rest of the page arrives as it goes. */
html.gate-seen:not([data-fx="calm"]) .landing .lit-seal { animation: seal-breathe 5.4s ease-in-out infinite; }
html.gate-seen:not([data-fx="calm"]) .landing .logo-art { animation: letters-burn 2.2s steps(1) infinite; }
html.gate-seen:not([data-fx="calm"]) .landing .logo.arrive { animation: none; opacity: 1; transform: none; }
html.gate-seen:not([data-fx="calm"]) .landing .slabs li, html.gate-seen:not([data-fx="calm"]) .landing .acct-slab { animation-delay: calc(var(--i, 0) * 120ms + 1000ms); }
html.gate-seen:not([data-fx="calm"]) .landing .arrive:not(.logo) { animation-duration: 900ms; animation-delay: calc(var(--i, 0) * 220ms + 1100ms); }

@media (prefers-reduced-motion: reduce) {
  .gate { display: none !important; }
}

.gate-seek .gate-keys { display: none; }

/* Scanlines over the whole of the entrance, as on the hero it ends on. */
.gate::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0 2px, #00000030 2px 4px); }