/* foreverjune */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  color: #a8a8a8;
  overflow: hidden;
  font-family: "Times New Roman", Times, serif;
}

button {
  touch-action: manipulation;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: default;          /* no hints. */
  -webkit-tap-highlight-color: transparent;
}
button:focus { outline: none; }
button:focus-visible { outline: 1px solid #555; outline-offset: 4px; }

/* ---------- screens ---------- */

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 16px;
  background: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility 0s .6s;
}
.screen.active {
  opacity: 1;
  visibility: visible;
  transition: opacity .6s ease;
}
#water.active { transition: opacity 2s ease-in; }

/* ---------- home ---------- */

.lamb { padding: 22px; }      /* bigger invisible tap target for thumbs */
.lamb img { display: block; width: 44px; height: auto; }

/* ---------- follow me ---------- */

.jesus {
  display: block;
  height: min(56vh, 520px);
  width: auto;
  max-width: 90vw;
  border: 1px solid #333;
}

.prompt {
  margin: 0;
  font-weight: bold;
  font-size: clamp(22px, 4vw, 34px);
  letter-spacing: .02em;
  color: #c8c8c8;
}

.opts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 20px;
}
.opts button { color: #8b0000; text-decoration: underline; padding: 6px 24px; }
.opts button:hover { color: #ff0000; }

/* ---------- wrath ---------- */

#wrath.active { animation: redflash .36s steps(1) infinite; }
.verse {
  margin: 0;
  max-width: 20em;
  font-size: clamp(22px, 4vw, 40px);
  line-height: 1.25;
  text-align: center;
}
@keyframes redflash {
  0%  { background: #b00000; }
  50% { background: #000; }
}

/* ---------- the bibles ---------- */

/* tiled starfield, like every 1998 ministry homepage */
#water { background: #000 url("/assets/stars.gif") repeat; }

.bibles {
  position: relative;
  z-index: 100000;          /* always above the popups, always clickable */
  display: flex;
  gap: clamp(6px, 4vw, 110px);
  align-items: flex-end;
}

.bible {
  position: relative;
  display: block;
}
.bible img {
  position: relative;
  display: block;
  width: clamp(86px, 26vw, 200px);
  height: auto;
  filter: brightness(.8) drop-shadow(0 8px 14px rgba(0, 0, 0, .6));
  transition: filter .8s ease;
}
.bible.burnt img { filter: brightness(.35) sepia(.6) drop-shadow(0 8px 14px rgba(0, 0, 0, .6)); }
.bible.burning img { filter: brightness(1.1) sepia(.3) drop-shadow(0 0 18px rgba(255, 110, 20, .9)); }
.bible.wet img { filter: brightness(.9) saturate(.6) hue-rotate(160deg) drop-shadow(0 0 14px rgba(120, 180, 255, .7)); }

/* ascii fire sits over the book and licks above it */
.fire {
  position: absolute;
  left: -10%;
  bottom: 10%;
  width: 120%;
  height: 220%;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ascii water pours out of the book and falls off the bottom */
.rain {
  position: absolute;
  left: 0;
  top: 78%;
  width: 100%;
  height: 300%;
  z-index: 2;
  pointer-events: none;
}

/* ---------- popups (windows 98, internet explorer) ---------- */

#popups { position: absolute; inset: 0; pointer-events: none; }  /* no z-index: lets a cover popup rise above the bibles */
.popup {
  position: absolute;
  visibility: hidden;
  pointer-events: auto;
  max-width: 90vw;
  padding: 3px;
  background: #c0c0c0;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.popup img {
  display: block;
  max-width: 100%;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  pointer-events: none;
}
/* the close box sits right on the gif */
.popup .x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 14px;
  font: bold 12px/12px Tahoma, Arial, sans-serif;
  color: #000;
  background: #c0c0c0;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
}
.popup .x:active { box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #fff; }
/* fingers need a bigger close box */
@media (pointer: coarse) {
  .popup .x { top: 5px; right: 5px; width: 26px; height: 24px; font-size: 18px; line-height: 22px; }
}

/* ---------- finale ---------- */

#finale.active { animation: bw .4s steps(1) infinite; }
#finale.active .final { animation: wb .4s steps(1) infinite; }
.final {
  margin: 0;
  max-width: 14em;
  font-weight: bold;
  font-size: clamp(28px, 6vw, 72px);
  line-height: 1.15;
  text-align: center;
}
/* presave buttons: solid gray, so they read on both the black and the white flash */
.presave[hidden] { display: none; }
.presave {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}
.w98 {
  display: block;
  min-width: 240px;
  padding: 10px 18px;
  font: bold 14px Tahoma, "MS Sans Serif", Arial, sans-serif;
  letter-spacing: .04em;
  text-align: center;
  text-decoration: none;
  color: #000;
  background: #c0c0c0;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf, 0 0 0 1px #000;
  -webkit-tap-highlight-color: transparent;
}
.w98:visited { color: #000; }
.w98:active { box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #fff, inset 2px 2px #808080, 0 0 0 1px #000; }
@keyframes bw { 0% { background: #000; } 50% { background: #fff; } }
@keyframes wb { 0% { color: #fff; } 50% { color: #000; } }

/* slower flashing for people who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  #wrath.active, #finale.active, #finale.active .final { animation-duration: 1.6s; }
}