/* The settled composition is the default. Animation is an optional, brief enhancement. */
html.riverlight [data-page="index"] .hero{padding-top:96px}
html.riverlight [data-page="index"] .hero>.lamp{left:50%;right:auto;top:38px;transform:translateX(-50%);margin:0;width:12px;height:20px;opacity:1;animation:none!important;box-shadow:0 0 22px 7px #e6bb7966,0 0 80px 35px #e6bb7920}
html.riverlight [data-page="index"] .hero::before{content:'';position:absolute;top:0;left:0;right:0;height:420px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 0,#e6bb7926,transparent 64%);opacity:1}
html.riverlight [data-page="index"] .lockup{justify-content:center;font-size:clamp(44px,12vw,144px);letter-spacing:.13em;text-indent:.13em;line-height:1.05;padding:0;border:0;max-width:100%;margin:0 auto}
html.riverlight [data-page="index"] .church-name{text-align:center;color:#d3c6a9;font-size:.875rem;line-height:1.5;letter-spacing:.5em;text-indent:.5em;margin:14px 0 0;font-weight:500}
html.riverlight [data-page="index"] .welcome{text-align:center;font-size:.75rem;letter-spacing:.15em;margin:22px 0 0;color:#b9ccd0}
html.riverlight [data-page="index"] .tagline{text-align:center;margin:20px 0 26px}
html.riverlight [data-page="index"] .railing{justify-content:center}
html.riverlight [data-page="index"] .railing a{padding:10px 16px;margin:0 8px}
/* Two soft fluctuations in a small light source, followed by a continuous reveal. */
html.riverlight.porch-arrival [data-page="index"]{background:#000;animation:porch-room 2.6s ease-out both!important}
html.riverlight.porch-arrival [data-page="index"] .hero>.lamp{animation:porch-switch 1.5s linear both!important}
html.riverlight.porch-arrival [data-page="index"] .hero::before{animation:porch-spill 2s ease-out both!important}
html.riverlight.porch-arrival [data-page="index"] .lockup{animation:porch-wordmark 1.9s ease-out both!important}
html.riverlight.porch-arrival [data-page="index"] .church-name{animation:porch-secondary 2s ease-out both!important}
html.riverlight.porch-arrival [data-page="index"] .welcome,
html.riverlight.porch-arrival [data-page="index"] .tagline,
html.riverlight.porch-arrival [data-page="index"] .railing,
html.riverlight.porch-arrival [data-page="index"] .home-composition,
html.riverlight.porch-arrival [data-page="index"]>.start-here,
html.riverlight.porch-arrival [data-page="index"]>.doors,
html.riverlight.porch-arrival [data-page="index"]>.home-close,
html.riverlight.porch-arrival [data-page="index"]>.home-foot{animation:porch-content 2.3s ease-out both!important}
@keyframes porch-switch{0%,16%{opacity:0}26%{opacity:.55}37%{opacity:.16}51%{opacity:.85}61%{opacity:.42}78%,100%{opacity:1}}
@keyframes porch-wordmark{0%,16%{opacity:0;text-shadow:none}28%{opacity:.13}38%{opacity:.05}53%{opacity:.42}64%{opacity:.32}100%{opacity:1;text-shadow:0 0 38px #e6bb7918}}
@keyframes porch-secondary{0%,32%{opacity:0}62%{opacity:.3}100%{opacity:1}}
@keyframes porch-spill{0%,18%{opacity:0}34%{opacity:.2}44%{opacity:.09}65%{opacity:.5}100%{opacity:1}}
@keyframes porch-content{0%,58%{opacity:0}100%{opacity:1}}
@keyframes porch-room{0%,35%{background-color:#000}100%{background-color:#0d2028}}
@media(max-width:760px){
 html.riverlight [data-page="index"] .hero{padding-top:90px}
 html.riverlight [data-page="index"] .hero>.lamp{top:34px;right:auto}
 html.riverlight [data-page="index"] .lockup{font-size:clamp(44px,12vw,90px);letter-spacing:.1em;text-indent:.1em}
 html.riverlight [data-page="index"] .church-name{margin-top:12px}
 html.riverlight [data-page="index"] .welcome{margin-top:20px;letter-spacing:.1em}
 html.riverlight [data-page="index"] .tagline{margin:18px 0 24px}
 html.riverlight [data-page="index"] .railing a{justify-content:center;padding:10px 2px;margin:0;text-align:center}
}
@media(prefers-reduced-motion:reduce){
 html.riverlight.porch-arrival [data-page="index"]{animation:none!important;background:#0d2028!important}
 html.riverlight.porch-arrival [data-page="index"] *,html.riverlight.porch-arrival [data-page="index"] *::before{animation:none!important}
}
@media print{html.riverlight [data-page="index"] .hero>.lamp,html.riverlight [data-page="index"] .hero::before{display:none}}