/* ==========================================================================
   The Sword of the Spirit — opening screen and light from above (front page)
   ========================================================================== */
:root { --zwg-light: 255, 246, 228; --zwg-ease: cubic-bezier(.22, .61, .36, 1); }

.zwg-intro, .zwg-flash { display: none; }
.zwg-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* While the opening screen is shown: lock scrolling, hide the header */
html.zwg-intro-on, html.zwg-intro-on body { overflow: hidden; }
html.zwg-intro-on .site-header { transform: translateY(-100%); opacity: 0; }
.site-header { transition: transform 1.2s var(--zwg-ease), opacity 1.2s var(--zwg-ease); }

/* ---------- 1. Black screen with the typed verse ---------- */
html.zwg-intro-on .zwg-intro {
  position: fixed;
  inset: 0;
  z-index: 100001;                       /* above the WordPress admin bar */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px 120px;
  background: #000;
}
.zwg-intro[hidden] { display: none !important; }

.zwg-verse {
  margin: 0;
  max-width: 19em;
  text-align: center;
  font-family: var(--serif, Georgia, 'Times New Roman', serif);
  font-size: clamp(1.5rem, .95rem + 2.3vw, 2.75rem);
  line-height: 1.42;
}
.zwg-verse-text {
  margin: 0;
  font-style: italic;
  color: #a9a7a2;
  text-wrap: balance;
}
.zwg-verse-ref {
  margin-top: 1.6em;
  min-height: 1.7em;
  font-family: var(--sans, 'Trebuchet MS', Arial, sans-serif);
  font-size: clamp(.68rem, .64rem + .2vw, .8rem);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #8a8781;
}
.zwg-ch { visibility: hidden; }
.zwg-ch.v { visibility: visible; }
.zwg-sc { font-variant: small-caps; }     /* "LORD" in small capitals, as in printed Bibles */

.zwg-caret { position: relative; }
.zwg-caret::after {
  content: "";
  position: absolute;
  left: .05em; top: .14em; bottom: .06em;
  width: max(1.5px, .055em);
  background: currentColor;
  border-radius: 1px;
  transition: opacity .6s;
}
.zwg-caret.blink::after { animation: zwg-blink 1.05s steps(1) infinite; }
.zwg-caret.gone::after { animation: none; opacity: 0; }
@keyframes zwg-blink { 50% { opacity: 0; } }

/* Down arrow: black with a light grey shadow, pulsing 1x → 1.2x → 1x */
.zwg-cue {
  position: absolute;
  left: 50%;
  bottom: max(6vh, 28px);
  transform: translate(-50%, 14px);
  padding: 14px 20px;
  background: none;
  border: 0;
  color: #000;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s var(--zwg-ease), transform 1s var(--zwg-ease), visibility 0s 1s;
  -webkit-tap-highlight-color: transparent;
}
.zwg-intro.ready .zwg-cue { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.zwg-cue-pulse {
  display: block;
  filter: drop-shadow(0 0 1.5px rgba(210, 210, 210, .95)) drop-shadow(0 0 6px rgba(190, 190, 190, .5));
  animation: zwg-pulse 1.8s ease-in-out infinite;
  animation-play-state: paused;
}
.zwg-intro.ready .zwg-cue-pulse { animation-play-state: running; }
@keyframes zwg-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
.zwg-cue:focus-visible { outline: 1px solid rgba(255, 255, 255, .45); outline-offset: 2px; border-radius: 999px; }

.zwg-intro.leaving .zwg-verse {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(-3vh) scale(1.03);
  transition: opacity 1.1s ease-in, filter 1.1s ease-in, transform 1.4s ease-in;
}
.zwg-intro.leaving .zwg-cue { opacity: 0; transition: opacity .35s; }

/* ---------- 2. Into the light ---------- */
@property --zwg-m { syntax: "<percentage>"; inherits: false; initial-value: 150%; }

html.zwg-intro-on .zwg-flash,
.zwg-flash.on {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 100002;
  pointer-events: none;
  overflow: hidden;
  visibility: hidden;
}
.zwg-flash::before { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; }
.zwg-bloom {
  position: absolute;
  left: 50%; top: 44%;
  width: 190vmax; height: 190vmax;
  margin: -95vmax 0 0 -95vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff 0%, #fff 34%, rgba(255, 252, 244, .85) 56%, rgba(255, 248, 236, 0) 100%);
  transform: scale(.02);
  opacity: 0;
}
html.zwg-intro-on .zwg-flash.on, .zwg-flash.on { visibility: visible; }
.zwg-flash.on .zwg-bloom { animation: zwg-bloom 1.5s cubic-bezier(.55, 0, .35, 1) forwards; }
.zwg-flash.on::before { animation: zwg-whiteout .85s .65s ease-in forwards; }
@keyframes zwg-bloom { 0% { transform: scale(.02); opacity: 0; } 12% { opacity: 1; } 100% { transform: scale(1.2); opacity: 1; } }
@keyframes zwg-whiteout { to { opacity: 1; } }

.zwg-flash.recede {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--zwg-m) - 45%), transparent var(--zwg-m));
          mask-image: linear-gradient(to bottom, #000 calc(var(--zwg-m) - 45%), transparent var(--zwg-m));
  animation: zwg-recede 2s cubic-bezier(.45, 0, .2, 1) forwards;
}
@keyframes zwg-recede { 0% { --zwg-m: 150%; opacity: 1; } 65% { opacity: 1; } 100% { --zwg-m: -5%; opacity: 0; } }

