* { box-sizing: border-box; }
body { margin: 0px; font-family: Georgia, serif; background: rgb(245, 241, 232); color: rgb(36, 32, 24); line-height: 1.7; }
header { display: flex; justify-content: space-between; align-items: center; padding: 18px 5%; background: rgb(16, 20, 24); color: rgb(255, 255, 255); gap: 20px; }
.brand { font-weight: bold; letter-spacing: 2px; }
nav { display: flex; gap: 18px; flex-wrap: wrap; }
a { color: inherit; text-decoration: none; }
.hero { min-height: 72vh; background: linear-gradient(rgba(0, 0, 0, 0.267), rgba(0, 0, 0, 0.533)), url("images/Radiant throne above luminous clouds.png") center center / cover; display: grid; place-items: center; text-align: center; color: rgb(255, 255, 255); padding: 30px; }
.overlay { max-width: 850px; }
h1 { font-size: clamp(3rem, 8vw, 6.5rem); line-height: 1; margin: 0.2em 0px; }
h2 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.1; }
.eyebrow { letter-spacing: 3px; font: 700 0.8rem Arial, sans-serif; }
.encounter { background: rgb(9, 15, 28); overflow: hidden; }
.encounter-scene { position: relative; width: 100%; aspect-ratio: 1983 / 793; overflow: hidden; background: url("images/Celestial throne room without the angel.png") center center / cover no-repeat; isolation: isolate; }
.encounter-orb, .encounter-doorway, .encounter-angel { position: absolute; pointer-events: none; }
.encounter-orb { left: 63%; top: 51%; width: 8%; aspect-ratio: 1 / 1; border-radius: 50%; transform: translate(-50%, -50%) scale(0); background: radial-gradient(circle, rgb(255, 255, 255) 0px, rgb(255, 255, 255) 14%, rgb(237, 255, 255) 22%, rgb(158, 220, 255) 43%, rgba(185, 172, 255, 0.4) 62%, transparent 73%); filter: drop-shadow(rgb(217, 247, 255) 0px 0px 36px); animation: 14s ease-in-out 0s infinite normal none running orb; }
.encounter-doorway { left: 63%; top: 52%; width: 15%; height: 75%; border-radius: 50% 50% 10% 10%; transform: translate(-50%, -50%) scaleX(0); background: radial-gradient(rgb(255, 255, 255) 0%, rgb(229, 250, 255) 28%, rgba(160, 196, 255, 0.69) 53%, transparent 75%); filter: drop-shadow(rgb(235, 250, 255) 0px 0px 35px); mix-blend-mode: screen; animation: 14s ease-in-out 0s infinite normal none running doorway; }
.encounter-angel { height: 91%; width: auto; max-width: none; left: 63%; bottom: -1%; opacity: 0; transform: translate(-50%, 4%) scale(0.93); filter: drop-shadow(rgba(255, 255, 255, 0.6) 0px 0px 28px); animation: 14s ease-in-out 0s infinite normal none running angel-appear; }
.section { padding: 70px 8%; max-width: 1100px; margin: auto; }
.alt { max-width: none; background: rgb(23, 27, 30); color: rgb(247, 240, 223); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; padding: 70px 8%; max-width: 1200px; margin: auto; }
.split img { width: 100%; border-radius: 6px; }
.points, .songs { display: grid; gap: 18px; }
.points span { padding: 12px 0px; border-bottom: 1px solid rgb(170, 170, 170); }
.songs { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 30px; }
.songs article { border: 1px solid rgba(255, 255, 255, 0.2); padding: 20px; min-width: 0px; overflow: hidden; }
.songs video { display: block; width: 100%; aspect-ratio: 16 / 9; background: rgb(0, 0, 0); margin: 0.8rem 0px; }
footer { text-align: center; padding: 35px; background: rgb(12, 15, 17); color: rgb(221, 221, 221); }
@keyframes orb { 
  0%, 5% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  11%, 22% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  33%, 100% { transform: translate(-50%, -50%) scale(0.25); opacity: 0; }
}
@keyframes doorway { 
  0%, 19% { transform: translate(-50%, -50%) scaleX(0); opacity: 0; }
  29%, 40% { transform: translate(-50%, -50%) scaleX(1); opacity: 0.95; }
  53%, 100% { transform: translate(-50%, -50%) scaleX(0); opacity: 0; }
}
@keyframes angel-appear { 
  0%, 28% { opacity: 0; transform: translate(-50%, 4%) scale(0.93); }
  43% { opacity: 0.35; }
  55%, 86% { opacity: 1; transform: translate(-50%, 0px) scale(1); }
  95%, 100% { opacity: 0; transform: translate(-50%, -1%) scale(1); }
}
@media (max-width: 700px) {
  header { display: block; }
  .brand { margin-bottom: 10px; }
  .encounter-scene { aspect-ratio: 3 / 2; background-position: 38% center; }
  .encounter-orb, .encounter-doorway, .encounter-angel { left: 64%; }
  .encounter-angel { height: 85%; }
  .split { grid-template-columns: 1fr; }
  .section, .split { padding: 48px 6%; }
}
@media (prefers-reduced-motion: reduce) {
  .encounter-orb, .encounter-doorway { display: none; }
  .encounter-angel { animation: auto ease 0s 1 normal none running none; opacity: 1; transform: translate(-50%, 0px) scale(1); }
}
/* Orb crosses the throne room before becoming a doorway. */
.encounter-orb { animation: orb-drift 18s ease-in-out infinite; }
.encounter-doorway { animation: portal-open 18s ease-in-out infinite; }
.encounter-angel { animation: male-appear 18s ease-in-out infinite; }

@keyframes orb-drift {
  0% { left: 18%; top: 65%; transform: translate(-50%,-50%) scale(0); opacity: 0; }
  7% { left: 23%; top: 55%; transform: translate(-50%,-50%) scale(.75); opacity: .95; }
  15% { left: 41%; top: 30%; transform: translate(-50%,-50%) scale(1); opacity: 1; }
  23% { left: 34%; top: 65%; transform: translate(-50%,-50%) scale(.9); opacity: 1; }
  32% { left: 55%; top: 36%; transform: translate(-50%,-50%) scale(1.1); opacity: 1; }
  39% { left: 63%; top: 51%; transform: translate(-50%,-50%) scale(1.15); opacity: 1; }
  48%, 100% { left: 63%; top: 51%; transform: translate(-50%,-50%) scale(.15); opacity: 0; }
}
@keyframes portal-open {
  0%, 38% { transform: translate(-50%,-50%) scaleX(0); opacity: 0; }
  48%, 60% { transform: translate(-50%,-50%) scaleX(1); opacity: .95; }
  70%, 100% { transform: translate(-50%,-50%) scaleX(0); opacity: 0; }
}
@keyframes male-appear {
  0%, 51% { opacity: 0; transform: translate(-50%,4%) scale(.93); }
  62% { opacity: .65; transform: translate(-50%,0) scale(1); }
  70%, 88% { opacity: 1; transform: translate(-50%,0) scale(1); }
  98%, 100% { opacity: 0; transform: translate(-50%,-1%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .encounter-orb, .encounter-doorway { display: none; animation: none; }
  .encounter-angel { animation: none; opacity: 1; transform: translate(-50%,0) scale(1); }
}