/* The moonlit lake: sign-in and loading scene (assets/raven/raven.js drives html[data-scene]). Copied from the
   marketing page's intro. The scene is always night, whatever the theme, so its colours are its own: they are the
   picture, not interface colours. Timeline on press: card fades 0-0.25s, camera flies into the eye 0-1.2s, then
   the browser leaves for Discord (capped at 1.5s in raven.js). */

.scene { position: fixed; inset: 0; z-index: 30; background: #030207; overflow: hidden; }
.scene__lake { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 50%; }
.scene__bird { position: absolute; width: 64vmin; left: calc(50% - 64vmin * .625); top: calc(50% - 64vmin * .25);
  transform-origin: 62.5% 25%; overflow: visible; }
.scene__bird .body { fill: #141018; }
.scene__bird .beak { fill: #211c26; }
.scene__bird .feather { fill: none; stroke: #2a2430; stroke-width: 2.4; stroke-linecap: round; }
.scene__bird .legs { fill: none; stroke: #2e2933; stroke-width: 5; stroke-linecap: round; }
.scene__bird .iris { fill: #ffb21e; }
.scene__bird .eye { transform-box: fill-box; transform-origin: center; }
.scene__bird .eye circle:last-child { opacity: .3; }
.scene__bird .glow { fill: #ffb21e; opacity: .35; filter: blur(4px); }

/* idle life: stars, the moon's ripples, drifting mist, and the eye lighting once */
.scene .tw { animation: rv-twinkle 2.6s ease-in-out infinite alternate; }
.scene .rvi-ripples ellipse { opacity: .5; animation: rv-ripple 2.2s ease-in-out infinite alternate; }
.scene .rvi-mist { animation: rv-mist 6s ease-in-out infinite alternate; }
.scene__lake { animation: rv-lake-in 1s ease-out both; }
.scene__bird { animation: rv-bird-in 1s ease-out both; }
.scene__bird .iris { animation: rv-iris .8s ease-out 1.1s both; }
.scene__bird .glow { animation: rv-glow .8s ease-out 1.1s both; }
.scene .d-01 { animation-delay: .1s; } .scene .d-02 { animation-delay: .2s; } .scene .d-03 { animation-delay: .3s; }
.scene .d-04 { animation-delay: .4s; } .scene .d-05 { animation-delay: .5s; } .scene .d-06 { animation-delay: .6s; }
.scene .d-07 { animation-delay: .7s; } .scene .d-08 { animation-delay: .8s; } .scene .d-09 { animation-delay: .9s; }
.scene .d-10 { animation-delay: 1s; } .scene .d-11 { animation-delay: 1.1s; } .scene .d-12 { animation-delay: 1.2s; }
.scene .d-13 { animation-delay: 1.3s; } .scene .d-14 { animation-delay: 1.4s; } .scene .d-15 { animation-delay: 1.5s; }
.scene .d-16 { animation-delay: 1.6s; } .scene .d-17 { animation-delay: 1.7s; } .scene .d-18 { animation-delay: 1.8s; }
.scene .d-19 { animation-delay: 1.9s; } .scene .d-20 { animation-delay: 2s; } .scene .d-21 { animation-delay: 2.1s; }
.scene .d-22 { animation-delay: 2.2s; } .scene .d-23 { animation-delay: 2.3s; } .scene .d-24 { animation-delay: 2.4s; }
.scene .d-25 { animation-delay: 2.5s; }

/* the press: into the raven's eye */
[data-scene="zoom"] .scene__lake { animation: rv-lake-zoom 1.2s cubic-bezier(.6, 0, .9, .6) forwards; }
[data-scene="zoom"] .scene__bird { animation: rv-eye-zoom 1.2s cubic-bezier(.75, 0, .95, .5) forwards; }
[data-scene="zoom"] .signin { animation: rv-card-out .25s ease-in forwards; pointer-events: none; }

/* motion off: a still frame, then a short fade to night (raven.js navigates after 260ms) */
.rv-fade { transition: opacity .25s ease-in; }
[data-scene="fade"] .scene__lake, [data-scene="fade"] .scene__bird, [data-scene="fade"] .signin { opacity: 0; }

/* first view ready: the lake fades away; no minimum time */
[data-scene="leaving"] .scene { animation: rv-scene-out .35s ease-in forwards; pointer-events: none; }
[data-scene="off"] .scene { display: none; }

/* which card sits on the lake */
.signin, .loading { display: none; }
html:not(.js) .signin,
[data-scene="signin"] .signin, [data-scene="zoom"] .signin, [data-scene="fade"] .signin { display: block; }
[data-scene="loading"] .loading { display: grid; }
/* app script missing or broken: after 3 seconds show the card, whose link works without script */
.rv-hold .signin { display: block; animation: rv-reveal .01s linear 3s both; }
.a11y-still .rv-hold .signin { animation-duration: .01s !important; animation-delay: 3s !important; }

.signin { position: fixed; z-index: 31; left: max(16px, 6vw); bottom: max(16px, 8vh); width: min(400px, calc(100vw - 32px));
  background: #120c17; border: 1px solid #2c2236; border-top: 2px solid #7a52a8; border-radius: 8px; padding: 26px 26px 22px; color: #f1ecf4; }
.signin__name { font-family: var(--serif); font-size: 2.6rem; line-height: 1; font-weight: 600; margin: 0 0 6px; letter-spacing: -.01em; }
.signin__tag { font-family: var(--serif); font-style: italic; color: #c9a6d8; margin: 0 0 14px; font-size: 1.08rem; }
.signin__lead { color: #cbc1d3; margin: 0 0 18px; }
.signin__msg { margin: 0 0 16px; padding: 10px 12px; border: 1px solid #8f3b2c; border-left-width: 4px; border-radius: 5px; background: #2c1414; color: #f6c2b6; }
.signin__go { width: 100%; }
.signin__go[aria-disabled="true"] { cursor: progress; }
.signin__small { margin: 14px 0 0; font-size: .86rem; color: #a194ab; }
.signin__small a { color: #c9a6d8; }

.loading { position: fixed; z-index: 31; left: 50%; bottom: max(24px, 10vh); transform: translateX(-50%); width: min(420px, calc(100vw - 32px));
  gap: 12px; justify-items: center; text-align: center; color: #cbc1d3; }
.loading__text { margin: 0; font-size: .95rem; }
.loading__text.is-slow { background: #120c17; border: 1px solid #2c2236; border-radius: 8px; padding: 12px 16px; color: #f1ecf4; }
.loading__retry[hidden] { display: none; }

@media (max-width: 640px), (max-height: 520px) {
  .signin { left: 16px; right: 16px; width: auto; bottom: 16px; padding: 20px 18px 18px; }
  .signin__name { font-size: 2.1rem; }
}
@media (max-height: 520px) and (min-width: 641px) { .signin { left: auto; right: 16px; width: 360px; } }

@keyframes rv-twinkle { to { opacity: .1; } }
@keyframes rv-ripple { to { opacity: .15; transform: translateX(6px); } }
@keyframes rv-mist { to { transform: translateX(-40px); opacity: .2; } }
@keyframes rv-lake-in { from { opacity: 0; } }
@keyframes rv-bird-in { from { opacity: 0; transform: scale(.94); } }
@keyframes rv-iris { from { fill: #3a2a10; } }
@keyframes rv-glow { from { opacity: 0; } 60% { opacity: .7; } to { opacity: .35; } }
@keyframes rv-lake-zoom { to { transform: scale(1.15); } }
@keyframes rv-eye-zoom { to { transform: scale(170); } }
@keyframes rv-card-out { to { opacity: 0; transform: translateY(8px); } }
@keyframes rv-scene-out { to { opacity: 0; visibility: hidden; } }
@keyframes rv-reveal { from { visibility: hidden; } to { visibility: visible; } }