/* ---------- 3. Light from above, shining down on the page ---------- */
.zwg-heaven, .zwg-motes {
  position: fixed;
  left: 0; right: 0; top: 0;
  height: 100vh;
  z-index: 30;                            /* above the page, below the admin bar */
  pointer-events: none;
  mix-blend-mode: screen;                 /* adds light to whatever is underneath */
  opacity: 0;
  transition: opacity 1.8s ease;
}
.zwg-heaven { overflow: hidden; }
.zwg-motes { width: 100%; transition-delay: 1s; transition-duration: 2.5s; }
html.zwg-lit .zwg-heaven, html.zwg-lit .zwg-motes { opacity: 1; }
.zwg-heaven-inner { position: absolute; inset: 0; transition: opacity .3s linear; }

.zwg-h-glow {
  position: absolute;
  left: 50%; top: -42vh;
  width: min(150vw, 1900px); height: 86vh;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(var(--zwg-light), .6), rgba(var(--zwg-light), .2) 50%, rgba(var(--zwg-light), 0) 100%);
  animation: zwg-breathe 10s ease-in-out infinite;
}
@keyframes zwg-breathe { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }

.zwg-h-cone { position: absolute; inset: 0; filter: blur(38px); }
.zwg-h-cone > div {
  position: absolute;
  left: 50%; top: -4vh;
  width: min(130vw, 1700px); height: 112vh;
  transform: translateX(-50%);
  clip-path: polygon(41% 0, 59% 0, 93% 100%, 7% 100%);
  background: linear-gradient(to bottom, rgba(var(--zwg-light), .28) 0%, rgba(var(--zwg-light), .11) 38%, rgba(var(--zwg-light), .04) 72%, rgba(var(--zwg-light), 0) 95%);
}
.zwg-h-rays {
  position: absolute;
  inset: 0;
  filter: blur(1.5px);
  -webkit-mask-image: radial-gradient(ellipse 48% 95% at 50% 0%, #000 0%, rgba(0, 0, 0, .45) 45%, transparent 100%);
          mask-image: radial-gradient(ellipse 48% 95% at 50% 0%, #000 0%, rgba(0, 0, 0, .45) 45%, transparent 100%);
}
.zwg-h-rays.zwg-r1 { animation: zwg-shimmer 9s ease-in-out infinite; }
.zwg-h-rays.zwg-r2 { animation: zwg-shimmer 12s ease-in-out -6s infinite; }
@keyframes zwg-shimmer { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

.zwg-h-flood {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 95% 80% at 50% 0%, rgba(255, 253, 248, 1) 0%, rgba(255, 250, 238, .85) 32%, rgba(var(--zwg-light), .3) 68%, rgba(var(--zwg-light), 0) 100%);
  opacity: 0;
}
html.zwg-flooding .zwg-h-flood { animation: zwg-flood 3.4s cubic-bezier(.3, 0, .2, 1) forwards; }
@keyframes zwg-flood { from { opacity: 1; } to { opacity: 0; } }

/* The hero text rises gently as the light settles (only right after the opening screen) */
html.zwg-intro-on:not(.zwg-arriving) .hero-content > * { opacity: 0; }
html.zwg-arriving .hero-content > * { animation: zwg-rise 1.4s var(--zwg-ease) both; }
html.zwg-arriving .hero-content > :nth-child(2) { animation-delay: .1s; }
html.zwg-arriving .hero-content > :nth-child(3) { animation-delay: .2s; }
html.zwg-arriving .hero-content > :nth-child(4) { animation-delay: .3s; }
html.zwg-arriving .hero-content > :nth-child(5) { animation-delay: .4s; }
html.zwg-arriving .hero-content > :nth-child(6) { animation-delay: .5s; }
html.zwg-arriving .hero-content > :nth-child(7) { animation-delay: .6s; }
html.zwg-arriving .hero-content > :nth-child(8) { animation-delay: .7s; }
@keyframes zwg-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- The logo in the light (shown while the white fills the screen) ---------- */
.zwg-flash-logo {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: clamp(110px, 22vw, 170px); height: auto;
  transform: translate(-50%, -50%) scale(.94); opacity: 0;
  filter: grayscale(1) contrast(1.05) drop-shadow(0 8px 22px rgba(0, 0, 0, .16));
  transition: opacity .5s ease, transform 1.4s var(--zwg-ease);
}
.zwg-flash.logo .zwg-flash-logo { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.zwg-flash.logo-out .zwg-flash-logo { opacity: 0; transition: opacity .35s ease; }

/* ---------- Reduced motion: no typing, no pulsing, short fades ---------- */
@media (prefers-reduced-motion: reduce) {
  .zwg-cue-pulse, .zwg-h-glow, .zwg-h-rays { animation: none !important; }
  .zwg-flash.on .zwg-bloom { animation: none; }
  .zwg-flash.on::before { animation: zwg-whiteout .45s ease forwards; }
  .zwg-flash.recede { -webkit-mask-image: none; mask-image: none; animation: zwg-fadeout .7s ease forwards; }
  @keyframes zwg-fadeout { to { opacity: 0; } }
  html.zwg-flooding .zwg-h-flood { animation-duration: 1s; }
  html.zwg-arriving .hero-content > * { animation: none; }
}