/* Awaken sign-in: the full-screen sign-in for every Awaken app.
   awaken-general design/sign-in/ (README.md there). Copied verbatim into
   each app beside awaken-a-128.png and awaken-a-mask-1024.png; change it
   there first. Taken from the Media App's sign-in, 2026-10-25.

   Markup:
     <div class="aw-signin" id="gate">
       <div class="aw-signin-glow" aria-hidden="true"><i></i><i></i><i></i></div>
       <div class="aw-signin-card">
         <div class="aw-signin-mark"><img src="awaken-a-128.png" alt="Awaken"></div>
         <h1>Preach <span>Media</span></h1>         the app's name, last word in the gradient
         <div class="aw-signin-body">…</div>        the states: a line, the button, notes
       </div>
     </div>
   In the body: <p>, <button class="aw-signin-btn">, <button
   class="aw-signin-ghost">, <p class="aw-signin-note">, <p
   class="aw-signin-err">, <p class="aw-signin-wait">, <div class="aw-signin-row">.

   Colours and type come from the Awaken family's tokens (--bg, --surface,
   --ink, --ink-2, --ink-3, --line, --line-strong, --err, --font,
   --font-display), so light and dark follow the app; the values after each
   comma are the Media App's light ones, for a page that defines none. The
   brand gradient and its three colours are constants. Set --aw-signin-mask
   to the mask image's address if it isn't beside the page. */

.aw-signin{
  --aw-grad:linear-gradient(45deg,#E80E8A 0%,#EE4137 50%,#F59220 100%);
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  padding:20px;overflow:hidden;background:var(--bg,#F7F5F1);color:var(--ink,#1F1B17);
  font-family:var(--font,'Circular',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif);
  -webkit-font-smoothing:antialiased;box-sizing:border-box}
.aw-signin *,.aw-signin *::before,.aw-signin *::after{box-sizing:border-box}
.aw-signin[hidden]{display:none}
/* A 3px rail of the gradient along the top. */
.aw-signin::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--aw-grad);z-index:2}
/* The mark, huge and faint, anchored to the right; on a narrow screen it
   sits behind the card. */
.aw-signin::after{content:"";position:absolute;right:-13vmin;top:50%;width:74vmin;height:74vmin;
  transform:translateY(-50%);background:var(--ink,#1F1B17);
  -webkit-mask:var(--aw-signin-mask,url("awaken-a-mask-1024.png")) no-repeat center/contain;
  mask:var(--aw-signin-mask,url("awaken-a-mask-1024.png")) no-repeat center/contain;
  opacity:var(--aw-signin-mark-opacity,.05);pointer-events:none}
/* A warm wash of the brand, strongest where the mark is. */
.aw-signin-glow{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.aw-signin-glow i{position:absolute;border-radius:999px;filter:blur(90px);opacity:var(--aw-signin-glow,.14)}
.aw-signin-glow i:nth-child(1){width:44vmin;height:44vmin;right:4vmin;top:-8vmin;background:#E80E8A}
.aw-signin-glow i:nth-child(2){width:50vmin;height:50vmin;right:18vmin;bottom:-14vmin;background:#EE4137}
.aw-signin-glow i:nth-child(3){width:34vmin;height:34vmin;left:-6vmin;top:34%;background:#F59220;opacity:calc(var(--aw-signin-glow,.14) * .64)}
@media (prefers-reduced-motion:no-preference){
  .aw-signin-glow i{animation:awSigninDrift 18s ease-in-out infinite alternate}
  .aw-signin-glow i:nth-child(2){animation-duration:23s;animation-delay:-6s}
  .aw-signin-glow i:nth-child(3){animation-duration:27s;animation-delay:-11s}
  .aw-signin-card{animation:awSigninIn .55s cubic-bezier(.25,1.15,.35,1) backwards}
  .aw-signin-mark{animation:awSigninMark .7s cubic-bezier(.25,1.15,.35,1) backwards;animation-delay:.1s}
}
@keyframes awSigninDrift{to{transform:translate3d(2.5vmin,-3vmin,0) scale(1.08)}}
@keyframes awSigninIn{from{opacity:0;transform:translateY(14px) scale(.985)}}
@keyframes awSigninMark{from{opacity:0;transform:scale(.8)}}
/* The card. */
.aw-signin-card{position:relative;z-index:1;width:100%;max-width:400px;text-align:center;
  background:var(--surface,#fff);border:1px solid var(--line,#E4DFD7);border-radius:20px;padding:42px 40px 36px;
  box-shadow:0 8px 24px -14px rgba(0,0,0,.28),0 22px 50px -20px rgba(0,0,0,.4)}
/* The one line of colour on the card, tying it to the rail. */
.aw-signin-card::before{content:"";position:absolute;left:34%;right:34%;top:0;height:2px;background:var(--aw-grad);border-radius:999px}
.aw-signin-mark{width:64px;height:64px;margin:0 auto 18px}
.aw-signin-mark img{width:100%;height:100%;object-fit:contain;display:block}
.aw-signin-card h1{margin:0;font-family:var(--font-display,'Quarto',Georgia,serif);font-size:2.25rem;font-weight:700;
  letter-spacing:-.015em;line-height:1.08;color:var(--ink,#1F1B17)}
.aw-signin-card h1 span{background:var(--aw-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
/* The states. */
.aw-signin-body p{color:var(--ink-2,#574E45);font-size:.875rem;line-height:1.5;margin:8px 0 4px}
.aw-signin-body p b{color:var(--ink,#1F1B17)}
.aw-signin-btn{display:inline-block;margin-top:16px;font-family:inherit;font-size:1.25rem;font-weight:800;color:#fff;
  border:none;cursor:pointer;background:var(--aw-grad);border-radius:999px;padding:12px 26px;white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,0,0,.05);transition:transform .2s}
.aw-signin-btn:hover{transform:translateY(-1px)}
.aw-signin-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.aw-signin-btn:focus-visible,.aw-signin-ghost:focus-visible{outline:none;box-shadow:0 0 0 2px var(--surface,#fff),0 0 0 4px #C4342A}
.aw-signin-ghost{display:inline-block;margin-top:16px;font-family:inherit;font-size:.8125rem;font-weight:700;color:var(--ink,#1F1B17);
  background:var(--surface,#fff);border:1.5px solid var(--line-strong,#9E9384);border-radius:999px;padding:11px 20px;cursor:pointer}
.aw-signin-ghost:hover{border-color:var(--ink-3,#786D60)}
.aw-signin-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.aw-signin-body p.aw-signin-note{color:var(--ink-3,#786D60);font-size:.75rem;margin-top:14px}
.aw-signin-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.aw-signin-body p.aw-signin-err{color:var(--err,#C5221A);font-size:.8125rem;font-weight:600;margin-top:10px}
.aw-signin-body p.aw-signin-wait{color:var(--ink-3,#786D60)}
@media (max-width:400px){
  .aw-signin-card{padding:36px 24px 30px}
  .aw-signin-btn{font-size:.9375rem}
}