/* Opening splash: a lotus blooms in a glowing dusk sky while the app loads. Loaded before app.css. */
#splash { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; overflow: hidden; background: #071f33; color: #fff7e8; transition: opacity 800ms cubic-bezier(.23, 1, .32, 1), transform 800ms cubic-bezier(.23, 1, .32, 1), filter 800ms; }
#splash.out { opacity: 0; transform: scale(1.04); filter: blur(4px); pointer-events: none; }
.sp-sky { position: absolute; inset: -10%; background:
  radial-gradient(60% 45% at 50% 62%, rgba(255, 189, 89, .28), transparent 70%),
  radial-gradient(70% 60% at 15% 10%, rgba(80, 148, 176, .55), transparent 70%),
  radial-gradient(60% 60% at 90% 90%, rgba(138, 111, 176, .45), transparent 70%),
  linear-gradient(170deg, #09304d 0%, #005494 48%, #0b2a44 100%);
  animation: sp-sky 14s ease-in-out infinite alternate; }
@keyframes sp-sky { to { transform: translate3d(2%, -2%, 0) scale(1.06); } }
.sp-rays { position: absolute; width: 160vmax; height: 160vmax; left: 50%; top: 56%; translate: -50% -50%; background: repeating-conic-gradient(from 0deg, rgba(255, 215, 154, .09) 0deg 4deg, transparent 4deg 18deg); mask: radial-gradient(circle, #000 0, transparent 38%); -webkit-mask: radial-gradient(circle, #000 0, transparent 38%); animation: sp-spin 60s linear infinite; opacity: 0; animation: sp-spin 60s linear infinite, sp-in 2s 600ms ease-out forwards; }
@keyframes sp-spin { to { rotate: 360deg; } }
@keyframes sp-in { to { opacity: 1; } }
.sp-aura { position: absolute; width: 520px; height: 520px; left: 50%; top: 46%; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 215, 154, .55) 0%, rgba(255, 176, 92, .18) 38%, transparent 68%); filter: blur(6px); opacity: 0; animation: sp-in 1.6s 400ms ease-out forwards, sp-breathe 4.8s 2s ease-in-out infinite; }
@keyframes sp-breathe { 50% { transform: scale(1.12); opacity: .8; } }
.sp-center { position: relative; display: grid; justify-items: center; gap: 6px; padding: 0 24px; text-align: center; }
.sp-lotus { width: min(240px, 58vw); height: auto; overflow: visible; }
.sp-word { margin: 6px 0 0; font: 600 clamp(34px, 6vw, 52px)/1.1 'Playfair Display', Georgia, serif; letter-spacing: .14em; text-indent: .14em; color: #fff7e8; text-shadow: 0 0 24px rgba(255, 215, 154, .55); opacity: 0; animation: sp-rise 1.1s 1.1s cubic-bezier(.23, 1, .32, 1) forwards; }
.sp-line { margin: 4px 0 0; max-width: 34ch; font: italic 500 17px/1.6 'Playfair Display', Georgia, serif; color: rgba(255, 247, 232, .82); opacity: 0; animation: sp-rise 1.1s 1.5s cubic-bezier(.23, 1, .32, 1) forwards; }
.sp-line span { display: block; margin-top: 2px; font: 700 11px/1.6 Lato, sans-serif; letter-spacing: .16em; text-transform: uppercase; font-style: normal; color: rgba(255, 215, 154, .85); }
@keyframes sp-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* The lotus itself; shared with the app (alive.css repeats the drawing for in-app lotuses). */
.lotus .petal { stroke: #ffe2b3; stroke-width: 1.4; stroke-linejoin: round; fill-opacity: 0; stroke-dasharray: 230; stroke-dashoffset: 230; animation: lotus-draw 1.2s calc(var(--i) * 110ms + 200ms) cubic-bezier(.65, 0, .35, 1) forwards, lotus-fill 1s calc(var(--i) * 110ms + 900ms) ease-out forwards; }
.lotus .heart { opacity: 0; animation: sp-in 1.2s 1.3s ease-out forwards, lotus-heart 3.6s 2.5s ease-in-out infinite; transform-origin: 100px 88px; }
.lotus .water { fill: none; stroke: rgba(255, 226, 179, .55); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 140; stroke-dashoffset: 140; animation: lotus-draw 1.4s 1s ease-out forwards; }
.lotus .water.w2 { stroke: rgba(255, 226, 179, .3); animation-delay: 1.2s; }
.lotus { filter: drop-shadow(0 0 14px rgba(255, 189, 89, .45)); animation: lotus-glow 4.8s 2s ease-in-out infinite; }
@keyframes lotus-draw { to { stroke-dashoffset: 0; } }
@keyframes lotus-fill { to { fill-opacity: .92; } }
@keyframes lotus-heart { 50% { transform: scale(1.18); opacity: .7; } }
@keyframes lotus-glow { 50% { filter: drop-shadow(0 0 26px rgba(255, 189, 89, .75)); } }

/* Light motes drifting upwards */
.motes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.motes i { position: absolute; left: var(--x); bottom: -12px; width: var(--z); height: var(--z); border-radius: 50%; background: #ffe7bf; box-shadow: 0 0 8px 2px rgba(255, 215, 154, .8); opacity: 0; animation: mote-rise var(--s) var(--d) linear infinite; }
@keyframes mote-rise { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: .9; } 70% { opacity: .55; } 100% { transform: translate3d(18px, -105vh, 0); opacity: 0; } }

/* Later visits in a session: a shorter, simpler bloom. */
#splash.quick .lotus .petal { animation-duration: .5s, .5s; animation-delay: 0s, .2s; }
#splash.quick .sp-word, #splash.quick .sp-line { animation-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
  #splash *, #splash { animation: none !important; transition: opacity 300ms !important; }
  #splash .sp-word, #splash .sp-line, #splash .sp-aura, #splash .sp-rays { opacity: 1; }
  .lotus .petal { stroke-dashoffset: 0; fill-opacity: .92; }
  .lotus .heart, .lotus .water { opacity: 1; stroke-dashoffset: 0; }
  .motes { display: none; }
}