/* The living home banner and sign-in panel: crossfading community photos, a glowing lotus, rising light and quotes. */

/* Photos crossfade one after another with a slow drift (7s each). */
.photo-stage { position: absolute; inset: 0; overflow: hidden; background: #09304d; }
.photo-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform-origin: 60% 40%; animation: stage calc(var(--n) * 7s) calc(var(--i) * 7s - 1.5s) linear infinite; will-change: opacity, transform; }
@keyframes stage {
  0% { opacity: 0; transform: scale(1.14) translate3d(1.5%, 0, 0); }
  4% { opacity: 1; }
  16.7% { opacity: 1; }
  21% { opacity: 0; transform: scale(1.02) translate3d(-1%, -1%, 0); }
  100% { opacity: 0; transform: scale(1.02); }
}

/* Home banner */
.hero.alive { min-height: 300px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; isolation: isolate; background: #09304d; box-shadow: 0 20px 50px -24px rgba(9, 48, 77, .55); }
.hero.alive::after { display: none; }
.hero-veil { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(90deg, rgba(7, 31, 51, .9) 0%, rgba(7, 31, 51, .62) 42%, rgba(7, 31, 51, .2) 75%, rgba(7, 31, 51, .35) 100%),
  linear-gradient(0deg, rgba(7, 31, 51, .75) 0%, transparent 55%); }
.hero.alive.dawn .hero-veil { background: linear-gradient(90deg, rgba(60, 38, 18, .78) 0%, rgba(9, 48, 77, .5) 45%, rgba(255, 189, 89, .12) 100%), linear-gradient(0deg, rgba(7, 31, 51, .72) 0%, transparent 55%); }
.hero.alive.dusk .hero-veil { background: linear-gradient(90deg, rgba(30, 20, 60, .86) 0%, rgba(9, 48, 77, .55) 45%, rgba(138, 111, 176, .18) 100%), linear-gradient(0deg, rgba(7, 31, 51, .75) 0%, transparent 55%); }
.hero.alive .motes { z-index: 2; }
.hero.alive .motes i { animation-name: mote-rise-short; }
@keyframes mote-rise-short { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 15% { opacity: .85; } 75% { opacity: .4; } 100% { transform: translate3d(14px, -340px, 0); opacity: 0; } }
.hero-glow { position: absolute; z-index: 1; right: 6%; top: -30%; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 215, 154, .35), transparent 65%); animation: glow-drift 9s ease-in-out infinite alternate; pointer-events: none; }
@keyframes glow-drift { to { transform: translate3d(-40px, 30px, 0) scale(1.15); opacity: .7; } }
.hero-lotus { position: absolute; z-index: 3; right: 28px; top: 22px; width: 96px; opacity: .95; }
.hero-lotus .lotus { width: 100%; height: auto; overflow: visible; }
.hero-content { position: relative; z-index: 3; padding: 30px 32px 28px; }
.hero.alive .eyebrow { color: #ffd79a; letter-spacing: .14em; }
.hero.alive h1 { font-size: clamp(32px, 3.6vw, 46px); text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.hero.alive .hero-content > p { color: rgba(255, 247, 232, .88); }
.hero.alive .hero-next { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.hero-quote { position: relative; z-index: 3; margin: 0; padding: 0 32px 30px 0; max-width: 340px; justify-self: end; text-align: right; }

/* Quotes */
.alive-quote { transition: opacity 600ms cubic-bezier(.23, 1, .32, 1), transform 600ms cubic-bezier(.23, 1, .32, 1); }
.alive-quote.fade { opacity: 0; transform: translateY(6px); }
.alive-quote blockquote { margin: 0; font: italic 500 17px/1.55 'Playfair Display', Georgia, serif; color: #fff7e8; text-shadow: 0 1px 14px rgba(0, 0, 0, .4); }
.alive-quote figcaption { margin-top: 6px; font: 700 11px/1.5 Lato, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #ffd79a; }

@media (max-width: 900px) {
  .hero.alive { grid-template-columns: 1fr; min-height: 340px; gap: 0; }
  .hero-quote { justify-self: start; text-align: left; padding: 0 24px 24px; max-width: none; }
  .hero-content { padding: 26px 24px 14px; }
  .hero-lotus { width: 70px; right: 18px; top: 16px; }
  .hero-veil { background: linear-gradient(0deg, rgba(7, 31, 51, .9) 0%, rgba(7, 31, 51, .55) 55%, rgba(7, 31, 51, .3) 100%); }
  .alive-quote blockquote { font-size: 15.5px; }
}

/* Sign-in panel */
.signin-brand.alive { position: relative; overflow: hidden; isolation: isolate; align-content: end; padding-bottom: 56px; }
.signin-brand.alive .photo-stage { z-index: 0; }
.signin-brand.alive .hero-veil { background: linear-gradient(0deg, rgba(7, 31, 51, .92) 0%, rgba(7, 31, 51, .55) 50%, rgba(7, 31, 51, .25) 100%); }
.signin-brand.alive::after { z-index: 1; }
.signin-brand.alive .motes { z-index: 2; }
.signin-brand.alive > :not(.photo-stage):not(.hero-veil):not(.motes) { position: relative; z-index: 3; }
.signin-brand.alive .lotus { width: 130px; height: auto; overflow: visible; margin-bottom: 4px; }
.signin-brand.alive h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.signin-brand.alive .alive-quote { margin: 18px 0 0; max-width: 38ch; }
@media (max-width: 820px) { .signin-brand.alive { min-height: 360px; padding-bottom: 32px; } .signin-brand.alive .lotus { width: 92px; } }

@media (prefers-reduced-motion: reduce) {
  .photo-stage img { animation: none; }
  .photo-stage img:first-child { opacity: 1; }
  .hero-glow { animation: none; }
  .alive-quote { transition: none; }
}