html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 12% 8%, rgba(62, 137, 194, 0.18), transparent 28rem),
    radial-gradient(circle at 88% 18%, rgba(95, 64, 93, 0.16), transparent 26rem),
    linear-gradient(135deg, #fdfbfd 0%, #edf4ff 48%, #f8eef6 100%);
}

#hero .absolute.inset-0[style*="linear-gradient"] {
  background:
    linear-gradient(115deg, rgba(12, 18, 28, 0.92) 0%, rgba(26, 49, 73, 0.72) 48%, rgba(95, 64, 93, 0.44) 100%),
    radial-gradient(circle at 72% 28%, rgba(62, 137, 194, 0.36), transparent 22rem) !important;
}

#hero h1 {
  text-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
  animation: lifearise-rise 900ms ease-out both;
}

#hero p,
#hero a {
  animation: lifearise-rise 900ms ease-out both;
  animation-delay: 140ms;
}

#welcome-note .rounded-2xl,
#watch .rounded-2xl,
#locations .rounded-2xl,
#blog .rounded-2xl,
#give .rounded-2xl {
  border: 1px solid rgba(18, 18, 13, 0.08);
  box-shadow: 0 18px 50px rgba(39, 47, 61, 0.08);
}

#welcome-note .rounded-2xl {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(227, 234, 247, 0.94)),
    radial-gradient(circle at 82% 12%, rgba(62, 137, 194, 0.18), transparent 18rem) !important;
}

#watch > section > .relative > .relative > .rounded-2xl:first-of-type {
  background:
    linear-gradient(135deg, #12120d 0%, #24384b 56%, #5f405d 100%) !important;
  position: relative;
  overflow: hidden;
}

#watch > section > .relative > .relative > .rounded-2xl:first-of-type::after {
  content: "";
  position: absolute;
  inset: -35%;
  background: conic-gradient(from 180deg, transparent, rgba(255, 255, 255, 0.18), transparent 36%);
  animation: lifearise-orbit 8s linear infinite;
  pointer-events: none;
}

#watch > section > .relative > .relative > .rounded-2xl:first-of-type > * {
  position: relative;
  z-index: 1;
}

a[data-action],
a[data-slot="button"],
button[type="submit"] {
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

a[data-action]:hover,
a[data-slot="button"]:hover,
button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(39, 47, 61, 0.16);
}

#youtube-latest a,
#sermon-preview a {
  transition: transform 220ms ease, box-shadow 220ms ease;
}

#youtube-latest a:hover,
#sermon-preview a:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(39, 47, 61, 0.18);
}

#youtube-latest img,
#sermon-preview img {
  transition: transform 450ms ease, filter 450ms ease;
}

#youtube-latest a:hover img,
#sermon-preview a:hover img {
  transform: scale(1.05);
  filter: saturate(1.08) contrast(1.05);
}

