/* Verse of the Moment - "the Word as light" (round 42).
   Only gentle, slow movement: a dawn glow and swaying rays behind the page, cards that rise into the light and
   catch a passing gleam, and a verse that is "illuminated" when it opens. Everything here is decoration - no text,
   size or layout changes - and it is switched off by the Animations icon in the accessibility bar and by the
   device's "reduce motion" setting. */
@property --ray-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* --- page: dawn glow and rays behind everything --- */
body::before, body::after { content: ""; position: fixed; left: 0; right: 0; top: 118px; height: 75vh; z-index: -1; pointer-events: none; }
body::before { background: radial-gradient(60% 55% at 50% -6%, rgba(255, 220, 120, .75), rgba(255, 226, 140, 0) 72%); }
body::after {
  background: repeating-conic-gradient(from var(--ray-a) at 50% -8%, rgba(255, 200, 70, .24) 0 4deg, rgba(255, 214, 102, 0) 4deg 13deg);
  -webkit-mask-image: radial-gradient(75% 90% at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(75% 90% at 50% 0%, #000 0%, transparent 78%);
}

/* --- cards: rise into the light, then catch a gleam now and then --- */
.status-card { position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.status-card:hover, .status-card:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(217, 161, 27, .35), 0 0 0 1px rgba(255, 226, 140, .55); }
.status-card::after {
  content: ""; position: absolute; top: -40%; bottom: -40%; left: -70%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 244, 200, .32), rgba(255, 255, 255, 0));
  transform: skewX(-18deg) translateX(0); opacity: 0;
}

/* --- the open verse: rays behind it, drifting specks of light, and the words coming into focus --- */
#verse-modal .verse-modal-card { isolation: isolate; }
#verse-modal .verse-modal-card::before, #verse-modal .verse-modal-card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
#verse-modal .verse-modal-card::before {
  background: repeating-conic-gradient(from var(--ray-a) at 50% 0%, rgba(255, 214, 102, .15) 0 5deg, rgba(255, 214, 102, 0) 5deg 14deg);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 72%); mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
}
#verse-modal .verse-modal-card::after {
  /* golden specks: a deeper gold core so they show on the light card, matching the sunrays */
  background:
    radial-gradient(circle, rgba(212, 160, 23, .95) 0 1.8px, rgba(240, 190, 60, .35) 2.4px, transparent 3.6px) 0 0 / 83px 117px,
    radial-gradient(circle, rgba(232, 178, 40, .9) 0 1.4px, rgba(250, 205, 90, .3) 2px, transparent 3.2px) 37px 53px / 131px 149px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}

/* --- motion (only when it is allowed) --- */
@media (prefers-reduced-motion: no-preference) {
  html:not(.lp-still):not(.kms-a11y-nomotion) body::before { animation: vl-breathe 9s ease-in-out infinite; }
  html:not(.lp-still):not(.kms-a11y-nomotion) body::after { animation: vl-sway 22s ease-in-out infinite alternate; }
  html:not(.lp-still):not(.kms-a11y-nomotion) header.brand-header h1 { animation: vl-glow 7s ease-in-out infinite; }
  html:not(.lp-still):not(.kms-a11y-nomotion) .status-card { animation: vl-rise .75s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0ms); }
  html:not(.lp-still):not(.kms-a11y-nomotion) .status-card::after { animation: vl-gleam 9s ease-in-out infinite; animation-delay: calc(var(--d, 0ms) * 4 + 1.5s); }
  html:not(.lp-still):not(.kms-a11y-nomotion) #verse-modal .verse-modal-card::before { animation: vl-sway 14s ease-in-out infinite alternate; }
  html:not(.lp-still):not(.kms-a11y-nomotion) #verse-modal .verse-modal-card::after { animation: vl-motes 26s linear infinite; }
  html:not(.lp-still):not(.kms-a11y-nomotion) #verse-modal .verse-modal-card.lit #v-text { animation: vl-illuminate 1.4s ease-out both; }
  html:not(.lp-still):not(.kms-a11y-nomotion) #verse-modal .verse-modal-card.lit #v-ref { animation: vl-illuminate 1.4s ease-out .35s both; }
}
.status-card:nth-child(1) { --d: 0ms } .status-card:nth-child(2) { --d: 50ms } .status-card:nth-child(3) { --d: 100ms }
.status-card:nth-child(4) { --d: 150ms } .status-card:nth-child(5) { --d: 200ms } .status-card:nth-child(6) { --d: 250ms }
.status-card:nth-child(7) { --d: 300ms } .status-card:nth-child(8) { --d: 350ms } .status-card:nth-child(9) { --d: 400ms }
.status-card:nth-child(10) { --d: 450ms } .status-card:nth-child(11) { --d: 500ms } .status-card:nth-child(12) { --d: 550ms }

@keyframes vl-breathe { 0%, 100% { opacity: .7 } 50% { opacity: 1 } }
@keyframes vl-sway { from { --ray-a: -9deg } to { --ray-a: 9deg } }
@keyframes vl-glow { 0%, 100% { text-shadow: 0 0 0 rgba(240, 197, 92, 0) } 50% { text-shadow: 0 0 22px rgba(240, 197, 92, .65) } }
@keyframes vl-rise { from { opacity: 0; transform: translateY(14px) scale(.98) } to { opacity: 1; transform: none } }
@keyframes vl-gleam { 0%, 62% { transform: skewX(-18deg) translateX(0); opacity: 0 } 66% { opacity: 1 } 80%, 100% { transform: skewX(-18deg) translateX(520%); opacity: 0 } }
@keyframes vl-motes { to { background-position: 0 -234px, 37px -447px } }
@keyframes vl-illuminate { from { opacity: 0; filter: blur(7px); } to { opacity: 1; filter: blur(0); } }

/* A phone must never pan sideways: whatever is too wide gets clipped, not scrolled to. */
html, body { overflow-x: clip; }