/* Match the app's compact opening and one-time illuminated seal reveal. */
.welcome-content{padding-top:28px;padding-bottom:90px}
.welcome-brand{position:relative;width:230px;max-width:100%;padding:15px;isolation:isolate}
.welcome-brand img{position:relative;z-index:1}
.welcome-seal{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;color:#bb944b;overflow:visible}
.welcome-seal polygon{fill:none;stroke:currentColor;stroke-width:1;stroke-dasharray:100;stroke-dashoffset:0;opacity:.45;animation:welcome-seal-draw 1.3s ease-out both}
.welcome-seal-ring{fill:none;stroke:currentColor;stroke-width:.8;opacity:.13}
.welcome-seal-points{fill:currentColor;opacity:.7}
.welcome-intro-diwani{width:min(100%,320px);margin:6px 0 18px}
.welcome-verse{font-size:28px;line-height:1.85}
.welcome-verse-source{line-height:1.8}
.welcome-content>*{animation:welcome-rise 1s cubic-bezier(.2,.65,.3,1) both}
.welcome-intro-diwani{animation-delay:.15s}
.welcome-quran{animation-delay:.35s}
.welcome-categories{animation-delay:.65s}
.welcome-start{animation-delay:.8s}
.welcome-note{animation-delay:.9s}
.welcome-corner{animation:welcome-corner-reveal 1.35s ease-out both}
@keyframes welcome-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes welcome-seal-draw{from{stroke-dashoffset:100;opacity:0}to{stroke-dashoffset:0;opacity:.45}}
@keyframes welcome-corner-reveal{from{opacity:0}to{opacity:1}}
.welcome-word{display:inline-block;padding:0 3px;border-radius:8px;transition:color .12s ease,background-color .12s ease,text-shadow .12s ease}
.welcome-word.is-read{color:#94702d}
.welcome-word.is-current{color:#08275f;background:#f8e3ad;text-shadow:0 0 12px #dc940966;animation:welcome-word-flash .36s ease-out both}
.welcome-sync-note{margin:0 0 10px;font-size:9px;line-height:1.8;color:#8c7955}
@keyframes welcome-word-flash{from{background-color:#edc36c;box-shadow:0 0 0 3px #edc36c4d}to{background-color:#f8e3ad;box-shadow:0 0 0 0 transparent}}
@media(max-width:700px){
  .welcome-content{padding-top:44px;padding-bottom:80px}
  .welcome-brand{width:210px}
  .welcome-intro-diwani{width:min(100%,260px)}
  .welcome-verse{font-size:28px}
}
@media(max-width:380px){.welcome-content{width:calc(100% - 44px)}.welcome-brand{width:min(100%,210px)}.welcome-quran{padding-right:12px;padding-left:12px}}
@media(prefers-reduced-motion:reduce){
  .welcome-content>*,.welcome-corner,.welcome-seal polygon{animation:none!important}
  .welcome-content>*{opacity:1;transform:none}
  .welcome-seal polygon{stroke-dashoffset:0}
  .welcome-word.is-current{animation:none!important;text-shadow:none}
}