.life-media-feature {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.life-media-copy {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.life-media-frame,
.life-flyer-grid figure {
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.life-media-frame img,
.life-flyer-grid img {
  display: block;
  width: 100%;
  height: auto;
}

.life-media-frame img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.life-flyer-grid {
  display: grid;
  width: 100%;
  gap: 1.5rem;
}

.life-flyer-grid figure {
  margin: 0;
  background: #12120d;
  border-color: rgba(18, 18, 13, 0.08);
}

.life-flyer-grid figcaption {
  padding: 1rem 1.25rem;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0;
}

.life-qr-card {
  display: flex;
  flex-direction: column;
}

.life-qr-card img {
  width: min(100%, 220px);
  margin-top: 1rem;
  border-radius: 14px;
  border: 10px solid #ffffff;
  box-shadow: 0 16px 36px rgba(39, 47, 61, 0.16);
}

@media (min-width: 768px) {
  .life-media-feature,
  .life-flyer-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.life-reveal {
  opacity: 0;
  transform: translateY(22px);
}

.life-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 700ms ease, transform 700ms ease;
}

header {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@keyframes lifearise-rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lifearise-orbit {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  .life-reveal {
    opacity: 1;
    transform: none;
  }
}

/* 2026-05-23 requested polish: clearer fonts, separators, framed images, welcome photo */
:root {
  --font-size-xs: clamp(0.78rem, 0.76rem + 0.08vw, 0.84rem);
  --font-size-sm: clamp(0.92rem, 0.88rem + 0.12vw, 1rem);
  --font-size-base: clamp(1.04rem, 1rem + 0.18vw, 1.16rem);
  --font-size-lg: clamp(1.18rem, 1.08rem + 0.32vw, 1.38rem);
  --font-size-xl: clamp(1.35rem, 1.18rem + 0.7vw, 1.72rem);
  --font-size-2xl: clamp(1.65rem, 1.3rem + 1.25vw, 2.25rem);
  --font-size-3xl: clamp(2.05rem, 1.55rem + 2vw, 3.25rem);
}

body, .website-container {
  font-family: Lexend, Arial, sans-serif !important;
  text-rendering: optimizeLegibility;
}

section > .relative::after,
footer::before {
  content: "";
  display: block;
  height: 1px;
  width: min(92%, 1180px);
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, rgba(62, 137, 194, 0.34), rgba(95, 64, 93, 0.26), transparent);
}

.life-welcome-title-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.life-welcome-small-photo {
  width: clamp(86px, 11vw, 140px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: 18px;
  border: 4px solid #ffffff;
  box-shadow: 0 16px 36px rgba(39, 47, 61, 0.18);
  background: #ffffff;
}

.website-container section img:not(.life-welcome-small-photo),
.life-media-frame,
.life-flyer-grid figure,
#youtube-latest a,
#sermon-preview a,
#blog-posts > *,
#welcome-note .rounded-2xl,
#locations .rounded-2xl,
#give .rounded-2xl {
  border: 1px solid rgba(62, 137, 194, 0.22) !important;
  outline: 5px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 18px 48px rgba(39, 47, 61, 0.14);
}

.website-container section img {
  max-width: 100%;
  height: auto;
}

.website-container section figure,
.website-container section picture,
.life-media-frame,
.life-flyer-grid figure {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#youtube-latest,
#sermon-preview,
#blog-posts {
  align-items: stretch;
}

#youtube-latest a,
#sermon-preview a {
  border-radius: 24px !important;
}

@media (max-width: 640px) {
  .life-welcome-title-row {
    align-items: flex-start;
  }
  .life-welcome-small-photo {
    width: 92px;
    border-radius: 16px;
  }
}


/* 2026-05-23 rebuild: Sunday worship image + tested YouTube preview boxes */
img[src*="sunday-worship-service.jpg"] {
  width: 100% !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center center;
  border-radius: 26px !important;
  border: 6px solid #ffffff !important;
  outline: 1px solid rgba(62, 137, 194, 0.32) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.2) !important;
}

.life-youtube-preview-box {
  border: 1px solid rgba(62, 137, 194, 0.28) !important;
  outline: 6px solid rgba(255,255,255,0.65) !important;
  box-shadow: 0 20px 54px rgba(39,47,61,0.15) !important;
  background: #fff !important;
}

.life-youtube-preview-box .relative {
  border-bottom: 1px solid rgba(62, 137, 194, 0.16);
}


/* 2026-05-23 intro video: placed above Join Us for Sunday Worship */
.life-intro-video-section {
  width: min(1120px, calc(100% - 32px));
  margin: 3rem auto 2rem;
}

.life-intro-video-card {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(95, 64, 93, 0.22);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,0.94), rgba(237,244,255,0.92));
  box-shadow: 0 22px 60px rgba(39, 47, 61, 0.14);
}

.life-intro-video-copy .life-eyebrow {
  margin: 0 0 .45rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 800;
  color: #5f405d;
  font-size: .78rem;
}

.life-intro-video-copy h2 {
  margin: 0;
  color: #12120d;
  font-size: clamp(1.7rem, 4vw, 3rem);
  line-height: 1.05;
  font-weight: 900;
}

.life-intro-video-copy p:last-child {
  margin: .75rem 0 0;
  color: rgba(18, 18, 13, .78);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.65;
}

.life-intro-video-frame {
  overflow: hidden;
  border-radius: 24px;
  border: 6px solid #ffffff;
  outline: 1px solid rgba(18, 18, 13, 0.12);
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.22);
  background: #111;
}

.life-intro-video-frame video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #111;
}

@media (min-width: 900px) {
  .life-intro-video-card {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  }
}